feat(init): add permissions for routes

src/Permissions.ts

@@ -0,0 +1,6 @@
+enum Permissions {
+  ReadPatients = 'read:patients',
+  WritePatients = 'write:patients'
+}
+
+export default Permissions

src/components/PrivateRoute.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Route, Redirect } from 'react-router-dom'
+
+const PrivateRoute = ({ component, isAuthenticated, ...rest }: any) => {
+  const routeComponent = (props: any) =>
+    isAuthenticated ? React.createElement(component, props) : <Redirect to={{ pathname: '/' }} />
+  return <Route {...rest} render={routeComponent} />
+}
+
+export default PrivateRoute

src/containers/HospitalRun.tsx

@@ -2,15 +2,18 @@ import React from 'react'
 import { Switch, Route } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import Sidebar from 'components/Sidebar'
+import Permissions from 'Permissions'
 import Dashboard from './Dashboard'
 import Patients from './Patients'
 import NewPatient from './NewPatient'
 import ViewPatient from './ViewPatient'
 import { RootState } from '../store/store'
 import Navbar from '../components/Navbar'
+import PrivateRoute from '../components/PrivateRoute'
 
 const HospitalRun = () => {
   const { title } = useSelector((state: RootState) => state.title)
+  const { permissions } = useSelector((state: RootState) => state.user)
   return (
     <div>
       <Navbar />
@@ -24,9 +27,24 @@ const HospitalRun = () => {
             <div>
               <Switch>
                 <Route exact path="/" component={Dashboard} />
-                <Route exact path="/patients" component={Patients} />
-                <Route exact path="/patients/new" component={NewPatient} />
-                <Route exact path="/patients/:id" component={ViewPatient} />
+                <PrivateRoute
+                  isAuthenticated={permissions.includes(Permissions.ReadPatients)}
+                  exact
+                  path="/patients"
+                  component={Patients}
+                />
+                <PrivateRoute
+                  isAuthenticated={permissions.includes(Permissions.WritePatients)}
+                  exact
+                  path="/patients/new"
+                  component={NewPatient}
+                />
+                <PrivateRoute
+                  isAuthenticated={permissions.includes(Permissions.ReadPatients)}
+                  exact
+                  path="/patients/:id"
+                  component={ViewPatient}
+                />
               </Switch>
             </div>
           </main>

src/slices/user-slice.ts

@@ -0,0 +1,24 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import Permissions from 'Permissions'
+
+interface UserState {
+  permissions: Permissions[]
+}
+
+const initialState: UserState = {
+  permissions: [Permissions.ReadPatients, Permissions.WritePatients],
+}
+
+const userSlice = createSlice({
+  name: 'user',
+  initialState,
+  reducers: {
+    fetchPermissions(state, { payload }: PayloadAction<Permissions[]>) {
+      state.permissions = payload
+    },
+  },
+})
+
+export const { fetchPermissions } = userSlice.actions
+
+export default userSlice.reducer

src/store/store.ts

@@ -5,11 +5,13 @@ import { createLogger } from 'redux-logger'
 import patient from '../slices/patient-slice'
 import patients from '../slices/patients-slice'
 import title from '../slices/title-slice'
+import user from '../slices/user-slice'
 
 const reducer = combineReducers({
   patient,
   patients,
   title,
+  user,
 })
 
 const store = configureStore({