feat: add "No result found" to all searches (#126)

elixir-cloud-aai · Mar 17, 2024 · dca20b7 · dca20b7
1 parent 5af17d6
commit dca20b7
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 4 deletions.
diff --git a/components/Funders.jsx b/components/Funders.jsx
@@ -37,7 +37,27 @@ function Partners({ funders }) {
     return date.toLocaleDateString('en-GB', options);
   };
 
+  const resetFilters = () => {
+    setFilteredFunders(funders);
+    setQuery('');
+  };
+
   const renderFunders = () => {
+    if (filteredFunders.length === 0) {
+      return (
+        <div className="flex items-center">
+          <div className="text-base text-gray-700 dark:text-gray-300">
+            No Funders
+          </div>
+          <button
+            className="bg-elixirred text-white ml-3 px-20 py-2 rounded-lg md:text-base text-sm"
+            onClick={() => resetFilters()}
+          >
+            Reset
+          </button>
+        </div>
+      );
+    }
     return filteredFunders?.map((funder) => {
       return (
         <Zoom key={funder.id}>

diff --git a/components/Partners.jsx b/components/Partners.jsx
@@ -17,8 +17,28 @@ function Partners({ partners }) {
     setFilteredPartners(newFilteredPartners);
   };
 
-  const renderPartners = () =>
-    filteredPartners.map((partner) => (
+  const resetFilters = () => {
+    setFilteredPartners(partners);
+    setQuery('');
+  };
+
+  const renderPartners = () => {
+    if (filteredPartners.length === 0) {
+      return (
+        <div className="flex items-center">
+          <div className="text-base text-gray-700 dark:text-gray-300">
+            No Partners
+          </div>
+          <button
+            className="bg-elixirred text-white ml-3 px-20 py-2 rounded-lg md:text-base text-sm"
+            onClick={() => resetFilters()}
+          >
+            Reset
+          </button>
+        </div>
+      );
+    }
+    return filteredPartners.map((partner) => (
       <Zoom key={partner.id}>
         <a href={partner.website} rel="noopener noreferrer" target="_blank">
           <div className="w-full rounded-lg border-2 shadow-lg hover:shadow-md my-5 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 dark:border-gray-800 dark:hover:border-gray-900 cursor-pointer ">
@@ -44,6 +64,7 @@ function Partners({ partners }) {
         </a>
       </Zoom>
     ));
+  };
 
   return (
     <div className="mt-32 md:mx-64 mx-10 font-pop text-gray-700">

diff --git a/components/Solutions.jsx b/components/Solutions.jsx
@@ -18,8 +18,28 @@ function Solutions({ solutions }) {
     setFilteredSolutions(newFilteredSolutions);
   };
 
-  const renderSolutions = () =>
-    filteredSolutions.map((solution) => (
+  const resetFilters = () => {
+    setFilteredSolutions(solutions);
+    setQuery('');
+  };
+
+  const renderSolutions = () => {
+    if (filteredSolutions.length === 0) {
+      return (
+        <div className="flex items-center">
+          <div className="text-base text-gray-700 dark:text-gray-300">
+            No Solution
+          </div>
+          <button
+            className="bg-elixirred text-white ml-3 px-20 py-2 rounded-lg md:text-base text-sm"
+            onClick={() => resetFilters()}
+          >
+            Reset
+          </button>
+        </div>
+      );
+    }
+    return filteredSolutions.map((solution) => (
       <Zoom key={solution.id}>
         <Link href={`solution/${solution.id}`} passHref>
           <div className="w-full my-5 border-2 rounded-lg shadow-lg cursor-pointer hover:shadow-md dark:bg-gray-900 dark:hover:bg-gray-800 dark:border-gray-800 dark:hover:border-gray-900 hover:bg-gray-100">
@@ -46,6 +66,7 @@ function Solutions({ solutions }) {
         </Link>
       </Zoom>
     ));
+  };
 
   return (
     <div className="mx-10 mt-32 text-gray-700 md:mx-64 font-pop">