From 30657a7e706df149998b9bbd1198db1d1a685fbf Mon Sep 17 00:00:00 2001
From: Andres2D <andres2d1997.1206@gmail.com>
Date: Tue, 31 Jan 2023 21:52:17 -0500
Subject: [PATCH 1/6] Improve match header distribution

---
 components/matches/detail/field/header.module.scss | 6 ++++++
 styles/_breakpoints.scss                           | 1 +
 2 files changed, 7 insertions(+)

diff --git a/components/matches/detail/field/header.module.scss b/components/matches/detail/field/header.module.scss
index 1fc16dc..63f8df9 100644
--- a/components/matches/detail/field/header.module.scss
+++ b/components/matches/detail/field/header.module.scss
@@ -17,6 +17,12 @@
   flex-direction: row-reverse;
 }
 
+@media (max-width: $extra-large-device) {
+  .isAway {
+    flex-direction: row;
+  }
+}
+
 @media (max-width: $small-device) {
   .header {
     justify-content: flex-start;
diff --git a/styles/_breakpoints.scss b/styles/_breakpoints.scss
index 8e4171c..dbfc605 100644
--- a/styles/_breakpoints.scss
+++ b/styles/_breakpoints.scss
@@ -1,3 +1,4 @@
+$extra-large-device: 1090px;
 $large-device: 995px;
 $medium-large-device: 845px;
 $medium-device-extra: 600px;

From 197ade02164423c6c3ddd4e8ac40258ad24578fd Mon Sep 17 00:00:00 2001
From: Andres2D <andres2d1997.1206@gmail.com>
Date: Tue, 31 Jan 2023 22:36:01 -0500
Subject: [PATCH 2/6] Add set team modal

---
 .../matches/detail/field/set-team.module.scss |  22 +++
 components/matches/detail/field/set-team.tsx  | 134 ++++++++++++++++++
 2 files changed, 156 insertions(+)
 create mode 100644 components/matches/detail/field/set-team.module.scss
 create mode 100644 components/matches/detail/field/set-team.tsx

diff --git a/components/matches/detail/field/set-team.module.scss b/components/matches/detail/field/set-team.module.scss
new file mode 100644
index 0000000..7c1c8f1
--- /dev/null
+++ b/components/matches/detail/field/set-team.module.scss
@@ -0,0 +1,22 @@
+.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;
+    }
+  }
+}
diff --git a/components/matches/detail/field/set-team.tsx b/components/matches/detail/field/set-team.tsx
new file mode 100644
index 0000000..6139e00
--- /dev/null
+++ b/components/matches/detail/field/set-team.tsx
@@ -0,0 +1,134 @@
+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 { useSelector, useDispatch } from 'react-redux';
+import { RootState } from '../../../../interfaces/State';
+import { matchDetailsActions } from '../../../../store/match-details.slice';
+import styles from './set-team.module.scss';
+import { updateTeam } from '../../../../services/api-configuration';
+
+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 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
+      }
+    }));
+    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;

From 8ff283ad4b7020e5b4b5ff190fe0d24d8ea52da2 Mon Sep 17 00:00:00 2001
From: Andres2D <andres2d1997.1206@gmail.com>
Date: Tue, 31 Jan 2023 22:36:24 -0500
Subject: [PATCH 3/6] Use set team on header field

---
 components/matches/detail/field/field.tsx  |  1 +
 components/matches/detail/field/header.tsx |  2 ++
 store/match-details.slice.ts               | 20 +++++++++++++++++++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/components/matches/detail/field/field.tsx b/components/matches/detail/field/field.tsx
index cf594f8..8d61fc6 100644
--- a/components/matches/detail/field/field.tsx
+++ b/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]}`]}`}>
diff --git a/components/matches/detail/field/header.tsx b/components/matches/detail/field/header.tsx
index 40fa6e8..700ad0f 100644
--- a/components/matches/detail/field/header.tsx
+++ b/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;
@@ -27,6 +28,7 @@ const FieldHeader: NextPage<Props> = ({teamName, teamShield, teamOverall, isAway
           m='8px'
         />
         <Heading color={'gray.50'} size='2xl'>{teamName}</Heading>
+        <SetTeam isAway={isAway} />
       </section>
       <RatioStars average={teamOverall} />
     </header>
diff --git a/store/match-details.slice.ts b/store/match-details.slice.ts
index 66ff50b..041926e 100644
--- a/store/match-details.slice.ts
+++ b/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
   }
 });
 

From d09e9c31118ce52f5e65728cbd9324b261a3a27c Mon Sep 17 00:00:00 2001
From: Andres2D <andres2d1997.1206@gmail.com>
Date: Tue, 31 Jan 2023 22:40:50 -0500
Subject: [PATCH 4/6] Integrate update team

---
 components/matches/detail/field/set-team.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/matches/detail/field/set-team.tsx b/components/matches/detail/field/set-team.tsx
index 6139e00..3b475b1 100644
--- a/components/matches/detail/field/set-team.tsx
+++ b/components/matches/detail/field/set-team.tsx
@@ -18,11 +18,12 @@ import {
 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';
-import { updateTeam } from '../../../../services/api-configuration';
 
 interface Props {
   isAway: boolean;
@@ -38,6 +39,7 @@ const SetTeam: NextPage<Props> = ({isAway}) => {
   const [shieldList, setShieldList] = useState(getAllTeams());
   const [shield, setShield] = useState(teamDetail.shield);
   const dispatch = useDispatch();
+  const { mutate } = useMutation(updateTeam);
 
   const searchShield = () => {
     if(!teamShieldRef?.current?.value) {
@@ -70,6 +72,12 @@ const SetTeam: NextPage<Props> = ({isAway}) => {
         shield
       }
     }));
+    mutate({ 
+        name:nameRef?.current?.value || teamDetail.name, 
+        shield, 
+        _id: teamDetail._id, 
+        formation: teamDetail.formation
+      });
     onClose();
   };
 

From 3142b87ab702dbeb18591d5d704eef362f9e093a Mon Sep 17 00:00:00 2001
From: Andres2D <andres2d1997.1206@gmail.com>
Date: Tue, 31 Jan 2023 22:58:31 -0500
Subject: [PATCH 5/6] Fix responsive design on match details

---
 .../matches/detail/field/header.module.scss   | 15 +++++++
 components/matches/detail/field/header.tsx    |  6 ++-
 .../matches/detail/field/set-team.module.scss | 44 ++++++++++++-------
 3 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/components/matches/detail/field/header.module.scss b/components/matches/detail/field/header.module.scss
index 63f8df9..a3587eb 100644
--- a/components/matches/detail/field/header.module.scss
+++ b/components/matches/detail/field/header.module.scss
@@ -10,6 +10,10 @@
   .shield {
     display: flex;
     align-items: center;
+
+    .teamDetails {
+      display: flex;
+    }
   }
 }
 
@@ -29,3 +33,14 @@
     width: 90%;
   }
 }
+
+@media (max-width: $extra-small-device) {
+  .header {
+    .shield {
+      flex-direction: column;
+      // .teamDetails {
+        
+      // }
+    }
+  }
+}
diff --git a/components/matches/detail/field/header.tsx b/components/matches/detail/field/header.tsx
index 700ad0f..ef76729 100644
--- a/components/matches/detail/field/header.tsx
+++ b/components/matches/detail/field/header.tsx
@@ -27,8 +27,10 @@ const FieldHeader: NextPage<Props> = ({teamName, teamShield, teamOverall, isAway
           title={teamName}
           m='8px'
         />
-        <Heading color={'gray.50'} size='2xl'>{teamName}</Heading>
-        <SetTeam isAway={isAway} />
+        <div className={styles.teamDetails}>
+          <Heading color={'gray.50'} size='2xl'>{teamName}</Heading>
+          <SetTeam isAway={isAway} />
+        </div>
       </section>
       <RatioStars average={teamOverall} />
     </header>
diff --git a/components/matches/detail/field/set-team.module.scss b/components/matches/detail/field/set-team.module.scss
index 7c1c8f1..b63ed7f 100644
--- a/components/matches/detail/field/set-team.module.scss
+++ b/components/matches/detail/field/set-team.module.scss
@@ -1,22 +1,32 @@
-.shieldSelector {
-  margin-top: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
+@import '../../../../styles/breakpoints';
 
-  .shields {
-    margin: 10px;
+.modal {
+  .shieldSelector {
+    margin-top: 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;
+    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;
+  }
+}

From 641bc7e431a6c1fc37332805b3c3e47254f8c682 Mon Sep 17 00:00:00 2001
From: Andres2D <andres2d1997.1206@gmail.com>
Date: Tue, 31 Jan 2023 22:59:00 -0500
Subject: [PATCH 6/6] Update app version

---
 components/layout/navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index 39281a2..0864085 100644
--- a/components/layout/navbar.tsx
+++ b/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>