fix: update based on reviewers' suggestions

Solvro · Nov 14, 2024 · bf14b91 · bf14b91
1 parent a95ebf4
commit bf14b91
Show file tree

Hide file tree

Showing 16 changed files with 143 additions and 150 deletions.
diff --git a/frontend/src/app/(homepage)/layout.tsx b/frontend/src/app/(homepage)/layout.tsx
@@ -6,7 +6,9 @@ import { Navbar } from "./_components/navbar";
 
 export default function LayoutHomePage({
   children,
-}: Readonly<{ children: React.ReactNode }>) {
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <div className="relative min-h-screen overflow-hidden bg-mainbutton7">
       {/* Blobs */}

diff --git a/frontend/src/app/(homepage)/page.tsx b/frontend/src/app/(homepage)/page.tsx
@@ -1,47 +1,14 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { motion } from "framer-motion";
 import { Loader2Icon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import type React from "react";
-import { type ComponentProps } from "react";
-import { twMerge } from "tailwind-merge";
+import { Suspense } from "react";
 
+import Block from "@/components/ui/block";
 import { buttonVariants } from "@/components/ui/button";
+import { createUsosService } from "@/lib/usos";
 import { cn } from "@/lib/utils";
 
-const Block = ({
-  className,
-  ...rest
-}: ComponentProps<(typeof motion)["div"]> & { className: string }) => {
-  return (
-    <motion.div
-      variants={{
-        initial: {
-          scale: 0.5,
-          y: 50,
-          opacity: 0,
-        },
-        animate: {
-          scale: 1,
-          y: 0,
-          opacity: 1,
-        },
-      }}
-      transition={{
-        type: "spring",
-        mass: 3,
-        stiffness: 400,
-        damping: 50,
-      }}
-      className={twMerge("col-span-4 rounded-lg p-6", className)}
-      {...rest}
-    />
-  );
-};
-
 const AnimationLogo = () => (
   <Block
     whileHover={{
@@ -76,76 +43,45 @@ const AnimationLogo = () => (
   </Block>
 );
 
-const JoinUsBlock = () => {
-  const query = useQuery({
-    queryKey: ["auth"],
-    queryFn: async () => {
-      const res = await fetch("/api/profile");
+const JoinUsBlock = async () => {
+  try {
+    const usos = await createUsosService();
+    await usos.getProfile();
 
-      if (res.status === 401) {
-        throw new Error("Unauthorized");
-      }
-
-      return res.json();
-    },
-    retry: false,
-    gcTime: 5000,
-  });
-
-  return (
-    <Block className="flex flex-col items-center justify-center gap-6 md:gap-10">
-      <div className="">
-        <h1 className="text-center text-4xl font-medium leading-tight md:text-left">
-          <span className="font-inter tracking-wide text-white animate-in">
-            Stwórz swój plan używając{" "}
-            <span className="font-bold uppercase">darmowego</span> zapisownika!
-          </span>
-        </h1>
-      </div>
-      <div className="">
-        <p className="text-center text-white md:mr-4 md:text-2xl">
-          Zaloguj się do platformy USOS i stwórz swój plan na semestr!
-        </p>
-      </div>
-      <div className="z-50">
-        {query.isLoading ? (
-          <div className="flex h-20 animate-spin items-center justify-center text-xl text-white">
-            <Loader2Icon size={32} />
-          </div>
-        ) : query.isError ? (
-          <Link
-            href="/api/login"
-            data-umami-event="Landing - Go to planning"
-            className={buttonVariants({
-              size: "lg",
-              variant: "outline",
-              className: cn(
-                "h-20 cursor-wait self-center border-4 text-xl transition-all duration-300 md:mt-0 md:p-7",
-                "cursor-pointer hover:bg-white hover:shadow-[0_0_5px_rgb(200,200,255),0_0_10px_rgb(164,200,255)]",
-              ),
-            })}
-          >
-            Zaloguj się
-          </Link>
-        ) : (
-          <Link
-            href="/plans"
-            data-umami-event="Landing - Go to planning"
-            className={buttonVariants({
-              size: "lg",
-              variant: "outline",
-              className: cn(
-                "h-20 cursor-wait self-center border-4 text-xl transition-all duration-300 md:mt-0 md:p-7",
-                "cursor-pointer hover:bg-white hover:shadow-[0_0_5px_rgb(200,200,255),0_0_10px_rgb(164,200,255)]",
-              ),
-            })}
-          >
-            Twoje plany
-          </Link>
-        )}
-      </div>
-    </Block>
-  );
+    return (
+      <Link
+        href="/plans"
+        data-umami-event="Landing - Go to planning"
+        className={buttonVariants({
+          size: "lg",
+          variant: "outline",
+          className: cn(
+            "h-20 cursor-wait self-center border-4 text-xl transition-all duration-300 md:mt-0 md:p-7",
+            "cursor-pointer hover:bg-white hover:shadow-[0_0_5px_rgb(200,200,255),0_0_10px_rgb(164,200,255)]",
+          ),
+        })}
+      >
+        Twoje plany
+      </Link>
+    );
+  } catch (e) {
+    return (
+      <Link
+        href="/api/login"
+        data-umami-event="Landing - Go to planning"
+        className={buttonVariants({
+          size: "lg",
+          variant: "outline",
+          className: cn(
+            "h-20 cursor-wait self-center border-4 text-xl transition-all duration-300 md:mt-0 md:p-7",
+            "cursor-pointer hover:bg-white hover:shadow-[0_0_5px_rgb(200,200,255),0_0_10px_rgb(164,200,255)]",
+          ),
+        })}
+      >
+        Zaloguj się
+      </Link>
+    );
+  }
 };
 
 export default function HomePage() {
@@ -157,7 +93,33 @@ export default function HomePage() {
         </div>
       </div>
       <section className="flex justify-center">
-        <JoinUsBlock />
+        <Block className="flex flex-col items-center justify-center gap-6 md:gap-10">
+          <div className="">
+            <h1 className="text-center text-4xl font-medium leading-tight md:text-left">
+              <span className="font-inter tracking-wide text-white animate-in">
+                Stwórz swój plan używając{" "}
+                <span className="font-bold uppercase">darmowego</span>{" "}
+                zapisownika!
+              </span>
+            </h1>
+          </div>
+          <div className="">
+            <p className="text-center text-white md:mr-4 md:text-2xl">
+              Zaloguj się do platformy USOS i stwórz swój plan na semestr!
+            </p>
+          </div>
+          <div className="z-50">
+            <Suspense
+              fallback={
+                <div className="flex h-20 animate-spin items-center justify-center text-xl text-white">
+                  <Loader2Icon size={32} />
+                </div>
+              }
+            >
+              <JoinUsBlock />
+            </Suspense>
+          </div>
+        </Block>
       </section>
     </div>
   );

diff --git a/frontend/src/app/api/data/[facultyId]/route.ts b/frontend/src/app/api/data/[facultyId]/route.ts
@@ -5,11 +5,10 @@ import { createUsosService } from "@/lib/usos";
 
 export const revalidate = 3600;
 
-interface PageProps {
-  params: Promise<{ facultyId: string }>;
-}
-
-export async function GET(_request: Request, { params }: PageProps) {
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ facultyId: string }> },
+) {
   const { facultyId } = await params;
   const service = await createUsosService();
   return NextResponse.json(

diff --git a/frontend/src/app/api/profile/route.ts b/frontend/src/app/api/profile/route.ts
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -89,9 +89,9 @@ declare global {
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
     <html lang="pl" suppressHydrationWarning={true} className="scroll-smooth">
       <ClientProviders>

diff --git a/frontend/src/app/plans/create/[id]/_components/CreateNewPlanPage.tsx b/frontend/src/app/plans/create/[id]/_components/CreateNewPlanPage.tsx
@@ -28,7 +28,7 @@ import { usePlan } from "@/lib/usePlan";
 import { registrationReplacer } from "@/lib/utils";
 import { Day, Frequency, LessonType } from "@/services/usos/types";
 
-export default function CreateNewPlanPage({ planId }: { planId: string }) {
+export function CreateNewPlanPage({ planId }: { planId: string }) {
   const plan = usePlan({
     planId,
   });
@@ -107,11 +107,11 @@ export default function CreateNewPlanPage({ planId }: { planId: string }) {
         <div className="flex flex-col justify-start gap-3 md:w-full">
           <div className="flex w-full items-end gap-2">
             <div className="flex items-end gap-2">
-              <Link href="/plans">
-                <Button variant="outline" size="icon">
+              <Button variant="outline" size="icon" asChild={true}>
+                <Link href="/plans">
                   <MdArrowBack size={20} />
-                </Button>
-              </Link>
+                </Link>
+              </Button>
               <form
                 className="flex w-full items-center justify-center"
                 onSubmit={(e) => {

diff --git a/frontend/src/app/plans/create/[id]/page.tsx b/frontend/src/app/plans/create/[id]/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import React from "react";
 
-import CreateNewPlanPage from "./_components/CreateNewPlanPage";
+import { CreateNewPlanPage } from "./_components/CreateNewPlanPage";
 
 interface PageProps {
   params: Promise<{ id: string }>;
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 
 export default async function CreateNewPlan({ params }: PageProps) {
   const { id } = await params;
-  if (!id || typeof id !== "string" || id.length === 0) {
+  if (typeof id !== "string" || id.length === 0) {
     return notFound();
   }
 

diff --git a/frontend/src/app/plans/layout.tsx b/frontend/src/app/plans/layout.tsx
@@ -7,7 +7,9 @@ import { cn } from "@/lib/utils";
 
 export default function PlansLayout({
   children,
-}: Readonly<{ children: React.ReactNode }>) {
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <div className="flex min-h-screen flex-col items-center gap-3 overflow-x-hidden">
       <div className="flex max-h-20 min-h-20 w-full items-center justify-between bg-mainbutton7">

diff --git a/frontend/src/app/plans/page.tsx b/frontend/src/app/plans/page.tsx
@@ -14,11 +14,11 @@ const plansAtom = atom(
     set(plansIds, values);
   },
 );
-const Plans = () => {
+export default function Plans() {
   const [plans, setPlans] = useAtom(plansAtom);
   const router = useRouter();
-  const uuid = crypto.randomUUID();
   const addNewPlan = () => {
+    const uuid = crypto.randomUUID();
     const newPlan = {
       id: uuid,
     };
@@ -46,6 +46,4 @@ const Plans = () => {
       </div>
     </div>
   );
-};
-
-export default Plans;
+}
diff --git a/frontend/src/app/plans/preview/[id]/_components/SharePlanPage.tsx b/frontend/src/app/plans/preview/[id]/_components/SharePlanPage.tsx
@@ -12,7 +12,7 @@ import { Button } from "@/components/ui/button";
 import { usePlan } from "@/lib/usePlan";
 import { Day } from "@/services/usos/types";
 
-export default function SharePlanPage({ planId }: { planId: string }) {
+export function SharePlanPage({ planId }: { planId: string }) {
   const uuid = React.useMemo(() => crypto.randomUUID(), []);
   const [plans, setPlans] = useAtom(plansIds);
   const plan = usePlan({ planId });

diff --git a/frontend/src/app/plans/preview/[id]/page.tsx b/frontend/src/app/plans/preview/[id]/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import React from "react";
 
-import SharePlanPage from "./_components/SharePlanPage";
+import { SharePlanPage } from "./_components/SharePlanPage";
 
 interface PageProps {
   params: Promise<{ id: string }>;
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 
 export default async function SharePlan({ params }: PageProps) {
   const { id } = await params;
-  if (!id || typeof id !== "string" || id.length === 0) {
+  if (typeof id !== "string" || id.length === 0) {
     return notFound();
   }
 

diff --git a/frontend/src/components/GroupsAccordion.tsx b/frontend/src/components/GroupsAccordion.tsx
@@ -68,7 +68,7 @@ export const GroupsAccordionItem = ({
           </label>
         </div>
         {courses.map((course) => (
-          <div key={crypto.randomUUID()}>
+          <div key={course.id}>
             <div className="grid grid-cols-[1fr_5fr] items-center justify-between p-4 py-2 text-base transition-colors hover:cursor-pointer hover:bg-blue-100">
               <div className="flex h-[50px] w-[50px] items-center justify-center rounded-[50px] bg-secondary">
                 {course.type}

diff --git a/frontend/src/components/Plan.tsx b/frontend/src/components/Plan.tsx
@@ -1,7 +1,9 @@
+"use client";
+
 import { useAtom } from "jotai";
 import { Pencil } from "lucide-react";
 import Link from "next/link";
-import router from "next/router";
+import { useRouter } from "next/navigation";
 import React from "react";
 
 import { plansIds } from "@/atoms/plansIds";
@@ -21,6 +23,7 @@ export const Plan = ({ id, name }: { id: string; name: string }) => {
   const [plans, setPlans] = useAtom(plansIds);
   const plan = usePlan({ planId: id });
   const planToCopy = usePlan({ planId: uuid });
+  const router = useRouter();
 
   const copyPlan = () => {
     const newPlan = {
@@ -38,7 +41,7 @@ export const Plan = ({ id, name }: { id: string; name: string }) => {
     });
 
     setTimeout(() => {
-      void router.push(`/createplan/${newPlan.id}`);
+      router.push(`/createplan/${newPlan.id}`);
     }, 200);
   };
   const deletePlan = () => {