OP-363 | Check permissions

src/components/accessories/patientOPD/patientOPD.tsx

@@ -1,14 +1,17 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent } from "react";
+import { usePermission } from "../../../libraries/permissionUtils/usePermission";
+import { PermissionDenied } from "../permissionDenied/PermissionDenied";
 import { initialFields } from "./consts";
 import PatientOPDForm from "./patientOPDForm/PatientOPDForm";
 
 const PatientOPD: FunctionComponent = () => {
+  const canRead = usePermission("odp.read");
 
   const onSubmit = (opd: any) => {
     console.log(opd);
   };
 
-  return (
+  return canRead ? (
     <div className="patientSummary">
       <PatientOPDForm
         fields={initialFields}
@@ -18,7 +21,9 @@ const PatientOPD: FunctionComponent = () => {
         isLoading={false}
       />
     </div>
+  ) : (
+    <PermissionDenied />
   );
-}
+};
 
-export default PatientOPD;
+export default PatientOPD;

src/components/accessories/patientSummary/PatientSummary.tsx

@@ -1,15 +1,20 @@
-import React, { FunctionComponent } from 'react';
-import { patientSummaryTabs } from "./tabsConfig";
-import Tabs from '../tabs/Tabs';
+import React, { FunctionComponent } from "react";
+import { usePermission } from "../../../libraries/permissionUtils/usePermission";
+import { PermissionDenied } from "../permissionDenied/PermissionDenied";
+import Tabs from "../tabs/Tabs";
 import "./styles.scss";
+import { patientSummaryTabs } from "./tabsConfig";
 
 const PatientSummary: FunctionComponent = () => {
+  const canRead = usePermission("summary.read");
 
-  return (
+  return canRead ? (
     <div className="patientSummary">
       <Tabs config={patientSummaryTabs} />
     </div>
+  ) : (
+    <PermissionDenied />
   );
-}
+};
 
-export default PatientSummary;
+export default PatientSummary;

src/components/accessories/patientTriage/PatientTriage.tsx

@@ -1,22 +1,25 @@
-import React, { FunctionComponent } from 'react';
-import PatientTriageForm from './patientTriageForm/PatientTriageForm';
-import PatientTriageTable from './patientTriageTable/PatientTriageTable';
+import React, { FunctionComponent } from "react";
+import PatientTriageForm from "./patientTriageForm/PatientTriageForm";
+import PatientTriageTable from "./patientTriageTable/PatientTriageTable";
 import { initialFields } from "./consts";
 import "./styles.scss";
+import { usePermission } from "../../../libraries/permissionUtils/usePermission";
+import { PermissionDenied } from "../permissionDenied/PermissionDenied";
 
 const PatientTriage: FunctionComponent = () => {
+  const canRead = usePermission("examination.read");
 
   const onSubmit = (triage: any) => {
     console.log(triage);
 
     /* TODO:
-    *     1. Save Triage using Redux
-    *     2. Reset the form
-    *     3. Update the table
-    */
+     *     1. Save Triage using Redux
+     *     2. Reset the form
+     *     3. Update the table
+     */
   };
 
-  return (
+  return canRead ? (
     <div className="patientTriage">
       <PatientTriageForm
         fields={initialFields}
@@ -27,7 +30,9 @@ const PatientTriage: FunctionComponent = () => {
       />
       <PatientTriageTable />
     </div>
+  ) : (
+    <PermissionDenied />
   );
-}
+};
 
-export default PatientTriage;
+export default PatientTriage;

src/components/accessories/permissionDenied/PermissionDenied.tsx

@@ -0,0 +1,4 @@
+import React, { FunctionComponent } from "react";
+
+// TODO: Add style and a proper message
+export const PermissionDenied: FunctionComponent = () => <>Permission denied</>;

src/libraries/permissionUtils/usePermission.ts

@@ -0,0 +1,10 @@
+import { useSelector } from "react-redux";
+import { IState, TPermission } from "../../types";
+
+export const usePermission = (name: TPermission): boolean => {
+  const permissions = useSelector<IState, string[]>(
+    (state) => state.main.me?.data?.permission || []
+  );
+
+  return Boolean(permissions.find((permission: string) => permission === name));
+};