feat: context for current org unit

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-10-04T17:54:29.387Z\n"
-"PO-Revision-Date: 2023-10-04T17:54:29.387Z\n"
+"POT-Creation-Date: 2023-10-05T15:41:49.037Z\n"
+"PO-Revision-Date: 2023-10-05T15:41:49.037Z\n"
 
 msgid "WHO privacy policy"
 msgstr ""
@@ -17,6 +17,12 @@ msgstr ""
 msgid "Log Out"
 msgstr ""
 
+msgid "No Organisation Units found"
+msgstr ""
+
+msgid "Search"
+msgstr ""
+
 msgid "Profile"
 msgstr ""
 

src/data/repositories/UserD2Repository.ts

@@ -33,6 +33,7 @@ export class UserD2Repository implements UserRepository {
         const countryOrgUnits: OrgUnit[] = [];
         const dataViewCountryOrgUnits: OrgUnit[] = [];
 
+        //TO DO : Fetch country level from datastore.
         const countryLevel = 2;
 
         filteredOrgUnits.forEach(orgUnit => {

src/webapp/components/orgunit-selector/OrgUnitSelector.tsx

@@ -4,6 +4,7 @@ import { MenuItem } from "material-ui";
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { useAppContext } from "../../contexts/app-context";
+import { useCurrentOrgUnitContext } from "../../contexts/current-org-unit-context/current-orgUnit-context";
 import SearchInput from "./SearchInput";
 
 interface OrgUnitProps {
@@ -14,10 +15,10 @@ export const OrgUnitSelector: React.FC<OrgUnitProps> = React.memo(() => {
     const {
         currentUser: { userOrgUnitsAccess },
     } = useAppContext();
+
+    const { currentOrgUnitAccess, changeCurrentOrgUnitAccess } = useCurrentOrgUnitContext();
     const [searchTerm, setSearchTerm] = useState<string>("");
-    const [orgUnitName, setOrgUnitName] = React.useState<string>(
-        userOrgUnitsAccess[0]?.orgUnitName ?? ""
-    );
+    const [orgUnitName, setOrgUnitName] = React.useState<string>(currentOrgUnitAccess.orgUnitName);
     const [isOpen, setIsOpen] = useState(false);
     const [filteredOrgUnits, setFilteredOrgUnits] = useState(userOrgUnitsAccess);
 
@@ -35,8 +36,8 @@ export const OrgUnitSelector: React.FC<OrgUnitProps> = React.memo(() => {
 
     const changeOrgUnit = (e: React.ChangeEvent<{ name?: string | undefined; value: unknown }>) => {
         if (e.target?.value) setOrgUnitName(e.target?.value as string);
-        // const orgUnitId = (e.currentTarget as HTMLInputElement).getAttribute("data-key");
-        // if (orgUnitId) changeCurrentOrgUnitAccess(orgUnitId);
+        const orgUnitId = (e.currentTarget as HTMLInputElement).getAttribute("data-key");
+        if (orgUnitId) changeCurrentOrgUnitAccess(orgUnitId);
     };
 
     const handleClose = () => {

src/webapp/components/top-app-bar/TopAppBar.tsx

@@ -88,15 +88,16 @@ export const TopAppBar: React.FC<TopAppBarProps> = ({ toggleShowMenu }) => {
                     >
                         <MenuIcon />
                     </IconButton>
+
                     <Box className={classes.title} />
 
                     <SelectContainer>
                         <IconButton aria-label="search" color="primary">
                             <LocationIcon />
                         </IconButton>
-
                         <OrgUnitSelector />
                     </SelectContainer>
+
                     <SelectContainer>
                         <AvatarContainer id="demo-positioned-button" onClick={handleClick}>
                             <Avatar style={{ backgroundColor: "#0099DE" }}>

src/webapp/contexts/current-org-unit-context/CurrentOrgUnitContextProvider.tsx

@@ -0,0 +1,38 @@
+import { PropsWithChildren, useCallback, useState } from "react";
+import { OrgUnitAccess } from "../../../domain/entities/User";
+import { useAppContext } from "../app-context";
+import { CurrentOrgUnitContext, defaultOrgUnitContextState } from "./current-orgUnit-context";
+
+export const CurrentOrgUnitContextProvider: React.FC<PropsWithChildren> = ({ children }) => {
+    const { currentUser } = useAppContext();
+
+    //Set default org unit to the first org unit in list
+    const defaultOrgUnit: OrgUnitAccess = currentUser.userOrgUnitsAccess[0]
+        ? currentUser.userOrgUnitsAccess[0]
+        : defaultOrgUnitContextState.currentOrgUnitAccess;
+    const [currentOrgUnitAccess, setCurrentOrgUnitAccess] = useState<OrgUnitAccess>(defaultOrgUnit);
+
+    const changeCurrentOrgUnitAccess = useCallback(
+        (updatedOrgUnit: string) => {
+            const currentOrgUnitAccess = currentUser.userOrgUnitsAccess.find(
+                ou => ou.orgUnitId === updatedOrgUnit
+            );
+            if (currentOrgUnitAccess) {
+                setCurrentOrgUnitAccess(currentOrgUnitAccess);
+
+            }
+        },
+        [currentUser.userOrgUnitsAccess]
+    );
+
+    return (
+        <CurrentOrgUnitContext.Provider
+            value={{
+                currentOrgUnitAccess,
+                changeCurrentOrgUnitAccess,
+            }}
+        >
+            {children}
+        </CurrentOrgUnitContext.Provider>
+    );
+};

src/webapp/contexts/current-org-unit-context/current-orgUnit-context.ts

@@ -0,0 +1,33 @@
+import { createContext, useContext } from "react";
+import { OrgUnitAccess } from "../../../domain/entities/User";
+
+export interface CurrentOrgUnitContextState {
+    currentOrgUnitAccess: OrgUnitAccess;
+    changeCurrentOrgUnitAccess: (orgUnit: string) => void;
+}
+
+export const defaultOrgUnitContextState = {
+    currentOrgUnitAccess: {
+        orgUnitId: "",
+        orgUnitName: "",
+        orgUnitShortName: "",
+        orgUnitCode: "",
+        orgUnitPath: "",
+        readAccess: false,
+        captureAccess: false,
+    },
+    changeCurrentOrgUnitAccess: () => {},
+};
+
+export const CurrentOrgUnitContext = createContext<CurrentOrgUnitContextState>(
+    defaultOrgUnitContextState
+);
+
+export function useCurrentOrgUnitContext() {
+    const context = useContext(CurrentOrgUnitContext);
+    if (context) {
+        return context;
+    } else {
+        throw new Error("Current Org Unit Context uninitialized");
+    }
+}

src/webapp/pages/app/App.tsx

@@ -8,6 +8,7 @@ import { appConfig } from "../../../app-config";
 import { CompositionRoot } from "../../../CompositionRoot";
 import Share from "../../components/share/Share";
 import { AppContext, AppContextState } from "../../contexts/app-context";
+import { CurrentOrgUnitContextProvider } from "../../contexts/current-org-unit-context/CurrentOrgUnitContextProvider";
 import { Router } from "../Router";
 import "./App.css";
 import muiThemeLegacy from "./themes/dhis2-legacy.theme";
@@ -51,7 +52,9 @@ function App(props: AppProps) {
 
                     <div id="app" className="content">
                         <AppContext.Provider value={appContext}>
-                            <Router />
+                            <CurrentOrgUnitContextProvider>
+                                <Router />
+                            </CurrentOrgUnitContextProvider>
                         </AppContext.Provider>
                     </div>
 

src/webapp/pages/landing/LandingPage.tsx

@@ -1,10 +1,13 @@
 import { Typography } from "@material-ui/core";
 import React from "react";
 import styled from "styled-components";
+import { useCurrentOrgUnitContext } from "../../contexts/current-org-unit-context/current-orgUnit-context";
 
 export const LandingPage: React.FC = React.memo(() => {
+    const { currentOrgUnitAccess } = useCurrentOrgUnitContext();
     return (
         <Container>
+            <p>Current Org Unit (provided by context) : {currentOrgUnitAccess.orgUnitName}</p>
             <Typography variant="h6">Coming Soon! - AMR Surveys Landing Page</Typography>
         </Container>
     );