fix: flashing to continue on tab switching (#11)

turing-machines · Jun 4, 2024 · 3b807e8 · 3b807e8
1 parent a138c11
commit 3b807e8
Show file tree

Hide file tree

Showing 9 changed files with 425 additions and 236 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "bmc-ui",
-    "version": "3.1.1",
+    "version": "3.1.2",
     "private": true,
     "type": "module",
     "scripts": {

diff --git a/src/app.tsx b/src/app.tsx
@@ -6,6 +6,7 @@ import ReactDOM from "react-dom/client";
 import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { AuthProvider } from "@/contexts/AuthContext";
+import { FlashProvider } from "@/contexts/FlashContext";
 import InnerApp from "@/innerApp";
 import { type router } from "@/router";
 
@@ -27,10 +28,12 @@ if (!rootElement.innerHTML) {
       <ThemeProvider attribute="class">
         <AuthProvider>
           <QueryClientProvider client={queryClient}>
-            <TooltipProvider delayDuration={0}>
-              <InnerApp />
-              <Toaster />
-            </TooltipProvider>
+            <FlashProvider>
+              <TooltipProvider delayDuration={0}>
+                <InnerApp />
+                <Toaster />
+              </TooltipProvider>
+            </FlashProvider>
           </QueryClientProvider>
         </AuthProvider>
       </ThemeProvider>

diff --git a/src/components/navigation-links.tsx b/src/components/navigation-links.tsx
@@ -2,6 +2,9 @@ import { Link, type LinkProps } from "@tanstack/react-router";
 import { ArrowRightIcon } from "lucide-react";
 import { type ReactNode, useMemo } from "react";
 
+import { useFlash } from "@/hooks/use-flash";
+import { cn } from "@/lib/utils";
+
 const navigationLinks = [
   { to: "/info", label: "Info" },
   { to: "/nodes", label: "Nodes" },
@@ -11,15 +14,24 @@ const navigationLinks = [
   { to: "/about", label: "About" },
 ] as const;
 
+interface FlashingLinkProps {
+  isFlashing: boolean;
+}
+
 function MobileLink({
   to,
   children,
   onClick,
-}: LinkProps & { onClick?: () => void; children: ReactNode }) {
+  isFlashing,
+}: LinkProps &
+  FlashingLinkProps & { onClick?: () => void; children: ReactNode }) {
   return (
     <Link
       to={to}
-      className="mx-2 flex items-center justify-between text-lg font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200"
+      className={cn(
+        "mx-2 flex items-center justify-between text-lg font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200",
+        isFlashing && "animate-pulse duration-700"
+      )}
       activeProps={{
         className: "text-neutral-900 dark:text-neutral-200",
       }}
@@ -31,12 +43,15 @@ function MobileLink({
   );
 }
 
-function TabLink({ to, children }: LinkProps) {
+function TabLink({ to, children, isFlashing }: LinkProps & FlashingLinkProps) {
   return (
     <Link
       to={to}
       viewTransition
-      className="w-full py-3.5 text-center text-base font-semibold hover:bg-white dark:hover:bg-neutral-800"
+      className={cn(
+        "w-full py-3.5 text-center text-base font-semibold hover:bg-white dark:hover:bg-neutral-800",
+        isFlashing && "animate-pulse duration-700"
+      )}
       activeProps={{
         className:
           "border-t-2 border-neutral-300 bg-white outline-none dark:border-neutral-700 dark:bg-neutral-900 hover:bg-white dark:hover:bg-neutral-900",
@@ -54,24 +69,49 @@ export default function NavigationLinks({
   isDesktop: boolean;
   onClick?: () => void;
 }) {
+  const { flashType, isFlashing } = useFlash();
+
   const renderLinks = useMemo(
     () =>
-      navigationLinks.map(({ to, label }) => (
-        <TabLink key={to} to={to}>
-          {label}
-        </TabLink>
-      )),
-    []
+      navigationLinks.map(({ to, label }) => {
+        const isNodeFlashing =
+          isFlashing && flashType === "node" && to === "/flash-node";
+        const isFirmwareFlashing =
+          isFlashing && flashType === "firmware" && to === "/firmware-upgrade";
+
+        return (
+          <TabLink
+            key={to}
+            to={to}
+            isFlashing={isNodeFlashing || isFirmwareFlashing}
+          >
+            {label}
+          </TabLink>
+        );
+      }),
+    [isFlashing, flashType]
   );
 
   const renderMobileLinks = useMemo(
     () =>
-      navigationLinks.map(({ to, label }) => (
-        <MobileLink key={to} to={to} onClick={onClick}>
-          {label}
-        </MobileLink>
-      )),
-    []
+      navigationLinks.map(({ to, label }) => {
+        const isNodeFlashing =
+          isFlashing && flashType === "node" && to === "/flash-node";
+        const isFirmwareFlashing =
+          isFlashing && flashType === "firmware" && to === "/firmware-upgrade";
+
+        return (
+          <MobileLink
+            key={to}
+            to={to}
+            onClick={onClick}
+            isFlashing={isNodeFlashing || isFirmwareFlashing}
+          >
+            {label}
+          </MobileLink>
+        );
+      }),
+    [isFlashing, flashType, onClick]
   );
 
   if (isDesktop)