From fd55e892eabda710f5406f9c012be0982d79e386 Mon Sep 17 00:00:00 2001
From: orionna319 <85230052+orionna319@users.noreply.github.com>
Date: Tue, 16 Jan 2024 20:51:03 +0800
Subject: [PATCH] fix: svg not found causes page crash (#598)

---
 src/components/SVGStat/index.tsx  | 23 ++++-------------------
 src/components/YearStat/index.tsx | 14 ++++----------
 src/utils/svgUtils.tsx            | 20 ++++++++++++++++++++
 3 files changed, 28 insertions(+), 29 deletions(-)
 create mode 100644 src/utils/svgUtils.tsx

diff --git a/src/components/SVGStat/index.tsx b/src/components/SVGStat/index.tsx
index f80ce613523..af77d8b7c6b 100644
--- a/src/components/SVGStat/index.tsx
+++ b/src/components/SVGStat/index.tsx
@@ -1,27 +1,12 @@
-import { ComponentType, lazy, Suspense } from 'react'
+import { lazy, Suspense } from 'react'
 import styles from './style.module.scss';
 import { totalStat } from '@assets/index'
+import { loadSvgComponent } from '@/utils/svgUtils';
 
 // Lazy load both github.svg and grid.svg
-const GithubSvg = lazy(() =>
-  totalStat['./github.svg']()
-    .then((res) => {
-      return { default: res as ComponentType<any> }
-    })
-    .catch(() => {
-      return { default: () => <div>Failed to load SVG</div> };
-    })
-)
+const GithubSvg = lazy(() => loadSvgComponent(totalStat, './github.svg'))
 
-const GridSvg = lazy(() =>
-  totalStat['./grid.svg']()
-    .then((res) => {
-      return { default: res as ComponentType<any> }
-    })
-    .catch(() => {
-      return { default: () => <div>Failed to load SVG</div> };
-    })
-)
+const GridSvg = lazy(() => loadSvgComponent(totalStat, './grid.svg'))
 
 const SVGStat = () => (
   <div id="svgStat">
diff --git a/src/components/YearStat/index.tsx b/src/components/YearStat/index.tsx
index 9d891883f01..ef0415824e7 100644
--- a/src/components/YearStat/index.tsx
+++ b/src/components/YearStat/index.tsx
@@ -1,24 +1,18 @@
-import { ComponentType, lazy, Suspense } from 'react';
+import { lazy, Suspense } from 'react';
 import Stat from '@/components/Stat';
 import useActivities from '@/hooks/useActivities';
 import { formatPace } from '@/utils/utils';
 import styles from './style.module.scss';
 import useHover from '@/hooks/useHover';
-import { yearStats } from '@assets/index'
+import { yearStats } from '@assets/index';
+import { loadSvgComponent } from '@/utils/svgUtils';
 
 const YearStat = ({ year, onClick }: { year: string, onClick: (_year: string) => void }) => {
   let { activities: runs, years } = useActivities();
   // for hover
   const [hovered, eventHandlers] = useHover();
   // lazy Component
-  const YearSVG = lazy(() =>
-    yearStats[`./year_${year}.svg`]()
-      .then((res) => ({ default: res as ComponentType<any> }))
-      .catch((err) => {
-        console.error(err);
-        return { default: () => <div>Failed to load SVG</div> };
-      })
-  );
+  const YearSVG = lazy(() => loadSvgComponent(yearStats, `./year_${year}.svg`));
 
   if (years.includes(year)) {
     runs = runs.filter((run) => run.start_date_local.slice(0, 4) === year);
diff --git a/src/utils/svgUtils.tsx b/src/utils/svgUtils.tsx
new file mode 100644
index 00000000000..f5bdae4b403
--- /dev/null
+++ b/src/utils/svgUtils.tsx
@@ -0,0 +1,20 @@
+import { ComponentType } from 'react';
+
+type SvgComponent = {
+  default: ComponentType<any>;
+};
+
+const FailedLoadSvg = () => <div>Failed to load SVG</div>;
+
+export const loadSvgComponent = async (
+  stats: Record<string, () => Promise<unknown>>,
+  path: string
+): Promise<SvgComponent> => {
+  try {
+    const module = await stats[path]();
+    return { default: module as ComponentType<any> };
+  } catch (error) {
+    console.error(error);
+    return { default: FailedLoadSvg };
+  }
+};