refactor: online sync plans code refactor & minor features

* feat: new tooltip messages on sync button, alert while log out

* feat: auto-save changes

* refactor: edit plan page refactor & show last update date

* fix: local plan update

* feat: better loading screen

* refactor: change client side page version name

* fix: import & tooltip provider

* fix: remove comments & better naming

* fix: fix of createOnlinePlan abstraction

* fix: fix leaky abstraction

* fix: remove unnecessary export

* feat: better organization in .env module
wywailem env baseurl bo doslownie do niczego ona nie byla potrzebne, tylko robilismy z tego apps url wiec po prostu to dodalem do env, dzieki czemu moglem uzywac tego pliku tez po kliencie jak juz nie bylo eksportu serwerowego, do tego lepsze nazwy i mniej zmiennych w funkcjach w page.client

* fix: types fixes & better logic

* fix: disable button action (auto-sync implemented)

Author: qamarq

frontend/package-lock.json

@@ -25,6 +25,7 @@
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
     "@t3-oss/env-nextjs": "^0.11.0",
     "@tanstack/react-query": "^5.54.1",
     "cheerio": "^1.0.0-rc.12",

frontend/package.json

@@ -3,51 +3,11 @@
 import { revalidatePath } from "next/cache";
 
 import { auth, fetchToAdonis } from "@/lib/auth";
-
-interface CreatePlanResponseType {
-  success: boolean;
-  message: string;
-  schedule: {
-    name: string;
-    userId: number;
-    createdAt: string;
-    updatedAt: string;
-    id: number;
-  };
-}
-
-interface PlanResponseType {
-  name: string;
-  userId: number;
-  id: number;
-  createdAt: string;
-  updatedAt: string;
-  courses: Array<{
-    id: string;
-    name: string;
-    department: string;
-    lecturer: string;
-    type: string;
-    ects: number;
-    semester: number;
-    groups: Array<{
-      id: number;
-      name: string;
-      day: string;
-      time: string;
-      room: string;
-    }>;
-  }>;
-  registrations: Array<{
-    id: string;
-    name: string;
-  }>;
-}
-
-interface DeletePlanResponseType {
-  success: boolean;
-  message: string;
-}
+import type {
+  CreatePlanResponseType,
+  DeletePlanResponseType,
+  PlanResponseType,
+} from "@/types";
 
 export const createNewPlan = async ({
   name,

frontend/src/actions/plans.ts

@@ -1,7 +1,7 @@
 import { cookies as cookiesPromise } from "next/headers";
 import { redirect } from "next/navigation";
 
-import { USOS_APPS_URL } from "@/env.mjs";
+import { env } from "@/env.mjs";
 import { getRequestToken } from "@/lib/auth";
 
 export const dynamic = "force-dynamic";
@@ -39,6 +39,6 @@ export async function GET() {
   });
 
   return redirect(
-    `${USOS_APPS_URL}/services/oauth/authorize?oauth_token=${token.token}`,
+    `${env.USOS_APPS_URL}/services/oauth/authorize?oauth_token=${token.token}`,
   );
 }

frontend/src/app/api/login/route.ts

@@ -3,7 +3,7 @@ import { Space_Grotesk } from "next/font/google";
 import Script from "next/script";
 import type React from "react";
 
-import ClientProviders from "@/components/Providers";
+import { ClientProviders } from "@/components/Providers";
 import { Toaster } from "@/components/ui/sonner";
 import { env } from "@/env.mjs";
 import { cn } from "@/lib/utils";

frontend/src/app/layout.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const OfflineAlert = () => {
+  return (
+    <div className="w-full rounded-md border-2 border-blue-500 bg-blue-400/30 px-4 py-2 font-semibold text-blue-600">
+      <h1>Jesteś offline!</h1>
+      <p className="text-xs text-blue-950">
+        Aby zapisać plany online na koncie, zaloguj się.
+      </p>
+    </div>
+  );
+};

frontend/src/app/plans/edit/[id]/_components/OfflineAlert.tsx

@@ -39,13 +39,11 @@ interface PlanResponseType {
 export const SyncErrorAlert = ({
   onlinePlan,
   planDate,
-  bounce = false,
   downloadChanges,
   sendChanges,
 }: {
   onlinePlan: PlanResponseType | null | undefined;
   planDate: Date;
-  bounce?: boolean;
   downloadChanges: () => void;
   sendChanges: () => void;
 }) => {
@@ -74,7 +72,6 @@ export const SyncErrorAlert = ({
     <div
       className={cn(
         "flex w-full flex-col rounded-md bg-primary/10 transition-all",
-        { "animate-fast-bounce": bounce },
       )}
     >
       <div className="flex w-full items-start justify-start p-4 pb-2">

frontend/src/app/plans/edit/[id]/_components/SyncErrorAlert.tsx

@@ -7,49 +7,89 @@ import {
   RefreshCwIcon,
   RefreshCwOffIcon,
 } from "lucide-react";
-import React from "react";
+import React, { useMemo } from "react";
+import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { PlanState } from "@/types";
+
+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" />,
+  },
+  SYNCING: {
+    message: "Synchronizowanie...",
+    icon: <RefreshCwIcon className="size-4 animate-spin text-primary" />,
+  },
+  DIFFERENT_DATES: {
+    message: "Twoja wersja różni się od wersji online",
+    icon: <GitPullRequestClosed className="size-4 text-primary" />,
+  },
+  LOCAL_CHANGES: {
+    message: "Masz lokalne zmiany",
+    icon: <RefreshCwOffIcon className="size-4 text-amber-500" />,
+  },
+};
 
 export const SyncedButton = ({
-  synced,
-  onlineId,
-  syncing,
-  onClick,
-  bounceAlert,
-  equalsDates,
+  plan,
+  isSyncing,
+  isEqualsDates,
 }: {
-  synced: boolean;
-  onlineId: string | null;
-  syncing: boolean;
-  onClick: () => Promise<number | string | true>;
-  bounceAlert: () => void;
-  equalsDates: boolean;
+  plan: PlanState;
+  isSyncing: boolean;
+  isEqualsDates: boolean;
 }) => {
+  const planStatus = useMemo(() => {
+    if (plan.synced && isEqualsDates) {
+      return "SYNCHRONIZED";
+    } else if (!(plan.onlineId ?? "")) {
+      return "LOCAL_ONLY";
+    } else if (isSyncing) {
+      return "SYNCING";
+    } else if (!isEqualsDates) {
+      return "DIFFERENT_DATES";
+    }
+    return "LOCAL_CHANGES";
+  }, [plan.synced, plan.onlineId, isSyncing, isEqualsDates]);
+
+  const message = LOGIC_STATUS_RESULTS[planStatus].message;
+  const icon = LOGIC_STATUS_RESULTS[planStatus].icon;
+
   return (
-    <Button
-      size="icon"
-      variant="outline"
-      className="min-w-10"
-      onClick={() => {
-        if (!equalsDates) {
-          bounceAlert();
-        } else {
-          void onClick();
-        }
-      }}
-    >
-      {synced && equalsDates ? (
-        <CloudIcon className="size-4 text-emerald-500" />
-      ) : !(onlineId ?? "") ? (
-        <AlertTriangleIcon className="size-4 text-rose-500" />
-      ) : syncing ? (
-        <RefreshCwIcon className="size-4 animate-spin text-primary" />
-      ) : !equalsDates ? (
-        <GitPullRequestClosed className="size-4 text-primary" />
-      ) : (
-        <RefreshCwOffIcon className="size-4 text-amber-500" />
-      )}
-    </Button>
+    <Tooltip>
+      <TooltipTrigger asChild={true}>
+        <Button
+          size="icon"
+          variant="outline"
+          className="min-w-10"
+          onClick={() => {
+            if (!isEqualsDates) {
+              toast.info(
+                "Wybierz akcję z alertu powyżej, aby zsynchronizować dane tak jak chcesz",
+                { duration: 5000 },
+              );
+            } else {
+              return;
+            }
+          }}
+        >
+          {icon}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{message}</p>
+      </TooltipContent>
+    </Tooltip>
   );
 };