159 lines
6.0 KiB
TypeScript
159 lines
6.0 KiB
TypeScript
import BorderBottomItem from "@/components/borderBottomItem";
|
|
import ButtonBackHeader from "@/components/buttonBackHeader";
|
|
import InputSearch from "@/components/inputSearch";
|
|
import { ColorsStatus } from "@/constants/ColorsStatus";
|
|
import Styles from "@/constants/Styles";
|
|
import { apiGetSearch } from "@/lib/api";
|
|
import { useAuthSession } from "@/providers/AuthProvider";
|
|
import { AntDesign, MaterialIcons } from "@expo/vector-icons";
|
|
import { router, Stack } from "expo-router";
|
|
import { useState } from "react";
|
|
import { FlatList, Image, SafeAreaView, Text, View } from "react-native";
|
|
|
|
type PropsUser = {
|
|
id: string
|
|
name: string
|
|
email: string
|
|
position: string
|
|
group: string
|
|
img: string
|
|
}
|
|
|
|
type PropProject = {
|
|
id: string
|
|
title: string
|
|
group: string
|
|
}
|
|
|
|
type PropDivisi = {
|
|
id: string
|
|
name: string
|
|
desc: string
|
|
group: string
|
|
}
|
|
|
|
export default function Search() {
|
|
const { token, decryptToken } = useAuthSession()
|
|
const [dataUser, setDataUser] = useState<PropsUser[]>([])
|
|
const [dataDivisi, setDataDivisi] = useState<PropDivisi[]>([])
|
|
const [dataProject, setDataProject] = useState<PropProject[]>([])
|
|
|
|
async function handleSearch(cari: string) {
|
|
try {
|
|
if (cari.length > 3) {
|
|
const user = await decryptToken(String(token?.current))
|
|
const hasil = await apiGetSearch({ text: cari, user: user })
|
|
setDataUser(hasil.user)
|
|
setDataDivisi(hasil.division)
|
|
setDataProject(hasil.project)
|
|
} else {
|
|
setDataUser([])
|
|
setDataDivisi([])
|
|
setDataProject([])
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
<>
|
|
<SafeAreaView>
|
|
<Stack.Screen
|
|
options={{
|
|
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
|
|
headerTitle: 'Pencarian',
|
|
headerTitleAlign: 'center'
|
|
}}
|
|
/>
|
|
{/* <ScrollView> */}
|
|
<View style={[Styles.p15]}>
|
|
<InputSearch onChange={handleSearch} />
|
|
{
|
|
dataProject.length + dataDivisi.length + dataUser.length > 0
|
|
?
|
|
<View style={[Styles.wrapPaper, Styles.mb100]}>
|
|
{
|
|
dataUser.length > 0 &&
|
|
<View style={[Styles.mb30]}>
|
|
<Text>ANGGOTA</Text>
|
|
<FlatList
|
|
data={dataUser}
|
|
keyExtractor={(item) => String(item.id)}
|
|
renderItem={({ item }) => (
|
|
<BorderBottomItem
|
|
borderType="bottom"
|
|
icon={<Image
|
|
source={{ uri: `https://wibu-storage.wibudev.com/api/files/${item.img}` }}
|
|
style={[Styles.userProfileSmall]}
|
|
/>}
|
|
title={item.name}
|
|
subtitle={`${item.group}-${item.position}`}
|
|
/>
|
|
)}
|
|
/>
|
|
</View>
|
|
}
|
|
|
|
{
|
|
dataDivisi.length > 0 &&
|
|
<View style={[Styles.mb30]}>
|
|
<Text>DIVISI</Text>
|
|
<FlatList
|
|
data={dataDivisi}
|
|
keyExtractor={(item) => String(item.id)}
|
|
renderItem={({ item }) => (
|
|
<BorderBottomItem
|
|
borderType="bottom"
|
|
icon={
|
|
<View style={[Styles.iconContent, ColorsStatus.primary]}>
|
|
<MaterialIcons name="group" size={25} color="white" />
|
|
</View>
|
|
}
|
|
title={item.name}
|
|
subtitle={item.group}
|
|
/>
|
|
)}
|
|
/>
|
|
</View>
|
|
}
|
|
|
|
|
|
{
|
|
dataProject.length > 0 &&
|
|
<View style={[Styles.mb05]}>
|
|
<Text>KEGIATAN</Text>
|
|
<FlatList
|
|
data={dataProject}
|
|
keyExtractor={(item) => String(item.id)}
|
|
renderItem={({ item }) => (
|
|
<BorderBottomItem
|
|
borderType="bottom"
|
|
icon={
|
|
<View style={[Styles.iconContent, ColorsStatus.primary]}>
|
|
<AntDesign name="areachart" size={25} color="white" />
|
|
</View>
|
|
}
|
|
title={item.title}
|
|
subtitle={item.group}
|
|
/>
|
|
)}
|
|
/>
|
|
</View>
|
|
}
|
|
|
|
|
|
</View>
|
|
:
|
|
<View style={Styles.contentItemCenter}>
|
|
<Text style={[Styles.textInformation, Styles.cGray]}>Tidak ada data</Text>
|
|
</View>
|
|
}
|
|
|
|
</View>
|
|
{/* </ScrollView> */}
|
|
</SafeAreaView>
|
|
</>
|
|
)
|
|
} |