From ea3deba121ad969cfe435a879c96c494fa570ae3 Mon Sep 17 00:00:00 2001 From: Michael Hunteman Date: Fri, 27 Sep 2024 08:50:56 -0700 Subject: Use app dispatch and selector --- client/src/components/Admin.tsx | 4 ++-- client/src/components/AdminLogin.tsx | 4 ++-- client/src/components/GlobalSnackbar.tsx | 6 +++--- client/src/components/GuestLogin.tsx | 4 ++-- client/src/components/Rsvp.tsx | 4 ++-- client/src/components/RsvpForm.tsx | 4 ++-- client/src/hooks.ts | 5 +++++ 7 files changed, 18 insertions(+), 13 deletions(-) create mode 100644 client/src/hooks.ts (limited to 'client/src') diff --git a/client/src/components/Admin.tsx b/client/src/components/Admin.tsx index ab75976..eec675a 100644 --- a/client/src/components/Admin.tsx +++ b/client/src/components/Admin.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { useMemo } from 'react'; import { useLocation, Navigate, Outlet } from 'react-router-dom'; -import { useSelector } from 'react-redux'; +import { useAppSelector } from '../hooks'; import { selectGuests } from '../slices/auth/adminSlice'; const authenticate = () => { - const guests = useSelector(selectGuests); + const guests = useAppSelector(selectGuests); return useMemo(() => ({ guests }), [guests]); }; diff --git a/client/src/components/AdminLogin.tsx b/client/src/components/AdminLogin.tsx index 83b7de4..405cfb6 100644 --- a/client/src/components/AdminLogin.tsx +++ b/client/src/components/AdminLogin.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; -import { useDispatch } from 'react-redux'; import { Button, Paper, TextField, Typography } from '@mui/material'; import { useForm } from 'react-hook-form'; +import { useAppDispatch } from '../hooks'; import { setAdmin } from '../slices/auth/adminSlice'; import { useLoginAdminMutation } from '../slices/api/adminSlice'; import { showSnackbar } from '../slices/snackbarSlice'; @@ -11,7 +11,7 @@ import type { Credentials } from '../models'; import type { Data } from '../error'; function GuestLogin() { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const navigate = useNavigate(); const [login] = useLoginAdminMutation(); diff --git a/client/src/components/GlobalSnackbar.tsx b/client/src/components/GlobalSnackbar.tsx index f0019fa..c4457af 100644 --- a/client/src/components/GlobalSnackbar.tsx +++ b/client/src/components/GlobalSnackbar.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import { useDispatch, useSelector } from 'react-redux'; import { Alert, Snackbar } from '@mui/material'; +import { useAppDispatch, useAppSelector } from '../hooks'; import { hideSnackbar, selectSnackbarState } from '../slices/snackbarSlice'; function GlobalSnackbar() { - const dispatch = useDispatch(); - const { open, message, severity } = useSelector(selectSnackbarState); + const dispatch = useAppDispatch(); + const { open, message, severity } = useAppSelector(selectSnackbarState); const handleClose = () => { dispatch(hideSnackbar()); diff --git a/client/src/components/GuestLogin.tsx b/client/src/components/GuestLogin.tsx index 9a9bf8e..d0270cb 100644 --- a/client/src/components/GuestLogin.tsx +++ b/client/src/components/GuestLogin.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; -import { useDispatch } from 'react-redux'; import { Button, Paper, TextField, Typography } from '@mui/material'; import { useForm } from 'react-hook-form'; +import { useAppDispatch } from '../hooks'; import { setGuest } from '../slices/auth/guestSlice'; import { useLoginGuestMutation } from '../slices/api/guestSlice'; import { showSnackbar } from '../slices/snackbarSlice'; @@ -11,7 +11,7 @@ import type { Data } from '../error'; import type { Name } from '../models'; function GuestLogin() { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const navigate = useNavigate(); const [login] = useLoginGuestMutation(); diff --git a/client/src/components/Rsvp.tsx b/client/src/components/Rsvp.tsx index 602f159..5b0ba02 100644 --- a/client/src/components/Rsvp.tsx +++ b/client/src/components/Rsvp.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { useMemo } from 'react'; import { useLocation, Navigate, Outlet } from 'react-router-dom'; -import { useSelector } from 'react-redux'; +import { useAppSelector } from '../hooks'; import { selectGuest } from '../slices/auth/guestSlice'; const authenticate = () => { - const guest = useSelector(selectGuest); + const guest = useAppSelector(selectGuest); return useMemo(() => ({ guest }), [guest]); }; diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx index b3ff0db..8dc105a 100644 --- a/client/src/components/RsvpForm.tsx +++ b/client/src/components/RsvpForm.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { useRef } from 'react'; import { useOutletContext } from 'react-router-dom'; -import { useDispatch } from 'react-redux'; import { Button, FormControl, @@ -15,6 +14,7 @@ import { } from '@mui/material'; import MailIcon from '@mui/icons-material/Mail'; import { useForm, Controller, useFieldArray } from 'react-hook-form'; +import { useAppDispatch } from '../hooks'; import { useUpdateGuestMutation } from '../slices/api/guestSlice'; import { isFetchBaseQueryError } from '../error'; import { showSnackbar } from '../slices/snackbarSlice'; @@ -22,7 +22,7 @@ import type { Data } from '../error'; import type { Guest } from '../models'; function RsvpForm() { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const [updateGuest] = useUpdateGuestMutation(); const guest: Guest = useOutletContext(); const previousPartySize = useRef((guest.partySize ?? 1) - 1); diff --git a/client/src/hooks.ts b/client/src/hooks.ts new file mode 100644 index 0000000..7988133 --- /dev/null +++ b/client/src/hooks.ts @@ -0,0 +1,5 @@ +import { useDispatch, useSelector } from 'react-redux'; +import type { AppDispatch, RootState } from './store'; + +export const useAppDispatch = useDispatch.withTypes(); +export const useAppSelector = useSelector.withTypes(); -- cgit v1.2.3