Small zustand + immer POC

home.tsx

import { Button, Center, Stack } from '@mantine/core';
import { Dashboard, Widgets, useDashboardStore } from '~/tools/useDashboard';

export default function HomePage() {
  const { setCurrentDashboard, currentDashboard, addDashboard } = useDashboardStore(
    (state) => state
  );
  return (
    <>
      <Center>
        <Stack p={200}>
          Current dashboard : {currentDashboard?.name || 'none'}
          <Button
            onClick={() => {
              const newDashboard: Dashboard = {
                id: 1,
                name: 'Dashboard 1',
                widgets: new Widgets([]),
              };
              addDashboard(newDashboard);
              setCurrentDashboard(newDashboard);
              console.log('Widget with the longest name', currentDashboard?.widgets.getLongestName);
            }}
          >
            Set dashboard
          </Button>
          Widget with the longest name : {currentDashboard?.widgets.getLongestName().name || 'none'}
        </Stack>
      </Center>
    </>
  );
}

useDashboard.ts

import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';

type Widget = {
  id: number;
  name: string;
};

export class Widgets {
  widgets: Widget[];
  constructor(widgets: Widget[]) {
    this.widgets = widgets;
  }
  // Function to get the widget with the longest name
  getLongestName() {
    return this.widgets.reduce((acc, widget) => {
      if (widget.name.length > acc.name.length) {
        return widget;
      }
      return acc;
    });
  }
}

export type Dashboard = {
  id: number;
  name: string;
  widgets: Widgets;
};

type DashboardManager = {
  dashboards: Dashboard[];
  currentDashboard: Dashboard | undefined;
  addDashboard(dashboard: Dashboard): void;
  removeDashboard(id: number): void;
  setCurrentDashboard(dashboard: Dashboard): void;
};

export const useDashboardStore = create(
  immer<DashboardManager>((set) => ({
    currentDashboard: undefined,
    dashboards: [],
    setCurrentDashboard(dashboard: Dashboard) {
      set((state) => {
        state.currentDashboard = dashboard;
      });
    },
    addDashboard(dashboard: Dashboard) {
      set((state) => {
        state.dashboards.push(dashboard);
      });
    },
    removeDashboard(id: number) {
      set((state) => {
        state.dashboards = state.dashboards.filter((dashboard) => dashboard.id !== id);
      });
    },
  }))
);