feat: 🎸 upgrade to React18 and Next13

commercelayer · Feb 15, 2023 · 66645ce · 66645ce
1 parent 606f7ad
commit 66645ce
Show file tree

Hide file tree

Showing 70 changed files with 11,570 additions and 42,187 deletions.
diff --git a/.env.example → .env.local.example b/.env.example → .env.local.example
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+auto-install-peers = true
diff --git a/components/Countries.tsx b/components/Countries.tsx
@@ -1,22 +1,22 @@
-import React, { FunctionComponent } from 'react'
-import Link from 'next/link'
-import _ from 'lodash'
-import { Country } from '@typings/models'
+import React, { FunctionComponent } from "react";
+import Link from "next/link";
+import _ from "lodash";
+import { Country } from "@typings/models";
 
-type Item = Omit<Country, 'image'> & {
-  image: { title: string; url: string }
-}
+type Item = Omit<Country, "image"> & {
+  image: { title: string; url: string };
+};
 
 type Props = {
-  items: Item[]
-  cms?: string
-  searchBy?: string
-}
+  items: Item[];
+  cms?: string;
+  searchBy?: string;
+};
 
 const Countries: FunctionComponent<Props> = ({ items, searchBy }) => {
   const countries = items.map(({ image, defaultLocale, code }, key) => {
-    const lang = _.first(defaultLocale.toLowerCase().split(','))
-    const countryCode = code.toLowerCase()
+    const lang = _.first(defaultLocale.toLowerCase().split(","));
+    const countryCode = code.toLowerCase();
     const href = !_.isEmpty(searchBy)
       ? {
           pathname: `/[countryCode]/[lang]`,
@@ -32,7 +32,7 @@ const Countries: FunctionComponent<Props> = ({ items, searchBy }) => {
             countryCode,
             lang,
           },
-        }
+        };
     return (
       <Link key={key} href={href}>
         <div className="cursor-pointer">
@@ -43,16 +43,16 @@ const Countries: FunctionComponent<Props> = ({ items, searchBy }) => {
           />
         </div>
       </Link>
-    )
-  })
+    );
+  });
   return (
     <div className="bg-white shadow-md p-10 max-w-screen-sm mx-auto rounded">
       <h1 className="text-xl md:text-2xl mb-8">Choose your country</h1>
       <div className="grid grid-cols-2 gap-y-14 gap-x-16 md:grid-cols-4 md:gap-y-8 md:gap-x-12">
         {countries}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Countries
+export default Countries;
diff --git a/components/CountrySelector.tsx b/components/CountrySelector.tsx
@@ -1,39 +1,39 @@
-import React, { FunctionComponent, useState } from 'react'
-import { useRouter } from 'next/router'
-import _ from 'lodash'
-import { Transition } from '@headlessui/react'
-import { Country } from '@typings/models'
-import locale from '@locale/index'
+import React, { FunctionComponent, useState } from "react";
+import { useRouter } from "next/router";
+import _ from "lodash";
+import { Transition } from "@headlessui/react";
+import { Country } from "@typings/models";
+import locale from "@locale/index";
 
 type Props = {
-  options: Country[]
-}
+  options: Country[];
+};
 
 const CountrySelector: FunctionComponent<Props> = ({ options }) => {
-  const [show, setShow] = useState(false)
+  const [show, setShow] = useState(false);
   const {
     push,
     query: { countryCode, searchBy, lang },
-  } = useRouter()
+  } = useRouter();
   const optionComponents = options.map(
     ({ code, name, image, defaultLocale }) => {
       return {
         value: code.toLowerCase(),
         name,
         image,
         defaultLocale: defaultLocale.toLowerCase(),
-      }
+      };
     }
-  )
+  );
   const selectedOption = _.first(
     optionComponents.filter(({ value }) => value === countryCode)
-  )
+  );
   const handleChange = (code: string, defaultLocale: string) => {
     searchBy
       ? push(`/${code}/${defaultLocale}?searchBy=${searchBy}`)
-      : push(`/${code}/${defaultLocale}`)
-    setShow(!show)
-  }
+      : push(`/${code}/${defaultLocale}`);
+    setShow(!show);
+  };
   return (
     <div>
       <div className="mt-1 relative">
@@ -47,7 +47,7 @@ const CountrySelector: FunctionComponent<Props> = ({ options }) => {
         >
           <span className="flex items-center">
             <span className="flex-shrink-0 text-gray-700 truncate">
-              {locale[lang as string].shippingTo}:{' '}
+              {locale[lang as string].shippingTo}:{" "}
             </span>
             <img
               src={selectedOption?.image?.url}
@@ -80,7 +80,7 @@ const CountrySelector: FunctionComponent<Props> = ({ options }) => {
         >
           <div
             className={`absolute mt-1 w-full rounded-md bg-white shadow-lg ${
-              show ? 'z-10' : ''
+              show ? "z-10" : ""
             }`}
             onMouseLeave={() => setShow(false)}
           >
@@ -93,13 +93,13 @@ const CountrySelector: FunctionComponent<Props> = ({ options }) => {
             >
               {optionComponents.map(
                 ({ value, name, image, defaultLocale }, k) => {
-                  const selected = value === selectedOption?.value
+                  const selected = value === selectedOption?.value;
                   return (
                     <li
                       key={k}
                       role="option"
                       className={`cursor-default select-none relative py-2 pl-3 pr-9 hover:text-gray-50 hover:bg-blue-500 ${
-                        selected ? '' : 'text-gray-900'
+                        selected ? "" : "text-gray-900"
                       }`}
                       onClick={() => handleChange(value, defaultLocale)}
                     >
@@ -111,7 +111,7 @@ const CountrySelector: FunctionComponent<Props> = ({ options }) => {
                         />
                         <span
                           className={`${
-                            selected ? 'font-semibold' : 'font-normal'
+                            selected ? "font-semibold" : "font-normal"
                           } ml-3 block font-normal truncate`}
                         >
                           {name}
@@ -120,7 +120,7 @@ const CountrySelector: FunctionComponent<Props> = ({ options }) => {
                       {/* Highlighted: "text-white", Not Highlighted: "text-indigo-600" */}
                       <span
                         className={`${
-                          selected ? 'text-gray-900' : 'hidden'
+                          selected ? "text-gray-900" : "hidden"
                         } absolute inset-y-0 right-0 flex items-center pr-4 hover:bg-blue-500`}
                       >
                         <svg
@@ -138,15 +138,15 @@ const CountrySelector: FunctionComponent<Props> = ({ options }) => {
                         </svg>
                       </span>
                     </li>
-                  )
+                  );
                 }
               )}
             </ul>
           </div>
         </Transition>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default CountrySelector
+export default CountrySelector;
diff --git a/components/CustomHits.tsx b/components/CustomHits.tsx
@@ -1,27 +1,27 @@
-import { connectHits } from 'react-instantsearch-dom'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import _ from 'lodash'
-import locale from '@locale/index'
+import { connectHits } from "react-instantsearch-dom";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import _ from "lodash";
+import locale from "@locale/index";
 
 type Props = {
   hits: {
-    name: string
-    image: string
-    reference: string
-    formattedAmount: string
-    formattedCompareAtAmount: string
-    description: string
-    category: string
-    objectID: string
-    slug: string
-  }[]
-}
+    name: string;
+    image: string;
+    reference: string;
+    formattedAmount: string;
+    formattedCompareAtAmount: string;
+    description: string;
+    category: string;
+    objectID: string;
+    slug: string;
+  }[];
+};
 
 const Hits = ({ hits }: Props) => {
   const {
     query: { lang, countryCode },
-  } = useRouter()
+  } = useRouter();
   return _.isEmpty(hits) ? (
     <div className="w-full text-gray-900 h-96">
       <p>{locale[lang as string].emptyProducts}</p>
@@ -37,7 +37,7 @@ const Hits = ({ hits }: Props) => {
           formattedAmount,
           formattedCompareAtAmount,
           slug,
-        } = hit
+        } = hit;
         return (
           <li key={objectID}>
             <Link
@@ -72,10 +72,10 @@ const Hits = ({ hits }: Props) => {
               </div>
             </Link>
           </li>
-        )
+        );
       })}
     </ul>
-  )
-}
+  );
+};
 
-export default connectHits(Hits)
+export default connectHits(Hits);
diff --git a/components/CustomPagination/First.tsx b/components/CustomPagination/First.tsx
@@ -1,10 +1,10 @@
-import { CustomPaginationProps } from '.'
-import { FunctionComponent } from 'react'
+import { CustomPaginationProps } from ".";
+import { FunctionComponent } from "react";
 
 type FirstProps = Pick<
   CustomPaginationProps,
-  'showFirst' | 'currentRefinement' | 'createURL' | 'refine'
->
+  "showFirst" | "currentRefinement" | "createURL" | "refine"
+>;
 
 const First: FunctionComponent<FirstProps> = ({
   showFirst,
@@ -13,24 +13,24 @@ const First: FunctionComponent<FirstProps> = ({
   refine,
 }) => {
   const disabled =
-    currentRefinement === 1 ? 'cursor-not-allowed opacity-25' : ''
+    currentRefinement === 1 ? "cursor-not-allowed opacity-25" : "";
   return !showFirst ? null : (
     <li className={`pagination`}>
       <a
         className={disabled}
         href={createURL(1)}
         onClick={(event) => {
-          event.preventDefault()
+          event.preventDefault();
           if (currentRefinement > 1) {
-            refine(1)
-            window.scrollTo(0, 0)
+            refine(1);
+            window.scrollTo(0, 0);
           }
         }}
       >
-        {'<<'}
+        {"<<"}
       </a>
     </li>
-  )
-}
+  );
+};
 
-export default First
+export default First;
diff --git a/components/CustomPagination/Last.tsx b/components/CustomPagination/Last.tsx
@@ -1,10 +1,10 @@
-import { CustomPaginationProps } from '.'
-import { FunctionComponent } from 'react'
+import { CustomPaginationProps } from ".";
+import { FunctionComponent } from "react";
 
 type LastProps = Pick<
   CustomPaginationProps,
-  'showLast' | 'currentRefinement' | 'createURL' | 'refine' | 'nbPages'
->
+  "showLast" | "currentRefinement" | "createURL" | "refine" | "nbPages"
+>;
 
 const Last: FunctionComponent<LastProps> = ({
   showLast,
@@ -14,24 +14,24 @@ const Last: FunctionComponent<LastProps> = ({
   nbPages,
 }) => {
   const disabled =
-    currentRefinement === nbPages ? 'cursor-not-allowed opacity-25' : ''
+    currentRefinement === nbPages ? "cursor-not-allowed opacity-25" : "";
   return !showLast ? null : (
     <li className={`pagination`}>
       <a
         className={disabled}
         href={createURL(nbPages)}
         onClick={(event) => {
-          event.preventDefault()
+          event.preventDefault();
           if (currentRefinement < nbPages) {
-            refine(nbPages)
-            window.scrollTo(0, 0)
+            refine(nbPages);
+            window.scrollTo(0, 0);
           }
         }}
       >
-        {'>>'}
+        {">>"}
       </a>
     </li>
-  )
-}
+  );
+};
 
-export default Last
+export default Last;