From 3ee6184c7d0fa4efbc2b57c0a299121f48b0a666 Mon Sep 17 00:00:00 2001 From: rtrembecky Date: Tue, 17 Dec 2024 23:03:32 +0100 Subject: [PATCH] resolve #181 - create `useProfile` hook --- src/components/Problems/Discussion.tsx | 10 +++------- src/components/Problems/Problems.tsx | 11 ++--------- src/components/Profile/ProfileDetail.tsx | 13 ++----------- src/components/Profile/ProfileForm.tsx | 13 +++---------- src/utils/useProfile.ts | 19 +++++++++++++++++++ 5 files changed, 29 insertions(+), 37 deletions(-) create mode 100644 src/utils/useProfile.ts diff --git a/src/components/Problems/Discussion.tsx b/src/components/Problems/Discussion.tsx index c653c697..96b8d877 100644 --- a/src/components/Problems/Discussion.tsx +++ b/src/components/Problems/Discussion.tsx @@ -4,9 +4,9 @@ import {FC, useState} from 'react' import {apiAxios} from '@/api/apiAxios' import {Comment, CommentState} from '@/types/api/competition' -import {Profile} from '@/types/api/personal' import {AuthContainer} from '@/utils/AuthContainer' import {useHasPermissions} from '@/utils/useHasPermissions' +import {useProfile} from '@/utils/useProfile' import {Button} from '../Clickable/Button' import {Dialog} from '../Dialog/Dialog' @@ -36,12 +36,8 @@ export const Discussion: FC = ({problemId, invalidateSeriesQuer const {isAuthed} = AuthContainer.useContainer() - const {data} = useQuery({ - queryKey: ['personal', 'profiles', 'myprofile'], - queryFn: () => apiAxios.get(`/personal/profiles/myprofile`), - enabled: isAuthed, - }) - const userId = data?.data.id + const {profile} = useProfile() + const userId = profile?.id const queryClient = useQueryClient() diff --git a/src/components/Problems/Problems.tsx b/src/components/Problems/Problems.tsx index c1250c45..ed2a335a 100644 --- a/src/components/Problems/Problems.tsx +++ b/src/components/Problems/Problems.tsx @@ -8,11 +8,10 @@ import {apiAxios} from '@/api/apiAxios' import {Button} from '@/components/Clickable/Button' import {Link} from '@/components/Clickable/Link' import {SeriesWithProblems} from '@/types/api/competition' -import {Profile} from '@/types/api/personal' -import {AuthContainer} from '@/utils/AuthContainer' import {BannerContainer} from '@/utils/BannerContainer' import {useDataFromURL} from '@/utils/useDataFromURL' import {useHasPermissions} from '@/utils/useHasPermissions' +import {useProfile} from '@/utils/useProfile' import {Dialog} from '../Dialog/Dialog' import {Loading} from '../Loading/Loading' @@ -25,15 +24,9 @@ export const Problems: FC = () => { const router = useRouter() - const {isAuthed} = AuthContainer.useContainer() const {setBannerMessages} = BannerContainer.useContainer() - const {data} = useQuery({ - queryKey: ['personal', 'profiles', 'myprofile'], - queryFn: () => apiAxios.get(`/personal/profiles/myprofile`), - enabled: isAuthed, - }) - const profile = data?.data + const {profile} = useProfile() // used to display discussions const [displayDiscussion, setDisplayDiscussion] = useState<{ diff --git a/src/components/Profile/ProfileDetail.tsx b/src/components/Profile/ProfileDetail.tsx index 7c888f2c..b12b36e3 100644 --- a/src/components/Profile/ProfileDetail.tsx +++ b/src/components/Profile/ProfileDetail.tsx @@ -1,12 +1,9 @@ import {Stack, Typography} from '@mui/material' -import {useQuery} from '@tanstack/react-query' import {FC, useState} from 'react' -import {apiAxios} from '@/api/apiAxios' import {Button} from '@/components/Clickable/Button' import {Link} from '@/components/Clickable/Link' -import {Profile} from '@/types/api/personal' -import {AuthContainer} from '@/utils/AuthContainer' +import {useProfile} from '@/utils/useProfile' import {useSeminarInfo} from '@/utils/useSeminarInfo' import {PasswordChangeDialog} from './PasswordChangeForm' @@ -30,7 +27,6 @@ const ProfileLine: FC = ({label, value}) => { } export const ProfileDetail: FC = () => { - const {isAuthed} = AuthContainer.useContainer() const {seminar} = useSeminarInfo() const [openPasswordDialog, setOpenPasswordDialog] = useState(false) @@ -39,12 +35,7 @@ export const ProfileDetail: FC = () => { setOpenPasswordDialog((prev) => !prev) } - const {data} = useQuery({ - queryKey: ['personal', 'profiles', 'myprofile'], - queryFn: () => apiAxios.get(`/personal/profiles/myprofile`), - enabled: isAuthed, - }) - const profile = data?.data + const {profile} = useProfile() return ( diff --git a/src/components/Profile/ProfileForm.tsx b/src/components/Profile/ProfileForm.tsx index a6a6d60c..12a0b9d4 100644 --- a/src/components/Profile/ProfileForm.tsx +++ b/src/components/Profile/ProfileForm.tsx @@ -1,5 +1,5 @@ import {Stack} from '@mui/material' -import {useMutation, useQuery} from '@tanstack/react-query' +import {useMutation} from '@tanstack/react-query' import {useRouter} from 'next/router' import {FC} from 'react' import {SubmitHandler, useForm} from 'react-hook-form' @@ -8,8 +8,7 @@ import {apiAxios} from '@/api/apiAxios' import {FormInput} from '@/components/FormItems/FormInput/FormInput' import {SelectOption} from '@/components/FormItems/FormSelect/FormSelect' import {IGeneralPostResponse} from '@/types/api/general' -import {Profile} from '@/types/api/personal' -import {AuthContainer} from '@/utils/AuthContainer' +import {useProfile} from '@/utils/useProfile' import {useSeminarInfo} from '@/utils/useSeminarInfo' import {Button} from '../Clickable/Button' @@ -35,14 +34,8 @@ const defaultValues: ProfileFormValues = { } export const ProfileForm: FC = () => { - const {isAuthed} = AuthContainer.useContainer() + const {profile} = useProfile() - const {data} = useQuery({ - queryKey: ['personal', 'profiles', 'myprofile'], - queryFn: () => apiAxios.get(`/personal/profiles/myprofile`), - enabled: isAuthed, - }) - const profile = data?.data const profileValues: ProfileFormValues = { first_name: profile?.first_name, last_name: profile?.last_name, diff --git a/src/utils/useProfile.ts b/src/utils/useProfile.ts new file mode 100644 index 00000000..1c819272 --- /dev/null +++ b/src/utils/useProfile.ts @@ -0,0 +1,19 @@ +import {useQuery} from '@tanstack/react-query' + +import {apiAxios} from '@/api/apiAxios' +import {Profile} from '@/types/api/personal' + +import {AuthContainer} from './AuthContainer' + +export const useProfile = () => { + const {isAuthed} = AuthContainer.useContainer() + + const {data, isLoading} = useQuery({ + queryKey: ['personal', 'profiles', 'myprofile'], + queryFn: () => apiAxios.get(`/api/personal/profiles/myprofile`), + enabled: isAuthed, + }) + const profile = data?.data + + return {profile, isLoading} +}