ADD: noscript support for random images (+ minor code cleanup)

FileFormatInfo · Jul 31, 2024 · a8b3faa · a8b3faa
1 parent e613ad7
commit a8b3faa
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 59 deletions.
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
@@ -2,12 +2,10 @@ import {
   Box,
   Flex,
   Text,
-  IconButton,
   HStack,
   useColorModeValue,
   Stack,
 } from "@chakra-ui/react";
-import { PiHouseBold } from "react-icons/pi";
 import { Link as RemixLink } from "@remix-run/react";
 
 
@@ -30,19 +28,6 @@ export const Navbar = () => {
         align="center"
         bg={bg}
       >
-        <Flex
-          flex={{ base: 1, md: "auto" }}
-          display={{ base: "flex", md: "none" }}
-        >
-          <IconButton
-            as={RemixLink}
-            boxSize="1.5em"
-            to="/"
-            icon={<PiHouseBold />}
-            variant="ghost"
-            aria-label="SVG View"
-          />
-        </Flex>
         <Flex flex={{ base: 1 }} justify={{ base: "center", md: "start" }}>
           <Flex display={{ base: "none", md: "flex" }} ml={10}>
             <Stack direction="row" spacing={4}>

diff --git a/app/routes/random[.]html.tsx b/app/routes/random[.]html.tsx
@@ -1,56 +1,59 @@
-import { useEffect } from "react";
-import { useNavigate, useSearchParams } from "@remix-run/react";
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { Await, useLoaderData } from "@remix-run/react";
 import { Center, Flex, Spinner, Text, VStack } from "@chakra-ui/react";
+import { redirect } from "@remix-run/node";
+import { Suspense } from "react";
 
 import { t } from "~/utils/i18n";
 
-export default function RandomImage() {
-    const [searchParams] = useSearchParams();
-    const navigate = useNavigate();
-
-    let hostname = searchParams.get("src");
+export async function loader({
+    request,
+}: LoaderFunctionArgs) {
+    let hostname = new URL(request.url).searchParams.get('src');
     if (
         hostname == null ||
         /^(([a-z0-9]|[a-z0-9][-a-z0-9]*[a-z0-9])\.)+([a-z]{2,})$/.exec(hostname) ==
         null
     ) {
         hostname = "logosear.ch";
     }
-    useEffect(() => {
-        const abortController = new AbortController();
-        (async () => {
-            try {
-                console.log(`fetching random image`);
-                const resp = await fetch(`https://${hostname}/api/random.json?max=1`, {
-                    signal: abortController.signal,
-                });
-                const data = await resp.json();
 
-                setTimeout(() => {
-                    console.log(`random image: ${data.results[0].url}`);
-                    navigate(
-                        `/view.html?url=${encodeURIComponent(
-                            data.results[0].url
-                        )}&zoom=max`
-                    );
-                }, 1000);
-            } catch (err) {
-                console.error(err);
-                if (err instanceof Error && err.name !== "AbortError") {
-                    navigate(`/open.html?error=${encodeURIComponent(err.name)}`);
-                }
-            }
-        })();
+    try {
+        //LATER: for testing await new Promise(r => setTimeout(r, 1000))
+        const resp = await fetch(`https://${hostname}/api/random.json?max=1`);
+        const data = await resp.json();
+
+        return redirect(`/view.html?url=${encodeURIComponent(data.results[0].url)}&zoom=max`);
+    } catch (e: unknown) {
+        const err = e instanceof Error ? e : new Error(`An error occurred ${e}`);
+        return redirect(`/?error=${encodeURIComponent(err.message)}`);
+    }
+}
+
+//LATER: neither is being shown...
+export default function RandomImage() {
+    const { url } = useLoaderData<typeof loader>();
+    return (
+        <Suspense fallback={<FullPageSpinner color="red" message={t("Loading...")} />}>
+            <Await resolve={url}>
+                {(url) => <FullPageSpinner color="blue" message={t("Redirecting...") + url} />}
+            </Await>
+        </Suspense>
+    );
+}
 
-        return () => abortController.abort();
-    }, [hostname, navigate]);
+type IProps = {
+    message: string;
+    color: string;
+}
 
+function FullPageSpinner({ color, message }: IProps) {
     return (
         <Flex w="100vw" h="100vh" bg={"url(/images/backgrounds/memphis-mini.png)"}>
-            <Center flex={1}>
+            <Center flex={1} bg={color}>
                 <VStack>
                     <Spinner size="xl" />
-                    <Text>{t("Loading...")}</Text>
+                    <Text>{message}</Text>
                 </VStack>
             </Center>
         </Flex>

diff --git a/app/routes/view[.]html/BackgroundButtons.tsx b/app/routes/view[.]html/BackgroundButtons.tsx
@@ -1,4 +1,3 @@
-"use client";
 import {
   PiCheckerboardFill,
   PiSquare,

diff --git a/app/routes/view[.]html/DesktopToolbar.tsx b/app/routes/view[.]html/DesktopToolbar.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { PiArrowSquareOutBold, PiBug } from "react-icons/pi";
+import { PiBug } from "react-icons/pi";
 
 import {
   ButtonGroup,

diff --git a/app/routes/view[.]html/ExitButton.tsx b/app/routes/view[.]html/ExitButton.tsx
@@ -1,8 +1,6 @@
-import { IconType } from "react-icons";
-
 import { Icon, IconButton } from "@chakra-ui/react";
 
-import { Link as RemixLink, useSearchParams } from "@remix-run/react";
+import { Link as RemixLink } from "@remix-run/react";
 import { PiArrowSquareOutBold } from "react-icons/pi";
 
 interface IProps {

diff --git a/app/routes/view[.]html/MobileToolbar.tsx b/app/routes/view[.]html/MobileToolbar.tsx
@@ -1,6 +1,5 @@
-"use client";
 import { useRef } from "react";
-import { PiArrowSquareOutBold, PiListBold, PiXBold } from "react-icons/pi";
+import { PiListBold, PiXBold } from "react-icons/pi";
 
 import {
   Button,
@@ -27,8 +26,6 @@ import { Link as RemixLink, useSearchParams } from "@remix-run/react";
 
 import { t } from "~/utils/i18n";
 
-import { ToolbarButton } from "~/components/ToolbarButton";
-
 import { BackgroundButtons } from "./BackgroundButtons";
 import { BorderButtons } from "./BorderButtons";
 import { ExitButton } from "./ExitButton";