chore: make securityContext into custom hook

no-ticket

Author: kttkjl

app/components/AuthenticatedRoute/index.jsx

@@ -1,12 +1,12 @@
 /* eslint-disable react/display-name */
 import { PropTypes } from 'prop-types';
-import React, { useContext, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import {
   Redirect,
   Route,
 } from 'react-router-dom';
 
-import SecurityContext from '@/context/SecurityContext';
+import useSecurity from '@/hooks/useSecurity';
 import useResource from '@/hooks/useResource';
 import { isAuthorized } from '@/services/management/auth';
 
@@ -16,7 +16,7 @@ import { isAuthorized } from '@/services/management/auth';
 const AuthenticatedRoute = ({
   component: Component, adminRequired, showNav, onToggleNav, ...rest
 }) => {
-  const { authorizationToken } = useContext(SecurityContext);
+  const { authorizationToken } = useSecurity();
   const { adminAccess } = useResource();
   const authOk = isAuthorized(authorizationToken);
 

app/components/NavBar/index.tsx

@@ -12,14 +12,14 @@ import MenuIcon from '@mui/icons-material/Menu';
 import PersonIcon from '@mui/icons-material/Person';
 
 import { logout } from '@/services/management/auth';
-import SecurityContext from '@/context/SecurityContext';
+import useSecurity from '@/hooks/useSecurity';
 import SidebarContext from '@/context/SidebarContext';
 import FeedbackDialog from './components/FeedbackDialog';
 
 import './index.scss';
 
 const NavBar = (): JSX.Element => {
-  const { userDetails } = useContext(SecurityContext);
+  const { userDetails } = useSecurity();
   const { sidebarMaximized, setSidebarMaximized } = useContext(SidebarContext);
 
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>();

app/context/ReportContext/types.d.ts

@@ -55,6 +55,7 @@ type ReportType = {
   kbDiseaseMatch: string;
   m1m2Score: number;
   captiv8Score: number;
+  appendix?: string;
 } & RecordDefaults;
 
 type ReportContextType = {

app/context/ResourceContext/index.tsx

@@ -1,10 +1,10 @@
 import React, {
-  createContext, ReactChild, useContext, useState, useEffect, useMemo,
+  createContext, ReactChild, useState, useEffect, useMemo, useContext,
 } from 'react';
-import SecurityContext from '@/context/SecurityContext';
-
 import { checkAccess, ALL_ROLES } from '@/utils/checkAccess';
+import { useSecurity } from '@/hooks/useSecurity';
 import ResourceContextType from './types';
+import ReportContext from '../ReportContext';
 
 const GERMLINE_ACCESS = ['admin', 'analyst', 'bioinformatician', 'projects', 'manager'];
 const GERMLINE_BLOCK = ALL_ROLES;
@@ -13,42 +13,57 @@ const REPORTS_BLOCK = [];
 const ADMIN_ACCESS = ['admin'];
 const ADMIN_BLOCK = ALL_ROLES;
 
-type UseResourcesReturnType = {
-  germlineAccess: boolean;
-  reportsAccess: boolean;
-  adminAccess: boolean;
-  reportSettingAccess: boolean;
-};
-
-const useResources = (): UseResourcesReturnType => {
-  const { userDetails } = useContext(SecurityContext);
+const useResources = (): ResourceContextType => {
+  const { userDetails: { groups, ident: userIdent } } = useSecurity();
+  const { report } = useContext(ReportContext);
 
   const [germlineAccess, setGermlineAccess] = useState(false);
   const [reportsAccess, setReportsAccess] = useState(false);
+  const [reportEditAccess, setReportEditAccess] = useState(false);
   const [adminAccess, setAdminAccess] = useState(false);
   const [reportSettingAccess, setReportSettingAccess] = useState(false);
 
+  // Check user group first to see which resources they can access
   useEffect(() => {
-    if (userDetails?.groups) {
-      if (checkAccess(userDetails.groups, GERMLINE_ACCESS, GERMLINE_BLOCK)) {
+    if (groups) {
+      if (checkAccess(groups, GERMLINE_ACCESS, GERMLINE_BLOCK)) {
         setGermlineAccess(true);
       }
 
-      if (checkAccess(userDetails.groups, REPORTS_ACCESS, REPORTS_BLOCK)) {
+      if (checkAccess(groups, REPORTS_ACCESS, REPORTS_BLOCK)) {
         setReportsAccess(true);
       }
 
-      if (checkAccess(userDetails.groups, ADMIN_ACCESS, ADMIN_BLOCK)) {
+      if (checkAccess(groups, ADMIN_ACCESS, ADMIN_BLOCK)) {
         setAdminAccess(true);
       }
-      if (checkAccess(userDetails.groups, [...ADMIN_ACCESS, 'manager'], ADMIN_BLOCK)) {
+
+      if (checkAccess(groups, [...ADMIN_ACCESS, 'manager'], ADMIN_BLOCK)) {
         setReportSettingAccess(true);
+        setReportEditAccess(true);
+      }
+    }
+  }, [groups]);
+
+  /**
+   * Check report specific permissions if user isn't admin
+   */
+  useEffect(() => {
+    if (!adminAccess) {
+      if (report && report.users.some(({ ident: i }) => i === userIdent)) {
+        setReportEditAccess(true);
+      } else {
+        setReportEditAccess(false);
       }
     }
-  }, [userDetails?.groups]);
+  }, [report, userIdent, adminAccess]);
 
   return {
-    germlineAccess, reportsAccess, adminAccess, reportSettingAccess,
+    germlineAccess,
+    reportsAccess,
+    adminAccess,
+    reportSettingAccess,
+    reportEditAccess,
   };
 };
 
@@ -57,6 +72,7 @@ const ResourceContext = createContext<ResourceContextType>({
   reportsAccess: false,
   adminAccess: false,
   reportSettingAccess: false,
+  reportEditAccess: false,
 });
 
 type ResourceContextProviderProps = {
@@ -65,19 +81,21 @@ type ResourceContextProviderProps = {
 
 const ResourceContextProvider = ({ children }: ResourceContextProviderProps): JSX.Element => {
   const {
-    germlineAccess, reportsAccess, adminAccess, reportSettingAccess,
+    germlineAccess, reportsAccess, adminAccess, reportSettingAccess, reportEditAccess,
   } = useResources();
 
   const providerValue = useMemo(() => ({
     germlineAccess,
     reportsAccess,
     adminAccess,
     reportSettingAccess,
+    reportEditAccess,
   }), [
     germlineAccess,
     reportsAccess,
     adminAccess,
     reportSettingAccess,
+    reportEditAccess,
   ]);
 
   return (

app/context/ResourceContext/types.d.ts

@@ -3,6 +3,7 @@ type ResourceContextType = {
   reportsAccess: boolean;
   adminAccess: boolean;
   reportSettingAccess: boolean;
+  reportEditAccess: boolean;
 };
 
 export default ResourceContextType;

app/context/SecurityContext/index.js

@@ -0,0 +1,23 @@
+import { UserType } from '@/common';
+import React from 'react';
+
+type SecurityContextType = {
+  authorizationToken: string;
+  setAuthorizationToken: (token: string) => void;
+  userDetails: UserType;
+  setUserDetails: (userDetails: UserType) => void;
+};
+
+const SecurityContext = React.createContext<SecurityContextType>({
+  authorizationToken: '',
+  setAuthorizationToken: () => {},
+  userDetails: null,
+  setUserDetails: () => {},
+});
+
+export default SecurityContext;
+
+export {
+  SecurityContextType,
+  SecurityContext,
+};

app/context/SecurityContext/index.tsx

@@ -1,7 +1,7 @@
 import React, {
   createContext, ReactChild, useMemo, useContext,
 } from 'react';
-import SecurityContext from '@/context/SecurityContext';
+import useSecurity from '@/hooks/useSecurity';
 import { checkAccess } from '@/utils/checkAccess';
 import UserContextInterface from './interfaces';
 
@@ -18,7 +18,7 @@ type UserContextProviderProps = {
 };
 
 const UserContextProvider = ({ children }: UserContextProviderProps): JSX.Element => {
-  const { userDetails } = useContext(SecurityContext);
+  const { userDetails } = useSecurity();
 
   const canEdit = useMemo(() => {
     if (userDetails && checkAccess(userDetails.groups, EDIT_ACCESS, EDIT_BLOCK)) {

app/context/UserContext/index.tsx

@@ -1,11 +1,10 @@
-import { useState, useEffect, useContext } from 'react';
-
-import SecurityContext from '@/context/SecurityContext';
+import { useState, useEffect } from 'react';
+import useSecurity from '@/hooks/useSecurity';
 
 const EXTERNAL_GROUPS = ['clinician', 'collaborator'];
 
 const useExternalMode = (): boolean => {
-  const { userDetails } = useContext(SecurityContext);
+  const { userDetails } = useSecurity();
 
   const [isExternalMode, setIsExternalMode] = useState<boolean>(null);
 

app/hooks/useExternalMode.ts

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { SecurityContext } from '@/context/SecurityContext';
+
+const useSecurity = () => {
+  const context = useContext(SecurityContext);
+
+  if (!context) {
+    throw new Error('useSecurity must be used within a SecurityProvider');
+  }
+
+  return context;
+};
+
+export default useSecurity;

app/hooks/useSecurity.tsx

@@ -27,7 +27,6 @@ const checkAccess = (
   blockList: string[] = ALL_ROLES,
 ): boolean => {
   const groupNames = groups.map((group) => group.name.toLowerCase());
-
   const isAllowed = allowList.includes('*') || allowList.some((group) => groupNames.includes(group.toLowerCase()));
   const isBlocked = blockList.some((group) => groupNames.includes(group.toLowerCase()));
   return isAllowed || !isBlocked;

app/utils/checkAccess.ts

@@ -1,8 +1,8 @@
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
 import fetchIntercept from 'fetch-intercept';
 import { RouteChildrenProps } from 'react-router-dom';
 
-import SecurityContext from '@/context/SecurityContext';
+import useSecurity from '@/hooks/useSecurity';
 import {
   login, isAuthorized, getReferrerUri, keycloak,
 } from '@/services/management/auth';
@@ -18,7 +18,7 @@ const Login = (props: RouteChildrenProps): null => {
     authorizationToken,
     setAuthorizationToken,
     setUserDetails,
-  } = useContext(SecurityContext);
+  } = useSecurity();
 
   let from;
 

app/views/LoginView/index.tsx

@@ -17,7 +17,7 @@ import {
 
 import AuthenticatedRoute from '@/components/AuthenticatedRoute';
 import SidebarContext from '@/context/SidebarContext';
-import SecurityContext from '@/context/SecurityContext';
+import { SecurityContext, SecurityContextType } from '@/context/SecurityContext';
 import { UserContextProvider } from '@/context/UserContext';
 import { ResourceContextProvider } from '@/context/ResourceContext';
 import NavBar from '@/components/NavBar';
@@ -125,11 +125,11 @@ const TimeoutModal = memo(({ authorizationToken, setAuthorizationToken }: Timeou
  */
 const Main = (): JSX.Element => {
   const [authorizationToken, setAuthorizationToken] = useState('');
-  const [userDetails, setUserDetails] = useState('');
+  const [userDetails, setUserDetails] = useState<SecurityContextType['userDetails']>(null);
   const [sidebarMaximized, setSidebarMaximized] = useState(false);
   const [isNavVisible, setIsNavVisible] = useState(true);
 
-  const secContextVal = useMemo(() => ({
+  const secContextVal = useMemo<SecurityContextType>(() => ({
     authorizationToken, setAuthorizationToken, userDetails, setUserDetails,
   }), [authorizationToken, setAuthorizationToken, userDetails, setUserDetails]);
 

app/views/MainView/index.tsx

@@ -15,7 +15,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import { useSnackbar } from 'notistack';
 
 import ReportContext from '@/context/ReportContext';
-import SecurityContext from '@/context/SecurityContext';
+import useSecurity from '@/hooks/useSecurity';
 import useResource from '@/hooks/useResource';
 import api from '@/services/api';
 import { formatDate } from '@/utils/date';
@@ -35,10 +35,10 @@ const CommentCard = ({
   onDelete,
 }: CommentCardProps): JSX.Element => {
   const { report } = useContext(ReportContext);
-  const { userDetails } = useContext(SecurityContext);
+  const { userDetails } = useSecurity();
   const { adminAccess } = useResource();
   const snackbar = useSnackbar();
-  
+
   const [isEditing, setIsEditing] = useState(false);
   const [editedComment, setEditedComment] = useState('');
 

app/views/ReportView/components/Discussion/components/CommentCard/index.tsx

@@ -7,7 +7,7 @@ import {
 
 import api from '@/services/api';
 import ReportContext from '@/context/ReportContext';
-import SecurityContext from '@/context/SecurityContext';
+import useSecurity from '@/hooks/useSecurity';
 import useResource from '@/hooks/useResource';
 import snackbar from '@/services/SnackbarUtils';
 import { formatDate } from '@/utils/date';
@@ -16,7 +16,7 @@ import './index.scss';
 
 const Analysis = (): JSX.Element => {
   const { report, setReport } = useContext(ReportContext);
-  const { userDetails } = useContext(SecurityContext);
+  const { userDetails } = useSecurity();
   const { adminAccess } = useResource();
 
   const handleAnalysisStart = useCallback(async () => {

app/views/ReportView/components/Settings/components/Analysis/index.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
 
-import SecurityContext from '@/context/SecurityContext';
+import { SecurityContext } from '@/context/SecurityContext';
 import ReportToolbar from '@/components/ReportToolbar';
 import ReportSidebar from '@/components/ReportSidebar';
 import { useUser } from '@/context/UserContext';