From 7de56862f0005735c7d9462aab7b47819138acb6 Mon Sep 17 00:00:00 2001 From: williamjayjay Date: Thu, 25 Jul 2024 10:11:28 -0300 Subject: [PATCH] feat: add components inputCustom and emptyList cp and more hooks --- bun.lockb | Bin 465932 -> 465932 bytes .../InputCustom/inputCustom.index.tsx | 77 ++++++++++++++++++ .../InputCustom/types/input.type.ts | 25 ++++++ .../listEmptyComponent.index.tsx | 7 ++ .../ui/screens/HomeScreen/home.index.tsx | 40 +++++++-- .../HomeViewModel/hooks/home.hook.ts | 57 ++++++++++++- 6 files changed, 197 insertions(+), 9 deletions(-) create mode 100644 src/presentation/ui/components/InputCustom/inputCustom.index.tsx create mode 100644 src/presentation/ui/components/InputCustom/types/input.type.ts create mode 100644 src/presentation/ui/components/ListEmptyComponent/listEmptyComponent.index.tsx diff --git a/bun.lockb b/bun.lockb index c3fabd5383fc57f54d87dd505fb7abcc5ea47f72..e98df5e223ea0b5405dd2cc95bb19a8b86ea7fca 100755 GIT binary patch delta 44 ycmeC#A=9%%rlEzgg{g&k3ro%dc2h$=13e?7=^v9=rQ7=!umCaZ_Pzydb=3f6_YhS8 delta 40 ucmeC#A=9%%rlEzgg{g&k3ro%djyO|8Jp(->qxO;oEI`b = ({ + onFocus, + onBlur, + inputInternalClassName, + inputClassName, + containerClassName, + ...textInputProps +}) => { + + const [isFocus, setIsFocus] = useState(false); + + const handleFocus = useCallback( + (_e: NativeSyntheticEvent) => { + onBlur?.(_e); + setIsFocus(true); + }, + [onBlur], + ); + const handleBlur = useCallback( + (_e: NativeSyntheticEvent) => { + onFocus?.(_e); + setIsFocus(false); + }, + [onFocus], + ); + const testID = textInputProps.testID ?? 'input'; + + return ( + + + + + + + + ); +}; \ No newline at end of file diff --git a/src/presentation/ui/components/InputCustom/types/input.type.ts b/src/presentation/ui/components/InputCustom/types/input.type.ts new file mode 100644 index 0000000..5e1ba16 --- /dev/null +++ b/src/presentation/ui/components/InputCustom/types/input.type.ts @@ -0,0 +1,25 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { type TextInputProps } from 'react-native'; + +export namespace IInput { + + export enum InputTypeDefault { + TEXT = 'text', + PASSWORD = 'password', + } + + export interface Input extends TextInputProps { + errorMessage?: string; + label?: string; + options?: any; + typeProps?: any; + leftChild?: any; + rightChild?: any; + containerClassName?: string; + inputInternalClassName?: string; + inputClassName?: string; + textAddExists?: string; + standardTitleAndBgDisabled?: boolean; + textAddExistsOnPress?: () => void; + } +} \ No newline at end of file diff --git a/src/presentation/ui/components/ListEmptyComponent/listEmptyComponent.index.tsx b/src/presentation/ui/components/ListEmptyComponent/listEmptyComponent.index.tsx new file mode 100644 index 0000000..bb63a46 --- /dev/null +++ b/src/presentation/ui/components/ListEmptyComponent/listEmptyComponent.index.tsx @@ -0,0 +1,7 @@ +import { View , Text} from "react-native"; + +export const ListEmptyComponent = () => ( + + Nenhum dado disponível + + ); \ No newline at end of file diff --git a/src/presentation/ui/screens/HomeScreen/home.index.tsx b/src/presentation/ui/screens/HomeScreen/home.index.tsx index ef614fb..6810b22 100644 --- a/src/presentation/ui/screens/HomeScreen/home.index.tsx +++ b/src/presentation/ui/screens/HomeScreen/home.index.tsx @@ -1,19 +1,49 @@ import { useHomeViewModel } from "@/presentation/viewmodels/HomeViewModel/hooks/home.hook"; import { FC } from "react"; -import { Text } from "react-native"; -import { IHome } from "./types/home.type"; +import { Text, TouchableOpacity, View } from "react-native"; +import { IHome } from "@/presentation/ui/screens/HomeScreen/types/home.type"; import { SafeAreaContainer } from "@/presentation/ui/components/SafeAreaContainer/safeAreaContainer.index"; +import { Feather } from '@expo/vector-icons'; +import { InputCustom } from "@/presentation/ui/components/InputCustom/inputCustom.index"; +import { ListEmptyComponent } from "@/presentation/ui/components/ListEmptyComponent/listEmptyComponent.index"; const HomeScreen: FC = () => { - const { students } = useHomeViewModel({}) + const { students, searchTerm, handleSearch, filteredData } = useHomeViewModel({}) console.log('students', students.length) return ( - Ola mundo - Ola mundo + Ola mundo + Ola mundo + + + handleSearch(data, value)} + onChangeText={(value: string) => { }} + /> + + + { }} > + {/* add funcao para alterar cor do filtro */} + + + + + { + !filteredData?.[0] && searchTerm.length > 1 && + + } + + + ); }; diff --git a/src/presentation/viewmodels/HomeViewModel/hooks/home.hook.ts b/src/presentation/viewmodels/HomeViewModel/hooks/home.hook.ts index 65decb1..fb3fe61 100644 --- a/src/presentation/viewmodels/HomeViewModel/hooks/home.hook.ts +++ b/src/presentation/viewmodels/HomeViewModel/hooks/home.hook.ts @@ -1,16 +1,65 @@ -import { useCallback } from "react"; +import { useCallback, useState } from "react"; import { useHomeContext } from "../contexts/useHome.context"; +import { InfiniteData } from "@tanstack/react-query"; +import { StudentServerEntity } from "@/@core/domains/server-entities/student.server-entity"; export const useHomeViewModel = ({ }) => { - const homeContext = useHomeContext(); + const { students } = useHomeContext(); + const [searchTerm, setSearchTerm] = useState(''); + const [filteredData, setFilteredData] = useState([]); + + + // -- estados acima + + // todo [ ] - criar logica ao incializar o app, no contexto, verificar se existe valor no storage, se tiver irá popular o useState lá do context, e caso contrário irá fazer o fetch com o useQuery. + + const handleSearch = useCallback( + (data: InfiniteData | undefined, value: string) => { + + setSearchTerm(value) + + if (data && value) { + const allStudents = data.pages.flatMap((page: any) => page); + + const filteredStudents = allStudents.filter((student: any) => + (student.firstName.toLowerCase().includes(value) || student.lastName.toLowerCase().includes(value)) + ); + + return setFilteredData(filteredStudents); + } + + if (students && !data && value) { + const allStudents = students + + const filteredStudents = allStudents.filter((student: any) => + (student.firstName.toLowerCase().includes(value) || student.lastName.toLowerCase().includes(value)) + ); + return setFilteredData(filteredStudents); + } + else if (value === '' && !data) { + setFilteredData(students) + } + else if (value === '' && data) { + const allStudents = data.pages.flatMap((page: any) => page); + + setFilteredData(allStudents) + } + + }, + [searchTerm], + ) + // const callBackNotUsed = useCallback(async () => { - + // }, []); return { - students: homeContext.students, + students: students, + searchTerm, + handleSearch, + filteredData }; };