feat: add saving to local storage

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

.prettierrc

@@ -2,7 +2,10 @@
   "singleQuote": false,
   "semi": true,
   "tabWidth": 2,
-  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ],
   "importOrderSeparation": true,
   "importOrderSortSpecifiers": true,
   "importOrder": [

knip.ts

@@ -6,5 +6,4 @@ const config = {
   ignoreDependencies: ["sharp", "@radix-ui/*"],
 } satisfies KnipConfig;
 
-// eslint-disable-next-line import/no-default-export
 export default config;

package.json

@@ -12,7 +12,7 @@
     "format:check": "prettier --check .",
     "knip": "knip",
     "typecheck": "tsc",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.0",
@@ -26,6 +26,7 @@
     "clsx": "^2.1.1",
     "fetch-cookie": "^3.0.1",
     "framer-motion": "^11.3.28",
+    "jotai": "^2.9.3",
     "lucide-react": "^0.426.0",
     "next": "14.2.3",
     "oauth-1.0a": "^2.2.6",
@@ -52,6 +53,7 @@
     "postcss": "^8",
     "postcss-load-config": "^6.0.1",
     "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.10",
     "typescript": "^5",

src/components/Accordion.tsx

@@ -4,7 +4,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import type { ExtendedCourse } from "@/pages/createplan";
+import type { ExtendedCourse } from "@/pages/createplan/[id]";
 
 export const GroupsAccordion = ({
   registrationName,
@@ -21,9 +21,9 @@ export const GroupsAccordion = ({
     <div className="max-w-96">
       <Accordion type="single" collapsible={true} className="">
         <AccordionItem value="item-1">
-          <AccordionTrigger className="px-4  hover:no-underline">
+          <AccordionTrigger className="px-4 hover:no-underline">
             <div className="flex items-center gap-4">
-              <div className="w-[50px] h-[50px] rounded-[50px] bg-primary items-center flex justify-center font-bold">
+              <div className="flex h-[50px] w-[50px] items-center justify-center rounded-[50px] bg-primary font-bold">
                 {index + 1}
               </div>
               {registrationName}
@@ -34,8 +34,8 @@ export const GroupsAccordion = ({
               (course) =>
                 course.registrationName === registrationName && (
                   <div key={course.name}>
-                    <div className="grid grid-cols-[1fr_4fr_1fr] gap-4 justify-between break-all items-center py-2 text-base hover:bg-stone-300 hover:cursor-pointer p-4 ">
-                      <div className="w-[50px] h-[50px] rounded-[50px] bg-secondary items-center flex justify-center">
+                    <div className="grid grid-cols-[1fr_4fr_1fr] items-center justify-between gap-4 break-all p-4 py-2 text-base hover:cursor-pointer hover:bg-stone-300">
+                      <div className="flex h-[50px] w-[50px] items-center justify-center rounded-[50px] bg-secondary">
                         {course.name.slice(0, 1).toUpperCase()}
                       </div>
                       <label
@@ -50,7 +50,7 @@ export const GroupsAccordion = ({
                         onChange={() => {
                           onClick(course.name);
                         }}
-                        className="w-6 h-6 justify-self-end cursor-pointer"
+                        className="h-6 w-6 cursor-pointer justify-self-end"
                         checked={course.isChecked}
                       />
                     </div>

src/components/ClassBlock.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { cn } from "@/lib/utils";
-import type { ExtendedCourse, ExtendedGroup } from "@/pages/createplan";
+import type { ExtendedCourse, ExtendedGroup } from "@/pages/createplan/[id]";
 
 const typeClasses = {
   W: "bg-red-300",
@@ -74,7 +74,7 @@ const ClassBlock = ({
         className={cn(
           position,
           typeClasses[courseType],
-          `p-2 rounded-lg shadow-md flex flex-col justify-center truncate relative`,
+          `relative flex flex-col justify-center truncate rounded-lg p-2 shadow-md`,
           checkedGroupFromCourse?.isChecked === true
             ? isThisGroupChecked
               ? "cursor-pointer"
@@ -86,8 +86,8 @@ const ClassBlock = ({
           <p>{`${courseType} ${week === "" ? "" : `|${week}`}`}</p>
           <p>{`Grupa ${group}`}</p>
         </div>
-        <p className="font-bold truncate">{courseName}</p>
-        <p className="font-semibold truncate">{lecturer}</p>
+        <p className="truncate font-bold">{courseName}</p>
+        <p className="truncate font-semibold">{lecturer}</p>
       </button>
     )
   );

src/components/ClassSchedule.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import type { ClassBlockProps } from "@/lib/types";
-import type { ExtendedCourse, ExtendedGroup } from "@/pages/createplan";
+import type { ExtendedCourse, ExtendedGroup } from "@/pages/createplan/[id]";
 
 import { ClassBlock } from "./ClassBlock";
 import { Hour } from "./Hour";
@@ -57,20 +57,20 @@ const ClassSchedule = ({
   onClick: (id: string) => void;
 }) => {
   return (
-    <div className="flex flex-col h-full">
-      <div className="flex justify-center items-center text-2xl font-semibold z-20 bg-white">
+    <div className="flex h-full flex-col">
+      <div className="z-20 flex items-center justify-center bg-white text-2xl font-semibold">
         {day}
       </div>
       <div className="flex-1 overflow-y-hidden text-[9px]">
-        <div className="grid grid-cols-dayPlan min-w-[1400px] px-[10px]">
+        <div className="grid min-w-[1400px] grid-cols-dayPlan px-[10px]">
           {upperHours.map((hour, index) => (
             <Hour hour={hour} key={index} />
           ))}
           {bottomHours.map((hour, index) => (
             <Hour hour={hour} key={index} />
           ))}
         </div>
-        <div className="grid grid-cols-dayPlan grid-flow-col min-w-[1400px] gap-y-3 px-[10px] py-5">
+        <div className="grid min-w-[1400px] grid-flow-col grid-cols-dayPlan gap-y-3 px-[10px] py-5">
           <div className="absolute bottom-0 after:absolute after:left-1/2 after:w-[1px] after:bg-slate-200" />
           {schedule.map((block, index) => (
             <ClassBlock

src/components/plan.tsx

@@ -1,12 +1,16 @@
+import Link from "next/link";
 import React from "react";
 
-export const Plan = ({ name }: { name: string }) => {
+export const Plan = ({ id, name }: { id: number; name: string }) => {
   return (
-    <button className="bg-white p-4 shadow-lg rounded-lg w-[200px] h-[200px] text-left">
-      <div className="font-semibold text-xl">{name}</div>
+    <Link
+      href={`createplan/${id}`}
+      className="h-[200px] w-[200px] rounded-lg bg-white p-4 text-left shadow-lg"
+    >
+      <div className="text-xl font-semibold">{name}</div>
       <div className="mt-2 text-gray-600">
         Kliknij w plan, aby wyświetlić szczegóły
       </div>
-    </button>
+    </Link>
   );
 };

src/components/schedule.tsx

@@ -2,8 +2,7 @@ import React from "react";
 
 import { ClassSchedule } from "@/components/ClassSchedule";
 import type { ClassBlockProps } from "@/lib/types";
-
-import type { ExtendedCourse, ExtendedGroup } from "../pages/createplan";
+import type { ExtendedCourse, ExtendedGroup } from "@/pages/createplan/[id]";
 
 export const ScheduleTest = ({
   schedule,
@@ -17,7 +16,7 @@ export const ScheduleTest = ({
   onClick: (id: string) => void;
 }) => {
   return (
-    <div className="flex flex-col gap-2 overflow-auto max-h-[80vh] p-1 scrollbar-thin scrollbar-thumb-sky-900 scrollbar-track-sky-300">
+    <div className="flex max-h-[80vh] flex-col gap-2 overflow-auto p-1 scrollbar-thin scrollbar-track-sky-300 scrollbar-thumb-sky-900">
       <ClassSchedule
         schedule={schedule}
         day="Poniedziałek"

src/components/selectGroups.tsx

@@ -2,8 +2,7 @@ import React from "react";
 
 import { GroupsAccordion } from "@/components/Accordion";
 import type { Registration } from "@/lib/types";
-
-import type { ExtendedCourse } from "../pages/createplan";
+import type { ExtendedCourse } from "@/pages/createplan/[id]";
 
 export const SelectGroups = ({
   registrations,
@@ -16,7 +15,7 @@ export const SelectGroups = ({
 }) => {
   return (
     <div className="overflow-auto">
-      <h1 className="text-2xl font-semibold p-4 ">Wybierz odpowiednią turę:</h1>
+      <h1 className="p-4 text-2xl font-semibold">Wybierz odpowiednią turę:</h1>
       {registrations.map((registration, index) => (
         <GroupsAccordion
           key={registration.name}