upd: announcement

Deskripsi:
- load all announcement
- pencarian announcement
- tambah announcement
- get detail one announcement

No Issues

components/modalSelectMultiple.tsx

@@ -1,7 +1,9 @@
 import Styles from "@/constants/Styles"
+import { apiGetDivisionGroup } from "@/lib/api"
+import { useAuthSession } from "@/providers/AuthProvider"
 import { AntDesign } from "@expo/vector-icons"
-import { useState } from "react"
-import { Pressable, Text, View } from "react-native"
+import { useEffect, useState } from "react"
+import { Pressable, ScrollView, Text, ToastAndroid, View } from "react-native"
 import { ButtonForm } from "./buttonForm"
 import DrawerBottom from "./drawerBottom"
 
@@ -9,17 +11,97 @@ type Props = {
    open: boolean
    close: (value: boolean) => void
    title: string
-   category: 'share-division' | 'status-task'
+   category: 'share-division' | 'choose-division'
    choose: string
-   onSelect: (value: { val: string, label: string }[]) => void
+   onSelect: (value: any[]) => void
+}
+
+type CheckedState = {
+   [key: string]: string[];
+}
+
+type GroupData = {
+   id: string;
+   name: string;
+   Division: {
+      id: string;
+      name: string;
+   }[];
 }
 
 export default function ModalSelectMultiple({ open, close, title, category, choose, onSelect }: Props) {
    const [isChoose, setChoose] = useState(choose)
+   const { token, decryptToken } = useAuthSession()
+   const [data, setData] = useState<any>([])
+   const [checked, setChecked] = useState<CheckedState>({});
+
+   async function handleLoadChooseDivision() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetDivisionGroup({ user: hasil })
+         setData(response.data)
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   useEffect(() => {
+      if (category == 'choose-division') {
+         handleLoadChooseDivision()
+      } else if (category == 'share-division') {
+         // handleLoadPosition()
+      }
+   }, [open]);
+
+   const handleCheck = (groupId: string, divisionId: string) => {
+      const newChecked = { ...checked };
+      if (newChecked[groupId]) {
+         if (newChecked[groupId].includes(divisionId)) {
+            newChecked[groupId] = newChecked[groupId].filter(item => item !== divisionId);
+            if (newChecked[groupId].length === 0) {
+               delete newChecked[groupId];
+            }
+         } else {
+            newChecked[groupId].push(divisionId);
+         }
+      } else {
+         newChecked[groupId] = [divisionId];
+      }
+      setChecked(newChecked);
+   };
+
+
+   const handleGroupCheck = (groupId: string) => {
+      const newChecked = { ...checked };
+      if (newChecked[groupId]) {
+         delete newChecked[groupId];
+      } else {
+         if (data.find((item: { id: string }) => item.id === groupId)?.Division.length == 0) {
+            return ToastAndroid.show('Tidak ada divisi', ToastAndroid.SHORT)
+         }
+         newChecked[groupId] = data.find((item: { id: string }) => item.id === groupId)?.Division.map((item: { id: any }) => item.id) || [];
+      }
+      setChecked(newChecked);
+   };
+
+   const handleSubmit = () => {
+      const selectedGroups: GroupData[] = [];
+      Object.keys(checked).forEach((groupId) => {
+         const group = data.find((item: { id: string }) => item.id === groupId);
+         if (group) {
+            selectedGroups.push({
+               id: group.id,
+               name: group.name,
+               Division: group.Division.filter((division: { id: string }) => checked[groupId].includes(division.id)),
+            });
+         }
+      });
+      onSelect(selectedGroups);
+   };
 
    return (
       <DrawerBottom animation="slide" isVisible={open} setVisible={close} title={title} height={75}>
-         <View>
+         <ScrollView style={[Styles.mb50]}>
             {
                category == 'share-division' ?
                   <>
@@ -41,11 +123,38 @@ export default function ModalSelectMultiple({ open, close, title, category, choo
                      </Pressable>
                   </>
                   :
-                  <></>
+                  data.map((item: any, index: number) => {
+                     return (
+                        <>
+                           <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { handleGroupCheck(item.id) }}>
+                              <Text style={[Styles.textMediumSemiBold]}>{item.name}</Text>
+                              {
+                                 checked[item.id] && checked[item.id].length === item.Division.length
+                                    ? <AntDesign name="check" size={20} />
+                                    : (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length)
+                                       ? <AntDesign name="minus" size={20} />
+                                       : <></>
+                              }
+                           </Pressable>
+                           {
+                              item.Division.map((child: any, v: number) => {
+                                 return (
+                                    <Pressable key={v} style={[Styles.itemSelectModal]} onPress={() => { handleCheck(item.id, child.id) }}>
+                                       <Text style={[Styles.ml10, Styles.textMediumNormal]}>{child.name}</Text>
+                                       {
+                                          checked[item.id] && checked[item.id].includes(child.id) && <AntDesign name="check" size={20} />
+                                       }
+                                    </Pressable>
+                                 )
+                              })
+                           }
+                        </>
+                     )
+                  })
             }
-         </View>
+         </ScrollView>
          <View style={[Styles.absolute0, { width: '100%' }]}>
-            <ButtonForm text="Simpan" onPress={() => { onSelect([{ val: 'dinas', label: 'Dinas' }]) }} />
+            <ButtonForm text="PILIH" onPress={() => { handleSubmit() }} />
          </View>
       </DrawerBottom>
    )