From 4d71f57bb91d34e2eaa228e8d584e3ccfad97549 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Sat, 12 Dec 2020 20:16:33 +1100
Subject: [PATCH] issue-153 Filter out parts without main image

Temporary measure while we don't have any kind of search. is basically
to stop the website looking like it's filled with dumby data, which it
looks like atm.
resolves #153
---
 web/src/components/Parts/Parts.js         | 17 +++++++++++++++--
 web/src/components/PartsCell/PartsCell.js | 12 ++++++++++--
 web/src/pages/HomePage/HomePage.js        |  2 +-
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/web/src/components/Parts/Parts.js b/web/src/components/Parts/Parts.js
index efdc8bf..b2b1439 100644
--- a/web/src/components/Parts/Parts.js
+++ b/web/src/components/Parts/Parts.js
@@ -1,16 +1,29 @@
+import { useMemo } from 'react'
 import { Link, routes } from '@redwoodjs/router'
 
 import { countEmotes } from 'src/helpers/emote'
 import ImageUploader from 'src/components/ImageUploader'
 
-const PartsList = ({ parts }) => {
+const PartsList = ({ parts, shouldFilterPartsWithoutImage = false }) => {
+  // temporary filtering parts that don't have images until some kind of search is added and there are more things on the website
+  // it helps avoid the look of the website just being filled with dumby data.
+  // related issue-104
+  const filteredParts = useMemo(
+    () =>
+      shouldFilterPartsWithoutImage
+        ? parts.filter(({ mainImage }) => mainImage)
+        : [...parts]
+            // sort should probably be done on the service, but the filtering is temp too
+            .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)),
+    [parts, shouldFilterPartsWithoutImage]
+  )
   return (
     <section className="max-w-6xl mx-auto mt-8">
       <ul
         className="grid gap-x-8 gap-y-12 items-center mx-4 relative"
         style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))' }}
       >
-        {parts.map(({ title, mainImage, user, Reaction }) => (
+        {filteredParts.map(({ title, mainImage, user, Reaction }) => (
           <li
             className="rounded-lg shadow-md hover:shadow-lg mx-px transform hover:-translate-y-px transition-all duration-150"
             key={`${user?.userName}--${title}`}
diff --git a/web/src/components/PartsCell/PartsCell.js b/web/src/components/PartsCell/PartsCell.js
index 1490590..537161a 100644
--- a/web/src/components/PartsCell/PartsCell.js
+++ b/web/src/components/PartsCell/PartsCell.js
@@ -34,6 +34,14 @@ export const Empty = () => {
   )
 }
 
-export const Success = ({ parts }) => {
-  return <Parts parts={parts} />
+export const Success = ({
+  parts,
+  variables: { shouldFilterPartsWithoutImage },
+}) => {
+  return (
+    <Parts
+      parts={parts}
+      shouldFilterPartsWithoutImage={shouldFilterPartsWithoutImage}
+    />
+  )
 }
diff --git a/web/src/pages/HomePage/HomePage.js b/web/src/pages/HomePage/HomePage.js
index 6d93cbc..e853fe8 100644
--- a/web/src/pages/HomePage/HomePage.js
+++ b/web/src/pages/HomePage/HomePage.js
@@ -8,7 +8,7 @@ const PartsPage = () => {
     <MainLayout>
       <Seo title="Parts page" description="Cadhub parts page" lang="en-US" />
       <LandingSection />
-      <PartsCell />
+      <PartsCell shouldFilterPartsWithoutImage />
     </MainLayout>
   )
 }