From 1a8f6206709920cb83ed168a039a2a3045bffc0d Mon Sep 17 00:00:00 2001 From: ImJustChew Date: Fri, 23 Aug 2024 02:32:33 +0800 Subject: [PATCH] feat: updated app design for today page too --- src/app/[lang]/(mods-pages)/apps/AppItem.tsx | 119 +++++++++++++++++++ src/app/[lang]/(mods-pages)/apps/page.tsx | 104 +--------------- src/components/Today/TodaySchedule.tsx | 19 +-- 3 files changed, 124 insertions(+), 118 deletions(-) create mode 100644 src/app/[lang]/(mods-pages)/apps/AppItem.tsx diff --git a/src/app/[lang]/(mods-pages)/apps/AppItem.tsx b/src/app/[lang]/(mods-pages)/apps/AppItem.tsx new file mode 100644 index 00000000..d4a9683b --- /dev/null +++ b/src/app/[lang]/(mods-pages)/apps/AppItem.tsx @@ -0,0 +1,119 @@ +import { apps } from "@/const/apps"; +import { ExternalLink } from "lucide-react"; +import React from "react"; +import { useCallback } from "react"; +import useDictionary from "@/dictionaries/useDictionary"; +import { useHeadlessAIS } from "@/hooks/contexts/useHeadlessAIS"; +import { useSettings } from "@/hooks/contexts/settings"; +import { useRouter } from "next/navigation"; +import { cn } from "@/lib/utils"; +import { Dialog, DialogContent } from "@/components/ui/dialog"; +import { toast } from "@/components/ui/use-toast"; + +const AppItem = ({ + app, + mini = false, +}: { + app: (typeof apps)[number]; + mini?: boolean; +}) => { + const { language } = useSettings(); + const { ais, getACIXSTORE } = useHeadlessAIS(); + const router = useRouter(); + const dict = useDictionary(); + const [aisLoading, setAisLoading] = React.useState(false); + + const onItemClicked = useCallback(async () => { + if (app.ais) { + if (!ais.enabled) { + toast({ title: dict.ccxp.not_logged_in_error }); + return; + } + + setAisLoading(true); + const token = await getACIXSTORE(); + if (!token) { + setAisLoading(false); + return; + } + + // if starts with http, open in new tab + if (app.href.startsWith("https://www.ccxp.nthu.edu.tw")) { + // Redirect user + const redirect_url = app.href + `?ACIXSTORE=${token}`; + console.log(redirect_url); + const link = document.createElement("a"); + link.href = redirect_url; + link.target = "_blank"; + link.click(); + } else { + router.push(app.href); + } + setAisLoading(false); + } else { + router.push(app.href); + } + }, [router, app, ais, getACIXSTORE, dict]); + + return ( +
+
+ +
+
+

+ {language == "zh" ? app.title_zh : app.title_en} +

+ {!mini && app.href.startsWith("https://www.ccxp.nthu.edu.tw") && ( +

+ {dict.applist.to_ccxp} +

+ )} +
+ + +
+
+ {/*
*/} + + + + +

+ {dict.ccxp.logging_in_please_wait} +

+
+
+ + +
+ ); +}; + +export default AppItem; diff --git a/src/app/[lang]/(mods-pages)/apps/page.tsx b/src/app/[lang]/(mods-pages)/apps/page.tsx index f086d893..28f6ffbb 100644 --- a/src/app/[lang]/(mods-pages)/apps/page.tsx +++ b/src/app/[lang]/(mods-pages)/apps/page.tsx @@ -1,117 +1,17 @@ "use client"; import { apps, categories } from "@/const/apps"; -import { ExternalLink, Settings, Star } from "lucide-react"; -import React, { useCallback } from "react"; +import { Settings, Star } from "lucide-react"; import useDictionary from "@/dictionaries/useDictionary"; -import { useHeadlessAIS } from "@/hooks/contexts/useHeadlessAIS"; import { useSettings } from "@/hooks/contexts/settings"; -import { useRouter } from "next/navigation"; import { cn } from "@/lib/utils"; import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"; -import { toast } from "@/components/ui/use-toast"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Button } from "@/components/ui/button"; - -const AppItem = ({ app }: { app: (typeof apps)[number] }) => { - const { language } = useSettings(); - const { ais, getACIXSTORE } = useHeadlessAIS(); - const router = useRouter(); - const dict = useDictionary(); - const [aisLoading, setAisLoading] = React.useState(false); - - const onItemClicked = useCallback(async () => { - if (app.ais) { - if (!ais.enabled) { - toast({ title: dict.ccxp.not_logged_in_error }); - return; - } - - setAisLoading(true); - const token = await getACIXSTORE(); - if (!token) { - setAisLoading(false); - return; - } - - // if starts with http, open in new tab - if (app.href.startsWith("https://www.ccxp.nthu.edu.tw")) { - // Redirect user - const redirect_url = app.href + `?ACIXSTORE=${token}`; - console.log(redirect_url); - const link = document.createElement("a"); - link.href = redirect_url; - link.target = "_blank"; - link.click(); - } else { - router.push(app.href); - } - setAisLoading(false); - } else { - router.push(app.href); - } - }, [router, app, ais, getACIXSTORE, dict]); - - return ( -
-
- -
-
-

- {language == "zh" ? app.title_zh : app.title_en} -

- {app.href.startsWith("https://www.ccxp.nthu.edu.tw") && ( -

- {dict.applist.to_ccxp} -

- )} -
- - -
-
- {/*
*/} - - - - -

- {dict.ccxp.logging_in_please_wait} -

-
-
- - -
- ); -}; +import AppItem from "./AppItem"; const AppList = () => { const dict = useDictionary(); const { language, pinnedApps, toggleApp } = useSettings(); - const { ais } = useHeadlessAIS(); return (
diff --git a/src/components/Today/TodaySchedule.tsx b/src/components/Today/TodaySchedule.tsx index 2d192d14..151169a5 100644 --- a/src/components/Today/TodaySchedule.tsx +++ b/src/components/Today/TodaySchedule.tsx @@ -21,6 +21,7 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import useTime from "@/hooks/useTime"; import { NoClassPickedReminder } from "./NoClassPickedReminder"; import { TimetableItemDrawer } from "@/components/Timetable/TimetableItemDrawer"; +import AppItem from "@/app/[lang]/(mods-pages)/apps/AppItem"; const getRangeOfDays = (start: Date, end: Date) => { const days = []; @@ -132,23 +133,9 @@ const TodaySchedule: FC<{ if (applist.length == 0) return <>; return (
-

- {dict.applist.title} -

-
+
{applist.map((app, index) => ( - -
-
- -
-
-

- {language == "zh" ? app.title_zh : app.title_en} -

-
-
- + ))}