🔥 Fix org

apps/webapp/src/components/configuration/components/AddLinkedAccount.tsx

@@ -52,10 +52,11 @@ const AddLinkedAccount = () => {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault(); // Prevent default form submission
+    //console.log("submitting with project "+ selectedProject.id_project);
     mutate({ 
       linked_user_origin_id: linkedUserIdentifier, 
-      alias: selectedOrganisation.value,
-      id_project: selectedProject
+      alias: selectedOrganisation.id_organisation,
+      id_project: selectedProject.id_project
     });
     setShowNewLinkedUserDialog({open: false})  
   };

apps/webapp/src/components/shared/team-switcher.tsx

@@ -43,10 +43,11 @@ import useProjectMutation from "@/hooks/mutations/useProjectMutation"
 import useOrganisationMutation from "@/hooks/mutations/useOrganisationMutation"
 import { useEffect, useState } from "react"
 import useProjectStore from "@/state/projectStore"
-import useOrganisationStore, { organisations } from "@/state/organisationStore"
+import useOrganisationStore from "@/state/organisationStore"
 import useProfileStore from "@/state/profileStore"
 import useProjects from "@/hooks/useProjects"
 import { Skeleton } from "../ui/skeleton"
+import useOrganisations from "@/hooks/useOrganisations"
 
 type PopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverTrigger>
 
@@ -67,21 +68,32 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
   const [orgName, setOrgName] = useState('');
   const [projectName, setProjectName] = useState('');
 
+  //TODO: it loads endlessly
+  const { data : orgs, isLoading: isloadingOrganisations, error: isOrgErr } = useOrganisations();
   const { data : projects, isLoading: isloadingProjects } = useProjects();
 
 
   const { selectedProject, setSelectedProject } = useProjectStore();
   const { selectedOrganisation, setSelectedOrganisation } = useOrganisationStore();
 
 
+  console.log("error is "+ isOrgErr);
+  console.log("loading is "+ isloadingOrganisations);
+  console.log("data is "+ orgs);
+
+
   const { profile } = useProfileStore();
 
   useEffect(()=>{
     if(projects){
       setSelectedProject(projects[0]);
     }
-  },[projects, setSelectedProject])
-
+    if(orgs){
+      console.log("dddd "+ orgs[0].id_organization);
+      setSelectedOrganisation(orgs[0]);
+    }
+  },[projects,orgs, setSelectedProject])
+
 
   const handleOpenChange = (open: boolean) => {
     setShowNewDialog(prevState => ({ ...prevState, open }));
@@ -171,34 +183,41 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                   }
                 </CommandGroup>
                 <CommandGroup key={"organisations"} heading={"Organisations"}>
-                  {organisations.map((organisation) => (
+                  {!isloadingOrganisations && orgs ? orgs.map((org) => (
                     <CommandItem
-                      key={organisation.value}
+                      key={org.id_organization}
                       onSelect={() => {
-                        setSelectedOrganisation(organisation)
+                        setSelectedOrganisation(org)
                         setOpen(false)
                       }}
                       className="text-sm"
                     >
                       <Avatar className="mr-2 h-5 w-5">
                         <AvatarImage
-                          src={`https://avatar.vercel.sh/${organisation.value}.png`}
-                          alt={organisation.label}
+                          src={`https://avatar.vercel.sh/${org.name}.png`}
+                          alt={org.name}
                           className="grayscale"
                         />
                         <AvatarFallback>SC</AvatarFallback>
                       </Avatar>
-                      {organisation.label}
+                      {org.name}
                       <CheckIcon
                         className={cn(
                           "ml-auto h-4 w-4",
-                          selectedOrganisation.value === organisation.value
+                          selectedOrganisation?.name === org.name
                             ? "opacity-100"
                             : "opacity-0"
                         )}
                       />
+                    </CommandItem>))
+                  : 
+                    <CommandItem
+                      key={"0"}
+                      className="text-sm"
+                    >
+                      <Skeleton className="w-[100px] h-[20px] rounded-md" />
                     </CommandItem>
-                  ))}
+                  }
                 </CommandGroup>
 
             </CommandList>

apps/webapp/src/hooks/useOrganisations.tsx

@@ -2,16 +2,21 @@ import config from '@/utils/config';
 import { useQuery } from '@tanstack/react-query';
 import { organizations as Organisation } from 'api';
 
+const fetchOrgs = async (): Promise<Organisation[]> => {
+  const response = await fetch(`${config.API_URL}/organisations`);
+  const a = await response.json();
+  console.log(a[0].id_organization);
+
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+}
+
 const useOrganisations = () => {
   return useQuery({
-    queryKey: ['organisations'], 
-    queryFn: async (): Promise<Organisation[]> => {
-      const response = await fetch(`${config.API_URL}/organisations`);
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
-        }
-        return response.json();
-    }
+    queryKey: ['orgs'], 
+    queryFn: fetchOrgs
   });
 };
 export default useOrganisations;

apps/webapp/src/state/organisationStore.ts

@@ -1,25 +1,14 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { create } from 'zustand';
 
-export const organisations = [
-  {
-    label: "Acme Inc.",
-    value: "acme-inc",
-  }
-];
-
-interface OrganisationT {
-  label: string;
-  value: string;
-}
-
 interface OrganisationState {
-  selectedOrganisation: OrganisationT;
-  setSelectedOrganisation: (org: OrganisationT) => void;
+  selectedOrganisation: any;
+  setSelectedOrganisation: (org: any) => void;
 }
 
 const useOrganisationStore = create<OrganisationState>()((set) => ({
-  selectedOrganisation: organisations[0],
-  setSelectedOrganisation: (org: OrganisationT) => set({ selectedOrganisation: org }),
+  selectedOrganisation: null,
+  setSelectedOrganisation: (org) => set({ selectedOrganisation: org }),
 }));
 
 export default useOrganisationStore;