From a14eeaa068ab472c4e8b17ef38acf40f5d0941d3 Mon Sep 17 00:00:00 2001
From: "Dusan Mijatovic (PC2020)" <d.mijatovic@dv4all.nl>
Date: Tue, 18 Apr 2023 17:13:53 +0200
Subject: [PATCH] fix: support software card without image. chore: increase
 debounce time to avoid early reloads

---
 .../apiSoftwareHighlights.tsx                 |  1 -
 .../software/overview/SearchInput.tsx         |  2 +-
 .../software/overview/SoftwareCard.tsx        | 19 +++++++++++--------
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/components/admin/software-highlights/apiSoftwareHighlights.tsx b/frontend/components/admin/software-highlights/apiSoftwareHighlights.tsx
index 5cc198738..132fb26eb 100644
--- a/frontend/components/admin/software-highlights/apiSoftwareHighlights.tsx
+++ b/frontend/components/admin/software-highlights/apiSoftwareHighlights.tsx
@@ -10,7 +10,6 @@ import {SoftwareListItem} from '~/types/SoftwareTypes'
 import {extractCountFromHeader} from '~/utils/extractCountFromHeader'
 import {createJsonHeaders, extractReturnMessage, getBaseUrl} from '~/utils/fetchHelpers'
 import logger from '~/utils/logger'
-import {paginationUrlParams} from '~/utils/postgrestUrl'
 import usePaginationWithSearch from '~/utils/usePaginationWithSearch'
 
 export type SoftwareHighlight = SoftwareListItem & {
diff --git a/frontend/components/software/overview/SearchInput.tsx b/frontend/components/software/overview/SearchInput.tsx
index 1ba61e78a..f80e7b71c 100644
--- a/frontend/components/software/overview/SearchInput.tsx
+++ b/frontend/components/software/overview/SearchInput.tsx
@@ -18,7 +18,7 @@ type SearchInputProps = {
 export default function SearchInput({
   placeholder,
   onSearch,
-  delay = 400,
+  delay = 700,
   defaultValue = ''
 }: SearchInputProps) {
   const [state, setState] = useState({
diff --git a/frontend/components/software/overview/SoftwareCard.tsx b/frontend/components/software/overview/SoftwareCard.tsx
index ca84fb6c0..86ccc55a0 100644
--- a/frontend/components/software/overview/SoftwareCard.tsx
+++ b/frontend/components/software/overview/SoftwareCard.tsx
@@ -21,19 +21,22 @@ export const SoftwareCard = ({item, direction}:SoftwareCardProps) => {
   const isHorizontal = !!direction
 
   return (
-    <Link href={'/software/'+item.slug} key={item.id} className="hover:text-inherit">
+    <Link href={`/software/${item.slug}`} key={item.id} className="hover:text-inherit">
       <div className={`flex-shrink-0 transition bg-white shadow-md hover:shadow-lg rounded-lg hover:cursor-pointer h-full select-none ${isHorizontal ? 'flex flex-col sm:flex-row w-[20rem] sm:w-full' : 'flex-col'}`} >
         {/* Cover image */}
-        <img
-          className={`
-            object-cover
-            ${isHorizontal
-              ? 'w-full rounded-tr-lg rounded-tl-lg   sm:rounded-bl-lg sm:rounded-tl-lg sm:rounded-tr-none sm:w-[20rem] sm:h-[20rem]'
-              : 'w-full rounded-tr-lg rounded-tl-lg'
-            }`}
+        {
+          item.image_id &&
+          <img
+            className={`
+              object-cover
+              ${isHorizontal
+                ? 'w-full rounded-tr-lg rounded-tl-lg   sm:rounded-bl-lg sm:rounded-tl-lg sm:rounded-tr-none sm:w-[20rem] sm:h-[20rem]'
+                : 'w-full rounded-tr-lg rounded-tl-lg'
+              }`}
           src={`${getImageUrl(item.image_id) ?? ''}`}
           alt={`Cover image for ${item.brand_name}`}
           />
+        }
 
         {/* Card content */}
         <div className={`flex flex-col p-4 ${isHorizontal ? 'max-w-[350px]' : ''}`}>