adding cookie storage for current organization.

src/components/wrappers/Organization/OrganizationCombobox.tsx

@@ -1,10 +1,11 @@
 "use client"
 
-import {useEffect} from "react";
+import {useEffect, useState} from "react";
 
 import {ComboBox} from "@/components/wrappers/combobox";
 import {Organization} from "@prisma/client";
 import {useStore} from "@/state-management/store";
+import {getCurrentOrganizationSlug, setCurrentOrganizationSlug} from "@/features/dashboard/organization";
 
 export type organizationComboBoxProps = {
     organizations: Organization[]
@@ -14,33 +15,50 @@ export type organizationComboBoxProps = {
 
 export function OrganizationComboBox(props: organizationComboBoxProps) {
 
-    const {organizationId, moveToAnotherOrganization} = useStore((state) => state);
+    // const {organizationId, moveToAnotherOrganization} = useStore((state) => state);
+
+    const [organizationSlug, setOrganizationSlug] = useState<string>()
 
     const {organizations, defaultOrganization} = props
 
     useEffect(() => {
-        if (organizationId == "") {
+        getCurrentOrganizationSlug().then(slug => {
-            moveToAnotherOrganization(defaultOrganization.id)
+
-        } else {
+            console.log("sssssss", slug)
-            const organization = organizations.find(organization => organization.id === organizationId)
+            if (slug == "") {
-            if (!organization) moveToAnotherOrganization(defaultOrganization.id)
+                setOrganizationSlug(defaultOrganization.slug)
-        }
+                setCurrentOrganizationSlug(defaultOrganization.slug)
-    }, [organizationId])
+            } else {
+                setOrganizationSlug(slug)
+                const organization = organizations.find(organization => organization.slug === slug)
+                if (!organization) {
+                    setOrganizationSlug(defaultOrganization.slug)
+                    setCurrentOrganizationSlug(defaultOrganization.slug)
+                }
+            }
+        })
+
+    }, [organizationSlug])
 
     const values = organizations.map(organization => {
         return ({
-            value: organization.id,
+            value: organization.slug,
             label: organization.name,
         })
     })
 
-    const onValueChange = async (id: string) => moveToAnotherOrganization(id)
+    const onValueChange = (slug: string) => {
+        if (organizationSlug !== slug) {
+            setOrganizationSlug(slug)
+            setCurrentOrganizationSlug(slug)
+        }
+    }
 
     return (
         <ComboBox
-            sideBar={true}
+            sideBar
             values={values}
-            defaultValue={organizationId}
+            defaultValue={organizationSlug}
             onValueChange={onValueChange}/>
     )
 }

src/components/wrappers/combobox.tsx

@@ -21,6 +21,7 @@ import {
 } from "@/components/ui/popover"
 import {FormControl} from "@/components/ui/form";
 import {SidebarMenuButton} from "@/components/ui/sidebar";
+import {Separator} from "@/components/ui/separator";
 
 export type comboBoxProps = {
     values: Array<{ value: string, label: string }>
@@ -33,7 +34,7 @@ export type comboBoxProps = {
 
 export function ComboBox(props: comboBoxProps) {
 
-    const {values: choices, defaultValue: defaultChoice = "", onValueChange, searchField = false} = props;
+    const {values: choices, defaultValue: defaultChoice = "", onValueChange, searchField = false, sideBar = false} = props;
 
     const [value, setValue] = useState<string>()
 
@@ -46,7 +47,7 @@ export function ComboBox(props: comboBoxProps) {
     return (
         <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
-                {props.sideBar ?
+                {sideBar ?
                     <SidebarMenuButton>
                         {value
                             ? choices.find((choice) => choice.value === value)?.label
@@ -69,10 +70,7 @@ export function ComboBox(props: comboBoxProps) {
 
 
             </PopoverTrigger>
-            <PopoverContent
+            <PopoverContent className="p-0 popover-content-width-full">
-
-                className="p-0 popover-content-width-full"
-            >
                 <Command>
                     {searchField ? <CommandInput placeholder="Search choice..." className="h-9"/> : null}
                     <CommandList>
@@ -100,6 +98,12 @@ export function ComboBox(props: comboBoxProps) {
                         </CommandGroup>
                     </CommandList>
                 </Command>
+                <Separator/>
+                {sideBar ?
+                    <SidebarMenuButton>
+                        + Create new organization
+                    </SidebarMenuButton>
+                    : null}
             </PopoverContent>
         </Popover>
     )

src/features/dashboard/organization.ts

@@ -0,0 +1,14 @@
+'use server';
+
+import {cookies} from 'next/headers';
+
+
+const COOKIE_NAME = 'PORTABASE_ORGANIZATION_SLUG';
+
+export async function getCurrentOrganizationSlug() {
+    return (await cookies()).get(COOKIE_NAME)?.value || "default";
+}
+
+export async function setCurrentOrganizationSlug(slug: string) {
+    return (await cookies()).set(COOKIE_NAME, slug).get(COOKIE_NAME)?.value;
+}