feat(app): fetchX issues solve and type selecting new UI

ful1e5 · Nov 29, 2023 · d781ce8 · d781ce8
1 parent 87f097d
commit d781ce8
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 58 deletions.
diff --git a/src/components/Cursors/card.tsx b/src/components/Cursors/card.tsx
@@ -47,36 +47,37 @@ export const CursorCard: React.FC<Props> = (props) => {
   };
 
   const fetchSvg = async (signal: AbortSignal) => {
+    setFrames([]);
+    setLoading(true);
+
     try {
       const fms: string[] = [];
       const step = Math.round(urls.length / DELAYS[delayX].frames);
 
-      if (signal.aborted) return null;
-
       for (let i = 0; i < urls.length; isAnimated ? (i += step) : i++) {
-        if (signal.aborted) return null;
-        const b64 = await fetchX(urls[i], {
+        const res = await fetchX(urls[i], {
           init: { next: { revalidate: 360 }, signal },
           revalidate: 1200,
           group: 'bibata.svg-cache'
-        }).then((res) => res.text());
+        });
 
+        if (!res) return;
+
+        const b64 = await res.text();
         fms.push(b64);
       }
 
-      if (signal.aborted) return null;
-
       let res = await fetchX(`/api/svg/${id}`, {
         init: {
           method: 'POST',
-          body: JSON.stringify({ colors, frames: fms, signal }),
+          body: JSON.stringify({ colors, frames: fms }),
           next: { revalidate: 360 }
         },
         revalidate: 1200,
         group: 'bibata.svg-build-cache'
       });
 
-      if (signal.aborted) return null;
+      if (!res || signal.aborted) return;
 
       const json = await res.json();
 
@@ -85,9 +86,12 @@ export const CursorCard: React.FC<Props> = (props) => {
         throw new Error(json['error']);
       } else if (json.data.length === 0) {
         setError(true);
-        throw new Error('Empty cursor frames');
+        throw new Error(
+          `Empty cursor frames while signal is ${signal.aborted}`
+        );
       } else {
-        return json.data as string[];
+        setFrames([...json.data]);
+        setLoading(false);
       }
     } catch (e) {
       if (process.env.NODE_ENV === 'development') {
@@ -98,29 +102,22 @@ export const CursorCard: React.FC<Props> = (props) => {
 Report Issue here: https://github.com/ful1e5/bibata/issues`
         );
       }
-      return null;
     }
   };
 
   useEffect(() => {
-    setFrames([]);
-    setLoading(true);
-
     const abortController = new AbortController();
     const { signal } = abortController;
+    const reason = new DOMException(
+      `Cleaning up old fetch requests of '${name}'`,
+      'AbortError'
+    );
 
-    try {
-      fetchSvg(signal).then((svgs) => {
-        svgs && setFrames([...svgs]);
-        setLoading(false);
-      });
+    fetchSvg(signal);
 
-      return () => {
-        abortController.abort(`Aborted Fetching Cursor ${name}`);
-      };
-    } catch (e) {
-      console.log(`Aborted Fetching Cursor ${name}`);
-    }
+    return () => {
+      abortController.abort(reason);
+    };
   }, [props.color, props.svg, delayX]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {

diff --git a/src/components/Cursors/index.tsx b/src/components/Cursors/index.tsx
@@ -28,7 +28,9 @@ type Props = {
 const Cursors: React.FC<Props> = memo((props) => {
   const fetcher = async (url: string) => {
     const res = await fetch(url, { next: { revalidate: 360 } });
-    return (await res.json()) as Response;
+    if (res) {
+      return (await res.json()) as Response;
+    }
   };
 
   const { data: res, isLoading } = useSWR(

diff --git a/src/components/DownloadButton/sub-buttons.tsx b/src/components/DownloadButton/sub-buttons.tsx
@@ -32,7 +32,9 @@ export const DownloadSubButtons: React.FC<Props> = (props) => {
           <strong className='text-xs font-extrabold'>(.zip)</strong>
         </button>
       </div>
-      <p className='text-sm text-center text-white/[.6]'>v{props.version}</p>
+      <p className='text-xs text-center font-mono text-white/[.8]'>
+        v{props.version}
+      </p>
     </div>
   );
 };
diff --git a/src/components/TypePicker.tsx b/src/components/TypePicker.tsx
@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import { ModernSVG, OriginalSVG } from './svgs';
+
 interface Props {
   list: string[];
   value: string;
@@ -12,19 +14,24 @@ interface Props {
 export const TypePicker: React.FC<Props> = (props) => {
   return (
     <div className='flex items-center justify-center'>
-      <div className='w-full sm:w-1/2 bg-black/[0.2] overflow-hidden rounded-3xl border-white/[.08] border'>
-        <div className={`p-1 grid grid-cols-2 gap-y-4 gap-1`}>
+      <div className='w-5/6 sm:w-1/2 lg:w-2/5 bg-black/[0.2] overflow-hidden '>
+        <div className={`grid grid-cols-2 gap-3`}>
           {props.list.map((t) => (
             <button
               key={t}
               title={`Bibata ${t}`}
+              disabled={t === props.value}
               onClick={() => props.onClick(t)}
-              className={`${
+              className={`py-2 inline-flex justify-center items-center gap font-bold border rounded-2xl shadow-md border-gray-500 ${
                 t === props.value
-                  ? 'bg-white text-black font-bold'
-                  : 'bg-transparent text-white/[.65] hover:text-white font-normal hover:font-bold'
-              } py-4 font-bold text-center rounded-2xl`}>
-              {t}
+                  ? 'bg-white fill-black text-black font-bold'
+                  : 'fill-gray-500 text-gray-500 hover:text-white hover:fill-white hover:border-white'
+              }`}>
+              <>
+                {t === 'Modern' && <ModernSVG />}
+                {t === 'Original' && <OriginalSVG />}
+                {t}
+              </>
             </button>
           ))}
         </div>

diff --git a/src/components/svgs/index.ts b/src/components/svgs/index.ts
@@ -15,6 +15,9 @@ import { WindowsDownloadSVG } from './windows';
 import { RefreshSVG } from './refresh';
 import { CloseSVG } from './close';
 
+import { ModernSVG } from './modern';
+import { OriginalSVG } from './original';
+
 export {
   BibataLogo,
   GitHubLogo,
@@ -28,5 +31,7 @@ export {
   WindowsDownloadSVG,
   LinuxDownloadSVG,
   RefreshSVG,
-  CloseSVG
+  CloseSVG,
+  ModernSVG,
+  OriginalSVG
 };
diff --git a/src/components/svgs/modern.tsx b/src/components/svgs/modern.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import React from 'react';
+
+type Props = {};
+
+// eslint-disable-next-line no-unused-vars
+export const ModernSVG: React.FC<Props> = (_props) => {
+  return (
+    <svg
+      className='fill-inherit w-16 p-2'
+      viewBox='0 0 256 256'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'>
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M36.9999 200.555L36.9999 53.5382C36.9999 45.7881 37.8456 38.1462 40.4754 31.5932C43.2491 24.6819 48.7293 17.5261 58.1536 14.9272C66.7205 12.5646 74.6932 15.1117 80.3278 17.9146C86.177 20.8242 91.9096 25.1867 97.3719 30.1754L206.802 127.18L206.831 127.206C215.513 134.974 218.973 146.852 219.249 156.193C219.499 164.624 217.043 180.451 202.058 186.721C196.233 189.158 189.241 189.409 184.872 189.517C182.271 189.581 179.47 189.583 176.75 189.585L176.669 189.585C173.855 189.587 171.035 189.589 168.123 189.644C156.173 189.87 144.847 191.009 135.657 195.155C126.54 199.268 118.368 206.962 110.329 215.834C108.932 217.375 107.289 219.24 105.619 221.136C103.29 223.779 100.909 226.483 99.0674 228.453C95.9771 231.761 91.0028 236.908 84.9645 239.632C76.991 243.229 69.1452 242.016 63.3611 239.571C57.7622 237.204 53.1818 233.389 49.7415 229.65C43.3127 222.664 37.1632 211.771 37.0017 200.679L36.9999 200.555ZM85.9973 42.81C66.4624 24.9296 53.9998 26.4621 53.9999 53.5382L53.9999 200.431C54.1607 211.478 67.8509 228.703 77.9736 224.136C81.9089 222.361 86.6634 216.95 92.4759 210.336C101.615 199.936 113.369 186.56 128.666 179.659C144.291 172.61 162.649 172.596 176.614 172.585C185.015 172.579 191.827 172.574 195.496 171.038C205.263 166.951 203.758 147.267 195.496 139.875L85.9973 42.81Z'
+      />
+    </svg>
+  );
+};
diff --git a/src/components/svgs/original.tsx b/src/components/svgs/original.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import React from 'react';
+
+type Props = {};
+
+// eslint-disable-next-line no-unused-vars
+export const OriginalSVG: React.FC<Props> = (_props) => {
+  return (
+    <svg
+      className='fill-inherit w-16 p-2'
+      viewBox='0 0 256 256'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'>
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M53.9986 15.2881L231.789 172.408L125.988 174.809L54.0074 250.574L53.9986 15.2881ZM118.534 157.974L188 156.398L71 53.0001L71.0058 208L118.534 157.974Z'
+      />
+    </svg>
+  );
+};
diff --git a/src/utils/fetchX.ts b/src/utils/fetchX.ts
@@ -24,36 +24,44 @@ export const fetchX = async (url: string, options?: Options) => {
   const cache = await caches.open(group);
   let res = await cache.match(key);
 
-  if (!res) {
+  if (!res && !init?.signal?.aborted) {
     res = await fetch(url, { ...options?.init });
 
-    if (res.status === 200) {
+    if (res && res.status === 200) {
       const cacheTimestamp = new Date().toUTCString();
-      const headers = new Headers(res.headers);
-      headers.set('x-cache-timestamp', cacheTimestamp);
-      res = new Response(res.body, {
-        status: res.status,
-        statusText: res.statusText,
-        headers
-      });
-      await cache.put(key, res.clone());
+      if (res?.headers) {
+        const headers = new Headers(res.headers);
+        headers.set('x-cache-timestamp', cacheTimestamp);
+        res = new Response(res.body, {
+          status: res.status,
+          statusText: res.statusText,
+          headers
+        });
+        await cache.put(key, res.clone());
+      } else {
+        return;
+      }
     } else {
-      await cache.delete(url);
+      await cache.delete(key);
     }
   }
 
-  // Check if the cache has exceeded the TTL
-  const cacheTimestamp = res.headers.get('x-cache-timestamp');
-  if (cacheTimestamp) {
-    const currentTime = Date.now();
-    const cacheTime = new Date(cacheTimestamp).getTime();
-    const cacheAge = (currentTime - cacheTime) / 1000; // Calculate cache age in seconds
+  if (!res?.headers) {
+    return;
+  } else {
+    // Check if the cache has exceeded the TTL
+    const cacheTimestamp = res.headers.get('x-cache-timestamp');
+    if (cacheTimestamp) {
+      const currentTime = Date.now();
+      const cacheTime = new Date(cacheTimestamp).getTime();
+      const cacheAge = (currentTime - cacheTime) / 1000; // Calculate cache age in seconds
 
-    if (cacheAge > ttl) {
-      // Cache has expired, delete it
-      await cache.delete(key);
+      if (cacheAge > ttl) {
+        // Cache has expired, delete it
+        await cache.delete(key);
+      }
     }
-  }
 
-  return res;
+    return res;
+  }
 };