From 101e6c9a3befd87da2a156dd62c2a578d95ab800 Mon Sep 17 00:00:00 2001
From: ikkz <ylei.mk@gmail.com>
Date: Thu, 19 Dec 2024 15:38:47 +0800
Subject: [PATCH] refactor: error boundary

---
 src/components/card-container.tsx | 31 -------------------------------
 src/components/card-shell.tsx     |  8 ++++----
 src/entries/index.tsx             | 25 ++++++++++++++++++++++---
 src/entries/mcq.tsx               | 13 ++++++++-----
 4 files changed, 34 insertions(+), 43 deletions(-)
 delete mode 100644 src/components/card-container.tsx

diff --git a/src/components/card-container.tsx b/src/components/card-container.tsx
deleted file mode 100644
index 659dc64..0000000
--- a/src/components/card-container.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { locale } from 'at/locale';
-import clsx from 'clsx';
-import { FC, PropsWithChildren } from 'react';
-import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
-
-export const CardContainer: FC<
-  PropsWithChildren & {
-    className?: string;
-  }
-> = ({ children, className }) => {
-  return (
-    <div
-      className={clsx(
-        'py-7 font-sans text-base',
-        `locale-${locale}`,
-        className,
-      )}
-    >
-      <ErrorBoundary fallbackRender={fallbackRender}>{children}</ErrorBoundary>
-    </div>
-  );
-};
-
-function fallbackRender({ error }: FallbackProps) {
-  return (
-    <div role="alert">
-      <p>Something went wrong:</p>
-      <pre style={{ color: 'red' }}>{error.message}</pre>
-    </div>
-  );
-}
diff --git a/src/components/card-shell.tsx b/src/components/card-shell.tsx
index f4e204d..9200818 100644
--- a/src/components/card-shell.tsx
+++ b/src/components/card-shell.tsx
@@ -1,6 +1,5 @@
 import { About } from './about';
 import { Block } from './block';
-import { CardContainer } from './card-container';
 import { Dot } from './dot';
 import { AnkiField } from './field';
 import { SelectionMenu } from './selection-menu';
@@ -47,9 +46,10 @@ export const CardShell: FC<Props> = ({
   const [showSettings, setShowSettings] = useState(false);
 
   return (
-    <CardContainer
+    <div
       className={clsx(
-        'tappable m-auto w-full max-w-xl px-5 py-7 font-sans text-base lg:max-w-3xl',
+        'tappable m-auto px-5 py-7 font-sans text-base',
+        'w-full max-w-xl lg:max-w-3xl',
         `locale-${locale}`,
       )}
     >
@@ -114,6 +114,6 @@ export const CardShell: FC<Props> = ({
           </Block>
         )}
       </div>
-    </CardContainer>
+    </div>
   );
 };
diff --git a/src/entries/index.tsx b/src/entries/index.tsx
index 77209de..fd6a8f7 100644
--- a/src/entries/index.tsx
+++ b/src/entries/index.tsx
@@ -4,14 +4,17 @@ import { APP_CONTAINER_ID } from '@/utils/const';
 import { Provider } from 'jotai';
 import { render } from 'preact';
 import { ComponentType } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 
 let container: HTMLElement | null = document.getElementById(APP_CONTAINER_ID);
 
 export const setup = (App: ComponentType) => {
   render(
-    <Provider store={store}>
-      <App />
-    </Provider>,
+    <ErrorBoundary fallbackRender={fallbackRender}>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </ErrorBoundary>,
     container!,
   );
   const id = setInterval(() => {
@@ -22,3 +25,19 @@ export const setup = (App: ComponentType) => {
     }
   }, 500);
 };
+function fallbackRender({ error }: FallbackProps) {
+  return (
+    <div role="alert" className="p-10">
+      <p>Something went wrong.</p>
+      <p>
+        Please open an issue at{' '}
+        <a href="https://github.com/ikkz/anki-template/issues">
+          https://github.com/ikkz/anki-template/issues
+        </a>{' '}
+        with screenshot
+      </p>
+      <pre style={{ color: 'red' }}>{error?.message}</pre>
+      <pre style={{ color: 'red' }}>{error?.stack}</pre>
+    </div>
+  );
+}
diff --git a/src/entries/mcq.tsx b/src/entries/mcq.tsx
index 7699fe9..9b450ff 100644
--- a/src/entries/mcq.tsx
+++ b/src/entries/mcq.tsx
@@ -18,13 +18,12 @@ import { useAutoAnimate } from '@formkit/auto-animate/preact';
 import useCreation from 'ahooks/es/useCreation';
 import useMemoizedFn from 'ahooks/es/useMemoizedFn';
 import useSelections from 'ahooks/es/useSelections';
-import useTimeout from 'ahooks/es/useTimeout';
 import { locale } from 'at/locale';
 import { fields } from 'at/options';
 import clsx from 'clsx';
 import { useAtomValue } from 'jotai';
 import { useEffect } from 'react';
-import { shuffle } from 'remeda';
+import { doNothing, shuffle } from 'remeda';
 
 const fieldToAlpha = (field: string) => field.slice(field.length - 1);
 
@@ -90,11 +89,15 @@ export default () => {
   });
 
   const [parent] = useAutoAnimate();
-  useTimeout(() => {
+  useEffect(() => {
     if (back) {
-      setOptions(originOptions);
+      const timeout = setTimeout(() => {
+        setOptions(originOptions);
+      }, 600);
+      return () => clearTimeout(timeout);
     }
-  }, 600);
+    return doNothing;
+  }, [back]);
 
   const note = useField('note');
   const isMultipleChoice = answers.length > 1;