fix: fix plans list and removing

src/atoms/planFamily.ts

@@ -12,12 +12,12 @@ export interface ExtendedGroup extends ClassBlockProps {
 }
 
 export const planFamily = atomFamily(
-  ({ id }: { id: number }) =>
+  ({ id }: { id: string }) =>
     atomWithStorage(
-      `${id}-plan`,
+      `${id}-plan-v2`,
       {
         id,
-        name: `Nowy plan - ${id}`,
+        name: `Nowy plan`,
         courses: [] as ExtendedCourse[],
         registrations: [] as Registration[],
       },

src/atoms/plansIds.ts

@@ -0,0 +1,6 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const plansIds = atomWithStorage<Array<{ id: string }>>(
+  "plansIds-v2",
+  [],
+);

src/components/Plan.tsx

@@ -4,23 +4,23 @@ import Link from "next/link";
 import router from "next/router";
 import React from "react";
 
+import { plansIds } from "@/atoms/plansIds";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { usePlan } from "@/lib/usePlan";
 import { cn } from "@/lib/utils";
-import { planFamily } from "@/pages/createplan/[id]";
-import { plansIds } from "@/pages/plans";
 
 import { DeletePlanConfirmationResponsiveDialog } from "./DeletePlanConfirmationResponsiveDialog";
 import { buttonVariants } from "./ui/button";
 
 export const Plan = ({ id, name }: { id: string; name: string }) => {
   const uuid = React.useMemo(() => crypto.randomUUID(), []);
   const [plans, setPlans] = useAtom(plansIds);
-  const [plan] = useAtom(planFamily({ id }));
-  const [planToCopy, setPlanToCopy] = useAtom(planFamily({ id: uuid }));
+  const plan = usePlan({ planId: id });
+  const planToCopy = usePlan({ planId: uuid });
 
   const copyPlan = () => {
     const newPlan = {
@@ -32,21 +32,22 @@ export const Plan = ({ id, name }: { id: string; name: string }) => {
     });
 
     setPlans([...plans, newPlan]);
-    setPlanToCopy({
+    planToCopy.setPlan({
       ...planToCopy,
       courses: plan.courses,
-      groups: plan.groups,
     });
 
     setTimeout(() => {
       void router.push(`/createplan/${newPlan.id}`);
     }, 200);
   };
   const deletePlan = () => {
-    planFamily.remove({ id });
+    plan.remove();
     setPlans(plans.filter((p) => p.id !== id));
   };
-  const groupCount = plan.groups.filter((group) => group.isChecked).length;
+  const groupCount = plan.courses
+    .flatMap((c) => c.groups)
+    .filter((group) => group.isChecked).length;
   return (
     <div className="flex h-[200px] w-[200px] flex-col items-center justify-between rounded-lg border-gray-400 bg-white p-4 text-center shadow-[0_0_5px_5px_rgba(0,0,0,0.10)]">
       <div className="flex w-full justify-between">

src/components/PlanDisplayLink.tsx

@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
 
 import { buttonVariants } from "./ui/button";
 
-export function PlanDisplayLink({ id }: { id: number }) {
+export function PlanDisplayLink({ id }: { id: string }) {
   return (
     <Link
       href={`/app/preview/${id}`}

src/lib/usePlan.ts

@@ -4,13 +4,16 @@ import { type ExtendedCourse, planFamily } from "@/atoms/planFamily";
 
 import type { Registration } from "./types";
 
-export const usePlan = ({ planId }: { planId: number }) => {
+export const usePlan = ({ planId }: { planId: string }) => {
   const [plan, setPlan] = useAtom(planFamily({ id: planId }));
 
   return {
     ...plan,
     allGroups: plan.courses.filter((c) => c.isChecked).flatMap((c) => c.groups),
     setPlan,
+    remove: () => {
+      planFamily.remove({ id: planId });
+    },
     selectGroup: (groupId: string, isChecked?: boolean) => {
       void window.umami?.track("Change group");
       setPlan({

src/pages/app/createplan/[id].tsx

@@ -119,10 +119,8 @@ export const getServerSideProps = (async (context) => {
     throw new Error(`Invalid id ${id?.toString()}`);
   }
 
-  const planId = parseInt(id);
-
-  return { props: { planId } };
-}) satisfies GetServerSideProps<{ planId: number }>;
+  return { props: { planId: id } };
+}) satisfies GetServerSideProps<{ planId: string }>;
 
 const registrationReplacer = (name: string) => {
   const newName = name
@@ -227,7 +225,7 @@ const CreatePlan = ({
           </div>
           <div className="mr-4 flex w-1/4 items-center justify-end">
             <Link
-              href="/plans"
+              href="/app/plans"
               data-umami-event="Back to plans"
               className={cn(buttonVariants({ variant: "link" }), "text-white")}
             >

src/pages/app/plans.tsx

@@ -1,17 +1,15 @@
 import { atom, useAtom } from "jotai";
-import { atomWithStorage } from "jotai/utils";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
 import { planFamily } from "@/atoms/planFamily";
+import { plansIds } from "@/atoms/plansIds";
 import { Plan } from "@/components/Plan";
 import { Seo } from "@/components/SEO";
 import { SolvroLogo } from "@/components/SolvroLogo";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
-export const plansIds = atomWithStorage<Array<{ id: number }>>("plansIds", []);
-
 const plansAtom = atom(
   (get) => get(plansIds).map((id) => get(planFamily(id))),
   (get, set, values: Array<{ id: string }>) => {

src/pages/app/preview/[id].tsx

@@ -6,15 +6,14 @@ import * as React from "react";
 import { LuDownloadCloud } from "react-icons/lu";
 
 import { planFamily } from "@/atoms/planFamily";
+import { plansIds } from "@/atoms/plansIds";
 import { ClassSchedule } from "@/components/ClassSchedule";
 import { SolvroLogo } from "@/components/SolvroLogo";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { usePlan } from "@/lib/usePlan";
 import { cn } from "@/lib/utils";
 import { Day } from "@/services/usos/types";
 
-import { plansIds } from "../plans";
-
 // eslint-disable-next-line @typescript-eslint/require-await
 export const getServerSideProps = (async (context) => {
   const { id } = context.query;
@@ -23,7 +22,7 @@ export const getServerSideProps = (async (context) => {
     throw new Error(`Invalid hash ${id?.toString()}`);
   }
 
-  return { props: { id: parseInt(id) } };
+  return { props: { id } };
 }) satisfies GetServerSideProps;
 
 const SharePlan = ({
@@ -32,15 +31,13 @@ const SharePlan = ({
   const uuid = React.useMemo(() => crypto.randomUUID(), []);
   const [plans, setPlans] = useAtom(plansIds);
   const plan = usePlan({ planId: id });
-  const [planToCopy, setPlanToCopy] = useAtom(
-    planFamily({ id: plans.length + 1 }),
-  );
+  const [planToCopy, setPlanToCopy] = useAtom(planFamily({ id: uuid }));
 
   const router = useRouter();
 
   const copyPlan = () => {
     const newPlan = {
-      id: plans.length + 1,
+      id: uuid,
       courses: plan.courses,
     };
 
@@ -66,7 +63,7 @@ const SharePlan = ({
         </div>
         <div className="mr-4 flex items-center justify-end gap-4">
           <Link
-            href="/plans"
+            href="/app/plans"
             data-umami-event="Back to plans"
             className={cn(
               buttonVariants({ variant: "link" }),