Add isSuperUser state in useAuth for confitional rendering of specifi…

…c elements, set this conditional rendering, fix bad code with controled/uncontroled inputs in adminpanel
ita-social-projects · Oct 12, 2024 · f8dd37e · f8dd37e
1 parent 24cec9f
commit f8dd37e
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 9 deletions.
diff --git a/FrontEnd/src/context/AuthContextProvider.js b/FrontEnd/src/context/AuthContextProvider.js
@@ -10,6 +10,7 @@ export function AuthProvider({ children }) {
   const [isLoading, setLoading] = useState(true);
   const [authToken, setAuthToken] = useState(localStorage.getItem('Token'));
   const [isStaff, setIsStaff] = useState(false);
+  const [isSuperUser, setIsSuperUser] = useState(false);
   const { data, error, mutate } = useSWR(
     authToken
       ? [`${process.env.REACT_APP_BASE_API_URL}/api/auth/users/me/`, authToken]
@@ -45,6 +46,7 @@ export function AuthProvider({ children }) {
     delete axios.defaults.headers.common['Authorization'];
     setIsAuth(false);
     setIsStaff(false);
+    setIsSuperUser(false);
     setUser(null);
   };
 
@@ -70,6 +72,7 @@ export function AuthProvider({ children }) {
     if (data) {
       setUser(data);
       setIsStaff(data.is_staff);
+      setIsSuperUser(data?.is_superuser ?? false);
     }
     if (error) {
       setUser(null);
@@ -93,7 +96,7 @@ export function AuthProvider({ children }) {
     });
   });
 
-  const value = { login, logout, isAuth, authToken, isLoading, isStaff, user, error, mutate };
+  const value = { login, logout, isAuth, authToken, isLoading, isStaff, isSuperUser, user, error, mutate };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }
diff --git a/FrontEnd/src/pages/AdminPage/AutoApproveDelay/AutoApproveDelay.jsx b/FrontEnd/src/pages/AdminPage/AutoApproveDelay/AutoApproveDelay.jsx
@@ -13,7 +13,7 @@ const AutoApproveDelay = () => {
     });
     const url = `${process.env.REACT_APP_BASE_API_URL}/api/admin/automoderation/`;
     const { data, mutate } = useSWR(url, fetcher);
-    const [delay, setDelay] = useState(null);
+    const [delay, setDelay] = useState('');
     const [error, setError] = useState(null);
 
     useEffect(() => {

diff --git a/FrontEnd/src/pages/AdminPage/DetailView/ModerationEmail.jsx b/FrontEnd/src/pages/AdminPage/DetailView/ModerationEmail.jsx
@@ -11,7 +11,7 @@ const ModerationEmail = () => {
     const { data, mutate } = useSWR(url, fetcher);
 
     // Define email and setEmail using useState
-    const [email, setEmail] = useState(null);
+    const [email, setEmail] = useState('');
 
     // Update email state when data is fetched
     useEffect(() => {
@@ -39,7 +39,7 @@ const ModerationEmail = () => {
                 title={'Введіть Email'}
                 placement="top"
                 pointAtCenter={true}>
-                <input className={css['moderation_email-input']} type="email" onChange={handleInputChange} value={email || ''} />
+                <input className={css['moderation_email-input']} type="email" onChange={handleInputChange} value={email} />
             </Tooltip>
             <button className={css['save-button']} onClick={handleSubmit}>Змінити</button>
         </div>

diff --git a/FrontEnd/src/pages/AdminPage/Menu/Menu.jsx b/FrontEnd/src/pages/AdminPage/Menu/Menu.jsx
@@ -1,5 +1,5 @@
 import { NavLink } from 'react-router-dom';
-
+import { useAuth } from '../../../hooks';
 import css from './Menu.module.css';
 
 const MENU = [
@@ -23,6 +23,10 @@ const MENU = [
         title: 'Зміна часу автомодерації',
         link: '/customadmin/automoderation/'
     },
+
+];
+
+const superUserMenu = [
     {
         id: 'am5',
         title: 'Пошта адміністратора',
@@ -36,7 +40,7 @@ const MENU = [
 ];
 
 function Menu() {
-
+    const { isSuperUser } = useAuth();
     return (
         <div className={css['menu-section']}>
             {MENU.map((element) => (
@@ -45,6 +49,12 @@ function Menu() {
                     key={element.id} to={element.link}>{element.title}
                 </NavLink>
             ))}
+            {isSuperUser &&
+                superUserMenu.map((element) => (
+                    <NavLink
+                        className={({ isActive }) => (`${css['menu-section-element']} ${isActive && css['menu-section-element__active']}`)}
+                        key={element.id} to={element.link}>{element.title}
+                    </NavLink>))}
         </div>
     );
 }

diff --git a/FrontEnd/src/routes/AdminRouter.jsx b/FrontEnd/src/routes/AdminRouter.jsx
@@ -21,7 +21,7 @@ import '../pages/AdminPage/AdminGlobal.css';
 import css from '../pages/AdminPage/AdminPage.module.css';
 
 function AdminRouter() {
-    const { isLoading, isAuth, isStaff, user } = useAuth();
+    const { isLoading, isAuth, isStaff, isSuperUser, user } = useAuth();
     const { pathname } = useLocation();
     const hideMenu = pathname.includes('/admin-profile/');
     const renderMenu = isStaff && isAuth && !hideMenu ? <Menu /> : null;
@@ -33,10 +33,14 @@ function AdminRouter() {
             <Route path="/profiles" element={<ProfilesTable />} />
             <Route path="/profile/:id" element={<ProfileDetail />} />
             <Route path="/automoderation" element={<AutoApproveDelay />} />
-            <Route path="/email" element={<ModerationEmail />} />
             <Route path="/contacts" element={<Contacts />} />
             <Route path="/admin-profile/*" element={<AdminProfilePage />} />
-            <Route path="/admin-create" element={<AdminRegistration />} />
+            {isSuperUser ?
+                <>
+                    <Route path="/email" element={<ModerationEmail />} />
+                    <Route path="/admin-create" element={<AdminRegistration />} />
+                </>
+                : null}
         </>
     ) : (
         <Route path="/customadmin/" />