Issue 172

src/App.js

@@ -1,112 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import Header from './components/header/Header';
-import Home from './pages/home/Home';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Checkout from './components/checkOut/Checkout';
-import Login from './pages/login/Login';
-import { auth } from './firebase';
-import { useStateValue } from './context/StateProvider';
-import Payment from './components/payment/Payment';
-import { Elements } from '@stripe/react-stripe-js';
-import { loadStripe } from '@stripe/stripe-js';
-import Thanku from './pages/thanku/Thanku';
-import Navbar from './components/navbar/Navbar';
+import React from 'react';
 
-import Footer from './components/footer/Footer';
-import BookToys from './Categories/BooksToys/BookToys';
-import AllCategories from './Categories/AllCategories';
-import FashionBeauty from './Categories/FashionBeauty/FashionBeauty';
-import Electronics from './Categories/Electronics/Electronics';
-import Signup from './pages/signup/Signup';
+import AppRoutes from './routes/routes';
 
-const stripePromise = loadStripe(
-  'pk_test_51JdCsbSDjgMnau9ncKpDOaddNIWtdhVTTV92V4ShkTzLec033vWcRQjqEUByb1s4D6vmPmH6oMK0bkBJyBlRsStp00wQV1pNuX'
-);
 function App() {
-  //to keep a check who is signed in/making a listner
-  const [{ }, dispatch] = useStateValue();
-  //This State will keep Track of what is entered in the searchField
-  const [searchField, setSearchField] = useState('');
-
-  //updating the State from Header Component which further updating itself from HeaderSearchBar.js
-  let inputHandler = (event) => {
-    setSearchField(event.target.value);
-  };
-  useEffect(() => {
-    //will run only once when the app component loads
-    auth.onAuthStateChanged((authUser) => {
-      if (authUser) {
-        //the user logged in/the user was logged in
-        {
-          /*when someone will logg in it will shoot
-          the user ibto the data layer and vice versa if we 
-          logged out*/
-        }
-        dispatch({
-          type: 'SET_USER',
-          user: authUser,
-        });
-      } else {
-        //the user is logged out
-        dispatch({
-          type: 'SET_USER',
-          user: null,
-        });
-      }
-    });
-  }, []);
-
-  return (
-    <>
-
-      <BrowserRouter>
-        <div className="App">
-          <Routes>
-            <Route path="/thanku" element={<>
-              <Header />
-              <Thanku />
-            </>} />
-            <Route path="/Payment" element={<>
-              <Header />
-              {/* wraps the payment elements,
-          no need to understand it */}
-              <Elements stripe={stripePromise}>
-                <Payment />
-              </Elements>
-            </>} />
-
-            <Route path="/login" element={<Login />} />
-            <Route path="/signup" element={<Signup />} />
-            <Route path="/checkout" element={<>
-              <Header />
-              <Checkout /></>} />
-            <Route path="/books-toys" element={<> <Header />
-              <Navbar />
-              <BookToys /></>} />
-            <Route path="/fashion-beauty" element={<>
-              <Header />
-              <Navbar />
-              <FashionBeauty />
-            </>} />
-
-            <Route path="/electronics" element={<>
-              <Header />
-              <Navbar />
-              <Electronics />
-            </>} />
-
-            <Route path="/" element={<>
-              <Header inputHandler={inputHandler} />
-              <Navbar />
-              <Home text={searchField} />
-              <AllCategories />
-            </>} />
-          </Routes>
-          <Footer />
-        </div>
-      </BrowserRouter>
-    </>
-  );
+  return <AppRoutes />;
 }
 
 export default App;

src/layouts/headerWithNavbar/headerHomeLayout.js

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { Navbar } from 'react-bootstrap';
+import Home from '../../pages/home/Home';
+import Header from '../../components/header/Header';
+
+function HeaderHomeLayout ({ children }) {
+  //This State will keep Track of what is entered in the searchField
+  const [searchField, setSearchField] = useState('');
+
+  //updating the State from Header Component which further updating itself from HeaderSearchBar.js
+  let inputHandler = (event) => {
+    setSearchField(event.target.value);
+  };
+
+  return (
+    <div>
+      <Header inputHandler={inputHandler} />
+      <Navbar />
+      <Home text={searchField} />
+      <main>{children}</main>
+    </div>
+  );
+};
+
+export default HeaderHomeLayout;

src/layouts/headerWithNavbar/headerWithNavbar.js

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { Navbar } from 'react-bootstrap';
+import Header from '../../components/header/Header';
+
+function HeaderWithNavbar ({ children }) {
+
+  return (
+    <div>
+      <Header />
+      <Navbar />
+      <main>{children}</main>
+    </div>
+  );
+};
+
+export default HeaderWithNavbar;

src/routes/routes.js

@@ -0,0 +1,130 @@
+import React, { useEffect } from 'react';
+
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+import AllCategories from '../Categories/AllCategories';
+
+import { Elements } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js';
+import Header from '../components/header/Header';
+import Thanku from '../pages/thanku/Thanku';
+import Payment from '../components/payment/Payment';
+import Login from '../pages/login/Login';
+import Signup from '../pages/signup/Signup';
+import Checkout from '../components/checkOut/Checkout';
+import BookToys from '../Categories/BooksToys/BookToys';
+import HeaderWithNavbar from '../layouts/headerWithNavbar/headerWithNavbar';
+import FashionBeauty from '../Categories/FashionBeauty/FashionBeauty';
+import Electronics from '../Categories/Electronics/Electronics';
+import { useStateValue } from '../context/StateProvider';
+import { auth } from '../firebase';
+import { Footer } from 'antd/lib/layout/layout';
+import HeaderHomeLayout from '../layouts/headerWithNavbar/headerHomeLayout';
+
+const stripePromise = loadStripe(
+  'pk_test_51JdCsbSDjgMnau9ncKpDOaddNIWtdhVTTV92V4ShkTzLec033vWcRQjqEUByb1s4D6vmPmH6oMK0bkBJyBlRsStp00wQV1pNuX'
+);
+
+function AppRoutes() {
+
+//to keep a check who is signed in/making a listner
+const [{}, dispatch] = useStateValue();
+
+useEffect(() => {
+  //will run only once when the app component loads
+  auth.onAuthStateChanged((authUser) => {
+    if (authUser) {
+      //the user logged in/the user was logged in
+      {
+        /*when someone will logg in it will shoot
+        the user ibto the data layer and vice versa if we 
+        logged out*/
+      }
+      dispatch({
+        type: 'SET_USER',
+        user: authUser,
+      });
+    } else {
+      //the user is logged out
+      dispatch({
+        type: 'SET_USER',
+        user: null,
+      });
+    }
+  });
+}, []);
+
+  return (
+    <BrowserRouter>
+    <div className="App">
+      <Routes>
+        <Route
+          path="/thanku"
+          element={
+            <>
+              <Header/>
+              <Thanku/>
+            </>
+          }
+        />
+        <Route
+          path="/Payment"
+          element={
+            <>
+              <Header />
+              {/* wraps the payment elements, no need to understand it */}
+              <Elements stripe={stripePromise}>
+              <Payment/>
+              </Elements>
+            </>
+          }
+        />
+        <Route path="/login" element={<Login/>} />
+        <Route path="/signup" element={<Signup />} />
+        <Route
+          path="/checkout"
+          element={
+            <>
+              <Header />
+              <Checkout />
+            </>
+          }
+        />
+        <Route
+          path="/books-toys"
+          element={
+            <>
+               <HeaderWithNavbar>  <BookToys /></HeaderWithNavbar> 
+            </>
+          }
+        />
+        <Route
+          path="/fashion-beauty"
+          element={ <HeaderWithNavbar> <FashionBeauty /> </HeaderWithNavbar> }
+        />
+
+        <Route
+          path="/electronics"
+          element={
+            <>
+            <HeaderWithNavbar> <Electronics /> </HeaderWithNavbar>
+            </>
+          }
+        />
+
+        <Route
+          path="/"
+          element={
+            <>
+             <HeaderHomeLayout> <AllCategories /></HeaderHomeLayout>
+            </>
+          }
+        />
+      </Routes>
+      <Footer />
+    </div>
+  </BrowserRouter>
+  );
+}
+
+export default AppRoutes;