Merge pull request #211 from Andres2D/update-match

Update match

components/layout/navbar.tsx

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

components/matches/match-list.module.scss

@@ -80,6 +80,18 @@
   }
 }
 
+.updateMatch {
+  display: flex;
+  flex-direction: column;
+
+  .formControl {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+  }
+}
+
 
 @media (max-width: $medium-small-device) {
   .section {

components/matches/match-list.tsx

@@ -22,6 +22,8 @@ interface Props {
 const MatchList: NextPage<Props> = ({ matches }) => {
   const [matchesList, setMatchesList] = useState<FullMatch[]>([]);
   const [selectedMatch, setSelectedMatch] = useState<FullMatch>();
+  const [place, setPlace] = useState<string>();
+  const [date, setDate] = useState<string>();
   const {
     isOpen: deleteModalIsOpen,
     onOpen: deleteModalOnOpen,
@@ -37,11 +39,18 @@ const MatchList: NextPage<Props> = ({ matches }) => {
     onOpen: fulltimeModalOnOpen,
     onClose: fulltimeModalOnClose,
   } = useDisclosure();
+  const {
+    isOpen: updateMatchModalIsOpen,
+    onOpen: updateMatchModalOnOpen,
+    onClose: updateMatchModalOnClose
+  } = useDisclosure();
   const toast = useToast();
 
   const homeScoreRef = useRef() as MutableRefObject<HTMLInputElement>;
   const awayScoreRef = useRef() as MutableRefObject<HTMLInputElement>;
-
+
+  // const placeRef = useRef() as MutableRefObject<HTMLInputElement>;
+  // const dateRef = useRef() as MutableRefObject<HTMLInputElement>;
 
   useEffect(() => {
     setMatchesList(matches);
@@ -114,7 +123,25 @@ const MatchList: NextPage<Props> = ({ matches }) => {
   const { mutate: mutateUpdateMatch } = useMutation(updateMatch, {
     onSuccess: async (response) => {
       if (response.ok) {
+        setMatchesList((matches) =>
+          matches.map((match) => {
+            if(match._id === selectedMatch?._id) {
+              return {
+                ...match, 
+                location: response.data.match.location, 
+                date: response.data.match.date,
+                fullTime: response.data.match.fullTime,
+                homeScore: response.data.match.homeScore,
+                awayScore: response.data.match.awayScore
+              };
+            }else {
+              return match;
+            }
+          })
+        );
+
         fulltimeModalOnClose();
+        updateMatchModalOnClose();
         setSelectedMatch(undefined);
         toast({
           title: 'Match updated',
@@ -132,6 +159,7 @@ const MatchList: NextPage<Props> = ({ matches }) => {
           isClosable: true,
         });
         fulltimeModalOnClose();
+        updateMatchModalOnClose();
         setSelectedMatch(undefined);
       }
     },
@@ -161,14 +189,21 @@ const MatchList: NextPage<Props> = ({ matches }) => {
     fulltimeModalOnOpen();
   };
 
+  const showUpdateMatchModal = (match: FullMatch) => {
+    updateMatchModalOnOpen();
+    setPlace(match.location);
+    setDate(match.date);
+    setSelectedMatch(match);
+  };
+
   const handleDeleteMatch = () => {
     mutateDeleteMatch(selectedMatch?._id!);
   };
 
   const handleLeaveMatch = () => {
     mutateLeaveMatch(selectedMatch?._id!);
   };
-  
+
   const handleFulltime = () => {
     if(homeScoreRef.current.value.trim() === '' || awayScoreRef.current.value.trim() === '' ) {
       return;
@@ -184,6 +219,20 @@ const MatchList: NextPage<Props> = ({ matches }) => {
     mutateUpdateMatch(request);
   };
 
+  const handleUpdateMatch = () => {
+    if(!date || !location || date?.trim() === '' || place?.trim() === '' ) {
+      return;
+    }
+
+    const request: FullMatch = {
+      ...selectedMatch!,
+      date: date || selectedMatch?.date || '',
+      location: place || selectedMatch?.location || ''
+    };
+
+    mutateUpdateMatch(request);
+  };
+
   const matchesListMap = matchesList.map(
     ({
       _id,
@@ -223,7 +272,7 @@ const MatchList: NextPage<Props> = ({ matches }) => {
                 <div className={styles.details}>
                   <h2>{date}</h2>
                   <h2>{location}</h2>
-                  { 
+                  {
                     fullTime &&
                     <h2 className={styles.fullTime}>Full-time</h2>
                   }
@@ -248,6 +297,18 @@ const MatchList: NextPage<Props> = ({ matches }) => {
               mb={2}
               disabled={fullTime}
               aria-label="Edit match"
+              onClick={() =>
+                showUpdateMatchModal({
+                  _id,
+                  date,
+                  location,
+                  away_team,
+                  home_team,
+                  fullTime,
+                  homeScore,
+                  awayScore,
+                })
+              }
               icon={<SettingsIcon />}
             />
             <IconButton
@@ -314,6 +375,10 @@ const MatchList: NextPage<Props> = ({ matches }) => {
     }
   );
 
+  const inputHandler = (input: string, event: any) => {
+    input === 'place' ? setPlace(event.target.value) : setDate(event.target.value);
+  };
+
   return (
     <>
       {matchesListMap}
@@ -349,8 +414,8 @@ const MatchList: NextPage<Props> = ({ matches }) => {
               width='50px'
               height='50px'
             />
-            <FormLabel 
-              textAlign={'center'} 
+            <FormLabel
+              textAlign={'center'}
               marginInlineEnd={0}
             >
               {selectedMatch?.home_team.name}
@@ -365,7 +430,7 @@ const MatchList: NextPage<Props> = ({ matches }) => {
               height='50px'
             />
             <FormLabel
-              textAlign={'center'} 
+              textAlign={'center'}
               marginInlineEnd={0}
             >
               {selectedMatch?.away_team.name}
@@ -374,6 +439,36 @@ const MatchList: NextPage<Props> = ({ matches }) => {
           </FormControl>
         </form>
       </ModalAlert>
+      <ModalAlert
+        isOpen={updateMatchModalIsOpen}
+        onClose={updateMatchModalOnClose}
+        onContinue={handleUpdateMatch}
+        actionColor='green'
+        title={`Update ${selectedMatch?.home_team.name} vs ${selectedMatch?.away_team.name}`}
+        continueLabel="Update"
+      >
+
+        <form className={styles.updateMatch}>
+          <FormControl className={styles.formControl}>
+            <FormLabel
+              textAlign={'center'}
+              marginInlineEnd={0}
+            >
+              Place
+            </FormLabel>
+            <Input type='text' onChange={(event) => inputHandler('place', event)} value={place} />
+          </FormControl>
+          <FormControl className={styles.formControl}>
+            <FormLabel
+              textAlign={'center'}
+              marginInlineEnd={0}
+            >
+              Date
+            </FormLabel>
+            <Input type='date' onChange={(event) => inputHandler('date', event)} value={date} />
+          </FormControl>
+        </form>
+      </ModalAlert>
     </>
   );
 };

services/api-configuration.ts

@@ -1,8 +1,8 @@
-import { create } from 'apisauce'
+import { ApiResponse, create } from 'apisauce'
 import { ICreateMatchRequest, FullMatch } from '../interfaces/Match';
 import { UpdateProfileRequest, RegisterPlayerRequest } from '../interfaces/Player';
 import { UpdateTeamRequest } from '../interfaces/Team';
-import { IUpdateTeamPlayerRequest, IChangePlayerRequest, LeftMatchRequest } from '../interfaces/TeamPlayer';
+import { IUpdateTeamPlayerRequest, IChangePlayerRequest } from '../interfaces/TeamPlayer';
 
 const api = create({
   baseURL: '/api',
@@ -17,7 +17,7 @@ export const changePlayer = (request: IUpdateTeamPlayerRequest | IChangePlayerRe
 export const leaveMatch = (id: string) => api.delete('/team-player', { idMatch: id });
 
 export const createMatch = (request: ICreateMatchRequest) => api.post('/match', request);
-export const updateMatch = (match: FullMatch) => api.put('/match', match);
+export const updateMatch = (match: FullMatch): Promise<ApiResponse<any, any>> => api.put('/match', match);
 export const deleteMatch = (id: string) => api.delete('/match', { id });
 
 export const updateTeam = (request: UpdateTeamRequest) => api.put('/team', request);