Updated dependencies and refactored App.jsx to use a new component

IGuy37 · Jun 27, 2024 · bb828b6 · bb828b6
1 parent 4d6ee93
commit bb828b6
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 10 deletions.
diff --git a/react-client/package-lock.json b/react-client/package-lock.json
diff --git a/react-client/package.json b/react-client/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "bootstrap": "^5.3.3",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.24.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

diff --git a/react-client/src/App.jsx b/react-client/src/App.jsx
@@ -98,14 +98,8 @@ export default function App() {
                     ))
                 }
             </div>
-            <div className="card-container" style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
-              {
-                data.map((sock) => (
-                  <Sock key={sock._id} data={sock} handleDelete={handleDelete}/>
-                ))
-              }
-            </div>
-              <Footer environment={import.meta.env.VITE_ENVIRONMENT}/>
+            <Home data={data} handleDelete={handleDelete} /> 
+            <Footer environment={import.meta.env.VITE_ENVIRONMENT}/>
           </div>
         </div>
       </main>

diff --git a/react-client/src/components/Home.jsx b/react-client/src/components/Home.jsx
@@ -0,0 +1,13 @@
+import Sock from "./Sock"
+
+export default function Home({data, handleDelete}) {
+    return(
+        <div className="card-container" style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
+              {
+                data.map((sock) => (
+                  <Sock key={sock._id} data={sock} handleDelete={handleDelete}/>
+                ))
+              }
+        </div>
+    );
+}