Npm update packages and add Woocommerce session expiration

Npm update packages and add Woocommerce session expiration

Author: w3bdesign

components/Cart/AddToCartButton.component.jsx

@@ -1,6 +1,6 @@
 import { useState, useContext } from 'react';
 import { request } from 'graphql-request';
-import useSWR from 'swr';
+
 import { v4 as uuidv4 } from 'uuid';
 
 import { useQuery, useMutation } from '@apollo/react-hooks';
@@ -87,7 +87,7 @@ const AddToCartButton = (props) => {
   return (
     <>
       <button
-        onClick={() => handleAddToCartClick()}
+        onClick={handleAddToCartClick}
         className="px-4 py-2 font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400"
       >
         KJØP

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-woocommerce",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -13,24 +13,23 @@
   "license": "ISC",
   "dependencies": {
     "@apollo/react-hooks": "^3.1.5",
-    "algoliasearch": "^4.2.0",
+    "algoliasearch": "^4.3.0",
     "apollo-boost": "^0.4.9",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
     "apollo-link": "^1.2.14",
     "apollo-link-error": "^1.1.13",
     "apollo-link-http": "^1.5.17",
-    "graphql": "^15.1.0",
+    "graphql": "^15.2.0",
     "graphql-request": "^2.0.0",
     "graphql-tag": "^2.10.3",
     "next": "^9.4.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-instantsearch-dom": "^6.5.0",
+    "react-instantsearch-dom": "^6.6.0",
     "react-spring": "^8.0.27",
     "styled-components": "^5.1.1",
-    "swr": "^0.2.2",
-    "uuid": "^8.1.0"
+    "uuid": "^8.2.0"
   },
   "devDependencies": {
     "babel-plugin-styled-components": "^1.10.7",

package.json

@@ -24,8 +24,6 @@ const HomePage = ({ products }) => {
 export default HomePage;
 
 export async function getStaticProps() {
-  //export async function getServerSideProps() {
-
   const { data, loading, networkStatus } = await client.query({
     query: FETCH_ALL_PRODUCTS_QUERY,
   });
@@ -36,6 +34,6 @@ export async function getStaticProps() {
       loading: loading,
       networkStatus: networkStatus,
     },
-    unstable_revalidate: 5,
+    unstable_revalidate: 10,
   };
 }

pages/index.js

@@ -1,10 +1,10 @@
 import PageTitle from 'components/Header/PageTitle.component';
 import CheckoutForm from 'components/Checkout/CheckoutForm.component';
 
-const Handlekurv = () => (
+const Kasse = () => (
   <>
     <PageTitle title="Kasse" />
     <CheckoutForm />
   </>
 );
-export default Handlekurv;
+export default Kasse;

pages/kasse.js

@@ -47,5 +47,6 @@ export async function getStaticProps() {
     props: {
       categories: result.data.productCategories.nodes,
     },
+    unstable_revalidate: 10,
   };
 }

pages/kategorier.js

@@ -1,5 +1,4 @@
 import { request } from 'graphql-request';
-import useSWR from 'swr';
 import { withRouter } from 'next/router';
 
 import SingleProduct from 'components/Product/SingleProduct.component';

pages/produkt/[slug].js

@@ -50,5 +50,6 @@ export async function getStaticProps() {
     props: {
       products: result.data.products.nodes,
     },
+    unstable_revalidate: 10,
   };
 }

pages/produkter.js

@@ -23,6 +23,16 @@ export const middleware = new ApolloLink((operation, forward) => {
    * If session data exist in local storage, set value as session header.
    */
   const session = process.browser ? localStorage.getItem('woo-session') : null;
+  const sessionAge = process.browser
+    ? localStorage.getItem('woo-session-expiry')
+    : null;
+
+  const oneDay = 60 * 60 * 24 * 1000;
+  const olderThan24h = new Date() - sessionAge > oneDay;
+  if (olderThan24h && process.browser) {
+    localStorage.removeItem('woo-session');
+    localStorage.removeItem('woo-session-expiry');
+  }
 
   if (session) {
     operation.setContext(({ headers = {} }) => ({
@@ -59,6 +69,7 @@ export const afterware = new ApolloLink((operation, forward) => {
         // Update session new data if changed.
       } else if (localStorage.getItem('woo-session') !== session) {
         localStorage.setItem('woo-session', headers.get('woocommerce-session'));
+        localStorage.setItem('woo-session-expiry', new Date());
       }
     }
     return response;

utils/apollo/ApolloClient.js

@@ -62,21 +62,21 @@ export const ADD_TO_CART = gql`
 `;
 
 export const CHECKOUT_MUTATION = gql`
-mutation CHECKOUT_MUTATION( $input: CheckoutInput! ) {
-  checkout(input: $input) {
-    clientMutationId
-    order {
-      id
-      orderId
-      refunds {
-        nodes {
-          amount
+  mutation CHECKOUT_MUTATION($input: CheckoutInput!) {
+    checkout(input: $input) {
+      clientMutationId
+      order {
+        id
+        orderId
+        refunds {
+          nodes {
+            amount
+          }
         }
+        status
       }
-      status
+      result
+      redirect
     }
-    result
-    redirect
   }
-}
 `;