Merge pull request #976 from deji2ghost/switchOrganization

feat: switch between organization and  Api moved and consumed on the …

src/actions/switchOrganization.ts

@@ -0,0 +1,23 @@
+"use server";
+
+import axios from "axios";
+
+import { auth } from "~/lib/auth";
+import { getApiUrl } from "./getApiUrl";
+
+export const getCurrentOrgApi = async ({ orgId }: { orgId: string }) => {
+  const payload = { isActive: true };
+  const apiUrl = await getApiUrl();
+  const session = await auth();
+  const response = await axios.put(
+    `${apiUrl}/api/v1/users/organisations/${orgId}`,
+    payload,
+    {
+      headers: {
+        Authorization: `Bearer ${session?.access_token}`,
+      },
+    },
+  );
+  return response.data;
+};
+//  `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9zaWQiOiIwZjc4ZGExMy0xYTc2LTQyYWItOTg0My1hNTBmNDY2ODBiNjUiLCJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9lbWFpbGFkZHJlc3MiOiJkZWppd2lsbGlhbXM5QGdtYWlsLmNvbSIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJEZWppIiwiZXhwIjoxNzIzNzA4ODUzfQ.qm8sOMQ-EMkyE8no_Dz22UD5N0qqn3nImjvkVWG1UK4`

src/app/dashboard/(user-dashboard)/_components/layout/navbar/organisation-switcher.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 
+import { getCurrentOrgApi } from "~/actions/switchOrganization";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 import { Button } from "~/components/ui/button";
 import {
@@ -22,13 +23,22 @@ export const OrganisationSwitcher = () => {
     "",
   );
 
-  const { organizations, isLoading } = useOrgContext();
+  const { organizations, isLoading, switchOrganization } = useOrgContext();
+  // eslint-disable-next-line unicorn/consistent-function-scoping
 
   useEffect(() => {
     if (!currentOrgId && organizations.length > 0) {
       setCurrentOrgId(organizations[0].organisation_id);
+      switchOrganization(organizations[0].organisation_id);
     }
-  }, [currentOrgId, organizations, setCurrentOrgId]);
+    // console.log(organizations);
+  }, [currentOrgId, organizations, setCurrentOrgId, switchOrganization]);
+
+  const handleOrgChange = (currentOrg: string) => {
+    setCurrentOrgId(currentOrg);
+    switchOrganization(currentOrg);
+    getCurrentOrgApi({ orgId: currentOrg });
+  };
 
   const currentOrg =
     organizations.length > 0
@@ -42,9 +52,7 @@ export const OrganisationSwitcher = () => {
       <CreateOrganization isOpen={isOpen} setIsOpen={setIsOpen} />
       <Select
         defaultValue={currentOrgId}
-        onValueChange={(value) => {
-          setCurrentOrgId(value);
-        }}
+        onValueChange={(value) => handleOrgChange(value)}
       >
         <SelectTrigger
           aria-label="Select organisation"

src/contexts/orgContext.tsx

@@ -2,6 +2,7 @@
 
 import React, {
   createContext,
+  useCallback,
   useContext,
   useEffect,
   useLayoutEffect,
@@ -39,6 +40,7 @@ interface OrgContextProperties {
   updateOpen: React.Dispatch<React.SetStateAction<boolean>>;
   isActionModal: boolean;
   setIsActionModal: React.Dispatch<React.SetStateAction<boolean>>;
+  switchOrganization: (orgId: string) => void;
 }
 
 export const OrgContext = createContext({} as OrgContextProperties);
@@ -51,7 +53,7 @@ const OrgContextProvider = ({ children }: { children: React.ReactNode }) => {
     DashboardData | undefined
   >();
   const [products, setProducts] = useState<Product[]>([]);
-  const [org_id] = useLocalStorage<string>("current_orgid", "");
+  const [org_id, setOrgId] = useLocalStorage<string>("current_orgid", "");
   const [selectedProduct, setSelectedProduct] = useState<string>("");
   const [isNewModal, setIsNewModal] = useState(false);
   const [isDelete, setIsDelete] = useState(false);
@@ -62,6 +64,13 @@ const OrgContextProvider = ({ children }: { children: React.ReactNode }) => {
 
   const isAnyModalOpen = isNewModal || isDelete || isOpen || isActionModal;
 
+  const switchOrganization = useCallback(
+    (orgId: string) => {
+      setOrgId(orgId);
+    },
+    [setOrgId],
+  );
+
   useLayoutEffect(() => {
     if (organizations.length === 0) {
       startTransition(() => {
@@ -97,7 +106,7 @@ const OrgContextProvider = ({ children }: { children: React.ReactNode }) => {
         });
       });
     }
-  }, []);
+  }, [organizations]);
 
   useEffect(() => {
     if (userOrg.length > 0) {
@@ -113,7 +122,7 @@ const OrgContextProvider = ({ children }: { children: React.ReactNode }) => {
         ...uniqueOrgs,
       ]);
     }
-  }, []);
+  }, [userOrg, organizations]);
 
   useEffect(() => {
     document.body.style.overflow = isAnyModalOpen ? "hidden" : "auto";
@@ -162,6 +171,7 @@ const OrgContextProvider = ({ children }: { children: React.ReactNode }) => {
       setIsActionModal,
       active_filter,
       setActive_filter,
+      switchOrganization,
     }),
     [
       isLoading,
@@ -175,6 +185,7 @@ const OrgContextProvider = ({ children }: { children: React.ReactNode }) => {
       isOpen,
       isActionModal,
       active_filter,
+      switchOrganization,
     ],
   );