Use cookies instead localstorage (#358)

frontend/next.config.js

@@ -4,6 +4,9 @@
 const nextConfig = {
   distDir: "build",
   swcMinify: true,
+  experimental: {
+    serverActions: true,
+  },
 };
 
 module.exports = nextConfig;

frontend/src/app/page.tsx

@@ -1,13 +1,29 @@
-import OrganisationSelector from "@/components/OrganisationSelector";
+import OrganisationButton from "@/components/OrganisationButton";
 import { fetchWithToken } from "@/data/apiCallsWithToken";
 import { Organisation } from "@/types";
+import { cookies } from "next/headers";
+import Link from "next/link";
+import { redirect } from "next/navigation";
 
 export default async function Root() {
   const orgs = (await fetchWithToken<Organisation[]>("organisations")) ?? [];
 
+  const cookieStore = cookies();
+  const chosenOrg = cookieStore.get("chosenOrg")?.value;
+
+  if (orgs.find((o) => o.urlKey == chosenOrg)) {
+    redirect(`/${chosenOrg}/bemanning`);
+  }
+
   return (
     <ul className="main h-screen flex items-center justify-center gap-4">
-      <OrganisationSelector orgs={orgs} />
+      {orgs.map((o) => (
+        <li key={o.urlKey}>
+          <Link href={`/${o.urlKey}/bemanning`}>
+            <OrganisationButton org={o} />
+          </Link>
+        </li>
+      ))}
     </ul>
   );
 }

frontend/src/components/NavBar/NavBarOrganisationDropdown.tsx

@@ -5,6 +5,7 @@ import { Organisation } from "@/types";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import { Check, ChevronDown, ChevronUp } from "react-feather";
+import { setOrganisationInCookie } from "../../hooks/setOrganisationInCookies";
 
 export default function NavBarOrganisationDropdown({
   organisations,
@@ -54,9 +55,7 @@ export default function NavBarOrganisationDropdown({
                   key={index}
                   className="hover:bg-primary/10 px-3 py-2 rounded flex flex-row justify-between items-center "
                   href={`/${organisation.urlKey}/bemanning`}
-                  onClick={() =>
-                    localStorage.setItem("chosenUrlKey", organisation.urlKey)
-                  }
+                  onClick={() => setOrganisationInCookie(organisation.urlKey)}
                 >
                   <p className="h-6 flex items-center normal-semibold text-primary">
                     {organisation.name}

frontend/src/components/OrganisationButton.tsx

@@ -0,0 +1,15 @@
+"use client";
+import { Organisation } from "@/types";
+import ActionButton from "./Buttons/ActionButton";
+import { setOrganisationInCookie } from "../hooks/setOrganisationInCookies";
+
+export default function OrganisationButton({ org }: { org: Organisation }) {
+  return (
+    <ActionButton
+      variant="secondary"
+      onClick={() => setOrganisationInCookie(org.urlKey)}
+    >
+      {org.name}
+    </ActionButton>
+  );
+}

frontend/src/hooks/setOrganisationInCookies.ts

@@ -0,0 +1,8 @@
+"use server";
+
+import { cookies } from "next/headers";
+
+export async function setOrganisationInCookie(urlKey: string) {
+  const cookieStore = cookies();
+  cookieStore.set("chosenOrg", urlKey);
+}