Merge pull request #179 from Andres2D/left-match

Left match server side

assets/svg/leave.svg.tsx

@@ -0,0 +1,14 @@
+import { Icon } from '@chakra-ui/react';
+
+const LeaveIcon = (props: any) => (
+  <Icon viewBox="0 0 447.674 447.674" {...props}>
+    <g>
+      <g>
+        <path fill='white' d="M182.725,379.151c-0.572-1.522-0.769-2.816-0.575-3.863c0.193-1.04-0.472-1.902-1.997-2.566    c-1.525-0.664-2.286-1.191-2.286-1.567c0-0.38-1.093-0.667-3.284-0.855c-2.19-0.191-3.283-0.288-3.283-0.288h-3.71h-3.14H82.224    c-12.562,0-23.317-4.469-32.264-13.421c-8.945-8.946-13.417-19.698-13.417-32.258V123.335c0-12.562,4.471-23.313,13.417-32.259    c8.947-8.947,19.702-13.422,32.264-13.422h91.361c2.475,0,4.421-0.614,5.852-1.854c1.425-1.237,2.375-3.094,2.853-5.568    c0.476-2.474,0.763-4.708,0.859-6.707c0.094-1.997,0.048-4.521-0.144-7.566c-0.189-3.044-0.284-4.947-0.284-5.712    c0-2.474-0.905-4.611-2.712-6.423c-1.809-1.804-3.949-2.709-6.423-2.709H82.224c-22.648,0-42.016,8.042-58.101,24.125    C8.042,81.323,0,100.688,0,123.338v200.994c0,22.648,8.042,42.018,24.123,58.095c16.085,16.091,35.453,24.133,58.101,24.133    h91.365c2.475,0,4.422-0.622,5.852-1.854c1.425-1.239,2.375-3.094,2.853-5.571c0.476-2.471,0.763-4.716,0.859-6.707    c0.094-1.999,0.048-4.518-0.144-7.563C182.818,381.817,182.725,379.915,182.725,379.151z" />
+        <path fill='white' d="M442.249,210.989L286.935,55.67c-3.614-3.612-7.898-5.424-12.847-5.424c-4.949,0-9.233,1.812-12.851,5.424    c-3.617,3.617-5.424,7.904-5.424,12.85v82.226H127.907c-4.952,0-9.233,1.812-12.85,5.424c-3.617,3.617-5.424,7.901-5.424,12.85    v109.636c0,4.948,1.807,9.232,5.424,12.847c3.621,3.61,7.901,5.427,12.85,5.427h127.907v82.225c0,4.945,1.807,9.233,5.424,12.847    c3.617,3.617,7.901,5.428,12.851,5.428c4.948,0,9.232-1.811,12.847-5.428L442.249,236.69c3.617-3.62,5.425-7.898,5.425-12.848    C447.674,218.894,445.866,214.606,442.249,210.989z" />
+      </g>
+    </g>
+  </Icon>
+);
+
+export default LeaveIcon;

components/layout/modal-alert.tsx

@@ -0,0 +1,66 @@
+import { 
+  AlertDialog, 
+  AlertDialogBody, 
+  AlertDialogContent, 
+  AlertDialogFooter, 
+  AlertDialogHeader, 
+  AlertDialogOverlay, 
+  Button
+} from '@chakra-ui/react';
+import type { NextPage } from 'next';
+import { MutableRefObject, useRef } from 'react';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onContinue: () => void;
+  title?: string;
+  description?: string;
+  cancelLabel?: string;
+  continueLabel?: string;
+}
+
+const ModalAlert: NextPage<Props> = (
+  {
+    isOpen, 
+    onClose, 
+    onContinue,
+    title = 'Delete',
+    description = 'Are you sure?',
+    cancelLabel = 'Cancel',
+    continueLabel = 'Delete'
+  }) => {
+
+  const cancelRef = useRef() as MutableRefObject<HTMLButtonElement>;
+
+  return (
+    <AlertDialog
+      isOpen={isOpen}
+      leastDestructiveRef={cancelRef}
+      onClose={onClose}
+    >
+      <AlertDialogOverlay>
+        <AlertDialogContent>
+          <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+            {title}
+          </AlertDialogHeader>
+
+          <AlertDialogBody>
+            { description }
+          </AlertDialogBody>
+
+          <AlertDialogFooter>
+            <Button ref={cancelRef} onClick={onClose}>
+              { cancelLabel }
+            </Button>
+            <Button colorScheme='red' onClick={onContinue} ml={3}>
+              { continueLabel }
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialogOverlay>
+    </AlertDialog>
+  );
+};
+
+export default ModalAlert;

components/layout/navbar.tsx

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

components/matches/detail/match-detail.module.scss

@@ -1,10 +1,22 @@
 @import '../../../styles/breakpoints';
 
-.fields {
+.details {
   display: flex;
-  justify-content: space-evenly;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .fields {
+    display: flex;
+    justify-content: space-evenly;
+  }
+
+  .leaveButton {
+    margin-top: 30px;
+  }
 }
 
+
 @media (max-width: $large-device) {
   .fields {
     flex-direction: column;

components/matches/detail/match-detail.tsx

@@ -1,19 +1,76 @@
+import { Button, useDisclosure, useToast } 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 { 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';
 
 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 handleLeaveMatch = () => {
+    mutateLeaveMatch(matchDetails.match._id);
+  };
 
   return (
-    <section className={styles.fields}>
-      <ChangePlayerModal />
-      <FieldLayout team={matchDetails.home.slice(0, 11)} />
-      <FieldLayout team={matchDetails.away.slice(0, 11)} isAway />
-    </section>
+    <>
+      <section className={styles.details}>
+        <div className={styles.fields}>
+          <ChangePlayerModal />
+          <FieldLayout team={matchDetails.home} />
+          <FieldLayout team={matchDetails.away} isAway />
+        </div>
+        <Button 
+          colorScheme='telegram'
+          className={styles.leaveButton}
+          rightIcon={<LeaveIcon />}
+          onClick={leaveMatchModalOnOpen}
+        >
+            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'
+      />
+    </>
   );
 };