From 1e79555f35e723e242c584bf49989c2879f418f1 Mon Sep 17 00:00:00 2001
From: Mornieur <mariafernanda-coro@hotmail.com>
Date: Sun, 3 Sep 2023 14:59:11 -0300
Subject: [PATCH] perf: add filter components

---
 src/components/ViewComponent/index.tsx | 31 +++++++++++++++-----------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/components/ViewComponent/index.tsx b/src/components/ViewComponent/index.tsx
index c6ebfec..f8f3b27 100644
--- a/src/components/ViewComponent/index.tsx
+++ b/src/components/ViewComponent/index.tsx
@@ -1,6 +1,7 @@
 import * as S from './styles';
 import { FC, useState } from 'react';
 import { motion, Variants } from 'framer-motion';
+import { orderByValues, useVideoStore } from '@/store';
 
 interface ViewComponentProps {
   orderList?: string;
@@ -19,10 +20,10 @@ const itemVariants: Variants = {
 
 export const ViewComponent: FC<ViewComponentProps> = ({
   orderList = 'Ordenar por',
-  dropDownText = 'Data de Publicação',
   itemText = 'Item',
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const { category, handleStoreValues, orderBy } = useVideoStore();
   const menuItems = [
     'Agencias',
     'Chatbot',
@@ -31,8 +32,6 @@ export const ViewComponent: FC<ViewComponentProps> = ({
     'Mídia Paga',
   ];
 
-  const [activeButton, setActiveButton] = useState<string | null>(null);
-
   return (
     <S.Container>
       <motion.div
@@ -50,9 +49,9 @@ export const ViewComponent: FC<ViewComponentProps> = ({
             <S.Button
               role="button"
               key={index}
-              active={activeButton === item}
+              active={category === item}
               onClick={() => {
-                setActiveButton(activeButton === item ? null : item);
+                handleStoreValues('category', item === category ? null : item);
               }}
             >
               {item}
@@ -68,9 +67,11 @@ export const ViewComponent: FC<ViewComponentProps> = ({
             >
               <motion.button
                 whileTap={{ scale: 0.97 }}
-                onClick={() => setIsOpen(!isOpen)}
+                onClick={() => {
+                  setIsOpen(!isOpen);
+                }}
               >
-                {dropDownText}
+                {orderBy}
                 <motion.div
                   variants={{
                     open: { rotate: 180 },
@@ -109,15 +110,19 @@ export const ViewComponent: FC<ViewComponentProps> = ({
                   pointerEvents: isOpen ? 'auto' : 'none',
                   zIndex: isOpen ? '999' : 'none',
                   position: 'absolute',
-                  maxWidth: '300px',
+                  maxWidth: '200px',
                   width: '100%',
                 }}
               >
-                <motion.li variants={itemVariants}>{itemText}</motion.li>
-                <motion.li variants={itemVariants}>{itemText}</motion.li>
-                <motion.li variants={itemVariants}>{itemText}</motion.li>
-                <motion.li variants={itemVariants}>{itemText}</motion.li>
-                <motion.li variants={itemVariants}>{itemText}</motion.li>
+                {orderByValues.map((value, index) => (
+                  <motion.li
+                    onClick={() => handleStoreValues('orderBy', value)}
+                    key={index}
+                    variants={itemVariants}
+                  >
+                    {value}
+                  </motion.li>
+                ))}
               </motion.ul>
             </motion.nav>
           </S.OrderList>