(fix): sort order for featured products

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-starter-stripemart",
   "description": "A minimalist e-commerce storefront using Gatsby, SANITY, Stripe and Use-Shopping-Cart.",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "author": "Eric Howey <[email protected]>",
   "keywords": [

web/src/components/store/storeFilterForm.tsx

@@ -63,24 +63,23 @@ const StoreSortForm = ({ displayedProducts, setDisplayedProducts }) => {
 
     // Finally we can handle sorting
     if (sortOrder === "default") {
-      const sorted = finalProducts.sort((a, b) => {
-        let dateA = a._createdAt
-        let dateB = b._createdAt
-        let featuredA = a.featured
-        let featuredB = b.featured
-        if (featuredA === true) {
-          return -1
-        } else if (featuredB === true) {
-          return -1
-        } else if (dateA > dateB) {
-          return -1
-        } else if (dateA < dateB) {
-          return 1
-        }
-        return 0
-      })
+      const featured = finalProducts.filter(
+        (product) => product.featured === true
+      )
+      const sorted = finalProducts
+        .filter((product) => product.featured !== true)
+        .sort((a, b) => {
+          let dateA = a._createdAt
+          let dateB = b._createdAt
+          if (dateA > dateB) {
+            return -1
+          } else if (dateA < dateB) {
+            return 1
+          }
+          return 0
+        })
 
-      setDisplayedProducts([...sorted])
+      setDisplayedProducts([...featured, ...sorted])
     }
     if (sortOrder === "recent") {
       const sorted = finalProducts.sort((a, b) => {

web/src/data/useProducts.ts

@@ -60,56 +60,57 @@ export const useProducts = (): Array<TypeProduct> => {
   const missingImage = data.missingImage.childImageSharp.gatsbyImageData
   const missingDescription = "Missing product description..."
 
-  const products = rawProducts
-    .map((node) => {
-      // Check to make sure there is an image from Stripe otherwise serve a missing image placeholder
-      const hasImage =
-        node?.image?.asset != null && node?.image?.asset.gatsbyImageData != null
-      const productImage = hasImage
-        ? node?.image?.asset.gatsbyImageData
-        : missingImage
+  const formattedProducts = rawProducts.map((node) => {
+    // Check to make sure there is an image from Stripe otherwise serve a missing image placeholder
+    const hasImage =
+      node?.image?.asset != null && node?.image?.asset.gatsbyImageData != null
+    const productImage = hasImage
+      ? node?.image?.asset.gatsbyImageData
+      : missingImage
 
-      // Check to make sure there is a description as well and provide a fallback
-      const hasDescription = node?.description != null
-      const productDescription = hasDescription
-        ? node?.description
-        : missingDescription
+    // Check to make sure there is a description as well and provide a fallback
+    const hasDescription = node?.description != null
+    const productDescription = hasDescription
+      ? node?.description
+      : missingDescription
 
-      const productFormatted = {
-        name: node.name,
-        description: productDescription,
-        _createdAt: node._createdAt,
-        featured: node.featured,
-        categories: node.categories,
-        id: node._id,
-        price_id: node._id,
-        sanity_id: node._id,
-        price: dollarsToCents(node.price),
-        image: productImage,
-        currency: currency,
-        stock: node?.stock ?? 1,
-        shippingOption: false,
-        localOnly: node.localOnly,
-        type: "one_time",
-      }
-      return productFormatted
-    })
+    const productFormatted = {
+      name: node.name,
+      description: productDescription,
+      _createdAt: node._createdAt,
+      featured: node.featured,
+      categories: node.categories,
+      id: node._id,
+      price_id: node._id,
+      sanity_id: node._id,
+      price: dollarsToCents(node.price),
+      image: productImage,
+      currency: currency,
+      stock: node?.stock ?? 1,
+      shippingOption: false,
+      localOnly: node.localOnly,
+      type: "one_time",
+    }
+    return productFormatted
+  })
+
+  const featuredProducts = formattedProducts.filter(
+    (product) => product.featured === true
+  )
+  const sortedProducts = formattedProducts
+    .filter((product) => product.featured !== true)
     .sort((a, b) => {
       let dateA = a._createdAt
       let dateB = b._createdAt
-      let featuredA = a.featured
-      let featuredB = b.featured
-      if (featuredA === true) {
-        return 1
-      } else if (featuredB === true) {
-        return 1
-      } else if (dateA > dateB) {
+      if (dateA > dateB) {
         return -1
       } else if (dateA < dateB) {
         return 1
       }
       return 0
     })
 
+  const products = [...featuredProducts, ...sortedProducts]
+
   return products
 }