Merge pull request #214 from Andres2D/decouple-leave-match-on-details

Decouple leave match on details

components/layout/navbar.tsx

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

components/matches/detail/match-detail.tsx

@@ -1,54 +1,26 @@
-import { Button, useDisclosure, useToast } from '@chakra-ui/react';
+import { Button } from '@chakra-ui/react';
 import type { NextPage } from 'next';
-import { useSelector } from 'react-redux';
-import { useMutation } from 'react-query';
-import { useRouter } from 'next/router';
+import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../../../interfaces/State';
 import ChangePlayerModal from './avatar/change-player.modal';
 import FieldLayout from './field/field';
 import styles from './match-detail.module.scss';
 import LeaveIcon from '../../../assets/svg/leave.svg';
-import ModalAlert from '../../layout/modal-alert';
-import { leaveMatch } from '../../../services/api-configuration';
 import MatchDetailsSkeleton from '../../skeletons/match-details-skeleton';
 import { initialState } from '../../../store/match-details.slice';
+import LeaveMatchModal from '../modals/leave-match.modal';
+import { matchesListActions } from '../../../store/matches-list.slice';
 
 const MatchDetailsLayout: NextPage = () => {
   const matchDetails = useSelector((state: RootState) => state.matchDetails);
-  const { 
-    isOpen: leaveMatchModalIsOpen, 
-    onOpen: leaveMatchModalOnOpen,
-    onClose: leaveMatchModalOnClose 
-  } = useDisclosure();
-  const router = useRouter();
-  const toast = useToast();
-
-  const { mutate: mutateLeaveMatch } = useMutation(leaveMatch, {
-    onSuccess: async (response) => {
-      if(response.ok) {
-        router.push('/matches', undefined, {  })
-      } else {
-        toast({
-          title: 'Leave match',
-          description: "Something went wrong, please try again later.",
-          status: 'error',
-          duration: 9000,
-          isClosable: true,
-        });
-        leaveMatchModalOnClose();
-      }
-    },
-    onError: () => {
-      // TODO: handle error
-    }
-  });
+  const dispatch = useDispatch();
 
   if(matchDetails === initialState) {
     return <MatchDetailsSkeleton />
   }
 
-  const handleLeaveMatch = () => {
-    mutateLeaveMatch(matchDetails.match._id);
+  const handleLeaveMatchModalOpen = () => {
+    dispatch(matchesListActions.setMatchModalAction({action: 'isLeaveMatch', value: true }));
   };
 
   return (
@@ -65,20 +37,13 @@ const MatchDetailsLayout: NextPage = () => {
             colorScheme='telegram'
             className={styles.leaveButton}
             rightIcon={<LeaveIcon />}
-            onClick={leaveMatchModalOnOpen}
+            onClick={handleLeaveMatchModalOpen}
           >
             Leave match
           </Button>
         }
       </section>
-      <ModalAlert 
-        isOpen={leaveMatchModalIsOpen} 
-        onClose={leaveMatchModalOnClose}
-        onContinue={handleLeaveMatch}
-        title='Leave match'
-        description={`Are you sure? You would request to a team mate to add you again afterwards`}
-        continueLabel='Leave match'
-      />
+      <LeaveMatchModal navigateToMatches/>
     </>
   );
 };

components/matches/modals/leave-match.modal.tsx

@@ -2,17 +2,23 @@ import { useDisclosure, useToast } from '@chakra-ui/react';
 import type { NextPage } from 'next';
 import { useMutation } from 'react-query';
 import { useSelector, useDispatch } from 'react-redux';
+import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import ModalAlert from '../../layout/modal-alert';
 import { RootState } from '../../../interfaces/State';
 import { matchesListActions } from '../../../store/matches-list.slice';
 import { leaveMatch } from '../../../services/api-configuration';
 
-const LeaveMatchModal: NextPage = () => {
+interface Props {
+  navigateToMatches?: boolean;
+}
+
+const LeaveMatchModal: NextPage<Props> = ({navigateToMatches}) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const matchesState = useSelector((state: RootState) => state.matchesList);
   const dispatch = useDispatch();
   const toast = useToast();
+  const router = useRouter();
 
   useEffect(() => {
     if(matchesState.isLeaveMatch) {
@@ -26,6 +32,11 @@ const LeaveMatchModal: NextPage = () => {
         dispatch(matchesListActions.deleteLeaveMatch({id: matchesState.selectedMatch?._id!}));
         dispatch(matchesListActions.setSelectedMatch(undefined));
         handleCloseModal();
+
+        if(navigateToMatches) {
+          router.push('/matches', undefined, {  })
+        }
+
         toast({
           title: 'Leave match',
           description: 'You left the match.',

pages/matches/[...matchId]/index.tsx

@@ -9,6 +9,7 @@ import { IMatchDetailsResponse } from '../../../interfaces/Match';
 import { getMatch } from '../../../server/matches';
 import { getProfile } from '../../../server/player';
 import { matchDetailsActions } from '../../../store/match-details.slice';
+import { matchesListActions } from '../../../store/matches-list.slice';
 import { profileActions } from '../../../store/profile.slice';
 
 interface Props {
@@ -27,6 +28,7 @@ const MatchDetails: NextPage<Props> = ({match, profile}) => {
   const flagResponse = getFlagSvg(parsedProfile.nationality, true);
 
   useEffect(() => {
+
     dispatch(profileActions.setProfile({
       _id: parsedProfile._id,
       overall: 0,
@@ -36,12 +38,25 @@ const MatchDetails: NextPage<Props> = ({match, profile}) => {
       image: parsedProfile.image,
       nationality: parsedProfile.nationality,
     }));
+
   }, []);
 
   const matchDetail: IMatchDetailsResponse = JSON.parse(match);
 
   useEffect(() => {
     dispatch(matchDetailsActions.setMatchState({...matchDetail, playersSelected: [], changePlayerModalActive: false}));
+
+    dispatch(matchesListActions.setSelectedMatch({
+      _id: matchDetail.match._id,
+      away_team: matchDetail.match.away_team,
+      awayScore: matchDetail.match.awayScore,
+      date: matchDetail.match.date,
+      fullTime: matchDetail.match.fullTime,
+      home_team: matchDetail.match.home_team,
+      homeScore: matchDetail.match.homeScore,
+      location: matchDetail.match.location
+    }));
+
   }, [dispatch, matchDetail])
 
   return (

pages/matches/index.tsx

@@ -40,8 +40,7 @@ const Matches: NextPage<Props> = ({matches, profile}) => {
       image: parsedProfile.image,
       nationality: parsedProfile.nationality,
     }));
-    console.log(matchesList);
-
+
     dispatch(matchesListActions.setMatchesList(matchesList));
 
   }, []);

store/matches-list.slice.ts

@@ -25,7 +25,6 @@ const initialState: MatchesListState = {
 
 const setMatchesList: CaseReducer<MatchesListState, PayloadAction<FullMatch[]>> = 
 (state: MatchesListState, action: PayloadAction<FullMatch[]>) => {
-  console.log('action', action);
   state.matches = action.payload;
 };