Major Changes: updated packages, create Routing component for the pag…

…e routing

package.json

@@ -6,10 +6,10 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.2"
   },

src/App.js

@@ -1,56 +1,15 @@
 // import { useState } from 'react';
 import './App.css'
-import LandingPage from './pages/LandingPage/LandingPage';
-import Homepage from './pages/Homepage/Homepage';
-import ProfilePage from './pages/ProfilePage/ProfilePage';
-import SignIn from './pages/SignIn/SignIn';
-import SignUp from './pages/SignUp/SignUp';
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  // Link
-} from "react-router-dom";
+import RoutingComponent from './containers/routingComponent';
+import Header from './components/Header/Header';
 
 function App() {
 
-  // const showFaqsAnswer = (event) => {
-  //   // const addButton = document.querySelectorAll('.addBtn');
-  //   const btn = document.getElementById('1');
-  //   const buttonId = btn.getAttribute('id');
-
-  //   const answer = document.getElementById('1');
-  //   const answerId = answer.getAttribute('id');
-
-  //   // const answer = document.querySelectorAll('.faqsAnswer');
-
-  //   (buttonId === answerId) ? answer.classList.toggle('active') : console.log('not the same');
-
-  // }
-
   return (
     <div className="App">
+        {/* <Header /> */}
         {/* When you are building a component/feature/page add it to here to see your changes in realtime when you do npm start*/}
-        <Router>
-          <Switch>
-            <Route exact path="/">
-              <LandingPage />
-            </Route>
-            <Route exact path="/home">
-              <Homepage />
-            </Route>
-            <Route exact path="/profile">
-              <ProfilePage />
-            </Route>
-            <Route exact path="/signin">
-              <SignIn />
-            </Route>
-            <Route exact path="/signup">
-              <SignUp />
-            </Route>
-          </Switch>
-        </Router>
-
+        <RoutingComponent />
     </div>
   );
 }

src/containers/routingComponent.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+    Routes,
+    Route,
+    // Link
+  } from "react-router-dom";
+import LandingPage from '../pages/LandingPage/LandingPage';
+import Homepage from '../pages/Homepage/Homepage';
+import ProfilePage from '../pages/ProfilePage/ProfilePage';
+import SignIn from '../pages/SignIn/SignIn';
+import SignUp from '../pages/SignUp/SignUp';
+
+const routingComponent = () => {
+  return (
+    <>
+        {/* When you are building a component/feature/page add it to here to see your changes in realtime when you do npm start*/}
+        <Routes>
+          <Route path='/' element={<LandingPage />}/>
+          <Route path='/home' element={<Homepage />}/>
+          <Route path='/profile' element={<ProfilePage />}/>
+          <Route path='/signin' element={<SignIn />}/>
+          <Route path='/signup' element={<SignUp />}/>
+        </Routes>
+    </>
+  )
+}
+
+export default routingComponent

src/index.js

@@ -1,11 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from "react-router-dom";
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render( 
-  <App />, document.getElementById('root')
+const root = ReactDOM.createRoot(
+  document.getElementById("root")
+);
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
 );
-
 reportWebVitals();

src/pages/Homepage/Homepage.css

@@ -13,7 +13,7 @@ main {
     position: relative;
     margin-top: auto;
     width: 100%;
-    padding: 0 30px;
+    /* padding: 0 30px; */
     height: calc(100vh - 70px);
     display: flex;
     overflow-y: hidden;

src/pages/SignIn/SignIn.js

@@ -128,7 +128,7 @@ const Login = () => {
                         </div> */}
 
                         {/* <button className='loginBtn' type="submit">Log In</button> */}
-                        <Link className='loginBtn' to='home' style={{textAlign: 'center', textDecoration: 'none', fontWeight: '600', color: '#fff'}}>Log In</Link>
+                        <Link className='loginBtn' to='/home' style={{textAlign: 'center', textDecoration: 'none', fontWeight: '600', color: '#fff'}}>Log In</Link>
 
                     </div>
                 </form>

src/pages/SignUp/SignUp.js

@@ -48,7 +48,7 @@ import { Link } from "react-router-dom";
                     </div>
 
                     {/* <button className='signupBtn' type="submit">Get Started</button> */}
-                    <Link className='signupBtn' to='profile' style={{textAlign: 'center', textDecoration: 'none', fontWeight: '600', color: '#fff'}}>Get Started</Link>
+                    <Link className='signupBtn' to='/profile' style={{textAlign: 'center', textDecoration: 'none', fontWeight: '600', color: '#fff'}}>Get Started</Link>
 
                 </div>
             </form>