upd: pencarian

Deskripsi:
- halaman pencarian

NO Issues

app/(application)/notification.tsx

@@ -12,7 +12,7 @@ export default function Notification() {
          <Stack.Screen
             options={{
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Pencarian',
+               headerTitle: 'Notifikasi',
                headerTitleAlign: 'center'
             }}
          />

app/(application)/search.tsx

@@ -1,14 +1,62 @@
 import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonBackHeader from "@/components/buttonBackHeader";
-import { InputForm } from "@/components/inputForm";
 import InputSearch from "@/components/inputSearch";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 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 { 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() {
+   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>
@@ -19,44 +67,43 @@ export default function Search() {
                   headerTitleAlign: 'center'
                }}
             />
-            <ScrollView>
+            {/* <ScrollView> */}
             <View style={[Styles.p15]}>
-                  <InputSearch />
+               <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={require("../../assets/images/user.jpeg")}
+                                          source={{ uri: `https://wibu-storage.wibudev.com/api/files/${item.img}` }}
                                           style={[Styles.userProfileSmall]}
                                        />}
-                           title="Amalia Dwi"
+                                       title={item.name}
-                           subtitle="Dinas - Bendaraha"
+                                       subtitle={`${item.group}-${item.position}`}
                                     />
-                        <BorderBottomItem
+                                 )}
-                           borderType="bottom"
-                           icon={<Image
-                              source={require("../../assets/images/user.jpeg")}
-                              style={[Styles.userProfileSmall]}
-                           />}
-                           title="Amalia Dwi"
-                           subtitle="Dinas - Bendaraha"
-                        />
-
-                        <BorderBottomItem
-                           borderType="bottom"
-                           icon={<Image
-                              source={require("../../assets/images/user.jpeg")}
-                              style={[Styles.userProfileSmall]}
-                           />}
-                           title="Amalia Dwi"
-                           subtitle="Dinas - Bendaraha"
                               />
                            </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={
@@ -64,22 +111,23 @@ export default function Search() {
                                              <MaterialIcons name="group" size={25} color="white" />
                                           </View>
                                        }
-                           title="TU dan Umum"
+                                       title={item.name}
-                           subtitle="Dinas"
+                                       subtitle={item.group}
+                                    />
+                                 )}
                               />
-                        <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>
+                           dataProject.length > 0 &&
                            <View style={[Styles.mb05]}>
                               <Text>KEGIATAN</Text>
+                              <FlatList
+                                 data={dataProject}
+                                 keyExtractor={(item) => String(item.id)}
+                                 renderItem={({ item }) => (
                                     <BorderBottomItem
                                        borderType="bottom"
                                        icon={
@@ -87,33 +135,24 @@ export default function Search() {
                                              <AntDesign name="areachart" size={25} color="white" />
                                           </View>
                                        }
-                           title="Kerja Bakti"
+                                       title={item.title}
-                           subtitle="Dinas"
+                                       subtitle={item.group}
+                                    />
+                                 )}
                               />
-                        <BorderBottomItem
-                           borderType="bottom"
-                           icon={
-                              <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                                 <AntDesign name="areachart" size={25} color="white" />
                            </View>
                         }
-                           title="Pasar Ramadhan"
+
-                           subtitle="Dinas"
+
-                        />
+                     </View>
-                        <BorderBottomItem
+                     :
-                           borderType="bottom"
+                     <View style={Styles.contentItemCenter}>
-                           icon={
+                        <Text style={[Styles.textInformation, Styles.cGray]}>Tidak ada data</Text>
-                              <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                                 <AntDesign name="areachart" size={25} color="white" />
                      </View>
                }
-                           title="Pasar Ramadhan"
+
-                           subtitle="Dinas"
-                        />
             </View>
-                  </View>
+            {/* </ScrollView> */}
-               </View>
-            </ScrollView>
          </SafeAreaView>
       </>
    )

lib/api.ts

@@ -20,6 +20,12 @@ export const apiGetProfile = async ({ id }: { id: string }) => {
    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) => {
 //    const response = await api.post('/entities', newEntity);
 //    return response.data;