Merge branch 'dev' of https://github.com/otienodominic/nhdd-frontend …

…into feature-PaginateUsers

components/footer.js

@@ -10,8 +10,7 @@ export default function Footer() {
                 backgroundColor: "#fcfcfc",
                 width: "100%",
                 height: "80px",
-                position: "fixed",
-                bottom: 0,
+                position: "absolute",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",

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",

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>

pages/about.js

@@ -27,7 +27,9 @@ function AboutKnhts() {
                         </div>
                     </div>
                 </div>
-                <Footer />
+                <div>
+                    <Footer />
+                </div>
             </div>
         </>
     );

pages/announcements.js

@@ -3,13 +3,6 @@ import Footer from '@/components/footer';
 import Head from 'next/head';
 
 function KnightsAnnouncements() {
-    useEffect(() => {
-        // Remove the scroll bar
-        document.body.style.overflow = 'hidden';
-        return () => {
-            document.body.style.overflow = 'auto';
-        };
-    }, []);
 
     return (
         <>
@@ -35,16 +28,10 @@ function KnightsAnnouncements() {
                         </div>
                     </div>
                 </div>
-                <Footer />
+                <div>
+                    <Footer />
+                </div>
             </div>
-            <style jsx global>{`
-                @media only screen and (max-width: 768px) {
-                    /* Adjust styles for smaller screens */
-                    body {
-                        overflow: auto; /* Restore scroll for smaller screens */
-                    }
-                }
-            `}</style>
         </>
     );
 }

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,
+  };
+};