Merge branch 'master' of https://github.com/okbel/e-comm-example

components/auth/ForgotPassword.tsx

@@ -59,7 +59,7 @@ const ForgotPassword: FC<Props> = () => {
           <div className="text-red border border-red p-3">{message}</div>
         )}
 
-        <Input placeholder="Email" onChange={setEmail} />
+        <Input placeholder="Email" onChange={setEmail} type="email" />
         <div className="pt-2 w-full flex flex-col">
           <Button
             variant="slim"

components/ui/Input/Input.tsx

@@ -20,6 +20,7 @@ const Input: React.FC<Props> = (props) => {
   }
 
   return (
+    <label>
       <input
         className={rootClassName}
         onChange={handleOnChange}
@@ -29,6 +30,7 @@ const Input: React.FC<Props> = (props) => {
         spellCheck="false"
         {...rest}
       />
+    </label>
   )
 }
 

components/ui/context.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, useMemo } from 'react'
 import { ThemeProvider } from 'next-themes'
 import { SSRProvider, OverlayProvider } from 'react-aria'
 
@@ -144,7 +144,8 @@ export const UIProvider: FC = (props) => {
   const setModalView = (view: MODAL_VIEWS) =>
     dispatch({ type: 'SET_MODAL_VIEW', view })
 
-  const value = {
+  const value = useMemo(
+    () => ({
       ...state,
       openSidebar,
       closeSidebar,
@@ -155,7 +156,9 @@ export const UIProvider: FC = (props) => {
       setModalView,
       openToast,
       closeToast,
-  }
+    }),
+    [state]
+  )
 
   return <UIContext.Provider value={value} {...props} />
 }

pages/index.tsx

@@ -60,10 +60,10 @@ export default function Home({
     // products, then fill them with products from the products list, this
     // is useful for new commerce sites that don't have a lot of products
     return {
-      featured: rangeMap(
+      featured: rangeMap(6, (i) => featuredProducts[i] ?? products.shift())
-        6,
+        .filter(nonNullable)
-        (i) => featuredProducts[i] ?? products.shift()
+        .sort((a, b) => a.node.prices.price.value - b.node.prices.price.value)
-      ).filter(nonNullable),
+        .reverse(),
       bestSelling: rangeMap(
         6,
         (i) => bestSellingProducts[i] ?? products.shift()
@@ -86,7 +86,7 @@ export default function Home({
         ))}
       </Grid>
       <Marquee variant="secondary">
-        {bestSelling.slice(0, 3).map(({ node }) => (
+        {bestSelling.slice(3, 6).map(({ node }) => (
           <ProductCard
             key={node.path}
             product={node}
@@ -118,7 +118,7 @@ export default function Home({
         ))}
       </Grid>
       <Marquee>
-        {bestSelling.slice(3, 6).map(({ node }) => (
+        {bestSelling.slice(0, 3).map(({ node }) => (
           <ProductCard
             key={node.path}
             product={node}