diff --git a/components/layout/modal-alert.tsx b/components/layout/modal-alert.tsx
index 0186269..fe8a767 100644
--- a/components/layout/modal-alert.tsx
+++ b/components/layout/modal-alert.tsx
@@ -8,7 +8,7 @@ import {
Button
} from '@chakra-ui/react';
import type { NextPage } from 'next';
-import { Children, MutableRefObject, useRef } from 'react';
+import { MutableRefObject, useRef } from 'react';
interface Props {
isOpen: boolean;
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index 2558161..b3eb7ed 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -99,7 +99,7 @@ const Navbar: NextPage = () => {
>
Log out
- Version 2.6.0
+ Version 2.6.1
diff --git a/components/matches/match-list.module.scss b/components/matches/match-list.module.scss
index 599726b..c7f864f 100644
--- a/components/matches/match-list.module.scss
+++ b/components/matches/match-list.module.scss
@@ -68,31 +68,6 @@
}
}
-.fullTime {
- display: flex;
- justify-content: space-around;
-
- .formControl {
- align-items: center;
- display: flex;
- flex-direction: column;
- width: 30%;
- }
-}
-
-.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 {
flex-direction: column;
diff --git a/components/matches/match-list.tsx b/components/matches/match-list.tsx
index ade5f1f..7edd5e8 100644
--- a/components/matches/match-list.tsx
+++ b/components/matches/match-list.tsx
@@ -1,173 +1,23 @@
import type { NextPage } from 'next';
-import { FormControl, FormLabel, IconButton, Image, Input, useDisclosure, useToast } from '@chakra-ui/react';
+import { IconButton, Image } from '@chakra-ui/react';
import { DeleteIcon, SettingsIcon, CheckCircleIcon } from '@chakra-ui/icons';
-import { useState, useEffect, useRef, MutableRefObject } from 'react';
-import { useMutation } from 'react-query';
import { useRouter } from 'next/router';
import styles from './match-list.module.scss';
import Team from './team';
-import {
- deleteMatch as deleteMatchService,
- leaveMatch,
- updateMatch
-} from '../../services/api-configuration';
import { FullMatch } from '../../interfaces/Match';
-import ModalAlert from '../layout/modal-alert';
import LeaveIcon from '../../assets/svg/leave.svg';
-
-interface Props {
- matches: FullMatch[];
-}
-
-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,
- onClose: deleteModalOnClose,
- } = useDisclosure();
- const {
- isOpen: leaveMatchModalIsOpen,
- onOpen: leaveMatchModalOnOpen,
- onClose: leaveMatchModalOnClose,
- } = useDisclosure();
- const {
- isOpen: fulltimeModalIsOpen,
- 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);
- }, [matches]);
-
- const { mutate: mutateDeleteMatch } = useMutation(deleteMatchService, {
- onSuccess: async (response) => {
- if (response.ok) {
- setMatchesList((matches) =>
- matches.filter((match) => match._id !== selectedMatch?._id)
- );
- deleteModalOnClose();
- setSelectedMatch(undefined);
- toast({
- title: 'Delete match',
- description: 'Match deleted.',
- status: 'success',
- duration: 9000,
- isClosable: true,
- });
- } else {
- toast({
- title: 'Delete match',
- description: 'Something went wrong, please try again later.',
- status: 'error',
- duration: 9000,
- isClosable: true,
- });
- deleteModalOnClose();
- setSelectedMatch(undefined);
- }
- },
- onError: () => {
- // TODO: handle error
- },
- });
-
- const { mutate: mutateLeaveMatch } = useMutation(leaveMatch, {
- onSuccess: async (response) => {
- if (response.ok) {
- setMatchesList((matches) =>
- matches.filter((match) => match._id !== selectedMatch?._id)
- );
- leaveMatchModalOnClose();
- setSelectedMatch(undefined);
- toast({
- title: 'Leave match',
- description: 'You left the match.',
- status: 'success',
- duration: 9000,
- isClosable: true,
- });
- } else {
- toast({
- title: 'Leave match',
- description: 'Something went wrong, please try again later.',
- status: 'error',
- duration: 9000,
- isClosable: true,
- });
- leaveMatchModalOnClose();
- setSelectedMatch(undefined);
- }
- },
- onError: () => {
- // TODO: handle error
- },
- });
-
- 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);
- toast({
- title: 'Match updated',
- description: 'You update the match.',
- status: 'success',
- duration: 9000,
- isClosable: true,
- });
- } else {
- toast({
- title: 'Match updated',
- description: 'Something went wrong, please try again later.',
- status: 'error',
- duration: 9000,
- isClosable: true,
- });
- fulltimeModalOnClose();
- updateMatchModalOnClose();
- setSelectedMatch(undefined);
- }
- },
- onError: () => {
- // TODO: handle error
- },
- });
-
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../interfaces/State';
+import { matchesListActions } from '../../store/matches-list.slice';
+import DeleteMatchModal from './modals/delete-match.modal';
+import LeaveMatchModal from './modals/leave-match.modal';
+import UpdateMatchModal from './modals/update-match.modal';
+import FullTimeModal from './modals/full-time.modal';
+
+const MatchList: NextPage = () => {
+
+ const matchesState = useSelector((state: RootState) => state.matchesList );
+ const dispatch = useDispatch();
const router = useRouter();
const goToMatchDetails = (matchId: string) => {
@@ -175,65 +25,26 @@ const MatchList: NextPage = ({ matches }) => {
};
const showDeleteMatchModal = (match: FullMatch) => {
- setSelectedMatch(match);
- deleteModalOnOpen();
+ dispatch(matchesListActions.setSelectedMatch(match));
+ dispatch(matchesListActions.setMatchModalAction({action: 'isDeleteMatch', value: true }));
};
const showLeaveMatchModal = (match: FullMatch) => {
- setSelectedMatch(match);
- leaveMatchModalOnOpen();
+ dispatch(matchesListActions.setSelectedMatch(match));
+ dispatch(matchesListActions.setMatchModalAction({action: 'isLeaveMatch', value: true }));
};
const showFullTimeModal = (match: FullMatch) => {
- setSelectedMatch(match);
- fulltimeModalOnOpen();
+ dispatch(matchesListActions.setSelectedMatch(match));
+ dispatch(matchesListActions.setMatchModalAction({action: 'isFullTime', value: true }));
};
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;
- }
-
- const request: FullMatch = {
- ...selectedMatch!,
- fullTime: true,
- homeScore: +homeScoreRef.current.value,
- awayScore: +awayScoreRef.current.value
- };
-
- mutateUpdateMatch(request);
+ dispatch(matchesListActions.setMatchModalAction({action: 'isUpdateMatch', value: true }));
+ dispatch(matchesListActions.setSelectedMatch(match));
};
- const handleUpdateMatch = () => {
- if(!date || !location || date?.trim() === '' || place?.trim() === '' ) {
- return;
- }
-
- const request: FullMatch = {
- ...selectedMatch!,
- date: date || selectedMatch?.date || '',
- location: place || selectedMatch?.location || ''
- };
-
- mutateUpdateMatch(request);
- };
-
- const matchesListMap = matchesList.map(
+ const matchesListMap = matchesState.matches.map(
({
_id,
date,
@@ -375,100 +186,13 @@ const MatchList: NextPage = ({ matches }) => {
}
);
- const inputHandler = (input: string, event: any) => {
- input === 'place' ? setPlace(event.target.value) : setDate(event.target.value);
- };
-
return (
<>
{matchesListMap}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
);
};
diff --git a/components/matches/modals/delete-match.modal.tsx b/components/matches/modals/delete-match.modal.tsx
new file mode 100644
index 0000000..0497f66
--- /dev/null
+++ b/components/matches/modals/delete-match.modal.tsx
@@ -0,0 +1,72 @@
+import { useDisclosure, useToast } from '@chakra-ui/react';
+import type { NextPage } from 'next';
+import { useMutation } from 'react-query';
+import { useSelector, useDispatch } from 'react-redux';
+import { useEffect } from 'react';
+import ModalAlert from '../../layout/modal-alert';
+import { RootState } from '../../../interfaces/State';
+import { matchesListActions } from '../../../store/matches-list.slice';
+import { deleteMatch } from '../../../services/api-configuration';
+
+const DeleteMatchModal: NextPage = () => {
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const matchesState = useSelector((state: RootState) => state.matchesList);
+ const dispatch = useDispatch();
+ const toast = useToast();
+
+ useEffect(() => {
+ if(matchesState.isDeleteMatch) {
+ onOpen();
+ }
+ }, [matchesState, onOpen]);
+
+ const { mutate } = useMutation(deleteMatch, {
+ onSuccess: async (response) => {
+ if (response.ok) {
+ dispatch(matchesListActions.deleteLeaveMatch({id: matchesState.selectedMatch?._id!}));
+ dispatch(matchesListActions.setSelectedMatch(undefined));
+ handleCloseModal();
+ toast({
+ title: 'Delete match',
+ description: 'Match deleted.',
+ status: 'success',
+ duration: 9000,
+ isClosable: true,
+ });
+ } else {
+ toast({
+ title: 'Delete match',
+ description: 'Something went wrong, please try again later.',
+ status: 'error',
+ duration: 9000,
+ isClosable: true,
+ });
+ dispatch(matchesListActions.setSelectedMatch(undefined));
+ }
+ },
+ onError: () => {
+ // TODO: handle error
+ },
+ });
+
+ const handleDeleteMatch = () => {
+ mutate(matchesState.selectedMatch?._id!);
+ };
+
+ const handleCloseModal = () => {
+ dispatch(matchesListActions.setMatchModalAction({action: 'isDeleteMatch', value: false}));
+ onClose();
+ };
+
+ return (
+ handleCloseModal()}
+ onContinue={handleDeleteMatch}
+ title="Delete Match"
+ description={`Are you sure? You can't undo this action afterwards`}
+ />
+ );
+}
+
+export default DeleteMatchModal;
diff --git a/components/matches/modals/full-time.modal.tsx b/components/matches/modals/full-time.modal.tsx
new file mode 100644
index 0000000..3bb9f9b
--- /dev/null
+++ b/components/matches/modals/full-time.modal.tsx
@@ -0,0 +1,128 @@
+import {
+ FormControl,
+ FormLabel,
+ Image,
+ Input,
+ useDisclosure,
+ useToast
+} from '@chakra-ui/react';
+import type { NextPage } from 'next';
+import { useMutation } from 'react-query';
+import { useSelector, useDispatch } from 'react-redux';
+import { MutableRefObject, useEffect, useRef } from 'react';
+import ModalAlert from '../../layout/modal-alert';
+import { RootState } from '../../../interfaces/State';
+import { matchesListActions } from '../../../store/matches-list.slice';
+import { updateMatch } from '../../../services/api-configuration';
+import { FullMatch } from '../../../interfaces/Match';
+import styles from './full-time.module.scss';
+
+const FullTimeModal: NextPage = () => {
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const matchesState = useSelector((state: RootState) => state.matchesList);
+ const dispatch = useDispatch();
+ const toast = useToast();
+ const homeScoreRef = useRef() as MutableRefObject;
+ const awayScoreRef = useRef() as MutableRefObject;
+
+ useEffect(() => {
+ if(matchesState.isFullTime) {
+ onOpen();
+ }
+ }, [matchesState, onOpen]);
+
+ const { mutate } = useMutation(updateMatch, {
+ onSuccess: async (response) => {
+ if (response.ok) {
+ dispatch(matchesListActions.updateMatch(response.data.match));
+ dispatch(matchesListActions.setSelectedMatch(undefined));
+ handleCloseModal();
+ toast({
+ title: 'Match updated',
+ description: 'You update the match.',
+ status: 'success',
+ duration: 9000,
+ isClosable: true,
+ });
+ } else {
+ toast({
+ title: 'Match updated',
+ description: 'Something went wrong, please try again later.',
+ status: 'error',
+ duration: 9000,
+ isClosable: true,
+ });
+ dispatch(matchesListActions.setSelectedMatch(undefined));
+ }
+ },
+ onError: () => {
+ // TODO: handle error
+ },
+ });
+
+ const handleUpdateMatch = () => {
+ if(homeScoreRef.current.value.trim() === '' || awayScoreRef.current.value.trim() === '' ) {
+ return;
+ }
+
+ const request: FullMatch = {
+ ...matchesState.selectedMatch!,
+ fullTime: true,
+ homeScore: +homeScoreRef.current.value,
+ awayScore: +awayScoreRef.current.value
+ };
+
+ mutate(request);
+ };
+
+ const handleCloseModal = () => {
+ dispatch(matchesListActions.setMatchModalAction({action: 'isFullTime', value: false}));
+ onClose();
+ };
+
+ return (
+ handleCloseModal()}
+ onContinue={handleUpdateMatch}
+ actionColor='green'
+ title="Full time - Scores"
+ continueLabel="Update"
+ >
+
+
+ );
+}
+
+export default FullTimeModal;
diff --git a/components/matches/modals/full-time.module.scss b/components/matches/modals/full-time.module.scss
new file mode 100644
index 0000000..dd4cbd3
--- /dev/null
+++ b/components/matches/modals/full-time.module.scss
@@ -0,0 +1,11 @@
+.fullTime {
+ display: flex;
+ justify-content: space-around;
+
+ .formControl {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ width: 30%;
+ }
+}
diff --git a/components/matches/modals/leave-match.modal.tsx b/components/matches/modals/leave-match.modal.tsx
new file mode 100644
index 0000000..1e155c5
--- /dev/null
+++ b/components/matches/modals/leave-match.modal.tsx
@@ -0,0 +1,73 @@
+import { useDisclosure, useToast } from '@chakra-ui/react';
+import type { NextPage } from 'next';
+import { useMutation } from 'react-query';
+import { useSelector, useDispatch } from 'react-redux';
+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 = () => {
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const matchesState = useSelector((state: RootState) => state.matchesList);
+ const dispatch = useDispatch();
+ const toast = useToast();
+
+ useEffect(() => {
+ if(matchesState.isLeaveMatch) {
+ onOpen();
+ }
+ }, [matchesState, onOpen]);
+
+ const { mutate } = useMutation(leaveMatch, {
+ onSuccess: async (response) => {
+ if (response.ok) {
+ dispatch(matchesListActions.deleteLeaveMatch({id: matchesState.selectedMatch?._id!}));
+ dispatch(matchesListActions.setSelectedMatch(undefined));
+ handleCloseModal();
+ toast({
+ title: 'Leave match',
+ description: 'You left the match.',
+ status: 'success',
+ duration: 9000,
+ isClosable: true,
+ });
+ } else {
+ toast({
+ title: 'Leave match',
+ description: 'Something went wrong, please try again later.',
+ status: 'error',
+ duration: 9000,
+ isClosable: true,
+ });
+ dispatch(matchesListActions.setSelectedMatch(undefined));
+ }
+ },
+ onError: () => {
+ // TODO: handle error
+ },
+ });
+
+ const handleLeaveMatch = () => {
+ mutate(matchesState.selectedMatch?._id!);
+ };
+
+ const handleCloseModal = () => {
+ dispatch(matchesListActions.setMatchModalAction({action: 'isLeaveMatch', value: false}));
+ onClose();
+ };
+
+ return (
+ handleCloseModal()}
+ onContinue={handleLeaveMatch}
+ title="Leave match"
+ description={`Are you sure? You would request to a team mate to add you again afterwards`}
+ continueLabel="Leave match"
+ />
+ );
+}
+
+export default LeaveMatchModal;
diff --git a/components/matches/modals/update-match.modal.tsx b/components/matches/modals/update-match.modal.tsx
new file mode 100644
index 0000000..19716a8
--- /dev/null
+++ b/components/matches/modals/update-match.modal.tsx
@@ -0,0 +1,117 @@
+import { FormControl, FormLabel, Input, useDisclosure, useToast } from '@chakra-ui/react';
+import type { NextPage } from 'next';
+import { useMutation } from 'react-query';
+import { useSelector, useDispatch } from 'react-redux';
+import { useEffect, useState } from 'react';
+import ModalAlert from '../../layout/modal-alert';
+import { RootState } from '../../../interfaces/State';
+import { matchesListActions } from '../../../store/matches-list.slice';
+import { updateMatch } from '../../../services/api-configuration';
+import { FullMatch } from '../../../interfaces/Match';
+import styles from './update-match.module.scss';
+
+const UpdateMatchModal: NextPage = () => {
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const matchesState = useSelector((state: RootState) => state.matchesList);
+ const dispatch = useDispatch();
+ const toast = useToast();
+ const [place, setPlace] = useState('');
+ const [date, setDate] = useState('');
+
+ useEffect(() => {
+ if(matchesState.isUpdateMatch) {
+ onOpen();
+ }
+ }, [matchesState, onOpen]);
+
+ useEffect(() => {
+ setPlace(matchesState.selectedMatch?.location!);
+ setDate(matchesState.selectedMatch?.date!);
+ }, [matchesState]);
+
+ const { mutate } = useMutation(updateMatch, {
+ onSuccess: async (response) => {
+ if (response.ok) {
+ dispatch(matchesListActions.updateMatch(response.data.match));
+ dispatch(matchesListActions.setSelectedMatch(undefined));
+ handleCloseModal();
+ toast({
+ title: 'Match updated',
+ description: 'You update the match.',
+ status: 'success',
+ duration: 9000,
+ isClosable: true,
+ });
+ } else {
+ toast({
+ title: 'Match updated',
+ description: 'Something went wrong, please try again later.',
+ status: 'error',
+ duration: 9000,
+ isClosable: true,
+ });
+ dispatch(matchesListActions.setSelectedMatch(undefined));
+ }
+ },
+ onError: () => {
+ // TODO: handle error
+ },
+ });
+
+ const handleUpdateMatch = () => {
+ if(!date || !location || date?.trim() === '' || place?.trim() === '' ) {
+ return;
+ }
+
+ const request: FullMatch = {
+ ...matchesState.selectedMatch!,
+ date: date || matchesState.selectedMatch?.date || '',
+ location: place || matchesState.selectedMatch?.location || ''
+ };
+
+ mutate(request);
+ };
+
+ const handleCloseModal = () => {
+ dispatch(matchesListActions.setMatchModalAction({action: 'isUpdateMatch', value: false}));
+ onClose();
+ };
+
+ const inputHandler = (input: string, event: any) => {
+ input === 'place' ? setPlace(event.target.value) : setDate(event.target.value);
+ };
+
+ return (
+ handleCloseModal()}
+ onContinue={handleUpdateMatch}
+ actionColor='green'
+ title={`Update ${matchesState.selectedMatch?.home_team.name} vs ${matchesState.selectedMatch?.away_team.name}`}
+ continueLabel="Update"
+ >
+
+
+ );
+}
+
+export default UpdateMatchModal;
diff --git a/components/matches/modals/update-match.module.scss b/components/matches/modals/update-match.module.scss
new file mode 100644
index 0000000..4cfe9e1
--- /dev/null
+++ b/components/matches/modals/update-match.module.scss
@@ -0,0 +1,11 @@
+.updateMatch {
+ display: flex;
+ flex-direction: column;
+
+ .formControl {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 10px;
+ }
+}
diff --git a/interfaces/Match.ts b/interfaces/Match.ts
index 78dd709..11ea51b 100644
--- a/interfaces/Match.ts
+++ b/interfaces/Match.ts
@@ -61,3 +61,12 @@ export interface IMatchDetails extends IMatchDetailsResponse {
playersSelected: ISelectPayload[],
changePlayerModalActive: boolean
};
+
+export interface MatchesListState {
+ matches: FullMatch[],
+ selectedMatch?: FullMatch;
+ isDeleteMatch: boolean;
+ isLeaveMatch: boolean;
+ isUpdateMatch: boolean;
+ isFullTime: boolean;
+}
diff --git a/interfaces/State.ts b/interfaces/State.ts
index 2d925f8..e18b1a2 100644
--- a/interfaces/State.ts
+++ b/interfaces/State.ts
@@ -1,8 +1,9 @@
-import { ICreateMatchState, IMatchDetails } from './Match';
+import { ICreateMatchState, IMatchDetails, MatchesListState } from './Match';
import { IProfileState } from './Profile';
export interface RootState {
createMatch: ICreateMatchState;
matchDetails: IMatchDetails;
profile: IProfileState;
+ matchesList: MatchesListState
}
diff --git a/pages/matches/index.tsx b/pages/matches/index.tsx
index 705d506..e3e4724 100644
--- a/pages/matches/index.tsx
+++ b/pages/matches/index.tsx
@@ -10,9 +10,9 @@ import { getMatches } from '../../server/matches';
import styles from './matches.module.scss';
import { FullMatch, IMatch } from '../../interfaces/Match';
import { profileActions } from '../../store/profile.slice';
+import { matchesListActions } from '../../store/matches-list.slice';
import { getProfile } from '../../server/player';
import HeaderSettings from '../../accessibility/header-setting';
-
interface Props {
matches: string;
profile: string;
@@ -23,13 +23,14 @@ const Matches: NextPage = ({matches, profile}) => {
const matchesList: FullMatch[] = JSON.parse(matches);
const router = useRouter();
const dispatch = useDispatch();
-
+
// Persisting store profile
// TODO: Change way to persis state
let parsedProfile = JSON.parse(profile || '');
const flagResponse = getFlagSvg(parsedProfile.nationality, true);
-
+
useEffect(() => {
+
dispatch(profileActions.setProfile({
_id: parsedProfile._id,
overall: 0,
@@ -39,6 +40,10 @@ const Matches: NextPage = ({matches, profile}) => {
image: parsedProfile.image,
nationality: parsedProfile.nationality,
}));
+ console.log(matchesList);
+
+ dispatch(matchesListActions.setMatchesList(matchesList));
+
}, []);
return (
@@ -52,9 +57,7 @@ const Matches: NextPage = ({matches, profile}) => {
>
New Match
-
+
);
diff --git a/store/index.ts b/store/index.ts
index 30bfebf..588034f 100644
--- a/store/index.ts
+++ b/store/index.ts
@@ -2,12 +2,14 @@ import { configureStore } from '@reduxjs/toolkit';
import createMatchSlice from './create-match.slice';
import matchDetailsSlice from './match-details.slice';
import profileSlice from './profile.slice';
+import matchesListSlice from './matches-list.slice';
const store = configureStore({
reducer: {
createMatch: createMatchSlice,
matchDetails: matchDetailsSlice,
- profile: profileSlice
+ profile: profileSlice,
+ matchesList: matchesListSlice
}
});
diff --git a/store/matches-list.slice.ts b/store/matches-list.slice.ts
new file mode 100644
index 0000000..1037386
--- /dev/null
+++ b/store/matches-list.slice.ts
@@ -0,0 +1,78 @@
+import {
+ createSlice,
+ PayloadAction,
+ CaseReducer
+} from '@reduxjs/toolkit';
+import { FullMatch, MatchesListState } from '../interfaces/Match';
+
+type DeleteMatchPayload = {
+ id: string;
+};
+
+type ModalActionPayload = {
+ action: 'isDeleteMatch' | 'isLeaveMatch' | 'isUpdateMatch' | 'isFullTime',
+ value: boolean
+};
+
+const initialState: MatchesListState = {
+ matches: [],
+ selectedMatch: undefined,
+ isDeleteMatch: false,
+ isLeaveMatch: false,
+ isUpdateMatch: false,
+ isFullTime: false
+};
+
+const setMatchesList: CaseReducer> =
+(state: MatchesListState, action: PayloadAction) => {
+ console.log('action', action);
+ state.matches = action.payload;
+};
+
+const deleteLeaveMatch: CaseReducer> =
+(state: MatchesListState, action: PayloadAction) => {
+ state.matches = state.matches.filter(match => match._id !== action.payload.id)
+};
+
+const setSelectedMatch: CaseReducer> =
+(state: MatchesListState, action: PayloadAction) => {
+ state.selectedMatch = action.payload;
+};
+
+const setMatchModalAction: CaseReducer> =
+(state: MatchesListState, action: PayloadAction) => {
+ state[action.payload.action] = action.payload.value;
+};
+
+const updateMatch: CaseReducer> =
+(state: MatchesListState, action: PayloadAction) => {
+ state.matches = state.matches.map(match => {
+ if(match._id === action.payload._id) {
+ return {
+ ...match,
+ location: action.payload.location,
+ date: action.payload.date,
+ fullTime: action.payload.fullTime,
+ homeScore: action.payload.homeScore,
+ awayScore: action.payload.awayScore
+ };
+ }else {
+ return match;
+ }
+ })
+};
+
+const matchesListSlice = createSlice({
+ name: 'matchesList',
+ initialState,
+ reducers: {
+ setMatchesList,
+ deleteLeaveMatch,
+ setSelectedMatch,
+ updateMatch,
+ setMatchModalAction
+ }
+});
+
+export const matchesListActions = matchesListSlice.actions;
+export default matchesListSlice.reducer;