Merge pull request #141 from w3bdesign/development

Development

Author: w3bdesign

components/Cart/AddToCartButton.component.jsx

@@ -3,7 +3,7 @@ import { request } from 'graphql-request';
 import useSWR from 'swr';
 import { v4 as uuidv4 } from 'uuid';
 
-import { useQuery, useMutation } from '@apollo/client';
+import { useQuery, useMutation } from '@apollo/react-hooks';
 
 import { AppContext } from 'utils/context/AppContext';
 
@@ -37,26 +37,21 @@ const AddToCartButton = (props) => {
     productId: product.productId,
   };
 
-
-  	// Get Cart Data.
-	const { loading, error, data, refetch } = useQuery( GET_CART, {
-		notifyOnNetworkStatusChange: true,
-		onCompleted: () => {		
-
-      console.log("Data from add to cart button: ");
+  // Get Cart Data.
+  const { loading, error, data, refetch } = useQuery(GET_CART, {
+    notifyOnNetworkStatusChange: true,
+    onCompleted: () => {
+      console.log('Data from add to cart button: ');
       console.log(data);
-			// Update cart in the localStorage.
-      const updatedCart = getFormattedCart( data );
-      
+      // Update cart in the localStorage.
+      const updatedCart = getFormattedCart(data);
 
-			localStorage.setItem( 'woocommerce-cart', JSON.stringify( updatedCart ) );
+      localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
 
-			// Update cart data in React Context.
-      setCart( updatedCart );
-    
-		}
-  } );
-  
+      // Update cart data in React Context.
+      setCart(updatedCart);
+    },
+  });
 
   const [
     addToCart,

components/Cart/CartPage/CartItemsContainer.component.jsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { v4 } from 'uuid';
 import { useContext, useState, useEffect } from 'react';
 
-import { useQuery, useMutation } from '@apollo/client';
+import { useQuery, useMutation } from '@apollo/react-hooks';
 
 import { AppContext } from 'utils/context/AppContext';
 import {

components/Checkout/CheckoutForm.component.jsx

@@ -1,20 +1,80 @@
+import { useState, useContext, useEffect } from 'react';
+import { useQuery, useMutation } from '@apollo/react-hooks';
+
+import { GET_CART } from 'utils/const/GQL_QUERIES';
+import { INITIAL_STATE } from 'utils/const/INITIAL_STATE';
+import { AppContext } from 'utils/context/AppContext';
+
+import { getFormattedCart } from 'utils/functions/functions';
+
 const CheckoutForm = () => {
+  const [cart, setCart] = useContext(AppContext);
+  const [input, setInput] = useState(INITIAL_STATE);
+  const [orderData, setOrderData] = useState(null);
+  const [requestError, setRequestError] = useState(null);
+
+  // Get Cart Data.
+  const { loading, error, data, refetch } = useQuery(GET_CART, {
+    notifyOnNetworkStatusChange: true,
+    onCompleted: () => {
+      // Update cart in the localStorage.
+      const updatedCart = getFormattedCart(data);
+      localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
+      // Update cart data in React Context.
+      setCart(updatedCart);
+    },
+  });
+
+  /*
+   * Handle form submit.
+   *
+   * @param {Object} event Event Object.
+   *
+   * @return {void}
+   */
+  const handleFormSubmit = (event) => {
+    event.preventDefault();
+    const result = validateAndSanitizeCheckoutForm(input);
+    if (!result.isValid) {
+      setInput({ ...input, errors: result.errors });
+      return;
+    }
+    const checkOutData = createCheckoutData(input);
+    setOrderData(checkOutData);
+    setRequestError(null);
+  };
+
+  useEffect(() => {
+    if (null !== orderData) {
+      // Do checkout mutation when the value for orderData changes.
+      // checkout();
+    }
+  }, [orderData]);
+
   return (
     <>
-    <section className="py-8 bg-white">
-      <div className="container flex flex-wrap items-center pt-4 pb-12 mx-auto">
-        <nav id="store" className="top-0 w-full px-6 py-1">
-          <div className="container flex flex-wrap items-center justify-between w-full px-2 py-3 mx-auto mt-0">
-            <a
-              className="mt-6 text-xl font-bold tracking-wide text-gray-800 no-underline uppercase hover:no-underline"
-              href="#"
-            >
-              Bestillingsskjema
-            </a>
-          </div>
-        </nav>
-      </div>
-    </section>
+      <section className="py-8 bg-white">
+        <div className="container flex flex-wrap items-center pt-4 pb-12 mx-auto">
+          <nav id="store" className="top-0 w-full px-6 py-1">
+            <div className="container flex flex-wrap items-center justify-between w-full px-2 py-3 mx-auto mt-0">
+              <a
+                className="mt-6 text-xl font-bold tracking-wide text-gray-800 no-underline uppercase hover:no-underline"
+                href="#"
+              >
+                Bestillingsskjema
+              </a>
+            </div>
+          </nav>
+        </div>
+      </section>
+
+      {cart ? (
+        <form onSubmit={handleFormSubmit} className="woo-next-checkout-form">
+          <div className="row">Skjema kommer her</div>
+        </form>
+      ) : (
+        ''
+      )}
     </>
   );
 };

components/Product/IndexProducts.component.jsx

@@ -4,7 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
 /**
  * Displays all of the products as long as length is defined.
  * Does a map() over the props array and utilizes uuidv4 for unique key values.
- * @param {Object} props // Products
+ * @param {Object} products 
  */
 const IndexProducts = ({ products }) => {
   return (

components/Product/SingleProduct.component.jsx

@@ -6,12 +6,9 @@ import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
 /**
  * Shows a single product with an Add To Cart button.
  * Uses GraphQL for product data
- * @param {Object} props // Product data
+ * @param {Object} product // Product data
  */
-const SingleProduct = (props) => {
-
-const { product} = props;
-
+const SingleProduct = ({ product }) => {
   const [isLoading, setIsLoading] = useState(true);
   useEffect(() => {
     // useEffect with empty array is the same as componentDidMount
@@ -30,7 +27,7 @@ const { product} = props;
   } = product;
 
   // Strip out HTML from description
-  const DESCRIPTION_WITHOUT_HTML = description.replace(/(<([^>]+)>)/gi, '');  
+  const DESCRIPTION_WITHOUT_HTML = description.replace(/(<([^>]+)>)/gi, '');
 
   return (
     <section className="py-8 bg-white">

package-lock.json

@@ -12,7 +12,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@apollo/client": "^3.0.0-rc.2",
+    "@apollo/react-hooks": "^3.1.5",
     "algoliasearch": "^4.2.0",
     "apollo-boost": "^0.4.9",
     "apollo-cache-inmemory": "^1.6.6",

package.json

@@ -1,4 +1,4 @@
-import { ApolloProvider } from '@apollo/client';
+import { ApolloProvider } from '@apollo/react-hooks';
 
 import { AppProvider } from 'utils/context/AppContext';
 

pages/_app.js

@@ -47,13 +47,6 @@ export async function getServerSideProps() {
     query: FETCH_ALL_PRODUCTS_QUERY,
   });
 
-  //console.log("getServerSideProps data: ")
-  //console.log(data)
-  console.log('getServerSideProps networkStatus: ');
-  console.log(networkStatus);
-  console.log('getServerSideProps loading: ');
-  console.log(loading);
-
   return {
     props: {
       // products: result.data.products.nodes,