Replace config with .env variables

Author: w3bdesign

.env.example

@@ -1 +1,7 @@
+NEXT_PUBLIC_GRAPHQL_URL="https://woocommerce.url.com/graphql"
+NEXT_PUBLIC_ALGOLIA_INDEX_NAME= "algolia"
+NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL="https://res.cloudinary.com/placeholder-337_utsb7h.jpg"
+NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL="https://res.cloudinary.com/placeholder-616-616_beecp5.jpg"
+NEXT_PUBLIC_ALGOLIA_APP_ID = "changeme"
+NEXT_PUBLIC_ALGOLIA_PUBLIC_API_KEY = "changeme"
 NODE_ENV="development"

components/AlgoliaSearch/AlgoliaSearchBox.component.jsx

@@ -2,7 +2,7 @@ import algoliasearch from 'algoliasearch';
 import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';
 import { useState } from 'react';
 
-import WOO_CONFIG from 'utils/config/nextConfig';
+
 import SearchResults from './SearchResults.component';
 
 const searchClient = algoliasearch(
@@ -23,7 +23,7 @@ const AlgoliaSearchBox = () => {
     <div className="hidden mt-2 md:inline xl:inline">
       <div className="">
         <InstantSearch
-          indexName={WOO_CONFIG.ALGOLIA_INDEX_NAME}
+          indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME}
           searchClient={searchClient}
         >
           {/*We need to conditionally add a border because the element has position:fixed*/}

components/AlgoliaSearch/MobileSearch.component.jsx

@@ -2,7 +2,7 @@ import algoliasearch from 'algoliasearch';
 import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';
 import { useState } from 'react';
 
-import WOO_CONFIG from 'utils/config/nextConfig';
+
 import SearchResults from './SearchResults.component';
 
 const searchClient = algoliasearch(
@@ -19,7 +19,7 @@ const MobileSearch = () => {
   return (
     <div className="inline mt-4">
       <InstantSearch
-        indexName={WOO_CONFIG.ALGOLIA_INDEX_NAME}
+        indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME}
         searchClient={searchClient}
       >
         <SearchBox

components/Product/IndexProducts.component.jsx

@@ -45,7 +45,7 @@ const IndexProducts = ({ products }) => (
                       id="product-image"
                       className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
                       alt={name}
-                      src={WOO_CONFIG.PLACEHOLDER_SMALL_IMAGE_URL}
+                      src={process.env.NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL}
                     />
                   )}
                 </a>

components/Product/SingleProduct.component.jsx

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import AddToCartButton from 'components/Cart/AddToCartButton.component';
 import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
 
-import WOO_CONFIG from 'utils/config/nextConfig';
+
 
 import { filteredVariantPrice } from 'utils/functions/functions';
 
@@ -55,7 +55,7 @@ const SingleProduct = ({ product }) => {
                 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={WOO_CONFIG.PLACEHOLDER_LARGE_IMAGE_URL}
+                src={process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL}
               />
             )}
             <div className="ml-8">

utils/apollo/ApolloClient.js

@@ -7,7 +7,7 @@ import {
   ApolloLink,
 } from '@apollo/client';
 
-import WOO_CONFIG from 'utils/config/nextConfig';
+
 
 /**
  * Middleware operation
@@ -79,7 +79,7 @@ const client = new ApolloClient({
   link: middleware.concat(
     afterware.concat(
       createHttpLink({
-        uri: WOO_CONFIG.GRAPHQL_URL,
+        uri: process.env.NEXT_PUBLIC_GRAPHQL_URL,
         fetch,
       })
     )

utils/config/nextConfig.js

@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
 
-import WOO_CONFIG from 'utils/config/nextConfig';
+
 
 /**
  * Shorten inputted string (usually product description) to a maximum of length
@@ -77,8 +77,8 @@ export const getFormattedCart = (data) => {
           title: givenProduct.image.title,
         }
       : {
-          sourceUrl: WOO_CONFIG.PLACEHOLDER_SMALL_IMAGE_URL,
-          srcSet: WOO_CONFIG.PLACEHOLDER_SMALL_IMAGE_URL,
+          sourceUrl: process.env.NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL,
+          srcSet: process.env.NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL,
           title: givenProduct.name,
         };