Merge pull request #162 from w3bdesign/development

Add UI feedback for adding to cart

Author: w3bdesign

components/Cart/AddToCartButton.component.jsx

@@ -6,6 +6,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { useQuery, useMutation } from '@apollo/react-hooks';
 
 import { AppContext } from 'utils/context/AppContext';
+import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.component';
 
 import { GET_CART } from 'utils/const/GQL_QUERIES';
 import { ADD_TO_CART } from 'utils/const/GQL_MUTATIONS';
@@ -92,6 +93,13 @@ const AddToCartButton = (props) => {
       >
         KJØP
       </button>
+      {addToCartLoading && (
+        <div className="text-xl text-center">
+          Legger i handlekurv, vennligst vent ...
+          <br />
+          <LoadingSpinner />
+        </div>
+      )}
     </>
   );
 };

components/Cart/CartPage/CartItemsContainer.component.jsx

@@ -40,7 +40,7 @@ const CartItemsContainer = () => {
       setRequestError(error);
     },
   });
-  // TODO We will focus on fetching the cart before we add more functionality
+  // TODO Add more functionality
 
   return (
     <>

components/Checkout/CheckoutForm.component.jsx

@@ -24,6 +24,7 @@ const CheckoutForm = () => {
   const [input, setInput] = useState(INITIAL_STATE);
   const [orderData, setOrderData] = useState(null);
   const [requestError, setRequestError] = useState(null);
+  const [orderCompleted, setorderCompleted] = useState(false);
 
   // Checkout GraphQL mutation
   const [
@@ -34,6 +35,7 @@ const CheckoutForm = () => {
       input: orderData,
     },
     onCompleted: () => {
+      setorderCompleted(true);
       refetch();
     },
     onError: (error) => {
@@ -125,9 +127,13 @@ const CheckoutForm = () => {
           </div>
         </form>
       ) : (
-        <div className="container m-12 mx-auto text-xl text-center">
-          Takk for din ordre!
-        </div>
+        <>
+          {orderCompleted && (
+            <div className="container m-12 mx-auto text-xl text-center">
+              Takk for din ordre!
+            </div>
+          )}
+        </>
       )}
     </>
   );

components/LoadingSpinner/LoadingSpinner.component.jsx

@@ -24,8 +24,8 @@ const rotateAnimation = keyframes`
 `;
 
 const Circle = styled.div`
-  width: 100px;
-  height: 100px;
+  width: 50px;
+  height: 50px;
   border-radius: 50px;
   border: 10px solid black;
   border-right: 10px solid white;
@@ -42,5 +42,5 @@ const Container = styled.div`
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  height: 130px;
+  height: 110px;
 `;