From 6545d3ad2ef2ce7d76784add8a546e3b6ed7601f Mon Sep 17 00:00:00 2001 From: seyidayo Date: Wed, 8 Sep 2021 08:22:06 +0100 Subject: [PATCH 1/5] fix: paystack reference not reloading --- gatsby-config.js | 6 +++--- src/components/StarRating.tsx | 26 ++++++++++++-------------- src/pages/book/_slug.tsx | 24 +++++++++++++++++++----- src/pages/index.tsx | 5 ++--- src/styles/scss/_base.scss | 1 - 5 files changed, 36 insertions(+), 26 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index 58fe6fa..599ecf8 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -34,8 +34,8 @@ module.exports = { accessToken: process.env.GATSBY_CONTENTFUL_ACCESS_TOKEN, }, }, - "gatsby-plugin-image", - "gatsby-plugin-sharp", - "gatsby-transformer-sharp", + // "gatsby-plugin-image", + // "gatsby-plugin-sharp", + // "gatsby-transformer-sharp", ], }; diff --git a/src/components/StarRating.tsx b/src/components/StarRating.tsx index fc12341..42ed166 100644 --- a/src/components/StarRating.tsx +++ b/src/components/StarRating.tsx @@ -11,20 +11,18 @@ const StarRating = ({ stars, className }: StarRatingProp) => { {[...Array(5)].map((_, index) => { index += 1; return ( - <> - - + ); })} diff --git a/src/pages/book/_slug.tsx b/src/pages/book/_slug.tsx index a2fb85f..f584b68 100644 --- a/src/pages/book/_slug.tsx +++ b/src/pages/book/_slug.tsx @@ -1,4 +1,4 @@ -import React, { ReactPropTypes } from "react"; +import React, { ReactPropTypes, useState } from "react"; import { graphql, navigate } from "gatsby"; import { get } from "lodash"; import { renderRichText } from "gatsby-source-contentful/rich-text"; @@ -9,23 +9,37 @@ import StarRating from "../../components/StarRating"; import * as styles from "./_slug.module.css"; +const generateReference = (): string => { + let text = ""; + let possible = + "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; + + for (let i = 0; i < 10; i++) + text += possible.charAt(Math.floor(Math.random() * possible.length)); + + return text; +}; + const payStackConfig = { - reference: new Date().getTime().toString(), - email: process.env.GATSBY_PAYSTACK_TEST_EMAIL || "", - publicKey: process.env.GATSBY_PAYSTACK_PUBLIC_KEY || "", + email: process.env.GATSBY_PAYSTACK_TEST_EMAIL, + publicKey: process.env.GATSBY_PAYSTACK_PUBLIC_KEY, }; const ProductPage = (props: ReactPropTypes) => { const product = get(props, `data.contentfulProduct`); + const [reference, setReference] = useState(generateReference()); const handleSuccess = (_reference: string) => { // TODO: send reference navigate("/book/appointment"); }; - const handleClose = () => {}; + const handleClose = (): void => { + setReference(generateReference()); + }; const componentProps = { + reference, ...payStackConfig, amount: product.price * 500 * 100, text: "Book Sleep Appointment", diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 83475bc..bca1f6f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -29,10 +29,9 @@ const IndexPage = () => {

- You want more sleep, we know how to get it Book{" "} + You want more sleep, we know how to get it. Book{" "} up to 12 hours of - sleep and have a cozy place - — prepared for you easy, anytime. + sleep and have a cozy place prepared for you anytime.

+ ); }; diff --git a/src/pages/book/success.tsx b/src/pages/success.tsx similarity index 92% rename from src/pages/book/success.tsx rename to src/pages/success.tsx index 6cace6d..c86f7e2 100644 --- a/src/pages/book/success.tsx +++ b/src/pages/success.tsx @@ -1,7 +1,7 @@ import React from "react"; import { navigate } from "gatsby-link"; -import Layout from "../../components/templates/Layout"; +import Layout from "../components/templates/Layout"; const BookSuccessPage = () => { const handleBack = () => { From 9055c4846d3260621a0738febcd45f600e464f5e Mon Sep 17 00:00:00 2001 From: seyidayo Date: Sun, 12 Sep 2021 20:17:25 +0100 Subject: [PATCH 3/5] :art: chore: complete protected routes Fix: context issue too --- gatsby-browser.js | 6 ++++ src/components/Navbar.tsx | 16 +++++++---- src/components/PrivateRoute.tsx | 8 +++--- src/components/templates/Layout/index.tsx | 5 ++-- src/context/UserContext.tsx | 6 ++-- src/pages/index.tsx | 32 +++++++++++++++------ src/pages/login.tsx | 34 +++++++++-------------- 7 files changed, 62 insertions(+), 45 deletions(-) diff --git a/gatsby-browser.js b/gatsby-browser.js index 3ace87e..0eecdb3 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1 +1,7 @@ +import React from "react"; import "./src/styles/scss/index.scss"; + +import { UserProvider } from "./src/context/UserContext"; +export const wrapRootElement = ({ element }) => ( + {element} +); diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 1333d7e..fdde46a 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,23 +1,27 @@ -import React, { useState } from "react"; +import React, { useContext, useState } from "react"; import { Link, navigate } from "gatsby"; +import UserContext from "../context/UserContext"; type NavbarProps = { showBackButton?: boolean; }; const Navbar = ({ showBackButton }: NavbarProps) => { - const [token] = useState(""); + const { user, setUser } = useContext(UserContext); + const [loading, setLoading] = useState(false); const handleSignOut = async (event: any) => { event.preventDefault(); + setLoading(true); try { - await fetch(`/api/logout?token=${token}`, { + await fetch(`/api/logout?token=${user}`, { method: "POST", }).catch((err) => { console.error(`Logout error: ${err}`); }); } finally { - window.localStorage.removeItem("google:tokens"); + setLoading(false); + setUser(""); navigate("/"); } }; @@ -37,13 +41,13 @@ const Navbar = ({ showBackButton }: NavbarProps) => {
  • - {!!token && ( + {!!user && ( )}
    • diff --git a/src/components/PrivateRoute.tsx b/src/components/PrivateRoute.tsx index 89c772c..a2730d3 100644 --- a/src/components/PrivateRoute.tsx +++ b/src/components/PrivateRoute.tsx @@ -1,15 +1,15 @@ import React from "react"; import Layout from "../components/templates/Layout"; -// import { navigate } from "gatsby"; -import { UserContext } from "../context/UserContext"; +import { navigate } from "gatsby"; +import UserContext from "../context/UserContext"; import { useContext } from "react"; const PrivateRoute = ({ component: Component, ...rest }: any) => { const { user } = useContext(UserContext); if (!user) { - // navigate(`/`); - // return null; + navigate(`/`); + return null; } return ( diff --git a/src/components/templates/Layout/index.tsx b/src/components/templates/Layout/index.tsx index e470936..335c001 100644 --- a/src/components/templates/Layout/index.tsx +++ b/src/components/templates/Layout/index.tsx @@ -2,7 +2,6 @@ import React from "react"; import { Helmet } from "react-helmet"; import Navbar from "../../Navbar"; import Footer from "../../Footer"; -import UserProvider from "../../../context/UserContext"; interface LayoutInterface { children: React.ReactNode; @@ -11,7 +10,7 @@ interface LayoutInterface { } const Layout = ({ children, showBackButton }: LayoutInterface) => ( - + <> More sleep @@ -19,7 +18,7 @@ const Layout = ({ children, showBackButton }: LayoutInterface) => ( {children}
    - + ); export default Layout; diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx index 94243c0..378cbc4 100644 --- a/src/context/UserContext.tsx +++ b/src/context/UserContext.tsx @@ -10,7 +10,7 @@ interface UserProviderInterface { children: React.ReactNode; } -export const UserContext = createContext({ +const UserContext = createContext({ user: "", setUser: () => {}, }); @@ -24,4 +24,6 @@ const UserProvider = ({ children }: UserProviderInterface) => { ); }; -export default UserProvider; +export default UserContext; + +export { UserProvider }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index daa2898..229dfc0 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,10 +1,13 @@ -import React, { useState } from "react"; +import React, { useContext, useState } from "react"; import Layout from "../components/templates/Layout"; import BgImage from "../assets/images/person-sleeping.jpg"; +import UserContext from "../context/UserContext"; +import { Link } from "gatsby"; const IndexPage = () => { const [loading, setLoading] = useState(false); + const { user } = useContext(UserContext); const handleSignIn = async (event: React.FormEvent) => { event.preventDefault(); @@ -34,14 +37,25 @@ const IndexPage = () => { sleep and have a cozy place prepared for you anytime.

    - + {user ? ( + + + + ) : ( + + )}
    diff --git a/src/pages/login.tsx b/src/pages/login.tsx index c7e3555..dfe87a1 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -3,12 +3,12 @@ import { navigate } from "gatsby"; import { Helmet } from "react-helmet"; import qs from "query-string"; -import UserProvider, { UserContext } from "../context/UserContext"; +import UserContext from "../context/UserContext"; import Layout from "../components/templates/Layout"; const LoginPage = ({ location }: any) => { const { token } = qs.parse(location?.search); - const { setUser } = useContext(UserContext); + const { setUser, user } = useContext(UserContext); useEffect(() => { setUser(token); @@ -17,27 +17,19 @@ const LoginPage = ({ location }: any) => { }, 1000); }); - const handleClick = () => { - setUser("Clicked"); - }; - return ( - - - Authenticating... - - -
    -
    -

    - Authenticating your account... -

    -
    -
    - - -     + + Authenticating... + + +
    +
    +

    + Authenticating your account... +

    +
    +
    ); }; From 2a82c6c8ab703fc194961d404f2576fe4c9b2c3f Mon Sep 17 00:00:00 2001 From: seyidayo Date: Sun, 12 Sep 2021 20:46:53 +0100 Subject: [PATCH 4/5] :bug: fix: window not found --- src/hooks/index.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/hooks/index.ts b/src/hooks/index.ts index ba21403..6c9ceb5 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,10 +1,16 @@ import { useState } from "react"; -function useLocalStorage(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] { +function useLocalStorage( + key: string, + initialValue: T +): [T, (value: T | ((val: T) => T)) => void] { // State to store our value // Pass initial state function to useState so logic is only executed once const [storedValue, setStoredValue] = useState(() => { try { + if (!window) { + return; + } // Get from local storage by key const item = window.localStorage.getItem(key); // Parse stored json or if none return initialValue @@ -21,7 +27,8 @@ function useLocalStorage(key: string, initialValue: T): [T, (value: T | ((val const setValue = (value: T | ((val: T) => T)) => { try { // Allow value to be a function so we have same API as useState - const valueToStore = value instanceof Function ? value(storedValue) : value; + const valueToStore = + value instanceof Function ? value(storedValue) : value; // Save state setStoredValue(valueToStore); // Save to local storage From 91ad664604d86f0fb66afa6494d9934a67a5b45b Mon Sep 17 00:00:00 2001 From: seyidayo Date: Sun, 12 Sep 2021 21:24:34 +0100 Subject: [PATCH 5/5] :bug: fix: window not found --- src/hooks/index.ts | 2 +- src/middleware/private-route.js | 19 ++++--------------- 2 files changed, 5 insertions(+), 16 deletions(-) diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 6c9ceb5..01c06ad 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -8,7 +8,7 @@ function useLocalStorage( // Pass initial state function to useState so logic is only executed once const [storedValue, setStoredValue] = useState(() => { try { - if (!window) { + if (typeof window === `undefined`) { return; } // Get from local storage by key diff --git a/src/middleware/private-route.js b/src/middleware/private-route.js index 1c668cb..1228e45 100644 --- a/src/middleware/private-route.js +++ b/src/middleware/private-route.js @@ -1,21 +1,10 @@ -import React from "react"; +import React, { useContext } from "react"; import { navigate } from "gatsby"; - -const isBrowser = () => typeof window !== "undefined"; - -const isLoggedIn = () => { - const user = getUser(); - return !!user.access_token; -}; - -const getUser = () => - isBrowser() && window.localStorage.getItem("google:tokens") - ? JSON.parse(window.localStorage.getItem("google:tokens")) - : {}; +import UserContext from "../context/UserContext"; const PrivateRoute = ({ component: Component, location, ...rest }) => { - console.log("private"); - if (!isLoggedIn() && location.pathname !== `/`) { + const { user } = useContext(UserContext); + if (!user) { navigate("/"); return null; }