diff --git a/.gitignore b/.gitignore index 554bd30..5513bb5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules artifacts -package-lock.json \ No newline at end of file +package-lock.json +dist \ No newline at end of file diff --git a/package.json b/package.json index 0fb5f0c..d8a811a 100644 --- a/package.json +++ b/package.json @@ -3,15 +3,14 @@ "private": true, "scripts": { "start": "sh -ac '. ./.env; react-static start'", - "stage": "react-static build --staging", - "build": "react-static build", + "stage": "sh -ac '. ./.env; react-static build --staging'", + "build": "sh -ac '. ./.env; react-static build'", "bundle": "react-static bundle", "export": "react-static export", "serve": "serve dist -p 3005 -s" }, "dependencies": { "@apollo/client": "^3.3.6", - "@apollo/react-hooks": "4.0.0", "@reach/router": "1.3.4", "@rehooks/local-storage": "2.4.0", "@types/isomorphic-fetch": "0.0.35", diff --git a/src/App.tsx b/src/App.tsx index f0277d1..69e7593 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,28 +1,28 @@ import React from 'react'; import { Root, Routes, addPrefetchExcludes } from 'react-static'; import { Link, Router } from '@reach/router'; -import { ApolloProvider } from '@apollo/react-hooks'; +import { ApolloProvider } from '@apollo/client'; +import gqlClient from 'utils/gqlClient'; import CartProvider from 'state/Cart'; import CustomerProvider from 'state/Customer'; import ShippingProvider from 'state/Shipping'; -import gqlClient from 'utils/gqlClient'; + +import './assets/styles/app.scss'; + import Header from 'components/Header'; import Cart from 'containers/Cart'; import Account from 'containers/Account'; -import './assets/styles/app.scss'; - // non-static routes addPrefetchExcludes(['cart', 'account', 'account/shipping', 'account/payment']); function App() { return ( - // @ts-ignore - - - - + + + +
Loading...}> @@ -44,15 +44,15 @@ function App() {
Contact
- Terms of Service + Terms of Service
Privacy Policy
- - - - + + + + ) }; diff --git a/src/assets/styles/privacy-and-policy.scss b/src/assets/styles/privacy.scss similarity index 96% rename from src/assets/styles/privacy-and-policy.scss rename to src/assets/styles/privacy.scss index f4b6d5f..4dcdb9b 100644 --- a/src/assets/styles/privacy-and-policy.scss +++ b/src/assets/styles/privacy.scss @@ -1,6 +1,6 @@ @import './variables.scss'; -.privacy-and-policy { +.privacy { h3 { font-weight: 400; } diff --git a/src/assets/styles/terms-of-service.scss b/src/assets/styles/terms.scss similarity index 97% rename from src/assets/styles/terms-of-service.scss rename to src/assets/styles/terms.scss index 6f2411e..46c8c81 100644 --- a/src/assets/styles/terms-of-service.scss +++ b/src/assets/styles/terms.scss @@ -1,6 +1,6 @@ @import './variables.scss'; -.terms-of-service { +.terms { h3 { font-weight: 400; } diff --git a/src/index.tsx b/src/index.tsx index 183999e..d607b6e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,12 +1,12 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import { AppContainer } from 'react-hot-loader' +import React from 'react'; +import ReactDOM from 'react-dom'; +import { AppContainer } from 'react-hot-loader'; // Your top level component -import App from './App' +import App from './App'; // Export your top level component as JSX (for static rendering) -export default App +export default App; // Render your app if (typeof document !== 'undefined') { diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx index 1d84e9d..2bd820f 100644 --- a/src/pages/contact.tsx +++ b/src/pages/contact.tsx @@ -1,10 +1,11 @@ import React, { useState } from 'react'; import { validateEmail } from 'utils/functions'; -import CustomInput from 'components/CustomInput'; -import CustomButton from 'components/CustomButton'; import '../assets/styles/contact.scss'; +import CustomInput from 'components/CustomInput'; +import CustomButton from 'components/CustomButton'; + export default () => { const [alertMessage, setAlertMessage] = useState(""); const [name, setName] = useState(""); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f75826a..f603fa7 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect, createRef } from 'react'; import { useRouteData } from 'react-static'; -import { Link } from '@reach/router'; import { ProductEdge, ProductConnection } from 'shopify-storefront-api-typings'; import '../assets/styles/home.scss'; @@ -13,7 +12,6 @@ export default () => { const videoRef = createRef(); const { products }: { products: ProductConnection } = useRouteData(); - console.log(products) useEffect(() => { ['pause', 'ended'].forEach(evt => videoRef.current.addEventListener(evt, () => { @@ -46,7 +44,6 @@ export default () => {

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
congue cursus efficitur. Pellentesque odio tortor, suscipit nec tortor ut.

- {/* Shop Now */} Shop Now diff --git a/src/pages/login.tsx b/src/pages/login.tsx index a87f5e5..8af7178 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -42,7 +42,7 @@ export default () => { const { id, firstName, lastName, phone, addresses } = customer; setCustomer({ id, email, firstName, lastName, phone }); - const address = addresses.edges.length > 0 ? addresses.edges[0] : {}; + const address = addresses.edges.length > 0 ? addresses.edges[0].node : {}; setShipping(address); navigate('/shop'); }; diff --git a/src/pages/privacy-and-policy.tsx b/src/pages/privacy.tsx similarity index 99% rename from src/pages/privacy-and-policy.tsx rename to src/pages/privacy.tsx index 101cd9f..1531a21 100644 --- a/src/pages/privacy-and-policy.tsx +++ b/src/pages/privacy.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import '../assets/styles/privacy-and-policy.scss'; +import '../assets/styles/privacy.scss'; export default () => ( -
+

Privacy and Policy

diff --git a/src/pages/product.tsx b/src/pages/product.tsx index 3b2e5f9..40fce3e 100644 --- a/src/pages/product.tsx +++ b/src/pages/product.tsx @@ -38,6 +38,10 @@ const SingleProductPage = ({ product }: { product: Product }) => { } }); + if (!product) { + return null; + } + const { variants, description }: {variants: ProductVariantConnection, description: string } = product; const options: Array = product.options.length > 0 && product.options.filter(({ name }) => name !== 'Title'); // Shopify keeps a default for some reason :| let price = formatPrice(variants.edges[selectedVariant].node.priceV2.amount); diff --git a/src/pages/terms-of-service.tsx b/src/pages/terms.tsx similarity index 99% rename from src/pages/terms-of-service.tsx rename to src/pages/terms.tsx index 8a779bc..141e1be 100644 --- a/src/pages/terms-of-service.tsx +++ b/src/pages/terms.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { Link } from '@reach/router'; -import '../assets/styles/terms-of-service.scss'; +import '../assets/styles/terms.scss'; export default () => ( -

+

Terms of Service

diff --git a/src/state/Cart.tsx b/src/state/Cart.tsx index 52b60d9..67d7da9 100644 --- a/src/state/Cart.tsx +++ b/src/state/Cart.tsx @@ -1,4 +1,5 @@ import React, { createContext, useReducer, ReactNode } from 'react'; +import { isLocalStorageAvailable } from 'utils/functions'; import { Checkout } from 'shopify-storefront-api-typings'; type Props = { @@ -11,7 +12,7 @@ type InitialStateType = { }; const initialState = { - cart: JSON.parse(localStorage.getItem('cart')) || null, + cart: isLocalStorageAvailable() && JSON.parse(localStorage.getItem('cart')) || null, setCart: () => {} }; @@ -23,9 +24,9 @@ const reducer = (state: any, action: any) => { switch (action.type) { case actions.SET_CART: if (action.cart) { - localStorage.setItem('cart', JSON.stringify(action.cart)); + isLocalStorageAvailable() && localStorage.setItem('cart', JSON.stringify(action.cart)); } else { - localStorage.removeItem('cart'); + isLocalStorageAvailable() && localStorage.removeItem('cart'); } return { ...state, cart: action.cart }; default: diff --git a/src/state/Customer.tsx b/src/state/Customer.tsx index de002d9..14b009e 100644 --- a/src/state/Customer.tsx +++ b/src/state/Customer.tsx @@ -1,4 +1,5 @@ import React, { createContext, useReducer, ReactNode } from 'react'; +import { isLocalStorageAvailable } from 'utils/functions'; import { Customer } from 'shopify-storefront-api-typings'; import Cookies from 'js-cookie'; @@ -14,7 +15,7 @@ type InitialStateType = { }; const initialState = { - customer: JSON.parse(localStorage.getItem('customer') !== undefined ? localStorage.getItem('customer') : null) || null, + customer: isLocalStorageAvailable() && JSON.parse(localStorage.getItem('customer') !== undefined ? localStorage.getItem('customer') : null) || null, setCustomer: () => {}, token: Cookies.get('vtok') || null, setToken: () => {} @@ -29,9 +30,9 @@ const reducer = (state: any, action: any) => { switch (action.type) { case actions.SET_CUSTOMER: if (action.customer === null) { - localStorage.removeItem('customer'); + isLocalStorageAvailable() && localStorage.removeItem('customer'); } else { - localStorage.setItem('customer', JSON.stringify(action.customer)); + isLocalStorageAvailable() && localStorage.setItem('customer', JSON.stringify(action.customer)); } return { ...state, customer: action.customer }; case actions.SET_TOKEN: diff --git a/src/state/Shipping.tsx b/src/state/Shipping.tsx index a5a7439..048c92f 100644 --- a/src/state/Shipping.tsx +++ b/src/state/Shipping.tsx @@ -1,4 +1,5 @@ import React, { createContext, useReducer, ReactNode } from 'react'; +import { isLocalStorageAvailable } from 'utils/functions'; import { MailingAddress } from 'shopify-storefront-api-typings'; type Props = { @@ -11,7 +12,7 @@ type InitialStateType = { }; const initialState = { - shipping: JSON.parse(localStorage.getItem('shipping') !== undefined ? localStorage.getItem('shipping') : null) || null, + shipping: isLocalStorageAvailable() && JSON.parse(localStorage.getItem('shipping') !== undefined ? localStorage.getItem('shipping') : null) || null, setShipping: () => {}, }; @@ -23,9 +24,9 @@ const reducer = (state: any, action: any) => { switch (action.type) { case actions.SET_SHIPPING: if (action.shipping === null) { - localStorage.removeItem('shipping'); + isLocalStorageAvailable() && localStorage.removeItem('shipping'); } else { - localStorage.setItem('shipping', JSON.stringify(action.shipping)); + isLocalStorageAvailable() && localStorage.setItem('shipping', JSON.stringify(action.shipping)); } return { ...state, shipping: action.shipping }; default: diff --git a/src/utils/functions.ts b/src/utils/functions.ts index 27b3860..41e675f 100644 --- a/src/utils/functions.ts +++ b/src/utils/functions.ts @@ -31,4 +31,8 @@ export const saveNewCart = (checkout, setCart) => { } else { console.log('nope'); } -}; \ No newline at end of file +}; + +export const isLocalStorageAvailable = () => { + return typeof window === 'object' || typeof window !== 'undefined'; +} \ No newline at end of file