added suspense to Router.js

SAT-Duel · Oct 31, 2024 · 7714af3 · 7714af3
1 parent 843f00e
commit 7714af3
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 123 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,6 @@
 {
   "name": "satduel_react",
-  "version": "0.1.0",
-  "proxy": "https://satduel-e07814415d4e.herokuapp.com/",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
@@ -19,7 +18,6 @@
     "emailjs-com": "^3.2.0",
     "katex": "^0.16.11",
     "lucide-react": "^0.451.0",
-    "moment": "^2.30.1",
     "postcss-preset-env": "^10.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/public/index.html b/public/index.html
@@ -11,21 +11,6 @@
         gtag('js', new Date());
         gtag('config', 'G-GFCQENJHVP');
     </script>
-    <!-- Google Tag Manager -->
-    <script>(function (w, d, s, l, i) {
-        w[l] = w[l] || [];
-        w[l].push({
-            'gtm.start':
-                new Date().getTime(), event: 'gtm.js'
-        });
-        var f = d.getElementsByTagName(s)[0],
-            j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
-        j.async = true;
-        j.src =
-            'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
-        f.parentNode.insertBefore(j, f);
-    })(window, document, 'script', 'dataLayer', 'GTM-5JGC9642');</script>
-    <!-- End Google Tag Manager -->
     <meta charset="utf-8"/>
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
@@ -45,12 +30,6 @@
           rel="stylesheet">
 </head>
 <body>
-<!-- Google Tag Manager (noscript) -->
-<noscript>
-    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5JGC9642"
-            height="0" width="0" style="display:none;visibility:hidden"></iframe>
-</noscript>
-<!-- End Google Tag Manager (noscript) -->
 <noscript>You need to
     <e></e>
     nable JavaScript to run this app.

diff --git a/src/assets/teamphoto/alexjin.jpg b/src/assets/teamphoto/alexjin.jpg
diff --git a/src/components/SATFooter.js b/src/components/SATFooter.js
@@ -17,8 +17,8 @@ const SATFooter = () => {
             <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px' }}>
                 <Row justify="space-between" align="top" gutter={[24, 24]}>
                     <Col xs={24} sm={8}>
-                        <Title level={4} style={{ color: 'white' }}>About Us</Title>
-                        <Paragraph style={{ color: 'rgba(255,255,255,0.65)' }}>
+                        <Title level={4} style={{ color: 'white' }}><Link to="/about#header">About Us</Link></Title>
+                        <Paragraph style={{ color: 'rgba(255,255,255,0.8)' }}>
                             We're dedicated to helping students achieve their best SAT scores through
                             innovative and engaging online preparation.
                         </Paragraph>

diff --git a/src/pages/AboutPage.js b/src/pages/AboutPage.js
@@ -7,6 +7,7 @@ import 'aos/dist/aos.css';
 import emailjs from 'emailjs-com';
 import {useLocation} from "react-router-dom";
 import clement from '../assets/teamphoto/clementzhou.jpg';
+import alex from '../assets/teamphoto/alexjin.jpg';
 const { Content } = Layout;
 const { Title, Paragraph } = Typography;
 const { TextArea } = Input;
@@ -108,7 +109,7 @@ function AboutPage() {
         {
             name: "Alex Jin",
             role: "Co-founder & CTO",
-            avatar: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+            avatar: alex
         },
         {
             name: "Weiwei Luo",

diff --git a/src/pages/CollegeTownPage.js b/src/pages/CollegeTownPage.js
@@ -1,9 +1,13 @@
-import React from 'react';
-import { Canvas } from '@react-three/fiber';
-import { Box, Text, OrbitControls, Plane } from '@react-three/drei';
+import React, { Suspense, lazy } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
+const Canvas = lazy(() => import('@react-three/fiber').then(module => ({ default: module.Canvas })));
+const Box = lazy(() => import('@react-three/drei').then(module => ({ default: module.Box })));
+const Text = lazy(() => import('@react-three/drei').then(module => ({ default: module.Text })));
+const OrbitControls = lazy(() => import('@react-three/drei').then(module => ({ default: module.OrbitControls })));
+const Plane = lazy(() => import('@react-three/drei').then(module => ({ default: module.Plane })));
+
 const Container = styled.div`
     min-height: 100vh;
     background: linear-gradient(135deg, #F5F7FF 0%, #E8EEFF 100%);
@@ -24,68 +28,69 @@ const CollegeTownMap = () => {
             <ContentWrapper>
                 <h1>College Town</h1>
                 <div style={{ display: 'flex', justifyContent: 'center', padding: '40px' }}>
-                    <Canvas 
-                        style={{ width: '800px', height: '600px', border: '2px solid #ccc' }}
-                        camera={{ position: [0, 5, 10], fov: 60 }}
-                        background={'skyblue'}
-                    >
-                        <ambientLight intensity={0.5} />
-                        <pointLight position={[10, 10, 10]} />
-                        <OrbitControls />
-
-                        {/* Ground (Light Green Grass) */}
-                        <Plane rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.5, 0]} args={[30, 30]}>
-                            <meshStandardMaterial color={'lightgreen'} />
-                        </Plane>
+                    <Suspense fallback={<div>Loading...</div>}>
+                        <Canvas
+                            style={{ width: '800px', height: '600px', border: '2px solid #ccc' }}
+                            camera={{ position: [0, 5, 10], fov: 60 }}
+                        >
+                            <ambientLight intensity={0.5} />
+                            <pointLight position={[10, 10, 10]} />
+                            <OrbitControls />
 
-                        {/* Roads */}
-                        <Box position={[0, -0.49, 0]} args={[15, 0.02, 2]} rotation={[0, 0, 0]}>
-                            <meshStandardMaterial color={'gray'} />
-                        </Box>
-                        <Box position={[0, -0.49, 3]} args={[2, 0.02, 15]} rotation={[0, 0, 0]}>
-                            <meshStandardMaterial color={'gray'} />
-                        </Box>
+                            {/* Ground (Light Green Grass) */}
+                            <Plane rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.5, 0]} args={[30, 30]}>
+                                <meshStandardMaterial color={'lightgreen'} />
+                            </Plane>
 
-                        {/* Yellow Dotted Line */}
-                        {[...Array(15)].map((_, i) => (
-                            <Box key={i} position={[-7 + i, -0.45, 0]} args={[0.5, 0.01, 0.1]}>
-                                <meshStandardMaterial color={'yellow'} />
+                            {/* Roads */}
+                            <Box position={[0, -0.49, 0]} args={[15, 0.02, 2]} rotation={[0, 0, 0]}>
+                                <meshStandardMaterial color={'gray'} />
+                            </Box>
+                            <Box position={[0, -0.49, 3]} args={[2, 0.02, 15]} rotation={[0, 0, 0]}>
+                                <meshStandardMaterial color={'gray'} />
                             </Box>
-                        ))}
 
-                        {/* Trees */}
-                        {[...Array(6)].map((_, i) => (
-                            <group key={i} position={[-7 + i * 2.5, 0, -5]}>
-                                <Box position={[0, 1, 0]} args={[0.5, 2, 0.5]}>
-                                    <meshStandardMaterial color={'saddlebrown'} />
-                                </Box>
-                                <Box position={[0, 2.75, 0]} args={[1.5, 1.5, 1.5]}>
-                                    <meshStandardMaterial color={'green'} />
+                            {/* Yellow Dotted Line */}
+                            {[...Array(15)].map((_, i) => (
+                                <Box key={i} position={[-7 + i, -0.45, 0]} args={[0.5, 0.01, 0.1]}>
+                                    <meshStandardMaterial color={'yellow'} />
                                 </Box>
-                            </group>
-                        ))}
+                            ))}
 
-                        {/* My House (Placed beside the road) */}
-                        <Box position={[-4, 0.5, -2.5]} args={[2, 1, 2]} onClick={() => navigate('/house')}>
-                            <meshStandardMaterial color={'lightblue'} />
-                        </Box>
-                        <Text position={[-4, 1.5, -2.5]} fontSize={0.2} color="black">
-                            🏠 My House
-                        </Text>
+                            {/* Trees */}
+                            {[...Array(6)].map((_, i) => (
+                                <group key={i} position={[-7 + i * 2.5, 0, -5]}>
+                                    <Box position={[0, 1, 0]} args={[0.5, 2, 0.5]}>
+                                        <meshStandardMaterial color={'saddlebrown'} />
+                                    </Box>
+                                    <Box position={[0, 2.75, 0]} args={[1.5, 1.5, 1.5]}>
+                                        <meshStandardMaterial color={'green'} />
+                                    </Box>
+                                </group>
+                            ))}
 
-                        {/* Shop (Placed beside the road) */}
-                        <Box position={[4, 0.5, -2.5]} args={[2, 1, 2]} onClick={() => navigate('/shop')}>
-                            <meshStandardMaterial color={'orange'} />
-                        </Box>
-                        <Text position={[4, 1.5, -2.5]} fontSize={0.2} color="black">
-                            🏪 Shop
-                        </Text>
+                            {/* My House (Placed beside the road) */}
+                            <Box position={[-4, 0.5, -2.5]} args={[2, 1, 2]} onClick={() => navigate('/house')}>
+                                <meshStandardMaterial color={'lightblue'} />
+                            </Box>
+                            <Text position={[-4, 1.5, -2.5]} fontSize={0.2} color="black">
+                                🏠 My House
+                            </Text>
+
+                            {/* Shop (Placed beside the road) */}
+                            <Box position={[4, 0.5, -2.5]} args={[2, 1, 2]} onClick={() => navigate('/shop')}>
+                                <meshStandardMaterial color={'orange'} />
+                            </Box>
+                            <Text position={[4, 1.5, -2.5]} fontSize={0.2} color="black">
+                                🏪 Shop
+                            </Text>
 
-                    </Canvas>
+                        </Canvas>
+                    </Suspense>
                 </div>
             </ContentWrapper>
         </Container>
     );
 };
 
-export default CollegeTownMap;
+export default CollegeTownMap;