Merge pull request #164 from w3bdesign/development

Improve and update README

Author: w3bdesign

README.md

@@ -27,7 +27,7 @@ Start the server with ```npm run dev ```
 - Able to place orders remotely with Woocommerce (bank transfers only for now)
 - Algolia search (work in progress)
 - Apollo Client with GraphQL
-- Animations with React-Spring
+- Animations with React-Spring and Animate.css
 - Shows loading spinner created with Styled Components while loading data and error message if data can not be loaded
 - Shows page load progress with Nprogress during navigation
 - Mobile menu and cart slide-out with animations
@@ -41,9 +41,7 @@ Start the server with ```npm run dev ```
 
 ## TODO
 
-- Validate remote Woocommerce session (or delete old session?)
 - Hide products not in stock
 - Add better SEO
-- Add price to Algolia search (Wordpress plugin has been developed, needs to be integrated)
 - Add a better README.md
 - Implement https://github.com/cyrilwanner/next-optimized-images for production

components/Cart/AddToCartButton.component.jsx

@@ -25,7 +25,8 @@ import {
 const AddToCartButton = (props) => {
   const [cart, setCart] = useContext(AppContext);
   const [requestError, setRequestError] = useState(null);
-  const [showViewCart, setShowViewCart] = useState(false);
+  const [showViewCart, setShowViewCart] = useState(false);  
+  const [showAddToCart, setshowAddToCart] = useState(false);  
 
   const product = props.product;
 
@@ -63,7 +64,8 @@ const AddToCartButton = (props) => {
       refetch();
       // Show View Cart Button
       setShowViewCart(true);
-      console.warn('Completed ADD_TO_CART', data);
+      setshowAddToCart(true)
+     
     },
     onError: (error) => {
       if (error) {
@@ -81,14 +83,14 @@ const AddToCartButton = (props) => {
 
   return (
     <>
-      {!addToCartLoading && (
-        <button
-          onClick={handleAddToCartClick}
-          className="px-4 py-2 font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400"
-        >
-          KJØP
-        </button>
-      )}
+      <button
+        onClick={handleAddToCartClick}
+        className={`px-4 py-2 font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400 ${
+          addToCartLoading && `animate__animated animate__fadeOut`} ${showAddToCart && `animate__animated animate__fadeIn` }`}
+      >
+        KJØP
+      </button>
+
       {addToCartLoading && (
         <>
           <div className="mt-4 text-xl text-left">

components/Product/IndexProducts.component.jsx

@@ -35,7 +35,7 @@ const IndexProducts = ({ products }) => {
                       <img
                         id="product-image"
                         className="transition duration-500 ease-in-out transform hover:grow hover:shadow-lg hover:scale-105"
-                        //className="w-64 transition duration-500 ease-in-out transform hover:grow hover:shadow-lg hover:scale-105"
+                        alt={name}
                         src={image.sourceUrl}
                       />
                     </a>

components/Product/SingleProduct.component.jsx

@@ -44,6 +44,7 @@ const SingleProduct = ({ product }) => {
             <img
               id="product-image"
               className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:grow hover:shadow-lg hover:scale-105"
+              alt={name}
               src={image.sourceUrl}
             />
             <div className="ml-8">

pages/_app.js

@@ -9,6 +9,7 @@ import Footer from '../components/Footer/Footer.component';
 
 import '../styles/index.css';
 import '../styles/algolia.min.css';
+import '../styles/animate.min.css';
 import 'nprogress/nprogress.css';
 
 import client from '../utils/apollo/ApolloClient';

pages/produkt/[slug].js

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