fix: minor fixes and changes (#124)

* feat: change text to icons on plan item, sorted searching * feat: tooltip with status icon * feat: .ics file name change * fix: fix that plans were not showing after logging in * fix: ui bug footer on preview (and file name)
Solvro · Jan 14, 2025 · 785393b · 785393b
1 parent 5628eec
commit 785393b
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 35 deletions.
diff --git a/frontend/src/app/api/callback/route.ts b/frontend/src/app/api/callback/route.ts
@@ -1,9 +1,8 @@
-import { revalidatePath } from "next/cache";
 import { cookies as cookiesPromise } from "next/headers";
 import { redirect } from "next/navigation";
 import type { NextRequest } from "next/server";
 
-import { getAccessToken } from "@/lib/auth";
+import { auth, getAccessToken } from "@/lib/auth";
 import { usosService } from "@/services/usos";
 import { createClient } from "@/services/usos/usos-client";
 
@@ -83,6 +82,6 @@ export const GET = async (request: NextRequest) => {
     secure: true,
   });
 
-  revalidatePath("/plans");
+  await auth(tokens);
   return redirect("/plans");
 };
diff --git a/...view/[id]/_components/share-plan-page.tsx → ...rc/app/plans/preview/[id]/page.client.tsx b/...view/[id]/_components/share-plan-page.tsx → ...rc/app/plans/preview/[id]/page.client.tsx
@@ -42,7 +42,7 @@ export function SharePlanPage({ planId }: { planId: string }) {
     }, 200);
   };
   return (
-    <>
+    <div className="flex grow flex-col">
       <div className="flex items-center justify-center gap-4 p-2">
         <Button
           onClick={copyPlan}
@@ -89,6 +89,6 @@ export function SharePlanPage({ planId }: { planId: string }) {
             ),
         )}
       </div>
-    </>
+    </div>
   );
 }
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/share-plan-page";
+import { SharePlanPage } from "./page.client";
 
 interface PageProps {
   params: Promise<{ id: string }>;

diff --git a/frontend/src/components/class-block.tsx b/frontend/src/components/class-block.tsx
@@ -1,3 +1,4 @@
+import { UsersRoundIcon } from "lucide-react";
 import React from "react";
 
 import { StarsRating } from "@/components/class-block-stars";
@@ -82,14 +83,13 @@ export function ClassBlock({
       <div className="flex w-full justify-between">
         <div className="flex gap-1">
           <p>{`${courseType} ${week === "" ? "" : `|${week}`}`}</p>
-          <StarsRating rating={averageRating} />
         </div>
         <p>{`Grupa ${groupNumber}`}</p>
       </div>
       <p className="truncate font-bold">{courseName}</p>
       <p className="truncate font-semibold">{lecturer}</p>
       <p className="mt-2 flex w-full justify-between truncate">
-        Dostępne miejsca:
+        <UsersRoundIcon className="size-3" />
         <span
           className={cn(
             "font-bold",
@@ -100,7 +100,7 @@ export function ClassBlock({
         </span>
       </p>
       <p className="flex w-full justify-between truncate">
-        Średnia ocena:
+        <StarsRating rating={averageRating > 0 ? averageRating : 1} />
         <span className="font-bold">{averageRating}</span>
       </p>
     </button>

diff --git a/frontend/src/components/plan-item.tsx b/frontend/src/components/plan-item.tsx
@@ -187,7 +187,7 @@ export function PlanItem({
             </DropdownMenuItem>
             <DropdownMenuItem
               onClick={() => {
-                generateICSFile(plan.allGroups);
+                generateICSFile(plan.allGroups, plan.name);
               }}
             >
               <Download />

diff --git a/frontend/src/components/registration-combobox.tsx b/frontend/src/components/registration-combobox.tsx
@@ -105,20 +105,22 @@ function RegistrationList({
       <CommandList>
         <CommandEmpty>Brak wyników</CommandEmpty>
         <CommandGroup>
-          {allRegistrations.map((option) => (
-            <CommandItem
-              key={option.value}
-              value={option.label}
-              onSelect={(value) => {
-                const id = allRegistrations.find(
-                  (r) => r.label === value,
-                )?.value;
-                setSelectedRegistrationId(id ?? "");
-              }}
-            >
-              {option.label}
-            </CommandItem>
-          ))}
+          {allRegistrations
+            .sort((a, b) => a.label.localeCompare(b.label))
+            .map((option) => (
+              <CommandItem
+                key={option.value}
+                value={option.label}
+                onSelect={(value) => {
+                  const id = allRegistrations.find(
+                    (r) => r.label === value,
+                  )?.value;
+                  setSelectedRegistrationId(id ?? "");
+                }}
+              >
+                {option.label}
+              </CommandItem>
+            ))}
         </CommandGroup>
       </CommandList>
     </Command>

diff --git a/frontend/src/components/ui/status-icon.tsx b/frontend/src/components/ui/status-icon.tsx
@@ -1,5 +1,22 @@
 import { AlertTriangleIcon, CloudIcon, RefreshCwOffIcon } from "lucide-react";
-import React from "react";
+import React, { useMemo } from "react";
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+const LOGIC_STATUS_RESULTS = {
+  SYNCHRONIZED: {
+    message: "Zsynchronizowano",
+    icon: <CloudIcon className="size-4 text-emerald-500" />,
+  },
+  LOCAL_ONLY: {
+    message: "Plan dostępny tylko lokalnie",
+    icon: <AlertTriangleIcon className="size-4 text-rose-500" />,
+  },
+  LOCAL_CHANGES: {
+    message: "Masz lokalne zmiany",
+    icon: <RefreshCwOffIcon className="size-4 text-amber-500" />,
+  },
+};
 
 export function StatusIcon({
   synced,
@@ -8,15 +25,27 @@ export function StatusIcon({
   synced: boolean;
   onlineId: string | null;
 }) {
+  const planStatus = useMemo(() => {
+    if (synced) {
+      return "SYNCHRONIZED";
+    } else if (!(onlineId ?? "")) {
+      return "LOCAL_ONLY";
+    }
+    return "LOCAL_CHANGES";
+  }, [synced, onlineId]);
+
+  const message = LOGIC_STATUS_RESULTS[planStatus].message;
+  const icon = LOGIC_STATUS_RESULTS[planStatus].icon;
   return (
-    <div className="absolute right-4 top-4 flex size-[20px] items-center justify-center rounded-md backdrop-blur-md">
-      {synced ? (
-        <CloudIcon className="size-4 text-emerald-500" />
-      ) : (onlineId ?? "") ? (
-        <RefreshCwOffIcon className="size-4 text-amber-500" />
-      ) : (
-        <AlertTriangleIcon className="size-4 text-rose-500" />
-      )}
-    </div>
+    <Tooltip>
+      <TooltipTrigger className="absolute right-4 top-4">
+        <div className="flex size-[20px] items-center justify-center rounded-md backdrop-blur-md">
+          {icon}
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{message}</p>
+      </TooltipContent>
+    </Tooltip>
   );
 }
diff --git a/frontend/src/lib/utils/generate-ics-file.ts b/frontend/src/lib/utils/generate-ics-file.ts
@@ -142,6 +142,7 @@ const extractStartTimeUTCEndTimeUTC = (
 
 export const generateICSFile = (
   groups: ExtendedGroup[],
+  name: string,
   startDate = new Date("2024-10-01"),
   endDate = new Date("2025-02-05"),
 ) => {
@@ -212,6 +213,6 @@ export const generateICSFile = (
   const blob = new Blob([icsContent], { type: "text/calendar" });
   const link = document.createElement("a");
   link.href = URL.createObjectURL(blob);
-  link.download = "events.ics";
+  link.download = `${name}.ics`;
   link.click();
 };