Update navigation to accept the slug as part of the URL

app/[slug]/page.tsx

@@ -1,12 +1,15 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
+'use client'; 
 import Link from 'next/link';
 import styles from '@/app/ui/home.module.css';
 import LoginForm from '@/app/ui/components/login-form';
 
 
 
-export default function Page() {
+export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
+
+  localStorage.setItem('slug', (await params).slug)
   return (
     <main className="flex min-h-screen flex-col p-6">
       <div className="flex flex-row">

app/api/authentication.tsx

@@ -1,11 +1,11 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
-import { getCsrfToken } from '@/app/lib/utils';
+import { getCsrfToken, getSlug } from '@/app/lib/utils';
 import { User } from '@/app/lib/definitions';
 
 export function login({ email, password, onLogin }: { email: string, password: string, onLogin: (user: User) => void }) {
   console.log(email, password);
-  return fetch("/api/default/users/sign_in", {
+  return fetch(`/api/${getSlug()}/users/sign_in`, {
     method: 'POST',
     body: JSON.stringify({ user: { email, password } }),
     headers: {
@@ -26,7 +26,7 @@ export function login({ email, password, onLogin }: { email: string, password: s
 }
 
 export function logout({ onLogout }: { onLogout: () => void }) {
-  fetch("/api/default/users/sign_out", {
+  fetch(`/api/${getSlug()}/users/sign_out`, {
     method: 'DELETE',
     headers: {
       'X-CSRF-TOKEN': getCsrfToken(),

app/api/expenses.tsx

@@ -1,10 +1,10 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { Expense } from '@/app/lib/definitions';
-import { getCsrfToken } from '@/app/lib/utils';
+import { getCsrfToken, getSlug } from '@/app/lib/utils';
 
 export function loadExpenses(onLoad?: (expenses: Expense[]) => void) {
-  fetch("/api/default/expenses")
+  fetch(`/api/${getSlug()}/expenses`)
     .then((response) => response.json())
     .then((data) => {
       onLoad && onLoad(data.map((record: any) => {
@@ -21,7 +21,7 @@ export function loadExpenses(onLoad?: (expenses: Expense[]) => void) {
 }
 
 export function updateExpense(expense: Expense) {
-  fetch(`/api/default/expenses/${expense.id}`,
+  fetch(`/api/${getSlug()}/expenses/${expense.id}`,
     {
       method: 'PUT',
       body: JSON.stringify({

app/api/groups.tsx

@@ -1,9 +1,10 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { Group } from '@/app/lib/definitions';
+import { getSlug } from '../lib/utils';
 
 export function loadGroups(onLoad?: (groups: Group[]) => void) {
-  fetch("/api/default/groups")
+  fetch(`/api/${getSlug()}/groups`)
     .then((response) => response.json())
     .then((data) => {
       onLoad && onLoad(data.map((record: any) => {

app/api/guests.tsx

@@ -1,10 +1,10 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { Guest } from '@/app/lib/definitions';
-import { getCsrfToken } from '@/app/lib/utils';
+import { getCsrfToken, getSlug } from '@/app/lib/utils';
 
 export function loadGuests(onLoad?: (guests: Guest[]) => void) {
-  fetch("/api/default/guests")
+  fetch(`/api/${getSlug()}/guests`)
     .then((response) => response.json())
     .then((data) => {
       onLoad && onLoad(data.map((record: any) => {
@@ -22,7 +22,7 @@ export function loadGuests(onLoad?: (guests: Guest[]) => void) {
 };
 
 export function updateGuest(guest: Guest) {
-  return fetch(`/api/default/guests/${guest.id}`,
+  return fetch(`/api/${getSlug()}/guests/${guest.id}`,
     {
       method: 'PUT',
       body: JSON.stringify({ guest: { name: guest.name, status: guest.status } }),
@@ -35,7 +35,7 @@ export function updateGuest(guest: Guest) {
 }
 
 export function createGuest(name: string, group_id: string, onCreate?: () => void) {
-  fetch("/api/default/guests", {
+  fetch(`/api/${getSlug()}/guests`, {
     method: 'POST',
     body: JSON.stringify({ name: name, group_id: group_id }),
     headers: {
@@ -51,7 +51,7 @@ export function createGuest(name: string, group_id: string, onCreate?: () => voi
 }
 
 export function destroyGuest(guest: Guest, onDestroy?: () => void) {
-  fetch(`/api/default/guests/${guest.id}`, {
+  fetch(`/api/${getSlug()}/guests/${guest.id}`, {
     method: 'DELETE',
     headers: {
       'X-CSRF-TOKEN': getCsrfToken(),

app/api/tableSimulations.tsx

@@ -1,9 +1,10 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { TableArrangement } from '@/app/lib/definitions';
+import { getSlug } from '../lib/utils';
 
 export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangement[]) => void) {
-  fetch('/api/default/tables_arrangements')
+  fetch(`/api/${getSlug()}/tables_arrangements`)
     .then((response) => response.json())
     .then((data) => {
       onLoad && onLoad(data.map((record: any) => {

app/lib/utils.ts

@@ -6,3 +6,5 @@ export const getCsrfToken = () => {
       .find((row) => row.startsWith("csrf-token"))
       ?.split("=")[1] || 'unknown';
 }
+
+export const getSlug = () => localStorage.getItem('slug') || 'default';

app/ui/components/login-form.tsx

@@ -9,6 +9,7 @@ import { useState, useEffect } from 'react';
 import { classNames } from './button';
 import { useRouter } from 'next/navigation'
 import { User } from '../../lib/definitions';
+import { getSlug } from '@/app/lib/utils';
 
 export default function LoginForm() {
   const [email, setEmail] = useState("");
@@ -40,7 +41,7 @@ export default function LoginForm() {
           password: password,
           onLogin: (user) => {
             setCurrentUser(user);
-            router.push('/dashboard')
+            router.push(`${getSlug()}/dashboard`)
           }
         })}>
         Sign in

app/ui/dashboard/nav-links.tsx

@@ -10,13 +10,14 @@ import {
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import clsx from 'clsx';
+import { getSlug } from '@/app/lib/utils';
 
 // Map of links to display in the side navigation.
 // Depending on the size of the application, this would be stored in a database.
 const links = [
-  { name: 'Guests', href: '/dashboard/guests', icon: UserGroupIcon },
-  { name: 'Expenses', href: '/dashboard/expenses', icon: BanknotesIcon },
-  { name: 'Table distributions', href: '/dashboard/tables', icon: RectangleGroupIcon },
+  { name: 'Guests', href: `/${getSlug()}/dashboard/guests`, icon: UserGroupIcon },
+  { name: 'Expenses', href: `/${getSlug()}/dashboard/expenses`, icon: BanknotesIcon },
+  { name: 'Table distributions', href: `/${getSlug()}/dashboard/tables`, icon: RectangleGroupIcon },
 ];
 
 

app/ui/dashboard/sidenav.tsx

@@ -8,6 +8,7 @@ import { PowerIcon } from '@heroicons/react/24/outline';
 import { gloriaHallelujah } from '@/app/ui/fonts';
 import { logout } from '@/app/api/authentication';
 import { useRouter } from 'next/navigation';
+import { getSlug } from '@/app/lib/utils';
 
 export default function SideNav() {
   const router = useRouter();
@@ -32,7 +33,7 @@ export default function SideNav() {
             logout({
               onLogout: () => {
                 localStorage.clear();
-                router.push('/');
+                router.push(`/${getSlug()}`);
               }
             });
           }}