👌 IMPROVE: added suspense state and title to site

client/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Peetcode</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital@1&family=Montserrat&family=Prompt&family=Sacramento&display=swap" rel="stylesheet">

client/src/App.jsx

@@ -1,32 +1,26 @@
-import { BrowserRouter , Routes , Route } from "react-router-dom";
-
-import HomePage from "./Components/HomePage/HomePage"
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import HomePage from "./Components/HomePage/HomePage";
 import AllProblems from "./Components/AllProblems/AllProblems";
-
-import Navbar from "./Constants/Navbar/Navbar"
+import Navbar from "./Constants/Navbar/Navbar";
 import ProblemsPage from "./Components/ProblemsPage/ProblemsPage";
-import Signup from "./Components/Signup/Signup"
-import Login from "./Components/Login/Login"
-import "./App.css"
+import Signup from "./Components/Signup/Signup";
+import Login from "./Components/Login/Login";
+import "./App.css";
 
 function App() {
-
-    return (
-        <BrowserRouter>
-            <Navbar />
-            <Routes>
-                <Route path="/" element={<HomePage />} />
-                <Route path="/signup" element={<Signup />} />
-                <Route path="/login" element={<Login />} />
-                <Route path="/problemset/all/" element={<AllProblems />} />
-                <Route path="/problems/:pid/" element={<ProblemsPage  />} />
-                <Route path="*" element={<div>404 Not Found</div>} />
-            </Routes>
-        </BrowserRouter>
-    // <div>
-    //     Finish the assignment! Look at the comments in App.jsx as a starting point
-    // </div>
-  )
+  return (
+    <BrowserRouter>
+      <Navbar />
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/problemset/all/" element={<AllProblems />} />
+        <Route path="/problems/:pid/" element={<ProblemsPage />} />
+        <Route path="*" element={<div>404 Not Found</div>} />
+      </Routes>
+    </BrowserRouter>
+  );
 }
 
-export default App
+export default App;

client/src/Components/AllProblems/AllProblems.jsx

@@ -1,50 +1,46 @@
-import React, {useEffect, useState} from 'react'
-import { Link } from 'react-router-dom'
-
-import "./AllProblems.css"
+import React, { Suspense, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import "./AllProblems.css";
 import { backendUrl } from "../../constants.js";
 
 const AllProblemsPage = () => {
   const [problems, setProblems] = useState([]);
-
   const init = async () => {
     const response = await fetch(`${backendUrl}/problems`, {
       method: "GET",
     });
-
     const json = await response.json();
     setProblems(json.problems);
-  }
+  };
 
   useEffect(() => {
-    init()
+    init();
   }, []);
 
   return (
     <div id="allproblems">
       <table>
         <tbody>
-
           <tr>
             <th>Title</th>
             <th>Difficulty</th>
             <th>Acceptance</th>
           </tr>
-
-          {problems.map((prob,index) => (
-            <tr>
-              <Link to={`/problems/:${prob.problemId}`}>
-                <td>{prob.title}</td>
-              </Link>
-              <td className={`${prob.difficulty}`} >{prob.difficulty}</td>
-              <td className={`${prob.difficulty}`} >{prob.acceptance}</td>
-            </tr>
-          ))}
-
+          <Suspense fallback={<div>Loading Problems...</div>}>
+            {problems.map((prob, index) => (
+              <tr>
+                <Link to={`/problems/:${prob.problemId}`}>
+                  <td>{prob.title}</td>
+                </Link>
+                <td className={`${prob.difficulty}`}>{prob.difficulty}</td>
+                <td className={`${prob.difficulty}`}>{prob.acceptance}</td>
+              </tr>
+            ))}
+          </Suspense>
         </tbody>
       </table>
     </div>
-  )
-}
+  );
+};
 
-export default AllProblemsPage
+export default AllProblemsPage;

client/src/Components/HomePage/HomePage.jsx

@@ -1,18 +1,20 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 import "./HomePage.css"
 import loremContent from './LoremPosts'
 
 const HomePage = () => {
   return (
     <div id="home">
       <h1 className='flex-row'>Blogs</h1>
+      <Suspense fallback={<div>Loading Blogs...</div>}>
       {loremContent.map((content,index) => (
         <div key={`blog-${index}`} className="blog-box">
           <p className="date">{content.date}</p>
           <h4 className='title'>{content.title}</h4>
           <p className="content">{content.content}</p>
         </div>
       ))}
+      </Suspense>
 
     </div>
   )

client/src/main.jsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);