adjust data for role

WBG-Coach · Jan 15, 2024 · a819a6c · a819a6c
1 parent a358faa
commit a819a6c
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 38 deletions.
diff --git a/src/components/Navbar/common.ts b/src/components/Navbar/common.ts
@@ -40,6 +40,7 @@ export const MenuItems = [
       {
         icon: 'sync',
         label: 'syncs',
+        role: 'admin',
         route: `/${import.meta.env.VITE_COUNTRY}/admin/syncs`,
       },
     ],

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -30,18 +30,21 @@ const Navbar: React.FC = () => {
               <Text m="16px" mb="8px" fontSize="12px" color="#9AA2AC" fontWeight={700}>
                 {t(`Navbar.${item.label}`)}
               </Text>
-              {item.subItems.map((subItem, sIndex) => (
-                <MenuItem
-                  key={index + sIndex}
-                  icon={subItem.icon}
-                  label={t(`Navbar.${subItem.label}`)}
-                  route={subItem.route}
-                  onClick={() => {
-                    setOpen(false);
-                    navigate(subItem.route);
-                  }}
-                />
-              ))}
+              {item.subItems.map(
+                (subItem, sIndex) =>
+                  (!subItem.role || user?.role === subItem.role) && (
+                    <MenuItem
+                      key={index + sIndex}
+                      icon={subItem.icon}
+                      label={t(`Navbar.${subItem.label}`)}
+                      route={subItem.route}
+                      onClick={() => {
+                        setOpen(false);
+                        navigate(subItem.route);
+                      }}
+                    />
+                  ),
+              )}
             </Stack>
           ) : (
             <MenuItem

diff --git a/src/contexts/UserContext/index.tsx b/src/contexts/UserContext/index.tsx
@@ -2,7 +2,7 @@ import React, { useContext, useState, useEffect } from 'react';
 import StorageService from '@/services/storage/storage.service';
 import { redirect } from 'react-router-dom';
 import AuthService from '@/services/auth';
-import { IUser } from '../../types';
+import { IRegion, IUser } from '../../types';
 import { toast } from 'react-toastify';
 import UserService from '@/services/user';
 import { useTranslation } from 'react-i18next';
@@ -13,6 +13,7 @@ export type UserContextProps = {
   updateLocalUser: (user: IUser) => void;
   logout: () => void;
   user?: IUser;
+  userRegionsPath: IRegion[];
 };
 
 export const UserContext = React.createContext<UserContextProps>({} as UserContextProps);
@@ -24,6 +25,7 @@ interface Props {
 const UserContextProvider = ({ children }: Props) => {
   const [user, setUser] = useState<IUser>();
   const { i18n } = useTranslation();
+  const [userRegionsPath, setUserRegionsPath] = useState<IRegion[]>([]);
 
   useEffect(() => {
     let storageUser = StorageService.getUser();
@@ -33,6 +35,20 @@ const UserContextProvider = ({ children }: Props) => {
     }
   }, []);
 
+  useEffect(() => {
+    if (user) {
+      const makeRegionPath = (region: IRegion): IRegion[] => {
+        if (region.parent) return [...makeRegionPath(region.parent), region];
+        return [region];
+      };
+
+      if (user.region) {
+        const regionPath = makeRegionPath(user.region);
+        setUserRegionsPath(regionPath);
+      }
+    }
+  }, [user]);
+
   const handleLogin = async (props: { email: string; password: string }) => {
     const response = await AuthService.login(props);
 
@@ -75,6 +91,7 @@ const UserContextProvider = ({ children }: Props) => {
         logout,
         updateLocalUser,
         user,
+        userRegionsPath,
       }}
     >
       {children}

diff --git a/src/pages/CoachOverTime/index.tsx b/src/pages/CoachOverTime/index.tsx
@@ -1,23 +1,36 @@
 import Loader from '@/components/Base/Loader';
 import SessionService from '@/services/session';
-import { ISession } from '@/types';
+import { IRegion, ISession } from '@/types';
 import { Box, Center, FormLabel, HStack, Select, Switch, VStack } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import SessionView from './SessionView';
 import SessionList, { ISessionOverTime } from './SessionList';
 import HeaderPage from '@/components/HeaderPage';
 import { useTranslation } from 'react-i18next';
 import handleDownloadJSON from '@/common/download';
-import { REGIONS } from '@/common/constants';
+import { useUserContext } from '@/contexts/UserContext';
+import RegionService from '@/services/region';
 
 const CoachOverTimePage: React.FC = () => {
   const { t } = useTranslation();
+  const { userRegionsPath } = useUserContext();
   const [sessionOverTime, setSessionOverTime] = useState<ISessionOverTime[]>([]);
   const [isLoadingList, setIsLoadingList] = useState(false);
   const [sessionToView, setSessionToView] = useState<ISession>();
   const [showOnlyWithValues, setShowOnlyWithValues] = useState(true);
-  const [region, setRegion] = useState<string>();
   const [schoolId, setSchoolId] = useState<string>();
+  const [region, setRegion] = useState<string | undefined>(
+    userRegionsPath.length > 0 ? userRegionsPath[0].id : undefined,
+  );
+  const [regions, setRegions] = useState<IRegion[]>([]);
+
+  useEffect(() => {
+    if (userRegionsPath.length > 0) {
+      setRegions([userRegionsPath[0]]);
+    } else {
+      RegionService.getRegionsTree().then(setRegions);
+    }
+  }, [userRegionsPath]);
 
   useEffect(() => {
     loadSessions(region, schoolId, showOnlyWithValues);
@@ -57,8 +70,10 @@ const CoachOverTimePage: React.FC = () => {
                 <FormLabel htmlFor="region">{t('coach-over-time.filters.region')}</FormLabel>
                 <Select id="region" value={region} onChange={(e) => setRegion(e.target.value)} bg="#fff">
                   <option value={''}>All regions</option>
-                  {REGIONS.map((item) => (
-                    <option value={item}>{item}</option>
+                  {regions.map((item) => (
+                    <option value={item.id} key={item.id}>
+                      {item.name}
+                    </option>
                   ))}
                 </Select>
               </VStack>
@@ -68,7 +83,9 @@ const CoachOverTimePage: React.FC = () => {
                 <Select id="schoolId" value={schoolId} onChange={(e) => setSchoolId(e.target.value)} bg="#fff">
                   <option value={''}>All schools</option>
                   {sessionOverTime.map((item) => (
-                    <option value={item.id}>{item['School Name']}</option>
+                    <option value={item.id} key={item.id}>
+                      {item['School Name']}
+                    </option>
                   ))}
                 </Select>
               </VStack>

diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
@@ -15,34 +15,36 @@ import DataRangePicker from '@/components/DataRangePicker';
 import { Range } from 'react-date-range';
 
 const DashboardPage: React.FC = () => {
-  const { user } = useUserContext();
+  const { user, userRegionsPath } = useUserContext();
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const [dateRange, setDateRange] = useState<Range>();
   const [dashboard, setDashboard] = useState<IDashboard>();
   const [regionId, setRegionId] = useState(user?.region_id);
   const [selected, setSelected] = useState<ITeachingPractices>();
-  const [dateRange, setDateRange] = useState<Range>();
   const isMobile = useBreakpointValue({ base: true, md: false });
 
   useEffect(() => {
-    if (!loading) {
+    if (!loading && user) {
       setLoading(true);
 
-      DashboardService.getData(regionId, dateRange).then((data) => {
+      DashboardService.getData(regionId || user.region?.id, dateRange).then((data) => {
         setDashboard(data);
         setSelected(data?.teachingPractices[0]);
         setLoading(false);
       });
     }
-  }, [regionId, dateRange]);
+  }, [user, regionId, dateRange]);
 
-  const handleRegion = (regionId?: string) => {
-    setRegionId(regionId);
+  const handleRegion = (newRegionId?: string) => {
+    if (newRegionId !== regionId) setRegionId(newRegionId);
   };
 
   const calcAverageStars = (stars: IStars) => {
     const total = stars.needsWork + stars.keepWorking + stars.needsAttention + stars.almostThere + stars.doingGreat;
+
     if (total === 0) return 0;
+
     return (
       (stars.needsWork * 1 +
         stars.keepWorking * 2 +
@@ -63,7 +65,7 @@ const DashboardPage: React.FC = () => {
     <VStack mx="auto" w="full" minH="100vh" maxW="1200px" position="relative" p="56px" alignItems="flex-start">
       <Flex mb="20px" flexDir={isMobile ? 'column' : 'row'} w="full">
         <Flex flex={1}>
-          <RegionSelect direction="row" level={0} onSelect={handleRegion} />
+          <RegionSelect fixedItems={userRegionsPath} direction="row" level={0} onSelect={handleRegion} />
         </Flex>
         <Flex
           flex={1}

diff --git a/src/pages/Schools/SchoolForm/RegionSelect/index.tsx b/src/pages/Schools/SchoolForm/RegionSelect/index.tsx
@@ -1,7 +1,7 @@
 import RegionService from '@/services/region';
 import { IRegion } from '@/types';
 import { Flex, Select, Text, VStack } from '@chakra-ui/react';
-import { ChangeEvent, useEffect, useState } from 'react';
+import { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type Props = {
@@ -11,21 +11,52 @@ type Props = {
   onSelect?: (regionId?: string) => void;
   onChangeEvent?: (e: ChangeEvent<HTMLSelectElement>) => void;
   isInvalid?: boolean;
+  fixedItems?: IRegion[];
 };
 
-const RegionSelect: React.FC<Props> = ({ level, direction, region, onSelect, onChangeEvent, ...otherProps }) => {
+const RegionSelect: React.FC<Props> = ({
+  level,
+  region,
+  direction,
+  fixedItems,
+  onSelect,
+  onChangeEvent,
+  ...otherProps
+}) => {
   const { t } = useTranslation();
   const [regions, setRegions] = useState<IRegion[]>(region?.children || []);
   const [selectedRegion, setSelectedRegion] = useState<IRegion>();
 
+  const loadRegions = useCallback(async () => {
+    if (regions.length === 0) {
+      const data = await RegionService.getRegionsTree();
+      setRegions(data);
+    }
+  }, [fixedItems]);
+
   useEffect(() => {
-    if (!region) {
-      RegionService.getRegionsTree().then(setRegions);
-    } else {
+    if (!!region) {
       setRegions(region.children || []);
       setSelectedRegion(undefined);
+    } else {
+      loadRegions();
+    }
+  }, [fixedItems, loadRegions]);
+
+  useEffect(() => {
+    if (fixedItems && fixedItems[0]) {
+      const newRegions = regions.filter((item) => item.id === fixedItems[0].id);
+      if (selectedRegion !== newRegions[0]) {
+        setRegions(newRegions);
+        setSelectedRegion(newRegions[0]);
+      }
+
+      if (!fixedItems[1]) {
+        setSelectedRegion(newRegions[0]);
+        if (onSelect) onSelect(newRegions[0].id);
+      }
     }
-  }, [region]);
+  }, [regions, fixedItems]);
 
   const handleSelect = (e: ChangeEvent<HTMLSelectElement>) => {
     const region = regions.find((region) => region.id === e.target.value);
@@ -71,6 +102,7 @@ const RegionSelect: React.FC<Props> = ({ level, direction, region, onSelect, onC
         <RegionSelect
           {...otherProps}
           level={level + 1}
+          fixedItems={fixedItems?.slice(1)}
           onChangeEvent={onChangeEvent}
           region={selectedRegion}
           onSelect={onSelect}

diff --git a/src/pages/SessionData/index.tsx b/src/pages/SessionData/index.tsx
@@ -1,24 +1,37 @@
 import Loader from '@/components/Base/Loader';
 import SessionService from '@/services/session';
-import { ISession } from '@/types';
+import { IRegion, ISession } from '@/types';
 import { Box, Center, FormLabel, HStack, Select, Switch, VStack } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import SessionView from './SessionView';
 import SessionList, { ISessionData } from './SessionList';
 import HeaderPage from '@/components/HeaderPage';
 import { useTranslation } from 'react-i18next';
 import handleDownloadJSON from '@/common/download';
-import { REGIONS } from '@/common/constants';
+import { useUserContext } from '@/contexts/UserContext';
+import RegionService from '@/services/region';
 
 const SessionDataPage: React.FC = () => {
   const { t } = useTranslation();
+  const { userRegionsPath } = useUserContext();
   const [sessionData, setSessionData] = useState<ISessionData[]>([]);
   const [isLoadingList, setIsLoadingList] = useState(false);
   const [sessionToView, setSessionToView] = useState<ISession>();
   const [period, setPeriod] = useState<string>();
-  const [region, setRegion] = useState<string>();
+  const [region, setRegion] = useState<string | undefined>(
+    userRegionsPath.length > 0 ? userRegionsPath[0].id : undefined,
+  );
   const [schoolId, setSchoolId] = useState<string>();
   const [showOnlyWithValues, setShowOnlyWithValues] = useState(true);
+  const [regions, setRegions] = useState<IRegion[]>([]);
+
+  useEffect(() => {
+    if (userRegionsPath.length > 0) {
+      setRegions([userRegionsPath[0]]);
+    } else {
+      RegionService.getRegionsTree().then(setRegions);
+    }
+  }, [userRegionsPath]);
 
   useEffect(() => {
     loadSessions(period, region, schoolId, showOnlyWithValues);
@@ -65,8 +78,8 @@ const SessionDataPage: React.FC = () => {
                 <FormLabel htmlFor="region">{t('session-data.filters.region')}</FormLabel>
                 <Select id="region" value={region} onChange={(e) => setRegion(e.target.value)} bg="#fff">
                   <option value={''}>All regions</option>
-                  {REGIONS.map((item) => (
-                    <option value={item}>{item}</option>
+                  {regions.map((item) => (
+                    <option value={item.id}>{item.name}</option>
                   ))}
                 </Select>
               </VStack>