From 436adc5444f4addf8d82e0e872977c2a68c866cd Mon Sep 17 00:00:00 2001 From: Andres2D Date: Sat, 18 Feb 2023 16:10:59 -0500 Subject: [PATCH 1/3] Update match layout and integration --- components/matches/match-list.module.scss | 12 +++ components/matches/match-list.tsx | 92 +++++++++++++++++++++-- 2 files changed, 98 insertions(+), 6 deletions(-) diff --git a/components/matches/match-list.module.scss b/components/matches/match-list.module.scss index 7e5979e..599726b 100644 --- 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 index 56fac80..e2f5432 100644 --- a/components/matches/match-list.tsx +++ b/components/matches/match-list.tsx @@ -22,6 +22,8 @@ interface Props { const MatchList: NextPage = ({ matches }) => { const [matchesList, setMatchesList] = useState([]); const [selectedMatch, setSelectedMatch] = useState(); + const [place, setPlace] = useState(); + const [date, setDate] = useState(); const { isOpen: deleteModalIsOpen, onOpen: deleteModalOnOpen, @@ -37,11 +39,18 @@ const MatchList: NextPage = ({ matches }) => { onOpen: fulltimeModalOnOpen, onClose: fulltimeModalOnClose, } = useDisclosure(); + const { + isOpen: updateMatchModalIsOpen, + onOpen: updateMatchModalOnOpen, + onClose: updateMatchModalOnClose + } = useDisclosure(); const toast = useToast(); const homeScoreRef = useRef() as MutableRefObject; const awayScoreRef = useRef() as MutableRefObject; - + + // const placeRef = useRef() as MutableRefObject; + // const dateRef = useRef() as MutableRefObject; useEffect(() => { setMatchesList(matches); @@ -115,6 +124,7 @@ const MatchList: NextPage = ({ matches }) => { onSuccess: async (response) => { if (response.ok) { fulltimeModalOnClose(); + updateMatchModalOnClose(); setSelectedMatch(undefined); toast({ title: 'Match updated', @@ -132,6 +142,7 @@ const MatchList: NextPage = ({ matches }) => { isClosable: true, }); fulltimeModalOnClose(); + updateMatchModalOnClose(); setSelectedMatch(undefined); } }, @@ -161,6 +172,13 @@ const MatchList: NextPage = ({ matches }) => { fulltimeModalOnOpen(); }; + const showUpdateMatchModal = (match: FullMatch) => { + updateMatchModalOnOpen(); + setPlace(match.location); + setDate(match.date); + setSelectedMatch(match); + }; + const handleDeleteMatch = () => { mutateDeleteMatch(selectedMatch?._id!); }; @@ -168,7 +186,7 @@ const MatchList: NextPage = ({ matches }) => { const handleLeaveMatch = () => { mutateLeaveMatch(selectedMatch?._id!); }; - + const handleFulltime = () => { if(homeScoreRef.current.value.trim() === '' || awayScoreRef.current.value.trim() === '' ) { return; @@ -184,6 +202,22 @@ const MatchList: NextPage = ({ 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 = ({ matches }) => {

{date}

{location}

- { + { fullTime &&

Full-time

} @@ -248,6 +282,18 @@ const MatchList: NextPage = ({ matches }) => { mb={2} disabled={fullTime} aria-label="Edit match" + onClick={() => + showUpdateMatchModal({ + _id, + date, + location, + away_team, + home_team, + fullTime, + homeScore, + awayScore, + }) + } icon={} /> = ({ 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 = ({ matches }) => { width='50px' height='50px' /> - {selectedMatch?.home_team.name} @@ -365,7 +415,7 @@ const MatchList: NextPage = ({ matches }) => { height='50px' /> {selectedMatch?.away_team.name} @@ -374,6 +424,36 @@ const MatchList: NextPage = ({ matches }) => { + + +
+ + + Place + + inputHandler('place', event)} value={place} /> + + + + Date + + inputHandler('date', event)} value={date} /> + +
+ ); }; From 2ab756114d10eb9e1188ba0e3b23e9919c652fce Mon Sep 17 00:00:00 2001 From: Andres2D Date: Sat, 18 Feb 2023 16:23:58 -0500 Subject: [PATCH 2/3] Add real time update on update match --- components/matches/match-list.tsx | 19 +++++++++++++++++-- services/api-configuration.ts | 6 +++--- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/components/matches/match-list.tsx b/components/matches/match-list.tsx index e2f5432..ade5f1f 100644 --- a/components/matches/match-list.tsx +++ b/components/matches/match-list.tsx @@ -123,6 +123,23 @@ const MatchList: NextPage = ({ 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); @@ -213,8 +230,6 @@ const MatchList: NextPage = ({ matches }) => { location: place || selectedMatch?.location || '' }; - console.log(request); - mutateUpdateMatch(request); }; diff --git a/services/api-configuration.ts b/services/api-configuration.ts index 739c050..bd31ad1 100644 --- a/services/api-configuration.ts +++ b/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> => api.put('/match', match); export const deleteMatch = (id: string) => api.delete('/match', { id }); export const updateTeam = (request: UpdateTeamRequest) => api.put('/team', request); From 725ccb26b7cbb82f6e4cead2120dc9aa43611250 Mon Sep 17 00:00:00 2001 From: Andres2D Date: Sat, 18 Feb 2023 16:24:36 -0500 Subject: [PATCH 3/3] Update 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 56f56ba..2558161 100644 --- a/components/layout/navbar.tsx +++ b/components/layout/navbar.tsx @@ -99,7 +99,7 @@ const Navbar: NextPage = () => { > Log out -

Version 2.5.1

+

Version 2.6.0