fix: render button only for admins

CS3219-AY2425S1 · Oct 1, 2024 · 26b8e27 · 26b8e27
1 parent 4a41547
commit 26b8e27
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 25 deletions.
diff --git a/frontend/components/auth/Login.tsx b/frontend/components/auth/Login.tsx
@@ -1,18 +1,18 @@
 'use client'
 
+import { tokenState, userState } from '@/atoms/auth'
 import validateInput, { initialFormValues } from '@/util/input-validation'
 
 import { Button } from '../ui/button'
 import { InputField } from '../customs/custom-input'
 import { PasswordReset } from './PasswordReset'
+import React from 'react'
+import { loginRequest } from '@/services/user-service-api'
 import { toast } from 'sonner'
 import usePasswordToggle from '../../hooks/UsePasswordToggle'
-import { useState } from 'react'
-import { loginRequest } from '@/services/user-service-api'
-import { useSetRecoilState } from 'recoil'
-import { tokenState, userState } from '@/atoms/auth'
 import { useRouter } from 'next/router'
-import React from 'react'
+import { useSetRecoilState } from 'recoil'
+import { useState } from 'react'
 
 export default function Login() {
     const [formValues, setFormValues] = useState({ ...initialFormValues })
@@ -55,6 +55,7 @@ export default function Login() {
                     sessionStorage.setItem('email', res.email)
                     sessionStorage.setItem('TTL', new Date().toString())
                     sessionStorage.setItem('isAuth', 'true')
+                    sessionStorage.setItem('role', res.role)
                     setIsAuth(true)
                     setIsValid(true)
                     router.push('/')

diff --git a/frontend/pages/questions/index.tsx b/frontend/pages/questions/index.tsx
@@ -1,8 +1,5 @@
 'use client'
 
-import { Button } from '@/components/ui/button'
-import { useEffect, useState } from 'react'
-import Datatable from '@/components/customs/datatable'
 import {
     Difficulty,
     IGetQuestions,
@@ -14,20 +11,25 @@ import {
     SortDirection,
 } from '@/types'
 import { columns, formFields } from './props'
-import CustomModal from '@/components/customs/custom-modal'
-import CustomForm from '@/components/customs/custom-form'
-import ConfirmDialog from '@/components/customs/confirm-dialog'
-import { capitalizeFirst } from '@/util/string-modification'
 import {
     createQuestionRequest,
     deleteQuestionById,
     getQuestionbyIDRequest,
     getQuestionsRequest,
     updateQuestionRequest,
 } from '@/services/question-service-api'
+import { useEffect, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import ConfirmDialog from '@/components/customs/confirm-dialog'
+import CustomForm from '@/components/customs/custom-form'
+import CustomModal from '@/components/customs/custom-modal'
+import Datatable from '@/components/customs/datatable'
+import { capitalizeFirst } from '@/util/string-modification'
 import { toast } from 'sonner'
 
 export default function Questions() {
+    const [isAdmin, setIsAdmin] = useState(false)
     const [data, setData] = useState<IQuestion[]>([])
     const [isLoading, setLoading] = useState<boolean>(false)
     const [pagination, setPagination] = useState<IPagination>({
@@ -102,6 +104,10 @@ export default function Questions() {
         setIsInit(true)
     }, [isInit])
 
+    useEffect(() => {
+        setIsAdmin(sessionStorage.getItem('role') === 'ADMIN')
+    }, [])
+
     const sortHandler = (sortBy: ISortBy) => {
         setSortBy(sortBy)
         const body: IGetQuestions = {
@@ -235,19 +241,21 @@ export default function Questions() {
         <div className="m-8">
             <div className="flex items-center justify-between mb-4">
                 <h2 className="text-xl font-bold">Questions</h2>
-                <Button
-                    variant={'primary'}
-                    onClick={() => {
-                        setModalData({
-                            ...modalData,
-                            title: 'Create new question',
-                            isOpen: true,
-                        })
-                        setModificationType(Modification.CREATE)
-                    }}
-                >
-                    Create
-                </Button>
+                {isAdmin && (
+                    <Button
+                        variant={'primary'}
+                        onClick={() => {
+                            setModalData({
+                                ...modalData,
+                                title: 'Create new question',
+                                isOpen: true,
+                            })
+                            setModificationType(Modification.CREATE)
+                        }}
+                    >
+                        Create
+                    </Button>
+                )}
             </div>
             <Datatable
                 data={data}