upd: pencarian
Deskripsi: - halaman pencarian NO Issues
This commit is contained in:
amel
@@ -12,7 +12,7 @@ export default function Notification() {
|
|||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
options={{
|
options={{
|
||||||
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
|
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
|
||||||
headerTitle: 'Pencarian',
|
headerTitle: 'Notifikasi',
|
||||||
headerTitleAlign: 'center'
|
headerTitleAlign: 'center'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -1,14 +1,62 @@
|
|||||||
import BorderBottomItem from "@/components/borderBottomItem";
|
import BorderBottomItem from "@/components/borderBottomItem";
|
||||||
import ButtonBackHeader from "@/components/buttonBackHeader";
|
import ButtonBackHeader from "@/components/buttonBackHeader";
|
||||||
import { InputForm } from "@/components/inputForm";
|
|
||||||
import InputSearch from "@/components/inputSearch";
|
import InputSearch from "@/components/inputSearch";
|
||||||
import { ColorsStatus } from "@/constants/ColorsStatus";
|
import { ColorsStatus } from "@/constants/ColorsStatus";
|
||||||
import Styles from "@/constants/Styles";
|
import Styles from "@/constants/Styles";
|
||||||
import { AntDesign, Feather, MaterialIcons } from "@expo/vector-icons";
|
import { apiGetSearch } from "@/lib/api";
|
||||||
|
import { useAuthSession } from "@/providers/AuthProvider";
|
||||||
|
import { AntDesign, MaterialIcons } from "@expo/vector-icons";
|
||||||
import { router, Stack } from "expo-router";
|
import { router, Stack } from "expo-router";
|
||||||
import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
|
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() {
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<SafeAreaView>
|
<SafeAreaView>
|
||||||
@@ -19,101 +67,92 @@ export default function Search() {
|
|||||||
headerTitleAlign: 'center'
|
headerTitleAlign: 'center'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<ScrollView>
|
{/* <ScrollView> */}
|
||||||
<View style={[Styles.p15]}>
|
<View style={[Styles.p15]}>
|
||||||
<InputSearch />
|
<InputSearch onChange={handleSearch} />
|
||||||
<View style={[Styles.wrapPaper, Styles.mb100]}>
|
{
|
||||||
<View style={[Styles.mb30]}>
|
dataProject.length + dataDivisi.length + dataUser.length > 0
|
||||||
<Text>ANGGOTA</Text>
|
?
|
||||||
<BorderBottomItem
|
<View style={[Styles.wrapPaper, Styles.mb100]}>
|
||||||
borderType="bottom"
|
{
|
||||||
icon={<Image
|
dataUser.length > 0 &&
|
||||||
source={require("../../assets/images/user.jpeg")}
|
<View style={[Styles.mb30]}>
|
||||||
style={[Styles.userProfileSmall]}
|
<Text>ANGGOTA</Text>
|
||||||
/>}
|
<FlatList
|
||||||
title="Amalia Dwi"
|
data={dataUser}
|
||||||
subtitle="Dinas - Bendaraha"
|
keyExtractor={(item) => String(item.id)}
|
||||||
/>
|
renderItem={({ item }) => (
|
||||||
<BorderBottomItem
|
<BorderBottomItem
|
||||||
borderType="bottom"
|
borderType="bottom"
|
||||||
icon={<Image
|
icon={<Image
|
||||||
source={require("../../assets/images/user.jpeg")}
|
source={{ uri: `https://wibu-storage.wibudev.com/api/files/${item.img}` }}
|
||||||
style={[Styles.userProfileSmall]}
|
style={[Styles.userProfileSmall]}
|
||||||
/>}
|
/>}
|
||||||
title="Amalia Dwi"
|
title={item.name}
|
||||||
subtitle="Dinas - Bendaraha"
|
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>
|
||||||
|
}
|
||||||
|
|
||||||
<BorderBottomItem
|
|
||||||
borderType="bottom"
|
|
||||||
icon={<Image
|
|
||||||
source={require("../../assets/images/user.jpeg")}
|
|
||||||
style={[Styles.userProfileSmall]}
|
|
||||||
/>}
|
|
||||||
title="Amalia Dwi"
|
|
||||||
subtitle="Dinas - Bendaraha"
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={[Styles.mb30]}>
|
|
||||||
<Text>DIVISI</Text>
|
|
||||||
<BorderBottomItem
|
|
||||||
borderType="bottom"
|
|
||||||
icon={
|
|
||||||
<View style={[Styles.iconContent, ColorsStatus.primary]}>
|
|
||||||
<MaterialIcons name="group" size={25} color="white" />
|
|
||||||
</View>
|
|
||||||
}
|
|
||||||
title="TU dan Umum"
|
|
||||||
subtitle="Dinas"
|
|
||||||
/>
|
|
||||||
<BorderBottomItem
|
|
||||||
borderType="bottom"
|
|
||||||
icon={
|
|
||||||
<View style={[Styles.iconContent, ColorsStatus.primary]}>
|
|
||||||
<MaterialIcons name="group" size={25} color="white" />
|
|
||||||
</View>
|
|
||||||
}
|
|
||||||
title="TU dan Umum"
|
|
||||||
subtitle="Dinas"
|
|
||||||
/>
|
|
||||||
</View>
|
</View>
|
||||||
<View style={[Styles.mb05]}>
|
:
|
||||||
<Text>KEGIATAN</Text>
|
<View style={Styles.contentItemCenter}>
|
||||||
<BorderBottomItem
|
<Text style={[Styles.textInformation, Styles.cGray]}>Tidak ada data</Text>
|
||||||
borderType="bottom"
|
|
||||||
icon={
|
|
||||||
<View style={[Styles.iconContent, ColorsStatus.primary]}>
|
|
||||||
<AntDesign name="areachart" size={25} color="white" />
|
|
||||||
</View>
|
|
||||||
}
|
|
||||||
title="Kerja Bakti"
|
|
||||||
subtitle="Dinas"
|
|
||||||
/>
|
|
||||||
<BorderBottomItem
|
|
||||||
borderType="bottom"
|
|
||||||
icon={
|
|
||||||
<View style={[Styles.iconContent, ColorsStatus.primary]}>
|
|
||||||
<AntDesign name="areachart" size={25} color="white" />
|
|
||||||
</View>
|
|
||||||
}
|
|
||||||
title="Pasar Ramadhan"
|
|
||||||
subtitle="Dinas"
|
|
||||||
/>
|
|
||||||
<BorderBottomItem
|
|
||||||
borderType="bottom"
|
|
||||||
icon={
|
|
||||||
<View style={[Styles.iconContent, ColorsStatus.primary]}>
|
|
||||||
<AntDesign name="areachart" size={25} color="white" />
|
|
||||||
</View>
|
|
||||||
}
|
|
||||||
title="Pasar Ramadhan"
|
|
||||||
subtitle="Dinas"
|
|
||||||
/>
|
|
||||||
</View>
|
</View>
|
||||||
</View>
|
}
|
||||||
</View>
|
|
||||||
</ScrollView>
|
</View>
|
||||||
|
{/* </ScrollView> */}
|
||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -20,6 +20,12 @@ export const apiGetProfile = async ({ id }: { id: string }) => {
|
|||||||
return response.data;
|
return response.data;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const apiGetSearch = async ({ text, user }: { text: string, user:string }) => {
|
||||||
|
const response = await api.get(`/home/search?search=${text}&user=${user}`);
|
||||||
|
return response.data.data;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
// export const createEntity = async (newEntity: any) => {
|
// export const createEntity = async (newEntity: any) => {
|
||||||
// const response = await api.post('/entities', newEntity);
|
// const response = await api.post('/entities', newEntity);
|
||||||
// return response.data;
|
// return response.data;
|
||||||
|
|||||||
Reference in New Issue
Block a user