update to react router dom v6, eliminate bootstrap elements to stage …

…for material ui
mykovasyl · Feb 13, 2023 · 136131b · 136131b
1 parent 7f75c24
commit 136131b
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 148 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/client/src/components/App.js b/client/src/components/App.js
@@ -6,7 +6,7 @@ import NavBar from "./NavBar";
 import Home from "./Home";
 import LogIn from "./LogIn";
 import SignUp from "./SignUp";
-import { Switch, Route } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
 
 export const UserContext = createContext();
 
@@ -66,38 +66,44 @@ function App() {
     <div>
       <UserContext.Provider value={{ currentUser, setCurrentUser }}>
         <NavBar />
-        <Switch>
-          <Route path='/randomrecipe'>
-            <RandomRecipe
-              onRecipeLike={handleAddRecipe}
-              isLiked={isLiked}
-              setIsLiked={setIsLiked}
-            />
-          </Route>
-          <Route path='/recipeform'>
-            <RecipeForm onFormSubmit={handleAddRecipe} />
-          </Route>
-          <Route path='/recipebook'>
-            <RecipeBook
-              onRecipeDislike={handleDeleteRecipe}
-              recipes={recipes}
-              isLiked={isLiked}
-              setIsLiked={setIsLiked}
-            />
-          </Route>
-          <Route path='/login'>
-            <LogIn />
-          </Route>
-          <Route path='/signup'>
-            <SignUp />
-          </Route>
-          <Route exact path='/'>
-            <Home />
-          </Route>
-          <Route path='*'>
-            <h1>404 not found</h1>
-          </Route>
-        </Switch>
+        <Routes>
+          <Route
+            path='/randomrecipe'
+            element={
+              <RandomRecipe
+                onRecipeLike={handleAddRecipe}
+                isLiked={isLiked}
+                setIsLiked={setIsLiked}
+              />
+            }
+          />
+          <Route
+            path='/recipeform'
+            element={<RecipeForm onFormSubmit={handleAddRecipe} />}
+          />
+          <Route
+            path='/recipebook'
+            element={
+              <RecipeBook
+                onRecipeDislike={handleDeleteRecipe}
+                recipes={recipes}
+                isLiked={isLiked}
+                setIsLiked={setIsLiked}
+              />
+            }
+          />
+          <Route path='/login' element={<LogIn />} />
+          <Route path='/signup' element={<SignUp />} />
+          <Route exact path='/' element={<Home />} />
+          <Route
+            path='*'
+            element={
+              <>
+                <h1>404 not found</h1>
+              </>
+            }
+          />
+        </Routes>
       </UserContext.Provider>
     </div>
   );

diff --git a/client/src/components/LogIn.js b/client/src/components/LogIn.js
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { Form, Button, Col, Row, Container } from "react-bootstrap";
 
 function LogIn({ setCurrentUser, setRecipes }) {
   const [login, setLogin] = useState({
@@ -33,15 +32,7 @@ function LogIn({ setCurrentUser, setRecipes }) {
   }
 
   return (
-    <Container
-      style={{
-        marginTop: "24px",
-        padding: "24px",
-        border: ".5px solid grey",
-        borderRadius: "8px",
-        width: "75%",
-      }}
-    >
+    <>
       <h2
         style={{
           border: ".5px solid grey",
@@ -52,32 +43,28 @@ function LogIn({ setCurrentUser, setRecipes }) {
       >
         Log in:
       </h2>
-      <Form onSubmit={handleSubmit}>
-        <Row>
-          <Col>
-            <Form.Label>Username:</Form.Label>
-            <Form.Control
-              type='text'
-              name='username'
-              value={login.username}
-              onChange={handleInputChange}
-            />
-          </Col>
-          <Col>
-            <Form.Label>Password:</Form.Label>
-            <Form.Control
-              type='password'
-              name='password'
-              value={login.password}
-              onChange={handleInputChange}
-            />
-          </Col>
-        </Row>
-        <Button type='submit' variant='success' style={{ margin: "16px" }}>
+      <form onSubmit={handleSubmit}>
+        <p>Username:</p>
+        <input
+          type='text'
+          name='username'
+          value={login.username}
+          onChange={handleInputChange}
+        />
+
+        <p>Password:</p>
+        <input
+          type='password'
+          name='password'
+          value={login.password}
+          onChange={handleInputChange}
+        />
+
+        <button type='submit' variant='success' style={{ margin: "16px" }}>
           Log in!
-        </Button>
-      </Form>
-    </Container>
+        </button>
+      </form>
+    </>
   );
 }