adding a force-refresh button to anime admin dashboard

Signed-off-by: Vu Van Dung <[email protected]>
joulev · Dec 7, 2023 · 8206195 · 8206195
1 parent e575175
commit 8206195
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 19 deletions.
diff --git a/src/components/anime/layout.tsx b/src/components/anime/layout.tsx
@@ -6,6 +6,7 @@ import {
   PlayCircle,
   PlusCircle,
   Repeat,
+  RotateCcw,
   Tv2,
   XCircle,
 } from "lucide-react";
@@ -28,7 +29,12 @@ function getNavbarItems(
     { icon: <PauseCircle />, status: "paused", count: lists.paused.length },
     { icon: <XCircle />, status: "dropped", count: lists.dropped.length },
     { icon: <Calendar />, status: "planning", count: lists.planning.length },
-    ...(isAdmin ? [{ icon: <PlusCircle />, status: "add-to-ptw" }] : []),
+    ...(isAdmin
+      ? [
+          { icon: <PlusCircle />, status: "add-to-ptw" },
+          { icon: <RotateCcw />, status: "refresh" },
+        ]
+      : []),
   ];
 }
 

diff --git a/src/components/anime/sidebar.tsx b/src/components/anime/sidebar.tsx
@@ -14,7 +14,9 @@ import {
   SidebarSectionItemName,
   SidebarSectionItems,
 } from "~/components/ui/sidebar";
+import { forceRefresh } from "~/lib/anime/actions";
 import { getListTitleFromStatus } from "~/lib/anime/utils";
+import { useTransitionWithNProgress } from "~/lib/hooks/use-transition-with-nprogress";
 
 interface Item {
   icon: React.ReactNode;
@@ -24,27 +26,53 @@ interface Item {
 
 function Navigation({ basePath, items }: { basePath: string; items: Item[] }) {
   const pathname = usePathname();
+  const startTransition = useTransitionWithNProgress();
+  const refresh = () => startTransition(forceRefresh);
   return (
     <SidebarSection>
       <SidebarSectionItems>
-        {items.map(({ icon, status, count }) => (
-          <SidebarSectionItem
-            key={status}
-            active={
-              `${basePath}/${status}` === pathname ||
-              (status === "watching" && pathname === basePath)
-            }
-            asChild
-          >
-            <Link href={`${basePath}/${status}`} unstyled>
-              {icon}
-              <SidebarSectionItemName>
-                {status === "add-to-ptw" ? "Add to PTW" : getListTitleFromStatus(status)}
-              </SidebarSectionItemName>
-              {count ? <SidebarSectionItemCounter>{count}</SidebarSectionItemCounter> : null}
-            </Link>
-          </SidebarSectionItem>
-        ))}
+        {items.map(({ icon, status, count }) => {
+          if (status === "add-to-ptw") {
+            return (
+              <SidebarSectionItem
+                key={status}
+                active={`${basePath}/${status}` === pathname}
+                asChild
+              >
+                <Link href={`${basePath}/${status}`} unstyled>
+                  {icon}
+                  <SidebarSectionItemName>Add to PTW</SidebarSectionItemName>
+                </Link>
+              </SidebarSectionItem>
+            );
+          }
+          if (status === "refresh") {
+            return (
+              <SidebarSectionItem key={status} asChild>
+                <button type="button" className="text-left" onClick={refresh}>
+                  {icon}
+                  <SidebarSectionItemName>Force-refresh</SidebarSectionItemName>
+                </button>
+              </SidebarSectionItem>
+            );
+          }
+          return (
+            <SidebarSectionItem
+              key={status}
+              active={
+                `${basePath}/${status}` === pathname ||
+                (status === "watching" && pathname === basePath)
+              }
+              asChild
+            >
+              <Link href={`${basePath}/${status}`} unstyled>
+                {icon}
+                <SidebarSectionItemName>{getListTitleFromStatus(status)}</SidebarSectionItemName>
+                {count ? <SidebarSectionItemCounter>{count}</SidebarSectionItemCounter> : null}
+              </Link>
+            </SidebarSectionItem>
+          );
+        })}
       </SidebarSectionItems>
     </SidebarSection>
   );

diff --git a/src/lib/anime/actions.ts b/src/lib/anime/actions.ts
@@ -58,3 +58,8 @@ export const removeFromList = generateAction(async (client, item: AnimeListItem)
 export const addToPTW = generateAction(async (client, itemId: number) => {
   await client.request(ADD_ANIME, { mediaId: itemId });
 }, "/admin/manage/anime/planning");
+
+// eslint-disable-next-line @typescript-eslint/require-await -- Server actions must be async
+export async function forceRefresh() {
+  revalidateTag("anime-lists");
+}