Sidepanel overhaul with querystring

decimoseptimo · Feb 7, 2021 · 29af3f8 · 29af3f8
1 parent 779bd4e
commit 29af3f8
Show file tree

Hide file tree

Showing 35 changed files with 795 additions and 157 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -6,11 +6,28 @@ import { CartProvider } from "./src/state/cart"
 import { MiscProvider } from "./src/state/misc"
 import Layout from "./src/components/layout"
 
-export const wrapRootElement = ({ element }) => (
-  <MiscProvider>
-    <CartProvider>{element}</CartProvider>
-  </MiscProvider>
-)
+// sets prevPath
+export const onRouteUpdate = ({ location }) => {
+  window.locations = window.locations || [document.referrer]
+  window.locations.push(window.location.href)
+  const prevPath = window.locations[window.locations.length - 2]
+  if (location && location.state) {
+    location.state.prevPath = prevPath
+  }
+}
+
+export const shouldUpdateScroll = ({ routerProps }) => {
+  const { disableScrollUpdate } = routerProps.location.state || {}
+  return !disableScrollUpdate
+}
+
+export const wrapRootElement = ({ element }) => {
+  return (
+    <MiscProvider>
+      <CartProvider>{element}</CartProvider>
+    </MiscProvider>
+  )
+}
 
 export const wrapPageElement = ({ element, props }) => {
   return <Layout {...props}>{element}</Layout>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "gatsby-awesome-pagination": "^0.3.6",
     "gatsby-image": "^2.8.0",
     "gatsby-plugin-favicon": "^3.1.6",
-    "gatsby-plugin-local-search": "^1.1.1",
+    "gatsby-plugin-local-search": "^2.0.0",
     "gatsby-plugin-manifest": "^2.9.1",
     "gatsby-plugin-offline": "^3.7.1",
     "gatsby-plugin-react-helmet": "^3.7.0",

diff --git a/src/components/button.js b/src/components/button.js
@@ -27,6 +27,9 @@ const Button = (props) => {
         }
 
         .default {
+        }
+
+        .default2 {
           background: linear-gradient(to bottom, #f9f9f9, #dfdfdf);
           color: #333;
         }

diff --git a/src/components/header.js b/src/components/header.js
@@ -1,5 +1,5 @@
 import React, { useContext } from "react"
-import { Link, navigate } from "@reach/router" //enables navigate(-1) see: https://github.com/gatsbyjs/gatsby/issues/5987
+import { Link } from "gatsby"
 import { FiUser } from "react-icons/fi"
 import { MdSearch } from "react-icons/md"
 
@@ -8,60 +8,35 @@ import { MiscContext } from "../state/misc"
 import BaseButton from "./baseButton"
 import ButtonCart from "./buttonCart"
 import IconBars from "./iconBars"
-
 import Search from "./search"
+import * as Routes from "./sidepanel/routes"
 
-const Header = ({ location }) => {
-  const [state, dispatch] = useContext(CartContext)
-  const [miscState, miscDispatch] = useContext(MiscContext)
-
-  const getActiveSidebar = () => location.state?.activeSidebar
-
-  const setActiveSidebar = (value) => {
-    const activeSidebar = getActiveSidebar()
-
-    // first value (uninitialized): go, push state
-    if (activeSidebar === undefined) {
-      navigate(location.pathname, {
-        state: { activeSidebar: value },
-      })
-    }
-    // same value: go back
-    else if (activeSidebar === value) {
-      navigate(-1)
-    }
-    // new value: go, replace state
-    else {
-      navigate(location.pathname, {
-        state: { activeSidebar: value },
-        replace: true,
-      })
-    }
-  }
-
-  const Logo = () =>
-    getActiveSidebar() ? (
-      <Link to="/" replace state={{ activeSidebar: null }} className="logo">
-        ELSUPER
-      </Link>
-    ) : (
-      <Link to="/" className="logo">
-        ELSUPER
-      </Link>
-    )
+const Header = ({
+  location,
+  setRoutes,
+  getFromRoutesHistory,
+}) => {
+  const [state /* , dispatch */] = useContext(CartContext)
+  const [, /* miscState */ miscDispatch] = useContext(MiscContext)
 
   return (
     <div className="row">
       <div className="col-a">
         <BaseButton
           className="buttonCategories"
           aria-label="categories button"
-          onClick={() => setActiveSidebar("categoriesMenu")}
+          onClick={() =>
+            setRoutes( location,
+              getFromRoutesHistory(Routes.CATEGORIES) || [Routes.CATEGORIES]
+            )
+          }
         >
           <IconBars />
         </BaseButton>
         <h1>
-          <Logo />
+          <Link to="/" className="logo">
+            ELSUPER
+          </Link>
         </h1>
       </div>
       <div className="col-b">
@@ -85,19 +60,27 @@ const Header = ({ location }) => {
         <BaseButton
           className="buttonUser"
           aria-label="my-account button"
-          onClick={() => setActiveSidebar("userAccount")}
+          onClick={() =>
+            setRoutes( location,
+              getFromRoutesHistory(Routes.MY_ACCOUNT) || [Routes.MY_ACCOUNT]
+            )
+          }
         >
           <FiUser color="white" />
         </BaseButton>
         <ButtonCart
           count={state.length}
-          onClick={() => setActiveSidebar("cart")}
+          onClick={() =>
+            setRoutes( location,getFromRoutesHistory(Routes.CART) || [Routes.CART])
+          }
         />
       </div>
+
       <style jsx global>{`
         .logo {
           color: white;
           text-decoration: none;
+          cursor: pointer;
         }
 
         .buttonCategories {

diff --git a/src/components/layout.js b/src/components/layout.js
@@ -1,43 +1,81 @@
-import React /* useContext */ from "react"
+import React, { useEffect } from "react"
 import PropTypes from "prop-types"
 import SimpleBar from "simplebar-react"
 import "simplebar/dist/simplebar.min.css"
-// import { navigate } from "gatsby"
-import { navigate } from "@reach/router" //enables navigate(-1) see: https://github.com/gatsbyjs/gatsby/issues/5987
 
 import Header from "./header"
 import Overlay from "./overlay"
+// import Auth from "./panels/myAccount/auth"
+import Router, { useGetRoutes, setRoutes, useRoutesHistory } from "./router"
 import Sidepanel from "./sidepanel"
-import Menu from "./panels/categoriesMenu"
-import UserAccount from "./panels/userAccount/userAccount"
-import Cart from "./panels/cart/cart"
+import * as Routes from "./sidepanel/routes"
+import {
+  Categories,
+  Cart,
+  Shipping,
+  Payment,
+  Pay,
+  MyAccount,
+  Profile,
+  Cards,
+  Addresses,
+  Orders,
+} from "./sidepanel/panels"
 import "./layout.css"
 
 const Layout = ({ location, children }) => {
-  const activeSidebar = location.state?.activeSidebar
+  const { getFromRoutesHistory, setToRoutesHistory } = useRoutesHistory()
+  const routes = useGetRoutes()
+  const sidepanelRoute = routes[0]
+  const myAccountRoute = getFromRoutesHistory(Routes.MY_ACCOUNT)?.[1]
+  const cartRoute = getFromRoutesHistory(Routes.CART)?.[1]
+
+  useEffect(() => {
+    setToRoutesHistory(routes)
+  }, [routes.toString()])
 
   return (
     <>
       <div className="body">
         <div className="header-wrapper">
           <header>
-            <Header location={location} />
+            <Header
+              location={location}
+              setRoutes={setRoutes}
+              getFromRoutesHistory={getFromRoutesHistory}
+            />
           </header>
         </div>
-        <Overlay isActive={activeSidebar} onClick={(e) => navigate(-1)} />
-        <Sidepanel isActive={activeSidebar === "categoriesMenu"}>
+        <Overlay
+          isActive={Routes.MAIN_SIDEPANELS.includes(sidepanelRoute)}
+          onClick={(e) => setRoutes(location, routes)}
+        />
+        <Sidepanel isActive={sidepanelRoute === Routes.CATEGORIES}>
           <SimpleBar style={{ maxHeight: "100%", width: "100%" }}>
-            <Menu />
+            <Categories />
           </SimpleBar>
         </Sidepanel>
-        <Sidepanel right isActive={activeSidebar === "userAccount"}>
+        <Sidepanel right isActive={sidepanelRoute === Routes.MY_ACCOUNT}>
           <SimpleBar style={{ maxHeight: "100%", width: "100%" }}>
-            <UserAccount />
+            <Router activeRoute={myAccountRoute}>
+              <MyAccount default />
+              {/* <Auth route={Routes.AUTH} /> */}
+              <Profile private route={Routes.PROFILE} />
+              <Orders private route={Routes.ORDERS} />
+              <Cards private route={Routes.CARDS} />
+              <Addresses private route={Routes.ADDRESSES} />
+            </Router>
           </SimpleBar>
         </Sidepanel>
-        <Sidepanel right isActive={activeSidebar === "cart"}>
+        <Sidepanel right isActive={sidepanelRoute === Routes.CART}>
           <SimpleBar style={{ maxHeight: "100%", width: "100%" }}>
-            <Cart />
+            <Router activeRoute={cartRoute}>
+              <Cart default />
+              {/* <Auth route={Routes.AUTH} /> */}
+              <Shipping private route={Routes.SHIPPING} />
+              <Payment private route={Routes.PAYMENT} />
+              <Pay private route={Routes.PAY} />
+            </Router>
           </SimpleBar>
         </Sidepanel>
         <div className="main-wrapper">
@@ -49,6 +87,7 @@ const Layout = ({ location, children }) => {
           </footer>
         </div>
       </div>
+
       <style jsx>{`
         .body {
           padding-top: 0;

diff --git a/src/components/overlay.js b/src/components/overlay.js
@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-const Overlay = ({ isActive=false, onClick }) => (
+const Overlay = ({ isActive = false, onClick }) => (
   <>
     <div className={`overlay ${isActive && "visible"}`} onClick={onClick} />
     <style jsx>{`