Refactor and add customer data to dropdown

src/api/customer/getCustomers.js

@@ -0,0 +1,7 @@
+import { readItems } from '@directus/sdk'
+import { client } from '..'
+
+export async function getCustomers() {
+  const result = await client.request(readItems('customers'))
+  return result
+}

src/components/Dropdown/Dropdown.css

@@ -1,25 +1,27 @@
 .Dropdown {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: var(--theme-surface-color);
   margin-top: 36px;
-  padding: var(--size-pixel-small);
   border-radius: var(--border-radius-normal);
 }
 
-.Dropdown__icon {
-  fill: var(--theme-font-color);
-}
-
-.Dropdown div {
+.Field__container {
   display: flex;
-  align-items: center;
   gap: var(--size-pixel-small);
+  filter: drop-shadow(0 0 4px #0d1117);
+  z-index: 1;
 }
 
-.Dropdown__button {
-  border: none;
-  background-color: transparent;
-  padding: var(--size-pixel-small) 0;
+.Dropdown__container {
+  background-color: var(--theme-surface-color);
+  padding: var(--size-pixel-small);
+  border-radius: 0 0 var(--border-radius-normal) var(--border-radius-normal);
+  position: absolute;
+  top: 92%;
+  width: 100%;
+  filter: drop-shadow(0 0 8px #0d1117);
+  padding: 1rem 2rem;
 }

src/components/Dropdown/index.jsx

@@ -1,16 +1,67 @@
-import Icon from '../../components/Icon'
+import { useEffect, useState } from 'react'
+import { getCustomers } from '../../api/customer/getCustomers'
+import { storage } from '../../api/storage'
+import Field from '../../components/Field'
+import { useGlobalStore } from '../../store'
 import './Dropdown.css'
+
 function Dropdown() {
+  const { customers } = useGlobalStore()
+  const [searchInput, setSearchInput] = useState('')
+  const [filteredCustomers, setFilteredCustomers] = useState(customers)
+
+  async function setCustomersToStorage() {
+    const data = await getCustomers()
+    storage.set('customers', data)
+  }
+
+  function handleSearchChange(event) {
+    const text = event.toLowerCase()
+    setSearchInput(text)
+
+    const filtered = customers.filter((customer) =>
+      customer.name.toLowerCase().includes(text),
+    )
+    setFilteredCustomers(filtered)
+  }
+
+  function renderCustomers(customers) {
+    if (customers.length > 0) {
+      return customers.map((customer) => (
+        <div key={customer.id} className="Dropdown__customer">
+          <p>{customer.name}</p>
+          <p>{customer.pedidos} pedidos</p>
+        </div>
+      ))
+    }
+
+    return <p>No hay resultados</p>
+  }
+
+  useEffect(() => {
+    setCustomersToStorage()
+  }, [])
+
   return (
-    <section className="Dropdown">
-      <div>
-        <Icon name="person"></Icon>
-        <p className="Drpdown__name">El hijo de don app</p>
-      </div>
-      <button className="Dropdown__button">
-        <Icon name="add"></Icon>
-      </button>
-    </section>
+    <>
+      <section className="Dropdown">
+        <div className="Field__container">
+          <Field
+            name="text"
+            type="text"
+            icon="person"
+            label="Cliente"
+            defaultValue={searchInput}
+            onChange={handleSearchChange}
+          ></Field>
+        </div>
+        {searchInput && (
+          <div className="Dropdown__container">
+            {renderCustomers(filteredCustomers)}
+          </div>
+        )}
+      </section>
+    </>
   )
 }
 

src/store/index.js

@@ -5,12 +5,14 @@ import { storage } from '../api/storage'
 
 export const userAtom = atom(null)
 export const productsAtom = atom(storage.get('products'))
+export const customersAtom = atom(storage.get('customers'))
 
 export function useGlobalStore() {
   const user = useAtomValue(userAtom)
   const setUser = useSetAtom(userAtom)
   const products = useAtomValue(productsAtom)
   const setProducts = useSetAtom(productsAtom)
+  const customers = useAtomValue(customersAtom)
 
   const addProduct = (payload) => {
     const productFound = products.some((product) => product.id === payload.id)
@@ -34,5 +36,6 @@ export function useGlobalStore() {
     products,
     addProduct,
     deleteProduct,
+    customers,
   }
 }