From 36cb4c31a029683b43a5c710a25983e1a9beb1c5 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 16 Nov 2023 11:02:01 -0300
Subject: [PATCH] Added liked and created by me filter, liked not working and
 created not implemented at backend

---
 .../StorePage/components/market-card.tsx      |  3 --
 src/frontend/src/pages/StorePage/index.tsx    | 39 +++++++++++++------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/frontend/src/pages/StorePage/components/market-card.tsx b/src/frontend/src/pages/StorePage/components/market-card.tsx
index 4d1337e65..d94706b4e 100644
--- a/src/frontend/src/pages/StorePage/components/market-card.tsx
+++ b/src/frontend/src/pages/StorePage/components/market-card.tsx
@@ -174,9 +174,6 @@ export const MarketCardComponent = ({
           <CardDescription className="pb-2 pt-2">
             <div className="truncate-doubleline">{data.description}</div>
           </CardDescription>
-          <span className="flex items-center gap-1.5 text-xs text-foreground">
-            Created by: {data.user_created?.first_name}
-          </span>
         </CardHeader>
       </div>
 
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index aaa7f5743..71bf7982d 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -10,6 +10,7 @@ import { Input } from "../../components/ui/input";
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -36,18 +37,22 @@ export default function StorePage(): JSX.Element {
   const [tags, setTags] = useState<{ id: string; name: string }[]>([]);
   const [tabActive, setTabActive] = useState("All");
   const [searchText, setSearchText] = useState("");
+  const [selectFilter, setSelectFilter] = useState("all");
 
   useEffect(() => {
     handleGetTags();
   }, []);
 
-  function getAllStore() {
-    handleGetComponents();
-  }
-
   useEffect(() => {
-    getAllStore();
-  }, [tabActive, pageOrder, pageIndex, pageSize, filteredCategories]);
+    handleGetComponents();
+  }, [
+    tabActive,
+    pageOrder,
+    pageIndex,
+    pageSize,
+    filteredCategories,
+    selectFilter,
+  ]);
 
   function handleGetTags() {
     setLoadingTags(true);
@@ -57,7 +62,7 @@ export default function StorePage(): JSX.Element {
     });
   }
 
-  const handleGetComponents = () => {
+  function handleGetComponents() {
     setLoading(true);
     getStoreComponents(
       pageIndex,
@@ -65,7 +70,7 @@ export default function StorePage(): JSX.Element {
       tabActive === "All" ? null : tabActive === "Flows" ? false : true,
       pageOrder === "Popular" ? "-count(downloads)" : "name",
       filteredCategories,
-      null,
+      selectFilter === "likedbyme" ? true : null,
       null,
       searchText === "" ? null : searchText
     )
@@ -86,7 +91,7 @@ export default function StorePage(): JSX.Element {
           list: [err["response"]["data"]["detail"]],
         });
       });
-  };
+  }
 
   const updateTags = (tagName: string) => {
     setFilterCategories((prevArray) => {
@@ -149,7 +154,6 @@ export default function StorePage(): JSX.Element {
                   onKeyDown={(e) => {
                     if (e.key === "Enter") {
                       setSearchText(inputText);
-                      getAllStore();
                     }
                   }}
                   value={inputText}
@@ -159,7 +163,6 @@ export default function StorePage(): JSX.Element {
                   className="absolute bottom-0 right-4 top-0 my-auto h-6 cursor-pointer stroke-1 text-muted-foreground"
                   onClick={() => {
                     setSearchText(inputText);
-                    getAllStore();
                   }}
                 >
                   <IconComponent
@@ -221,7 +224,19 @@ export default function StorePage(): JSX.Element {
               </div>
             </div>
 
-            <div className="flex h-6 items-center gap-2 px-2">
+            <div className="flex h-6 items-center gap-2">
+              <Select onValueChange={setSelectFilter} value={selectFilter}>
+                <SelectTrigger className="mr-4 w-[160px]">
+                  <SelectValue placeholder="Filter Values" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="all">All</SelectItem>
+                    <SelectItem value="createdbyme">Created By Me</SelectItem>
+                    <SelectItem value="likedbyme">Liked By Me</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
               {!loadingTags &&
                 tags.map((tag, idx) => (
                   <button