Update match layout and integration

Andres2D · Feb 18, 2023 · 436adc5 · 436adc5
1 parent 44a278a
commit 436adc5
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 6 deletions.
diff --git a/components/matches/match-list.module.scss b/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 {

diff --git a/components/matches/match-list.tsx b/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);
@@ -115,6 +124,7 @@ const MatchList: NextPage<Props> = ({ matches }) => {
     onSuccess: async (response) => {
       if (response.ok) {
         fulltimeModalOnClose();
+        updateMatchModalOnClose();
         setSelectedMatch(undefined);
         toast({
           title: 'Match updated',
@@ -132,6 +142,7 @@ const MatchList: NextPage<Props> = ({ matches }) => {
           isClosable: true,
         });
         fulltimeModalOnClose();
+        updateMatchModalOnClose();
         setSelectedMatch(undefined);
       }
     },
@@ -161,14 +172,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 +202,22 @@ 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 || ''
+    };
+
+    console.log(request);
+
+    mutateUpdateMatch(request);
+  };
+
   const matchesListMap = matchesList.map(
     ({
       _id,
@@ -223,7 +257,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 +282,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 +360,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 +399,8 @@ const MatchList: NextPage<Props> = ({ matches }) => {
               width='50px'
               height='50px'
             />
-            <FormLabel 
-              textAlign={'center'} 
+            <FormLabel
+              textAlign={'center'}
               marginInlineEnd={0}
             >
               {selectedMatch?.home_team.name}
@@ -365,7 +415,7 @@ const MatchList: NextPage<Props> = ({ matches }) => {
               height='50px'
             />
             <FormLabel
-              textAlign={'center'} 
+              textAlign={'center'}
               marginInlineEnd={0}
             >
               {selectedMatch?.away_team.name}
@@ -374,6 +424,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>
     </>
   );
 };