Add ssrMode to ApolloClient and make checkout responsive

Author: w3bdesign

components/Checkout/OrderDetails.component.jsx

@@ -9,11 +9,10 @@ const OrderDetails = ({ cart }) => {
           {cart ? (
             <div className="p-6 mx-auto mt-5">
               <CheckoutTitle title="Handlekurv" />
-              
+
               <table className="table-auto">
                 <thead>
-                  <tr>
-                    <th className="px-4 py-2" scope="col" />
+                  <tr>                   
                     <th className="px-4 py-2" scope="col" />
                     <th className="px-4 py-2" scope="col">
                       Produkt

components/Checkout/OrderDetailsCartItem.component.jsx

@@ -1,23 +1,13 @@
 import { useState } from 'react';
 
-import SVGCloseX from 'components/SVG/SVGCloseX.component';
-
-const OrderDetailsCartItem = ({
-  item,
-  products,
-  updateCartProcessing,
-  handleRemoveProductClick,
-  updateCart,
-}) => {
+const OrderDetailsCartItem = ({ item }) => {
   const [productCount, setProductCount] = useState(item.qty);
 
   return (
     <tr className="bg-gray-100">
-      <td className="px-4 py-2 border">
-        <SVGCloseX />
-      </td>
-      <td className="px-4 py-2 border">
+      <td className="px-0 py-2 border sm:px-4 md:px-4 lg:px-4 xl:px-4">
         <img
+          className="hidden sm:block md:block lg:block xl:block"
           width="64"
           src={item.image.sourceUrl}
           srcSet={item.image.srcSet}
@@ -31,19 +21,13 @@ const OrderDetailsCartItem = ({
         {'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
       </td>
 
-      <td className="px-4 py-2 border">
-        <input type="number" min="1" value={productCount} />
-      </td>
+      <td className="px-4 py-2 border">{productCount}</td>
 
       <td className="px-4 py-2 border">
         {'string' !== typeof item.totalPrice
           ? item.totalPrice.toFixed(2)
           : item.totalPrice}
       </td>
-
-     
-
-
     </tr>
   );
 };

pages/index.js

@@ -14,8 +14,7 @@ import { FETCH_ALL_PRODUCTS_QUERY } from 'utils/const/GQL_QUERIES';
 const HomePage = ({ products }) => {
   return (
     <>
-    
-      <Hero/>
+      <Hero />
       <PageTitle title="Produkter" />
       {products && <IndexProducts products={products} />}
     </>
@@ -24,10 +23,10 @@ const HomePage = ({ products }) => {
 
 export default HomePage;
 
-//export async function getStaticProps() {
-export async function getServerSideProps() {
+export async function getStaticProps() {
+  //export async function getServerSideProps() {
+
   const { data, loading, networkStatus } = await client.query({
-    //const result = await client.query({
     query: FETCH_ALL_PRODUCTS_QUERY,
   });
 
@@ -37,5 +36,6 @@ export async function getServerSideProps() {
       loading: loading,
       networkStatus: networkStatus,
     },
+    unstable_revalidate: 5,
   };
 }

utils/apollo/ApolloClient.js

@@ -67,6 +67,7 @@ export const afterware = new ApolloLink((operation, forward) => {
 
 // Apollo GraphQL client.
 const client = new ApolloClient({
+  ssrMode: typeof window === 'undefined',
   link: middleware.concat(
     afterware.concat(
       createHttpLink({