Add profile page, edit profile modal , view quiz report page and fix social media handles on register page

src/App.tsx

@@ -16,6 +16,8 @@ import CheckQuiz from '@checkQuiz/views/checkQuiz'
 import CheckQuestionView from '@checkQuiz/components/giveQuiz/CheckQuestionView'
 import { TimerProvider } from './modules/giveQuiz/components/TimerContext'
 import Spin from '@common/components/Spinner';
+import ProfilePage from './modules/profilePage/views/profilePage'
+import ViewReport from './modules/viewReport/views/viewReport'
 
 function App() {
   const authStore = useAuthStore()
@@ -63,6 +65,8 @@ function App() {
               <Route path='/give-quiz/:quizId' element={<GiveQuiz />} />
               <Route path='/check-quiz/:quizId/:questionIdParam' element={<CheckQuestionView />} />
               <Route path='/check-quiz/:quizId' element={<CheckQuiz />} />
+              <Route path='/profile' element={<ProfilePage />} />
+              <Route path='/view-report/:quizId' element={<ViewReport />} />
               <Route path='/*' element={<Navigate to='/dashboard' />} />
             </>
           ) : null}

src/common/components/TopNav.tsx

@@ -46,7 +46,7 @@ const TopNav = ({ isDashboard = false, isAdmin = false }: TopNavProps) => {
         )}
         {isDashboard && (
           <>
-            <Avatar name='User Name' src={profileUrl} size='sm' />
+                        <Avatar name='User Name' src={profileUrl} size='sm' onClick={() => {navigate('/profile')}}/>
           </>
         )}
       </HStack>

src/modules/auth/api/authFetcher.ts

@@ -16,14 +16,14 @@ export const checkAuth = async () => {
 export const onboard = async ({
   personalDetails,
   educationalDetails,
-  socialMediaHandles,
+  socialHandles,
   user,
 }: any) => {
   try {
     const res = await axiosInstance.post('auth/onboard', {
       personalDetails,
       educationalDetails,
-      socialMediaHandles,
+      socialHandles,
       user,
     })
     return res.data

src/modules/auth/forms/SocialHandles.tsx

@@ -41,7 +41,12 @@ interface SocialMediaOption {
   icon?: JSX.Element
 }
 
-const socialMediaOptions: SocialMediaOption[] = [
+interface SocialMedia {
+  type: string
+  handle: string
+} 
+
+export const socialMediaOptions: SocialMediaOption[] = [
   { value: '', label: 'Select...' },
   { value: 'github', label: 'GitHub', icon: <GithubIconPurple /> },
   { value: 'codeforces', label: 'Code Forces', icon: <CodeForcesIcon /> },
@@ -53,7 +58,7 @@ const socialMediaOptions: SocialMediaOption[] = [
   { value: 'facebook', label: 'Facebook', icon: <FacebookIcon /> },
 ]
 
-const CustomOptionComponent: React.FC<any> = ({ innerProps, label, data }) => (
+export const CustomOptionComponent: React.FC<any> = ({ innerProps, label, data }) => (
   <Stack
     direction={'row'}
     px={2}
@@ -150,6 +155,14 @@ export const SocialHandlesForm = (props: FormProps) => {
     phoneNo: phone,
   }
 
+  const socialHandles: SocialMedia[] = []
+  socialMediaHandles.map((socialHandle: any, key: number) => {
+    socialHandles.push({
+      type: socialHandle.platformValue,
+      handle: socialHandle.link
+    })
+  })
+
   const educationalDetails = {
     instituteName: org,
     country: country,
@@ -161,7 +174,7 @@ export const SocialHandlesForm = (props: FormProps) => {
       {
         personalDetails,
         educationalDetails,
-        socialMediaHandles,
+        socialHandles,
         user,
       },
       {

src/modules/giveQuiz/components/QuestionView.tsx

@@ -11,7 +11,7 @@ import {
 import { SubmitQuizModal } from './Modals/SubmitQuizModal'
 import { useParams } from 'react-router-dom'
 import { Option,ResponseStatus } from '../../types'
-import Fetching from '../../../animations/Fetching'
+import Fetching from '../../../animations/Fetching.jsx'
 import removeFromArray from '@giveQuiz/utils/removeFromArray'
 import { useQueryClient } from '@tanstack/react-query'
 import { handleSaveButton } from '@giveQuiz/utils/handleSaveButton'

src/modules/profilePage/api/axiosInstance.ts

@@ -0,0 +1,20 @@
+import axios from 'axios'
+import { baseURL } from '../../../config/config'
+import Cookies from 'js-cookie'
+
+const axiosInstance = axios.create({
+  headers: {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+  },
+  baseURL,
+  withCredentials: true,
+})
+
+axiosInstance.interceptors.request.use((config) => {
+  const { jwtToken } = Cookies.get()
+  config.headers.Authorization = `Bearer ${jwtToken}`
+  return config
+})
+
+export default axiosInstance

src/modules/profilePage/api/useProfilePage.ts

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query'
+import axios from 'axios'
+import axiosInstance from '../../auth/api/axiosInstance'
+
+export const useProfilePage = () => {
+  const query = useQuery({
+    queryKey: ['profilePage'],
+    queryFn: async () => {
+      try {
+        const res = await axiosInstance.get('/profile')
+        return res.data
+      } catch (e: unknown) {
+        if (axios.isAxiosError(e)) {
+          return e.response?.data || e.message
+        }
+        throw e
+      }
+    },
+    staleTime: 1000 * 60 * 60 * 3,
+  })
+  return query
+}

src/modules/profilePage/api/useUser.ts

@@ -0,0 +1,9 @@
+import { useMutation } from '@tanstack/react-query'
+import * as fetchers from './userUpdate'
+
+export const useUpdateUser = () => {
+  const mutation = useMutation({
+    mutationFn: fetchers.userUpdate,
+  })
+  return mutation
+}

src/modules/profilePage/api/userUpdate.ts

@@ -0,0 +1,24 @@
+import axios from 'axios'
+import axiosInstance from './axiosInstance'
+
+export const userUpdate = async ({
+  personalDetails,
+  educationalDetails,
+  socialHandles,
+  user,
+}: any) => {
+  try {
+    const res = await axiosInstance.post('profile/update', {
+      personalDetails,
+      educationalDetails,
+      socialHandles,
+      user,
+    })
+    return res.data
+  } catch (e: unknown) {
+    if (axios.isAxiosError(e)) {
+      return e.response?.data || e.message
+    }
+    throw e
+  }
+}