Merge pull request #103 from JohnsonMao/refactor/common-layout

refactor: common layout
daodaoedu · Oct 15, 2024 · 8871f37 · 8871f37
2 parents 218b596 + 2956e7b
commit 8871f37
Show file tree

Hide file tree

Showing 30 changed files with 272 additions and 261 deletions.
diff --git a/layout/DefaultLayout.jsx b/layout/DefaultLayout.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import Navigation from '@/shared/components/Navigation_v2';
+import Footer from '@/shared/components/Footer_v2';
+
+const DefaultLayout = ({ children }) => {
+  return (
+    <>
+      <Navigation />
+      {children}
+      <Footer />
+    </>
+  );
+};
+
+export default DefaultLayout;
diff --git a/pages/404.jsx b/pages/404.jsx
@@ -18,140 +18,146 @@ const BodyWrapper = styled.div`
 const NotExistPage = () => {
   const router = useRouter();
   return (
-    <BodyWrapper>
-      <Navigatin />
-      <Paper
+    <Paper
+      sx={{
+        width: '90%',
+        margin: '20px auto',
+        padding: '20px',
+        minHeight: '60vh',
+      }}
+    >
+      <Typography
+        variant="h2"
+        sx={{
+          color: '#536166',
+          marginTop: '10px',
+          fontWeight: 'bold',
+          fontSize: '30px',
+          letterSpacing: '0.08em',
+          textAlign: 'center',
+          marginRight: '20px',
+        }}
+      >
+        這座島已經搬新家囉
+      </Typography>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <img
+          src="/assets/nobody-land.gif"
+          alt="nobody-land"
+          width="300"
+          height="300"
+        />
+      </Box>
+      <Typography
+        variant="p"
+        sx={{
+          // fontWeight: "bold",
+          fontSize: '20px',
+          // margin: "10px",
+          textAlign: 'center',
+          width: '100%',
+        }}
+      >
+        近期網站改版，可能有部分頁面無法使用，可以參觀其他地方唷～
+      </Typography>
+      <Typography
+        variant="p"
         sx={{
-          width: '90%',
-          margin: '20px auto',
-          padding: '20px',
-          minHeight: '60vh',
+          // fontWeight: "bold",
+          fontSize: '20px',
+          // margin: "10px",
+          textAlign: 'center',
+          width: '100%',
+          marginTop: '10px',
+        }}
+      >
+        要不要試試我們新版的資源搜尋或是參觀其他地方呢？
+      </Typography>
+      <Box
+        sx={{
+          margin: '20px 0',
         }}
       >
         <Typography
-          variant="h2"
+          variant="p"
           sx={{
-            color: '#536166',
-            marginTop: '10px',
             fontWeight: 'bold',
-            fontSize: '30px',
-            letterSpacing: '0.08em',
-            textAlign: 'center',
-            marginRight: '20px',
           }}
         >
-          這座島已經搬新家囉
+          豐富的學習類別
         </Typography>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <img
-            src="/assets/nobody-land.gif"
-            alt="nobody-land"
-            width="300"
-            height="300"
-          />
+        <Box sx={{ margin: '10px 0' }}>
+          {CATEGORIES.map(({ key, value }) => (
+            <Chip
+              key={key}
+              label={value}
+              value={value}
+              onClick={() => router.push(`/search?cats=${value}`)}
+              sx={{
+                backgroundColor: COLOR_TABLE.green,
+                opacity: '60%',
+                cursor: 'pointer',
+                margin: '5px',
+                whiteSpace: 'nowrap',
+                fontWeight: 500,
+                fontSize: '16px',
+                '&:hover': {
+                  opacity: '100%',
+                  backgroundColor: COLOR_TABLE.green,
+                  transition: 'transform 0.4s',
+                },
+              }}
+            />
+          ))}
         </Box>
+      </Box>
+      <RelatedResources
+        title="👀 瞧瞧最新資源"
+        searchScheme={{
+          filter: { or: [] },
+          page_size: 10,
+        }}
+      />
+      <Box
+        sx={{
+          margin: '40px 0 10px 0',
+        }}
+      >
         <Typography
           variant="p"
           sx={{
-            // fontWeight: "bold",
-            fontSize: '20px',
-            // margin: "10px",
-            textAlign: 'center',
-            width: '100%',
-          }}
-        >
-          近期網站改版，可能有部分頁面無法使用，可以參觀其他地方唷～
-        </Typography>
-        <Typography
-          variant="p"
-          sx={{
-            // fontWeight: "bold",
-            fontSize: '20px',
-            // margin: "10px",
-            textAlign: 'center',
-            width: '100%',
-            marginTop: '10px',
+            fontWeight: 'bold',
           }}
         >
-          要不要試試我們新版的資源搜尋或是參觀其他地方呢？
+          加入島島社群
         </Typography>
         <Box
           sx={{
             margin: '20px 0',
           }}
         >
-          <Typography
-            variant="p"
-            sx={{
-              fontWeight: 'bold',
-            }}
-          >
-            豐富的學習類別
-          </Typography>
-          <Box sx={{ margin: '10px 0' }}>
-            {CATEGORIES.map(({ key, value }) => (
-              <Chip
-                key={key}
-                label={value}
-                value={value}
-                onClick={() => router.push(`/search?cats=${value}`)}
-                sx={{
-                  backgroundColor: COLOR_TABLE.green,
-                  opacity: '60%',
-                  cursor: 'pointer',
-                  margin: '5px',
-                  whiteSpace: 'nowrap',
-                  fontWeight: 500,
-                  fontSize: '16px',
-                  '&:hover': {
-                    opacity: '100%',
-                    backgroundColor: COLOR_TABLE.green,
-                    transition: 'transform 0.4s',
-                  },
-                }}
-              />
-            ))}
-          </Box>
+          <Button variant="outlined" onClick={() => router.push('/join')}>
+            <FacebookRounded sx={{ margin: '5px 0' }} />
+            <Typography variant="p">加入社群</Typography>
+          </Button>
         </Box>
-        <RelatedResources
-          title="👀 瞧瞧最新資源"
-          searchScheme={{
-            filter: { or: [] },
-            page_size: 10,
-          }}
-        />
-        <Box
-          sx={{
-            margin: '40px 0 10px 0',
-          }}
-        >
-          <Typography
-            variant="p"
-            sx={{
-              fontWeight: 'bold',
-            }}
-          >
-            加入島島社群
-          </Typography>
-          <Box
-            sx={{
-              margin: '20px 0',
-            }}
-          >
-            <Button variant="outlined" onClick={() => router.push('/join')}>
-              <FacebookRounded sx={{ margin: '5px 0' }} />
-              <Typography variant="p">加入社群</Typography>
-            </Button>
-          </Box>
-        </Box>
-      </Paper>
+      </Box>
+    </Paper>
+  );
+};
+
+NotExistPage.getLayout = ({ children }) => {
+  return (
+    <BodyWrapper>
+      <Navigatin />
+      {children}
       <Footer />
     </BodyWrapper>
   );

diff --git a/pages/_app.jsx b/pages/_app.jsx
@@ -14,6 +14,7 @@ import themeFactory from '@/shared/styles/themeFactory';
 import storeFactory from '@/redux/store';
 import { checkLoginValidity, fetchUserById } from '@/redux/actions/user';
 import { getRedirectionStorage } from '@/utils/storage';
+import DefaultLayout from '@/layout/DefaultLayout';
 import { initGA, logPageView } from '../utils/analytics';
 import Mode from '../shared/components/Mode';
 import 'regenerator-runtime/runtime'; // Speech.js
@@ -116,6 +117,7 @@ const ThemeComponentWrap = ({ pageProps, Component }) => {
   const theme = useMemo(() => themeFactory(mode), [mode]);
   const isEnv = useMemo(() => process.env.NODE_ENV === 'development', []);
   const router = useRouter();
+  const Layout = Component?.getLayout || DefaultLayout;
 
   useEffect(() => {
     dispatch(checkLoginValidity());
@@ -163,7 +165,9 @@ const ThemeComponentWrap = ({ pageProps, Component }) => {
         }}
       />
       {isEnv && <Mode />}
-      <Component {...pageProps} />
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
     </ThemeProvider>
   );
 };

diff --git a/pages/about-us/index.jsx b/pages/about-us/index.jsx
@@ -1,7 +1,5 @@
 import React, { useMemo } from 'react';
 import SEOConfig from '../../shared/components/SEO';
-import Navigation from '../../shared/components/Navigation_v2';
-import Footer from '../../shared/components/Footer_v2';
 import About from '../../components/About';
 
 const AboutPage = () => {
@@ -52,9 +50,7 @@ const AboutPage = () => {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <About />
-      <Footer />
     </>
   );
 };

diff --git a/pages/about/index.jsx b/pages/about/index.jsx
@@ -1,8 +1,6 @@
 import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import SEOConfig from '../../shared/components/SEO';
-import Navigation from '../../shared/components/Navigation_v2';
-import Footer from '../../shared/components/Footer_v2';
 import About from '../../components/About';
 
 const AboutPage = () => {
@@ -54,9 +52,7 @@ const AboutPage = () => {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <About />
-      <Footer />
     </>
   );
 };

diff --git a/pages/activities/index.jsx b/pages/activities/index.jsx
@@ -1,8 +1,6 @@
 import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import SEOConfig from '../../shared/components/SEO';
-import Navigation from '../../shared/components/Navigation_v2';
-import Footer from '../../shared/components/Footer_v2';
 import Activities from '../../components/Activities';
 
 const ActivitiesPage = () => {
@@ -24,9 +22,7 @@ const ActivitiesPage = () => {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <Activities />
-      <Footer />
     </>
   );
 };

diff --git a/pages/activities/ncku-bike-festival/index.jsx b/pages/activities/ncku-bike-festival/index.jsx
@@ -1,8 +1,6 @@
 import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import SEOConfig from '../../../shared/components/SEO';
-import Navigation from '../../../shared/components/Navigation_v2';
-import Footer from '../../../shared/components/Footer_v2';
 import Activities from '../../../components/Activities/Ncku-bike-festival';
 
 const Page = () => {
@@ -24,9 +22,7 @@ const Page = () => {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <Activities />
-      <Footer />
     </>
   );
 };

diff --git a/pages/contribute/resource/index.jsx b/pages/contribute/resource/index.jsx
@@ -1,8 +1,6 @@
 import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import SEOConfig from '../../../shared/components/SEO';
-import Navigation from '../../../shared/components/Navigation_v2';
-import Footer from '../../../shared/components/Footer_v2';
 import ContributeResource from '../../../components/ContributeResource';
 
 const ContributeResourcePage = () => {
@@ -24,9 +22,7 @@ const ContributeResourcePage = () => {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <ContributeResource />
-      <Footer />
     </>
   );
 };