Refactor: apply code review suggestions

reactjs · Aug 19, 2023 · 4383ac9 · 4383ac9
1 parent ef1158b
commit 4383ac9
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 28 deletions.
diff --git a/src/components/ErrorDecoder.tsx b/src/components/ErrorDecoder.tsx
@@ -1,5 +1,4 @@
-import {useMemo} from 'react';
-import {useRouter} from 'next/router';
+import {useEffect, useState} from 'react';
 
 function replaceArgs(
   msg: string,
@@ -48,16 +47,21 @@ function urlify(str: string): React.ReactNode[] {
 
 // `?args[]=foo&args[]=bar`
 // or `// ?args[0]=foo&args[1]=bar`
-function parseQueryString(
-  query: ReturnType<typeof useRouter>['query']
-): Array<string | undefined> {
+function parseQueryString(search: string): Array<string | undefined> {
+  const rawQueryString = search.substring(1);
+  if (!rawQueryString) {
+    return [];
+  }
+
   const args: Array<string | undefined> = [];
 
-  Object.entries(query).forEach(([key, value]) => {
-    if (key.startsWith('args[')) {
-      args.push(Array.isArray(value) ? value[0] : value);
+  const queries = rawQueryString.split('&');
+  for (let i = 0; i < queries.length; i++) {
+    const query = decodeURIComponent(queries[i]);
+    if (query.startsWith('args[')) {
+      args.push(query.slice(query.indexOf(']=') + 2));
     }
-  });
+  }
 
   return args;
 }
@@ -67,31 +71,28 @@ interface ErrorDecoderProps {
 }
 
 export default function ErrorDecoder({errorMessages}: ErrorDecoderProps) {
-  const {isReady, query} = useRouter();
-
-  const msg = useMemo<React.ReactNode | null>(() => {
-    if (errorMessages == null) {
-      return null;
-    }
+  /** error messages that contain %s require reading location.search */
+  const [message, setMessage] = useState<React.ReactNode | null>(() =>
+    errorMessages ? urlify(errorMessages) : null
+  );
 
-    if (!errorMessages.includes('%s')) {
-      return urlify(errorMessages);
+  useEffect(() => {
+    if (errorMessages == null || !errorMessages.includes('%s')) {
+      return;
     }
 
-    if (typeof window !== 'undefined' && isReady) {
-      return urlify(
+    setMessage(
+      urlify(
         replaceArgs(
           errorMessages,
-          parseQueryString(query),
+          parseQueryString(window.location.search),
           '[missing argument]'
         )
-      );
-    }
-
-    return urlify(replaceArgs(errorMessages, [], '[parsing argument]'));
-  }, [errorMessages, isReady, query]);
+      )
+    );
+  }, [errorMessages]);
 
-  if (!msg) {
+  if (!message) {
     return (
       <p>
         When you encounter an error, you{"'"}ll receive a link to this page for
@@ -105,8 +106,8 @@ export default function ErrorDecoder({errorMessages}: ErrorDecoderProps) {
       <p>
         <b>The full text of the error you just encountered is:</b>
       </p>
-      <code className="block bg-red-100 text-red-600 py-4 px-6 mt-5 rounded-lg">
-        <b>{msg}</b>
+      <code className="block bg-red-100 text-red-600 py-4 px-6 mt-5 rounded-lg animate-fade-up">
+        <b>{message}</b>
       </code>
     </div>
   );

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -101,6 +101,7 @@ module.exports = {
         marquee2: 'marquee2 40s linear infinite',
         'large-marquee': 'large-marquee 80s linear infinite',
         'large-marquee2': 'large-marquee2 80s linear infinite',
+        'fade-up': 'fade-up 0.1s 1s both',
       },
       keyframes: {
         shimmer: {
@@ -138,6 +139,16 @@ module.exports = {
           '0%': {transform: 'translateX(200%)'},
           '100%': {transform: 'translateX(0%)'},
         },
+        'fade-up': {
+          '0%': {
+            opacity: '0',
+            transform: 'translateY(2rem)',
+          },
+          '100%': {
+            opacity: '1',
+            transform: 'translateY(0)',
+          },
+        },
       },
       colors,
       gridTemplateColumns: {