(fix) Fixed dynamic loading of organizations and sources

moh-kenya · Feb 22, 2024 · 16f6dcc · 16f6dcc
1 parent 6313fae
commit 16f6dcc
Show file tree

Hide file tree

Showing 7 changed files with 2,135 additions and 1,439 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@mui/material-nextjs": "^5.15.6",
     "@mui/x-charts": "^6.19.3",
     "@mui/x-data-grid": "^6.19.2",
+    "js-cookie": "^3.0.5",
     "next": "14.1.0",
     "next-transpile-modules": "^10.0.1",
     "nextjs-progressbar": "^0.0.16",

diff --git a/pages/RequestConcept.js b/pages/RequestConcept.js
@@ -17,23 +17,26 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import SendIcon from "@mui/icons-material/Send";
 import { API_BASE_URL } from "./index";
 import { getSources } from "@/pages/api/sources";
-import { getOrganizations } from "@/pages/api/organizations";
+import { getUserOrganizations } from "@/pages/api/organizations";
+import Cookies from 'js-cookie';
+import { dataTypes, conceptClasses } from "@/utilities/data";
 
-function RequestConcept({ user }) {
-  const {
-    data: organisationSources,
-    isLoading: isLoadingOrganizationSources,
-    isError,
-    mutate,
-  } = getSources("MOH-KENYA");
+function RequestConcept() {
   const [sections, setSections] = useState([]);
   const [dataType, setDataType] = useState("");
+  const [userOrganization, setUserorganization] = useState("");
   const [organizationSource, setOrganizationSource] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const [success, setSuccess] = useState(false);
-  const { data: allOrganizations, isLoading: isLoadingOrganizations } =
-    getOrganizations();
+  const { data: userOrganizations, isLoading: isLoadingUserOrganizations } =
+    getUserOrganizations();
+  const {
+    data: organisationSources,
+    isLoading: isLoadingOrganizationSources,
+    isError,
+    mutate,
+  } = getSources(userOrganization);
 
   const addSection = () => {
     setSections([...sections, { id: sections.length + 1 }]);
@@ -47,56 +50,12 @@ function RequestConcept({ user }) {
   };
 
   const handleOrganizationSourceChange = (event) => {
-    setOrganizationSource(event.target.value)
-  }
-  const dataTypes = [
-    "Boolean",
-    "Coded",
-    "Complex",
-    "Date",
-    "Datetime",
-    "Document",
-    "None",
-    "Numeric",
-    "Rule",
-    "Structured-Numeric",
-    "Text",
-    "Time",
-  ];
+    setOrganizationSource(event.target.value);
+  };
 
-  const conceptClasses = [
-    "Test",
-    "Procedure",
-    "Drug",
-    "Diagnosis",
-    "Finding",
-    "Anatomy",
-    "Question",
-    "LabSet",
-    "MedSet",
-    "ConvSet",
-    "Misc",
-    "Symptom",
-    "Symptom/Finding",
-    "Specimen",
-    "Misc Order",
-    "Program",
-    "State",
-    "Medical supply",
-    "Code",
-    "Radiology/Imaging Procedure",
-    "Concept Class",
-    "Indicator",
-    "Drug form",
-    "Units of Measure",
-    "Frequency",
-    "Pharmacologic Drug Class",
-    "Workflow",
-    "Organism",
-    "none",
-    "Products",
-    "InteractSet",
-  ];
+  const handleUserOrganizationChange = (event) => {
+    setUserorganization(event.target.value);
+  };
 
   async function onSubmit(event) {
     event.preventDefault();
@@ -106,17 +65,13 @@ function RequestConcept({ user }) {
 
     try {
       const formData = new FormData(event.currentTarget);
-      formData.forEach((value, key) => {
-        console.log(`${key}: ${value}`);
-      });
 
       let body = {
         parent_concept_urls: [""],
         extras: {},
         external_id: "",
         concept_class: formData.get("conceptClass"),
         datatype: formData.get("dataType"),
-        url: "",
         names: [
           {
             name: formData.get("conceptName"),
@@ -141,11 +96,13 @@ function RequestConcept({ user }) {
       };
 
       const response = await fetch(
-        `${API_BASE_URL}/orgs/MOH-KENYA/sources/${formData.get(
-          "organizationSource"
-        )}/concepts/`,
+        `${API_BASE_URL}/orgs/${userOrganization}/sources/${organizationSource}/concepts/`,
         {
           method: "POST",
+          headers: {
+            "Authorization": "Bearer " + Cookies.get("token"),
+            "Content-Type": "application/json",
+          },
           body: JSON.stringify(body),
         }
       );
@@ -156,6 +113,7 @@ function RequestConcept({ user }) {
 
       setSuccess(true);
     } catch (error) {
+      console.log("---error", error)
       setError(error.message);
     } finally {
       setIsLoading(false);
@@ -212,7 +170,7 @@ function RequestConcept({ user }) {
               label="Concept Class"
             >
               {conceptClasses.map((type, ind) => (
-                <MenuItem key={ind} value="concept1">
+                <MenuItem key={ind} value={type}>
                   {type}
                 </MenuItem>
               ))}
@@ -241,22 +199,38 @@ function RequestConcept({ user }) {
           </FormControl>
           <FormControl
             variant="outlined"
+            S
             fullWidth
             margin="normal"
             required={true}
           >
-            <TextField
+            <InputLabel id="user-organization-label">Organization </InputLabel>
+            <Select
+              name="userOrganization"
+              labelId="user-organization-label"
+              onChange={handleUserOrganizationChange}
+              value={userOrganization}
               label="Organization"
-              name="organization"
-              variant="outlined"
-              margin="normal"
-              value={"WHO"}
-              fullWidth
-              required={true}
-            />
+            >
+              {isLoadingUserOrganizations ? (
+                <MenuItem>Loading...</MenuItem>
+              ) : userOrganizations?.length > 0 ? (
+                userOrganizations.map((type) => (
+                  <MenuItem key={type.id} value={type.id}>
+                    {type.name}
+                  </MenuItem>
+                ))
+              ) : (
+                <MenuItem>
+                  You do not belong to any organization. Please contact the
+                  admin.
+                </MenuItem>
+              )}
+            </Select>
           </FormControl>
           <FormControl
-            variant="outlined"S
+            variant="outlined"
+            S
             fullWidth
             margin="normal"
             required={true}
@@ -271,12 +245,16 @@ function RequestConcept({ user }) {
             >
               {isLoadingOrganizationSources ? (
                 <MenuItem>Loading...</MenuItem>
-              ) : (
+              ) : organisationSources?.length > 0 ? (
                 organisationSources.map((type) => (
-                  <MenuItem key={type.id} value={type.name}>
+                  <MenuItem key={type.id} value={type.id}>
                     {type.name}
                   </MenuItem>
                 ))
+              ) : (
+                <MenuItem>
+                  There no sources available.
+                </MenuItem>
               )}
             </Select>
           </FormControl>

diff --git a/pages/api/organizations.js b/pages/api/organizations.js
@@ -1,22 +1,42 @@
-
 import useSWR from "swr";
-import { API_BASE_URL } from '../index';
+import { API_BASE_URL } from "../index";
+import Cookies from 'js-cookie';
 
 export const getOrganizations = () => {
-    const fetcher = (url) => fetch(url).then((res) => res.json());
+  const fetcher = (url) => fetch(url).then((res) => res.json());
+
+  const { data, isLoading, isError, mutate } = useSWR(
+    `${API_BASE_URL}/orgs/?limit=1000&verbose=false&includeRetired=false`,
+    fetcher,
+    { revalidateOnFocus: false, revalidateOnReconnect: false }
+  );
+
+  return {
+    data,
+    isLoading,
+    isError,
+    mutate,
+  };
+};
+
+export const getUserOrganizations = () => {
+  const fetcher = (url) =>
+    fetch(url, {
+      headers: {
+        Authorization: "Bearer " + Cookies.get("token"),
+      },
+    }).then((res) => res.json());
 
-    const {
-        data,
-        isLoading,
-        isError,
-        mutate,
-    } = useSWR(
-        `${API_BASE_URL}/orgs/?limit=1000&verbose=false&includeRetired=false`,
-        fetcher,
-        { revalidateOnFocus: false, revalidateOnReconnect: false }
-    );
+  const { data, isLoading, isError, mutate } = useSWR(
+    `${API_BASE_URL}/user/orgs/`,
+    fetcher,
+    { revalidateOnFocus: false, revalidateOnReconnect: false }
+  );
 
-    return {
-        data, isLoading, isError, mutate
-    }
-}
+  return {
+    data,
+    isLoading,
+    isError,
+    mutate,
+  };
+};
diff --git a/utilities/data.js b/utilities/data.js
@@ -0,0 +1,48 @@
+export const dataTypes = [
+  "Boolean",
+  "Coded",
+  "Complex",
+  "Date",
+  "Datetime",
+  "Document",
+  "None",
+  "Numeric",
+  "Rule",
+  "Structured-Numeric",
+  "Text",
+  "Time",
+];
+
+export const conceptClasses = [
+  "Test",
+  "Procedure",
+  "Drug",
+  "Diagnosis",
+  "Finding",
+  "Anatomy",
+  "Question",
+  "LabSet",
+  "MedSet",
+  "ConvSet",
+  "Misc",
+  "Symptom",
+  "Symptom/Finding",
+  "Specimen",
+  "Misc Order",
+  "Program",
+  "State",
+  "Medical supply",
+  "Code",
+  "Radiology/Imaging Procedure",
+  "Concept Class",
+  "Indicator",
+  "Drug form",
+  "Units of Measure",
+  "Frequency",
+  "Pharmacologic Drug Class",
+  "Workflow",
+  "Organism",
+  "none",
+  "Products",
+  "InteractSet",
+];