Merge pull request #191 from Andres2D/update-team

Update team

components/layout/navbar.tsx

@@ -99,7 +99,7 @@ const Navbar: NextPage = () => {
             >
               Log out
             </Button>
-            <p>Version 2.3.2</p>
+            <p>Version 2.4.0</p>
           </DrawerFooter>
         </DrawerContent>
       </Drawer>

components/matches/detail/field/field.tsx

@@ -74,6 +74,7 @@ const FieldLayout: NextPage<Props> = ({team, isAway}) => {
         teamName={matchDetails.match[teamKey].name}
         teamShield={matchDetails.match[teamKey].shield}
         teamOverall={teamAverage}
+        isAway={isAway}
       />
       <section className={`${styles.field} 
         ${styles[`${formationTypeMap[matchDetails.match[teamKey].formation]}${formationKeyMap[team.length]}`]}`}>

components/matches/detail/field/header.module.scss

@@ -10,16 +10,37 @@
   .shield {
     display: flex;
     align-items: center;
+
+    .teamDetails {
+      display: flex;
+    }
   }
 }
 
 .isAway {
   flex-direction: row-reverse;
 }
 
+@media (max-width: $extra-large-device) {
+  .isAway {
+    flex-direction: row;
+  }
+}
+
 @media (max-width: $small-device) {
   .header {
     justify-content: flex-start;
     width: 90%;
   }
 }
+
+@media (max-width: $extra-small-device) {
+  .header {
+    .shield {
+      flex-direction: column;
+      // .teamDetails {
+
+      // }
+    }
+  }
+}

components/matches/detail/field/header.tsx

@@ -5,6 +5,7 @@ import {
 import type { NextPage } from 'next';
 import styles from './header.module.scss';
 import RatioStars from '../ratio-stars/ratio-stars';
+import SetTeam from './set-team';
 
 interface Props {
   teamName: string;
@@ -26,7 +27,10 @@ const FieldHeader: NextPage<Props> = ({teamName, teamShield, teamOverall, isAway
           title={teamName}
           m='8px'
         />
-        <Heading color={'gray.50'} size='2xl'>{teamName}</Heading>
+        <div className={styles.teamDetails}>
+          <Heading color={'gray.50'} size='2xl'>{teamName}</Heading>
+          <SetTeam isAway={isAway} />
+        </div>
       </section>
       <RatioStars average={teamOverall} />
     </header>

components/matches/detail/field/set-team.module.scss

@@ -0,0 +1,32 @@
+@import '../../../../styles/breakpoints';
+
+.modal {
+  .shieldSelector {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    .shields {
+      margin: 10px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      align-content: space-between;
+      gap: 15px;
+      height: 200px;
+      flex-wrap: wrap;
+      overflow-y: scroll;
+
+      .shield {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+@media (max-width: $medium-small-device) {
+  .modal {
+    width: 90% !important;
+  }
+}

components/matches/detail/field/set-team.tsx

@@ -0,0 +1,142 @@
+import { EditIcon } from '@chakra-ui/icons';
+import { 
+  Button, 
+  FormControl, 
+  FormLabel, 
+  IconButton, 
+  Image, 
+  Input, 
+  Modal, 
+  ModalBody, 
+  ModalCloseButton, 
+  ModalContent,
+  ModalFooter, 
+  ModalHeader, 
+  ModalOverlay, 
+  useDisclosure 
+} from '@chakra-ui/react';
+import { getAllTeams, getTeamPng } from 'empty-skull';
+import type { NextPage } from 'next';
+import { useRef, useState } from 'react';
+import { useMutation } from 'react-query';
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState } from '../../../../interfaces/State';
+import { updateTeam } from '../../../../services/api-configuration';
+import { matchDetailsActions } from '../../../../store/match-details.slice';
+import styles from './set-team.module.scss';
+
+interface Props {
+  isAway: boolean;
+}
+
+const SetTeam: NextPage<Props> = ({isAway}) => {
+  const matchDetails = useSelector((state: RootState) => state.matchDetails).match;
+  const teamDetail = isAway ? matchDetails.away_team : matchDetails.home_team;
+
+  const nameRef = useRef<HTMLInputElement>(null);
+  const teamShieldRef = useRef<HTMLInputElement>(null);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [shieldList, setShieldList] = useState(getAllTeams());
+  const [shield, setShield] = useState(teamDetail.shield);
+  const dispatch = useDispatch();
+  const { mutate } = useMutation(updateTeam);
+
+  const searchShield = () => {
+    if(!teamShieldRef?.current?.value) {
+      setShieldList(getAllTeams());
+      return;
+    }
+
+    const shields = getTeamPng(teamShieldRef?.current?.value);
+    setShieldList(Array.isArray(shields) ? shields : [shields]);
+  }
+
+  const teams = shieldList.map((team) => (
+    <Image
+      width={70}
+      key={team.img}
+      height={70}
+      src={team.img}
+      alt={team.name}
+      className={styles.shield}
+      title={team.name}
+      onClick={() => setShield(team.img)}
+    />
+  ));
+
+  const updateShield = () => {
+    dispatch(matchDetailsActions.updateTeam({
+      team: isAway ? 'away_team' : 'home_team',
+      setting: {
+        name: nameRef?.current?.value || teamDetail.name ,
+        shield
+      }
+    }));
+    mutate({ 
+        name:nameRef?.current?.value || teamDetail.name, 
+        shield, 
+        _id: teamDetail._id, 
+        formation: teamDetail.formation
+      });
+    onClose();
+  };
+
+  return (
+    <>
+      <IconButton
+        className={styles.edit}
+        colorScheme='transparent'
+        size='lg'
+        aria-label='Edit team'
+        onClick={onOpen}
+        icon={<EditIcon />}
+      />
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent className={styles.modal}>
+          <ModalHeader>Edit team</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <FormControl>
+              <FormLabel>Team name</FormLabel>
+              <Input 
+                type='text'
+                defaultValue={teamDetail.name}
+                ref={nameRef}  
+              />
+            </FormControl>
+            <div className={styles.shieldSelector}>
+              <FormLabel>Team shield</FormLabel>
+              <Image
+                width={70}
+                height={70}
+                src={shield}
+                alt={teamDetail.name}
+                className={styles.shield}
+                title={teamDetail.name}
+              />
+              <Input 
+                placeholder='Search shield' 
+                ref={teamShieldRef}
+                onChange={searchShield}
+              />
+              <div className={styles.shields}>
+                {teams}
+              </div>
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="green" mr={3} onClick={updateShield}>
+              Update
+            </Button>
+            <Button colorScheme="red" mr={3} onClick={onClose}>
+              Cancel
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+export default SetTeam;

store/match-details.slice.ts

@@ -20,6 +20,16 @@ interface IPayloadSetting {
   value: boolean
 }
 
+interface BaseTeamSettings {
+  name: string;
+  shield: string;
+}
+
+interface IPayloadSetTeam {
+  team: TeamCondition,
+  setting: BaseTeamSettings
+}
+
 export const initialState: IMatchDetails = {
   match: {
     _id: '',
@@ -116,6 +126,13 @@ const updateInterfaceSettings: CaseReducer<IMatchDetails, PayloadAction<IPayload
   state.match[team][setting] = value;
 }
 
+const updateTeam: CaseReducer<IMatchDetails, PayloadAction<IPayloadSetTeam>> = 
+  (state: IMatchDetails, action: PayloadAction<IPayloadSetTeam>) => {
+  const { team, setting } = action.payload;
+  state.match[team].name = setting.name;
+  state.match[team].shield = setting.shield;
+}
+
 const toggleChangePlayerModal: CaseReducer<IMatchDetails> = 
 (state: IMatchDetails) => {
   state.changePlayerModalActive = !state.changePlayerModalActive;
@@ -145,7 +162,8 @@ const matchDetailSlice = createSlice({
     selectPlayer,
     updateInterfaceSettings,
     toggleChangePlayerModal,
-    replacePlayer
+    replacePlayer,
+    updateTeam
   }
 });
 

styles/_breakpoints.scss

@@ -1,3 +1,4 @@
+$extra-large-device: 1090px;
 $large-device: 995px;
 $medium-large-device: 845px;
 $medium-device-extra: 600px;