fix: a lot of small changes

Solvro · Sep 1, 2024 · 34c4485 · 34c4485
1 parent f4e9fcc
commit 34c4485
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 86 deletions.
diff --git a/src/components/plan.tsx → src/components/Plan.tsx b/src/components/plan.tsx → src/components/Plan.tsx
@@ -4,9 +4,7 @@ import React from "react";
 export const Plan = ({ id, name }: { id: number; name: string }) => {
   return (
     <Link
-      href={{
-        pathname: `/createplan/${id}`,
-      }}
+      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>

diff --git a/src/components/schedule.tsx → src/components/Schedule.tsx b/src/components/schedule.tsx → src/components/Schedule.tsx
diff --git a/src/components/selectGroups.tsx → src/components/SelectGroups.tsx b/src/components/selectGroups.tsx → src/components/SelectGroups.tsx
diff --git a/src/pages/createplan/[id].tsx b/src/pages/createplan/[id].tsx
@@ -8,14 +8,12 @@ import { CiEdit } from "react-icons/ci";
 import { IoMdArrowBack } from "react-icons/io";
 import { IoCheckmarkOutline } from "react-icons/io5";
 
+import { ScheduleTest } from "@/components/Schedule";
+import { SelectGroups } from "@/components/SelectGroups";
 import { SolvroLogo } from "@/components/SolvroLogo";
-import { ScheduleTest } from "@/components/schedule";
-import { SelectGroups } from "@/components/selectGroups";
 import type { ClassBlockProps, Course, Registration } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
-import { plansAtom } from "../plans";
-
 const mockRegistration1 = {
   name: "Registration 1",
 } satisfies Registration;
@@ -211,18 +209,23 @@ export interface ExtendedGroup extends ClassBlockProps {
 
 export const planFamily = atomFamily(
   ({ id }: { id: number }) =>
-    atomWithStorage(`${id}-plan`, {
-      id,
-      name: `Nowy plan - ${id}`,
-      courses: mockCourses.map((mockCourse) => ({
-        ...mockCourse,
-        isChecked: false,
-      })),
-      groups: mockGroups.map((mockGroup) => ({
-        ...mockGroup,
-        isChecked: false,
-      })),
-    }),
+    atomWithStorage(
+      `${id}-plan`,
+      {
+        id,
+        name: `Nowy plan - ${id}`,
+        courses: mockCourses.map((mockCourse) => ({
+          ...mockCourse,
+          isChecked: false,
+        })),
+        groups: mockGroups.map((mockGroup) => ({
+          ...mockGroup,
+          isChecked: false,
+        })),
+      },
+      undefined,
+      { getOnInit: true },
+    ),
   (a, b) => a.id === b.id,
 );
 
@@ -244,35 +247,15 @@ const CreatePlan = ({
 }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
   const [plan, setPlan] = useAtom(planFamily({ id: planId }));
 
-  //tutaj używam atomu z widoku planow, zeby poprawnie aktualizowaly się nazwy
-  const [plansTitles, setPlansTitles] = useAtom(plansAtom);
-
   const [isEditing, setIsEditing] = useState(false);
 
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const handleNameInputIcon = (isClicked: boolean) => {
-    if (isClicked) {
-      return <IoCheckmarkOutline />;
-    }
-    return <CiEdit />;
-  };
-
   const changePlanName = (newName: string) => {
     setPlan({
       ...plan,
       name: newName,
     });
-    setPlansTitles(
-      plansTitles.map((openedPlan) =>
-        openedPlan.id === planId
-          ? {
-              ...openedPlan,
-              name: newName,
-            }
-          : openedPlan,
-      ),
-    );
   };
 
   const checkCourse = (id: string) => {
@@ -296,7 +279,6 @@ const CreatePlan = ({
 
   return (
     <div className="flex min-h-screen flex-col overflow-x-hidden">
-      {/* <Navbar /> */}
       <div className="flex max-h-20 min-h-20 items-center justify-between bg-mainbutton5">
         <div className="ml-4 w-1/4 flex-none">
           <SolvroLogo />
@@ -306,8 +288,8 @@ const CreatePlan = ({
             className="flex items-center justify-center"
             onSubmit={(e) => {
               e.preventDefault();
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-              changePlanName(e.currentTarget.elements.name.value);
+              const formData = new FormData(e.currentTarget);
+              changePlanName(formData.get("name")?.toString() ?? "");
               inputRef.current?.blur();
             }}
           >
@@ -318,23 +300,26 @@ const CreatePlan = ({
                 "w-full truncate border-mainbutton5 bg-transparent outline-none duration-100 ease-in-out before:transition-all focus:border-b-2 focus:font-normal",
               )}
               name="name"
-              defaultValue={plan.name}
+              id="name"
+              defaultValue={typeof window === "undefined" ? "" : plan.name}
               onFocus={() => {
                 setIsEditing(true);
               }}
-              onBlur={() => {
+              onBlur={(e) => {
                 setIsEditing(false);
+                changePlanName(e.currentTarget.value);
               }}
             />
-            <button
-              type={isEditing ? "button" : "submit"}
-              onClick={() => {
-                inputRef.current?.focus();
-              }}
-              className="ml-2 transform cursor-pointer transition-transform"
-            >
-              {handleNameInputIcon(isEditing)}
-            </button>
+            {isEditing ? (
+              <button type="submit" className="ml-2">
+                <IoCheckmarkOutline />
+              </button>
+            ) : (
+              <label htmlFor="name" className="ml-2 cursor-pointer">
+                <span className="sr-only">Nazwa planu</span>
+                <CiEdit />
+              </label>
+            )}
           </form>
         </div>
         <div className="mr-4 flex w-1/4 justify-end">

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -6,7 +6,7 @@ import type React from "react";
 import { type ComponentProps, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
-import { buttonVariants } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 
 const Navbar = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -21,20 +21,17 @@ const Navbar = () => {
       {/* Desktop Navigation */}
       <nav className="hidden h-20 flex-row items-center gap-10 pr-10 text-white md:flex lg:pr-40">
         <ul className="flex gap-6">
-          <li className="cursor-pointer">
-            <Link href="/">Strona główna</Link>
-          </li>
           <li className="cursor-pointer">
             <a href="https://www.facebook.com/knsolvro">Aktualności</a>
           </li>
+
           <li className="cursor-pointer">
-            <a href="https://web.usos.pwr.edu.pl/kontroler.php?_action=news/default&panel=DOMYSLNY&file=instrukcjePL.html">
-              Instrukcje
-            </a>
-          </li>
-          <li className="cursor-pointer">
-            <a href="https://web.usos.pwr.edu.pl/kontroler.php?_action=news/default&panel=DOMYSLNY&file=zapisyPL.html">
-              Terminarz
+            <a
+              target="_blank"
+              href="https://web.usos.pwr.edu.pl/kontroler.php?_action=news/default&panel=DOMYSLNY&file=zapisyPL.html"
+              rel="noreferrer"
+            >
+              Terminarz USOS
             </a>
           </li>
           <li className="cursor-pointer">
@@ -67,9 +64,6 @@ const Navbar = () => {
       {isMenuOpen ? (
         <div className="absolute left-0 top-full w-full animate-fade-in bg-mainbutton6 shadow-lg md:hidden">
           <ul className="flex flex-col gap-4 p-4 text-center uppercase text-white">
-            <li className="cursor-pointer p-2">
-              <Link href="/">Strona główna</Link>
-            </li>
             <li className="cursor-pointer p-2">
               <a href="https://www.facebook.com/knsolvro">Aktualności</a>
             </li>
@@ -173,17 +167,29 @@ const JoinUsBlock = () => (
       </p>
     </div>
     <div className="">
-      <Link
-        href="plans"
-        className={buttonVariants({
-          size: "lg",
-          variant: "outline",
-          class:
-            "h-20 animate-pulse cursor-pointer self-center border-4 text-xl transition-all duration-2000 hover:animate-none hover:bg-white hover:shadow-[0_0_5px_rgb(200,200,255),0_0_10px_rgb(164,200,255)] md:mt-0 md:p-7",
-        })}
-      >
-        Przejdź do planowania <ChevronRightIcon className="ml-2" />
-      </Link>
+      {process.env.NODE_ENV === "development" ||
+      (typeof window !== "undefined" &&
+        window.location.hostname === "planer.solvro.pl") ? (
+        <Link
+          href="/plans"
+          className={buttonVariants({
+            size: "lg",
+            variant: "outline",
+            class:
+              "h-20 cursor-pointer self-center border-4 text-xl transition-all duration-300 hover:bg-white hover:shadow-[0_0_5px_rgb(200,200,255),0_0_10px_rgb(164,200,255)] md:mt-0 md:p-7",
+          })}
+        >
+          Przejdź do planowania <ChevronRightIcon className="ml-2" />
+        </Link>
+      ) : (
+        <Button
+          disabled={true}
+          variant="outline"
+          className="h-20 cursor-pointer self-center border-4 text-xl transition-all duration-300 hover:bg-white hover:shadow-[0_0_5px_rgb(200,200,255),0_0_10px_rgb(164,200,255)] md:mt-0 md:p-7"
+        >
+          Już niedługo :)
+        </Button>
+      )}
     </div>
   </Block>
 );

diff --git a/src/pages/plans.tsx b/src/pages/plans.tsx
@@ -1,16 +1,22 @@
-import { useAtom } from "jotai";
+import { atom, useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { IoMdArrowBack } from "react-icons/io";
 
+import { Plan } from "@/components/Plan";
 import { SolvroLogo } from "@/components/SolvroLogo";
-import { Plan } from "@/components/plan";
 
-export const plansAtom = atomWithStorage<Array<{ id: number; name: string }>>(
-  "plansIds",
-  [],
+import { planFamily } from "./createplan/[id]";
+
+const plansIds = atomWithStorage<Array<{ id: number }>>("plansIds", []);
+
+const plansAtom = atom(
+  (get) => get(plansIds).map((id) => get(planFamily(id))),
+  (get, set, values: Array<{ id: number }>) => {
+    set(plansIds, values);
+  },
 );
 
 const Plans = () => {
@@ -20,11 +26,11 @@ const Plans = () => {
   const addNewPlan = () => {
     const newPlan = {
       id: plans.length + 1,
-      name: `Nowy plan - ${plans.length + 1}`,
     };
-    setPlans([...plans, newPlan]);
 
-    void router.push(`/createplan/${newPlan.id}`);
+    void router.push(`/createplan/${newPlan.id}`).then(() => {
+      setPlans([...plans, newPlan]);
+    });
   };
 
   return (