Use env variables for Algolia search

Use env variables for Algolia  search

Author: w3bdesign

components/AlgoliaSearch/AlgoliaSearchBox.component.jsx

@@ -2,12 +2,14 @@ import algoliasearch from 'algoliasearch';
 import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';
 import { useState } from 'react';
 
-import WOO_CONFIG  from 'utils/config/nextConfig';
+import WOO_CONFIG from 'utils/config/nextConfig';
 import SearchResults from './SearchResults.component';
 
 const searchClient = algoliasearch(
-  WOO_CONFIG.ALGOLIA_APP_ID,
-  WOO_CONFIG.ALGOLIA_PUBLIC_API_KEY
+  // WOO_CONFIG.ALGOLIA_APP_ID,
+  // WOO_CONFIG.ALGOLIA_PUBLIC_API_KEY
+  process.env.ALGOLIA_APP_ID,
+  process.env.ALGOLIA_PUBLIC_API_KEY
 );
 
 // https://www.algolia.com/doc/api-reference/widgets/instantsearch/react/

components/Cart/Cart.component.jsx

@@ -9,7 +9,7 @@ import { AppContext } from 'utils/context/AppContext';
  * Displays amount of items in cart.
  */
 const Cart = () => {
-  const [cart, setCart] = useContext(AppContext);
+  const [cart] = useContext(AppContext);
 
   const productsCount =
     null !== cart && Object.keys(cart).length ? cart.totalProductsCount : '';
@@ -18,15 +18,15 @@ const Cart = () => {
     <>
       <Link href="/handlekurv">
         <a
-          className="inline-block pl-3 no-underline hover:text-black"
+          className="inline-block pl-4 mt-4 no-underline"
           aria-label="Handlekurv"
         >
           <svg
-            className="fill-current hover:text-black"
+            className="fill-current"
             xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
+            width="155"
+            height="55"
+            viewBox="0 0 30 30"
             aria-label="Handlekurv"
           >
             <path
@@ -40,7 +40,7 @@ const Cart = () => {
       </Link>
       {/*Cart quantity */}
       {productsCount && (
-        <span className="w-6 h-6 pb-2 -mt-6 text-center text-white bg-black rounded-full">
+        <span className="w-6 h-6 pb-2 -mt-5 text-center text-white bg-black rounded-full">
           {productsCount}
         </span>
       )}

components/Header/Navbar.component.jsx

@@ -22,14 +22,14 @@ const Navbar = () => {
             <ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0">
               <li>
                 <Link href="/produkter">
-                  <a className="inline-block py-2 pr-4 no-underline hover:text-black hover:underline">
+                  <a className="inline-block py-2 pr-4 text-xl font-bold no-underline hover:underline">
                     Produkter
                   </a>
                 </Link>
               </li>
               <li>
                 <Link href="/kategorier">
-                  <a className="inline-block py-2 pr-4 no-underline hover:text-black hover:underline">
+                  <a className="inline-block py-2 pr-4 text-xl font-bold no-underline hover:underline">
                     Kategorier
                   </a>
                 </Link>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-woocommerce",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Nextjs WooCommerce webshop",
   "main": "index.js",
   "scripts": {
@@ -23,7 +23,7 @@
     "postcss": "^8.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-hook-form": "^6.13.0",
+    "react-hook-form": "^6.13.1",
     "react-instantsearch-dom": "^6.8.2",
     "react-spring": "^8.0.27",
     "styled-components": "^5.2.1",