Code cleanup

Author: w3bdesign

components/Cart/AddToCartButton.component.jsx

@@ -1,7 +1,5 @@
 import { useState, useContext } from 'react';
-
 import { v4 as uuidv4 } from 'uuid';
-
 import { useQuery, useMutation } from '@apollo/client';
 
 import { AppContext } from 'utils/context/AppContext';

components/Cart/CartPage/CartItem.component.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { v4 } from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 import SVGX from 'components/SVG/SVGX.component';
 import { getUpdatedItems } from 'utils/functions/functions';
@@ -39,7 +39,7 @@ const CartItem = ({
         updateCart({
           variables: {
             input: {
-              clientMutationId: v4(),
+              clientMutationId: uuidv4(),
               items: updatedItems,
             },
           },

components/Cart/CartPage/CartItemsContainer.component.jsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { v4 } from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 import { useContext, useState } from 'react';
 import { useQuery, useMutation } from '@apollo/client';
 
@@ -50,7 +50,7 @@ const CartItemsContainer = () => {
       updateCart({
         variables: {
           input: {
-            clientMutationId: v4(),
+            clientMutationId: uuidv4(),
             items: updatedItems,
           },
         },

components/Cart/CartPage/MobileCart.component.jsx

@@ -1,4 +1,4 @@
-import { v4 } from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 import MobileCartItem from './MobileCartItem.component';
 
@@ -12,7 +12,7 @@ const MobileCart = ({ cart, handleRemoveProductClick, updateCart }) => {
               {cart.products.length &&
                 cart.products.map(() => (
                   <tr
-                    key={v4()}
+                    key={uuidv4()}
                     className="flex flex-col mb-2 bg-white border border-gray-300 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0"
                   >
                     <th className="p-3 text-left">Fjern</th>
@@ -27,7 +27,7 @@ const MobileCart = ({ cart, handleRemoveProductClick, updateCart }) => {
               {cart.products.length &&
                 cart.products.map((item) => (
                   <MobileCartItem
-                    key={item}
+                    key={uuidv4()}
                     item={item}
                     products={cart.products}
                     handleRemoveProductClick={handleRemoveProductClick}

components/Cart/CartPage/MobileCartItem.component.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { v4 } from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 import SVGX from 'components/SVG/SVGX.component';
 import { getUpdatedItems } from 'utils/functions/functions';
@@ -37,7 +37,7 @@ const MobileCartItem = ({
         updateCart({
           variables: {
             input: {
-              clientMutationId: v4(),
+              clientMutationId: uuidv4(),
               items: updatedItems,
             },
           },

components/Category/Categories.component.jsx

@@ -10,23 +10,21 @@ const Categories = ({ categories }) => {
   return (
     <>
       <section className="container mx-auto bg-white">
-      <div className="grid gap-2 px-2 pt-2 pb-2 lg:px-0 xl:px-0 md:px-0 lg:grid-cols-4 sm:grid-cols-2 md:grid-cols-3 xs:grid-cols-3">
+        <div className="grid gap-2 px-2 pt-2 pb-2 lg:px-0 xl:px-0 md:px-0 lg:grid-cols-4 sm:grid-cols-2 md:grid-cols-3 xs:grid-cols-3">
           {categories.map(({ id, name, slug }) => (
             <Link
               key={uuidv4()}
               as={`/kategori/${slug}?id=${id}`}
               href="/kategori/[id]"
             >
-              <div                
-                className="p-6 cursor-pointer"
-              >
+              <div className="p-6 cursor-pointer">
                 <div className="flex items-center justify-center w-full h-16 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline">
                   <p className="text-lg">{name}</p>
                 </div>
               </div>
             </Link>
           ))}
-       </div>
+        </div>
       </section>
     </>
   );

components/Checkout/MobileOrderDetails.component.jsx

@@ -1,4 +1,4 @@
-import { v4 } from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 import MobileOrderDetailsItem from './MobileOrderDetailsItem.component';
 
@@ -12,7 +12,7 @@ const MobileOrderDetails = ({ cart }) => {
               {cart.products.length &&
                 cart.products.map(() => (
                   <tr
-                    key={v4()}
+                    key={uuidv4()}
                     className="flex flex-col mb-2 bg-white rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0"
                   >
                     <th className="p-3 text-left">Navn</th>

utils/functions/functions.js

@@ -1,4 +1,4 @@
-import { v4 } from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 import WOO_CONFIG from 'utils/config/nextConfig';
 
@@ -239,7 +239,7 @@ export const getFormattedCart = (data) => {
 
 export const createCheckoutData = (order) => {
   const checkoutData = {
-    clientMutationId: v4(),
+    clientMutationId: uuidv4(),
 
     billing: {
       firstName: order.firstName,