fix: pencarian

Deskripsi:
- scroll height
- tanpa wrap
- pake scroll map

No Issues
This commit is contained in:
2025-09-09 11:05:37 +08:00
parent 4768007df3
commit 5fa364be24

View File

@@ -1,5 +1,6 @@
import BorderBottomItem from "@/components/borderBottomItem"; import BorderBottomItem from "@/components/borderBottomItem";
import ButtonBackHeader from "@/components/buttonBackHeader"; import ButtonBackHeader from "@/components/buttonBackHeader";
import ImageUser from "@/components/imageNew";
import InputSearch from "@/components/inputSearch"; import InputSearch from "@/components/inputSearch";
import Text from '@/components/Text'; import Text from '@/components/Text';
import { ColorsStatus } from "@/constants/ColorsStatus"; import { ColorsStatus } from "@/constants/ColorsStatus";
@@ -9,8 +10,8 @@ import { apiGetSearch } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { AntDesign, MaterialIcons } from "@expo/vector-icons"; import { AntDesign, MaterialIcons } from "@expo/vector-icons";
import { router, Stack } from "expo-router"; import { router, Stack } from "expo-router";
import { useState } from "react"; import React, { useState } from "react";
import { FlatList, Image, SafeAreaView, View } from "react-native"; import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
import Toast from "react-native-toast-message"; import Toast from "react-native-toast-message";
type PropsUser = { type PropsUser = {
@@ -40,10 +41,13 @@ export default function Search() {
const [dataUser, setDataUser] = useState<PropsUser[]>([]) const [dataUser, setDataUser] = useState<PropsUser[]>([])
const [dataDivisi, setDataDivisi] = useState<PropDivisi[]>([]) const [dataDivisi, setDataDivisi] = useState<PropDivisi[]>([])
const [dataProject, setDataProject] = useState<PropProject[]>([]) const [dataProject, setDataProject] = useState<PropProject[]>([])
const [refreshing, setRefreshing] = useState(false)
const [search, setSearch] = useState('')
async function handleSearch(cari: string) { async function handleSearch(cari: string) {
try { try {
if (cari.length > 3) { setSearch(cari)
if (cari.length >= 3) {
const user = await decryptToken(String(token?.current)) const user = await decryptToken(String(token?.current))
const hasil = await apiGetSearch({ text: cari, user: user }) const hasil = await apiGetSearch({ text: cari, user: user })
if (hasil.success) { if (hasil.success) {
@@ -65,6 +69,14 @@ export default function Search() {
} }
const handleRefresh = async () => {
setRefreshing(true)
handleSearch(search)
await new Promise(resolve => setTimeout(resolve, 2000));
setRefreshing(false)
};
return ( return (
<> <>
<SafeAreaView> <SafeAreaView>
@@ -80,41 +92,44 @@ export default function Search() {
{ {
dataProject.length + dataDivisi.length + dataUser.length > 0 dataProject.length + dataDivisi.length + dataUser.length > 0
? ?
<View style={[Styles.wrapPaper, Styles.mb100]}> <ScrollView
style={[Styles.h100]}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
/>
}
>
{ {
dataUser.length > 0 && dataUser.length > 0 &&
<View style={[Styles.mb05]}> <View style={[Styles.mv05, Styles.p10]}>
<Text>ANGGOTA</Text> <Text>ANGGOTA</Text>
<FlatList {
data={dataUser} dataUser.map((item, index) => (
keyExtractor={(item) => String(item.id)}
renderItem={({ item }) => (
<BorderBottomItem <BorderBottomItem
key={index}
borderType="bottom" borderType="bottom"
icon={<Image icon={<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} />}
source={{ uri: `${ConstEnv.url_storage}/files/${item.img}` }}
style={[Styles.userProfileSmall]}
/>}
title={item.name} title={item.name}
subtitle={`${item.group}-${item.position}`} subtitle={`${item.group}-${item.position}`}
onPress={() => { onPress={() => {
router.push(`/member/${item.id}`) router.push(`/member/${item.id}`)
}} }}
/> />
)} ))
/> }
</View> </View>
} }
{ {
dataDivisi.length > 0 && dataDivisi.length > 0 &&
<View style={[Styles.mb05]}> <View style={[Styles.mv05, Styles.p10]}>
<Text>DIVISI</Text> <Text>DIVISI</Text>
<FlatList {
data={dataDivisi} dataDivisi.map((item, index) => (
keyExtractor={(item) => String(item.id)}
renderItem={({ item }) => (
<BorderBottomItem <BorderBottomItem
key={index}
borderType="bottom" borderType="bottom"
icon={ icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}> <View style={[Styles.iconContent, ColorsStatus.primary]}>
@@ -127,21 +142,20 @@ export default function Search() {
router.push(`/division/${item.id}`) router.push(`/division/${item.id}`)
}} }}
/> />
)} ))
/> }
</View> </View>
} }
{ {
dataProject.length > 0 && dataProject.length > 0 &&
<View style={[Styles.mb10]}> <View style={[Styles.mv05, Styles.p10]}>
<Text>KEGIATAN</Text> <Text>KEGIATAN</Text>
<FlatList {
data={dataProject} dataProject.map((item, index) => (
keyExtractor={(item) => String(item.id)}
renderItem={({ item }) => (
<BorderBottomItem <BorderBottomItem
key={index}
borderType="bottom" borderType="bottom"
icon={ icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}> <View style={[Styles.iconContent, ColorsStatus.primary]}>
@@ -154,13 +168,11 @@ export default function Search() {
router.push(`/project/${item.id}`) router.push(`/project/${item.id}`)
}} }}
/> />
)} ))
/> }
</View> </View>
} }
</ScrollView>
</View>
: :
<View style={[Styles.contentItemCenter, Styles.mt10]}> <View style={[Styles.contentItemCenter, Styles.mt10]}>
<Text style={[Styles.textInformation, Styles.cGray]}>Tidak ada data</Text> <Text style={[Styles.textInformation, Styles.cGray]}>Tidak ada data</Text>