tourney registration flow - player register + organizer acceptance

client/src/components/Form/index.js

@@ -98,3 +98,18 @@ export const SelectOption = styled.option`
  outline: none;
 `;
 
+
+export const UnorderedList = styled.ul.attrs(props => ({
+ className: props.className
+}))`
+${tw`
+`}
+`;
+
+export const ListItem = styled.li.attrs(props => ({
+ className: props.className
+}))`
+${tw`
+py-1
+`}
+`;

client/src/components/Tourneys/MediaListTile.js

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+import {
+ FlexContainer
+} from '../base';
+
+import {
+ NormalText
+} from '../Text';
+
+
+import { RiEditCircleFill } from 'react-icons/ri';
+import { FaTrashAlt } from 'react-icons/fa';
+
+const ListTileImage = styled.img`
+width: ${props => props.w || '64px'};
+height: ${props => props.h || '64px'};
+object-fit: scale-down;
+${tw`
+`}
+`;
+
+
+
+const ActionButtonContainer = styled.div`
+${tw`
+p-2
+flex
+justify-center
+items-center
+rounded-md
+shadow-md
+bg-[#922626]
+`}
+
+&:hover { 
+filter: brightness(140%);
+cursor: pointer;
+}
+`;
+
+
+export default function ListMediaTile(){
+ return (
+ <FlexContainer align='center' justify='space-between' gap='1rem'>
+ <ListTileImage src='assets/images/altair.jpg'/>
+ <NormalText> 850 x 1332</NormalText>
+ <FlexContainer gap='1rem'>
+ <ActionButtonContainer>
+ <RiEditCircleFill size='24px' color='white'/>
+ </ActionButtonContainer>
+ <ActionButtonContainer>
+ <FaTrashAlt size='24px' color='white'/>
+ </ActionButtonContainer> 
+ </FlexContainer>
+ </FlexContainer> 
+ );
+}

client/src/containers/DashboardPage/LeftSideBar/StyledElements.js

@@ -3,7 +3,7 @@ import tw from 'twin.macro';
 
 export const LeftBarContainer = styled.div`
 width: ${props => props.active ? '372px' : '60px'};
-position: absolute;
+position: fixed;
 left: 0;
 top: 0;
 ${tw`

client/src/containers/DashboardPage/Tournaments/TourneyFullView.js

@@ -112,6 +112,7 @@ export default function TourneyFullView({ tourney }) {
  registerTourney({
  tourneyId: tourney.id,
  userId: auth.userId,
+
  }).unwrap(),
  {
  pending: `Registering to ${tourney.title}`,

client/src/containers/TourneyDashboardPage/LeftSideBar/index.js

@@ -51,7 +51,6 @@ export default function LeftSideBar({ menuItems, onChangeMenu, activeMenu }){
  return (
  <LeftBarContainer active={open} ref={navNode}>
 
- <Marginer vertical='4rem'/>
  <FlexContainer justify={ open ? 'flex-end' : 'center'}
  onClick={() => { setOpen(!open); }}
  pad={ open ? '2rem' : '1rem'}>

client/src/containers/TourneyDashboardPage/MenuItems.js

@@ -12,6 +12,7 @@ import { AiOutlineShareAlt } from 'react-icons/ai';
 
 import { NotFound } from '../NotFoundPage/NotFound.js';
 import OverviewPage from './Overview';
+import SettingsPage from './Settings';
 import Participants from './Participants';
 import Registrations from './Registrations';
 import Structure from './Structure';
@@ -26,7 +27,7 @@ export const MenuItems = [
  {
  'name': 'Settings',
  'icon': <RiSettings5Fill/>,
- 'content': <NotFound/>
+ 'content': <SettingsPage/>
  },
  {
  'name': 'Structure',

client/src/containers/TourneyDashboardPage/Overview/index.js

@@ -1,6 +1,13 @@
 import styled from "styled-components";
 import tw from "twin.macro";
 import { useSelector } from "react-redux";
+import { useParams } from "react-router-dom";
+import BounceLoader from "react-spinners/BounceLoader";
+
+
+import {
+ useGetTourneyQuery
+} from '../../../redux/TourneyApi';
 
 import StatusCard from "./components/StatusCard";
 
@@ -55,9 +62,17 @@ const StructureTile = ({ stage, matchType, players, status }) => (
 );
 
 export default function OverviewPage() {
- const { selectedTourney } = useSelector(
- (state) => state.tourney
- );
+ const { tourneyId } = useParams();
+ const { data: tourney, error } = useGetTourneyQuery(tourneyId);
+
+ if(error){
+ return (
+ <Container>
+ <Text> Server ERROR | 500 </Text>
+ <Text> { console.log(error) }</Text>
+ </Container>
+ )
+ }
 
  return (
  <Container>
@@ -76,15 +91,15 @@ export default function OverviewPage() {
  </FlexContainer>
  <FlexContainer justify="space-between">
  <FlexContainer direction="col" align="center">
- <LargeCountText> { selectedTourney.members.length } </LargeCountText>
+ <LargeCountText> { tourney.members.length } </LargeCountText>
  <NormalText> Participants </NormalText>
  </FlexContainer>
  <FlexContainer direction="col" align="center">
  <LargeCountText> 0 </LargeCountText>
  <NormalText> Checked In </NormalText>
  </FlexContainer>
  <FlexContainer direction="col" align="center">
- <LargeCountText> { selectedTourney.max_players } </LargeCountText>
+ <LargeCountText> { tourney.max_players } </LargeCountText>
  <NormalText> Tournament Size </NormalText>
  </FlexContainer>
  </FlexContainer>

client/src/containers/TourneyDashboardPage/Participants/index.js

@@ -2,6 +2,11 @@ import { useSelector } from "react-redux";
 import styled from "styled-components";
 import tw from "twin.macro";
 
+import { useParams } from "react-router-dom";
+import {
+ useGetTourneyQuery
+} from '../../../redux/TourneyApi';
+
 
 import {
  NormalText,
@@ -88,7 +93,8 @@ const TRow = styled.tr`
 
 
 export default function Participants(){
- const { selectedTourney } = useSelector((state) => state.tourney);
+ const { tourneyId } = useParams();
+ const { data: tourney, error } = useGetTourneyQuery(tourneyId); 
 
  return (
  <Container>
@@ -160,7 +166,7 @@ export default function Participants(){
  </TRow>
  </thead>
  <tbody>
- {selectedTourney.members.map((m) => {
+ {!error && tourney.members.map((m) => {
  return (
  <TRow>
  <TData> { m.status } </TData>

client/src/containers/TourneyDashboardPage/Placements/index.js

@@ -1,6 +1,11 @@
 import styled from 'styled-components';
 import tw from 'twin.macro';
 
+import { useParams } from "react-router-dom";
+import {
+ useGetTourneyQuery
+} from '../../../redux/TourneyApi';
+
 import {
  NormalText,
  BoldText,
@@ -74,6 +79,9 @@ items-center
 
 
 export default function Placements(){
+ const { tourneyId } = useParams();
+ const { data: tourney, error } = useGetTourneyQuery(tourneyId); 
+
  return (
  <Container>
  <FlexContainer justify='space-between'>