Create useProfile hook

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<DiscussionProps> = ({problemId, invalidateSeriesQuer
 
   const {isAuthed} = AuthContainer.useContainer()
 
-  const {data} = useQuery({
-    queryKey: ['personal', 'profiles', 'myprofile'],
-    queryFn: () => apiAxios.get<Profile>(`/personal/profiles/myprofile`),
-    enabled: isAuthed,
-  })
-  const userId = data?.data.id
+  const {profile} = useProfile()
+  const userId = profile?.id
 
   const queryClient = useQueryClient()
 

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<Profile>(`/personal/profiles/myprofile`),
-    enabled: isAuthed,
-  })
-  const profile = data?.data
+  const {profile} = useProfile()
 
   // used to display discussions
   const [displayDiscussion, setDisplayDiscussion] = useState<{

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<ProfileLineInput> = ({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<Profile>(`/personal/profiles/myprofile`),
-    enabled: isAuthed,
-  })
-  const profile = data?.data
+  const {profile} = useProfile()
 
   return (
     <Stack>

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<Profile>(`/personal/profiles/myprofile`),
-    enabled: isAuthed,
-  })
-  const profile = data?.data
   const profileValues: ProfileFormValues = {
     first_name: profile?.first_name,
     last_name: profile?.last_name,

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<Profile>(`/api/personal/profiles/myprofile`),
+    enabled: isAuthed,
+  })
+  const profile = data?.data
+
+  return {profile, isLoading}
+}