upd: position

Deskripsi:
- update load list data position
- update filter page
- update select form
- tambah data position

No Issues

components/modalFilter.tsx

@@ -1,9 +1,14 @@
-import { Pressable, Text, View } from "react-native"
-import DrawerBottom from "./drawerBottom"
-import { AntDesign } from "@expo/vector-icons"
 import Styles from "@/constants/Styles"
-import { ButtonForm } from "./buttonForm"
+import { apiGetGroup } from "@/lib/api"
+import { setEntityFilterGroup } from "@/lib/filterSlice"
+import { useAuthSession } from "@/providers/AuthProvider"
+import { AntDesign } from "@expo/vector-icons"
 import { router } from "expo-router"
+import { useEffect, useState } from "react"
+import { Pressable, ScrollView, Text, View } from "react-native"
+import { useDispatch, useSelector } from "react-redux"
+import { ButtonForm } from "./buttonForm"
+import DrawerBottom from "./drawerBottom"
 
 
 type Props = {
@@ -13,31 +18,50 @@ type Props = {
 }
 
 export default function ModalFilter({ open, close, page }: Props) {
+   const { token, decryptToken } = useAuthSession()
+   const dispatch = useDispatch()
+   const entities = useSelector((state: any) => state.filterGroup)
+   const [chooseGroup, setChooseGroup] = useState('')
+
+   async function handleLoad() {
+      const hasil = await decryptToken(String(token?.current))
+      const response = await apiGetGroup({ active: 'true', user: hasil, search: '' })
+      dispatch(setEntityFilterGroup(response.data))
+   }
+
+   useEffect(() => {
+      if (entities.length == 0) {
+         handleLoad()
+      }
+   }, [dispatch]);
+
+
+
+
    return (
       <DrawerBottom animation="slide" isVisible={open} setVisible={close} title="Filter" height={75}>
          <View style={{ justifyContent: 'space-between', flex: 1 }}>
-            <View>
-               <Pressable style={[Styles.itemSelectModal]}>
-                  <Text style={[Styles.textDefaultSemiBold]}>Dinas</Text>
-                  <AntDesign name="check" size={20} />
-               </Pressable>
-               <Pressable style={[Styles.itemSelectModal]}>
-                  <Text>Adat</Text>
-               </Pressable>
-               <Pressable style={[Styles.itemSelectModal]}>
-                  <Text>Karang Taruna</Text>
-               </Pressable>
-               <Pressable style={[Styles.itemSelectModal]}>
-                  <Text>PKK</Text>
-               </Pressable>
-            </View>
+            <ScrollView>
+               <View>
+                  {
+                     entities.map((item: any, index: any) => (
+                        <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { setChooseGroup(item.id) }}>
+                           <Text style={[chooseGroup == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
+                           {
+                              chooseGroup == item.id && <AntDesign name="check" size={20} />
+                           }
+                        </Pressable>
+                     ))
+                  }
+               </View>
+            </ScrollView>
             <View>
                <ButtonForm text="Terapkan" onPress={() => {
                   close(false)
                   page == 'project' ?
                      router.push(`/${page}?status=0`)
                      :
-                     router.push(`/${page}?active=true`)
+                     router.push(`/${page}?active=true&group=${chooseGroup}`)
                }} />
             </View>
          </View>

components/modalSelect.tsx

@@ -1,62 +1,78 @@
-import { Pressable, Text, View } from "react-native"
-import DrawerBottom from "./drawerBottom"
 import Styles from "@/constants/Styles"
+import { apiGetGroup } from "@/lib/api"
+import { setEntityFilterGroup } from "@/lib/filterSlice"
+import { useAuthSession } from "@/providers/AuthProvider"
 import { AntDesign } from "@expo/vector-icons"
-import { useState } from "react"
+import { useEffect, useState } from "react"
+import { Pressable, ScrollView, Text, View } from "react-native"
+import { useDispatch, useSelector } from "react-redux"
+import DrawerBottom from "./drawerBottom"
 
 type Props = {
    open: boolean
    close: (value: boolean) => void
    title: string
    category: 'group' | 'status-task'
-   choose: string
+
    onSelect: (value: { val: string, label: string }) => void
 }
 
-export default function ModalSelect({ open, close, title, category, choose, onSelect }: Props) {
-   const [isChoose, setChoose] = useState(choose)
+export default function ModalSelect({ open, close, title, category, onSelect }: Props) {
+   // const [isChoose, setChoose] = useState(choose)
+   const { token, decryptToken } = useAuthSession()
+   const dispatch = useDispatch()
+   const entitiesGroup = useSelector((state: any) => state.filterGroup)
+   const [chooseValue, setChooseValue] = useState({ val: '', label: '' })
+
+   async function handleLoadGroup() {
+      const hasil = await decryptToken(String(token?.current))
+      const response = await apiGetGroup({ active: 'true', user: hasil, search: '' })
+      dispatch(setEntityFilterGroup(response.data))
+   }
+
+   useEffect(() => {
+      if (entitiesGroup.length == 0 && category == 'group') {
+         handleLoadGroup()
+      }
+   }, [dispatch]);
+
+   function onChoose(val: string, label: string) {
+      setChooseValue({ val, label })
+      onSelect({ val, label })
+      close(false)
+   }
 
    return (
       <DrawerBottom animation="none" isVisible={open} setVisible={close} title={title} height={75}>
-         <View>
-            {
-               category == 'group' ?
-                  <>
-                     <Pressable style={[Styles.itemSelectModal]} onPress={() => {
-                        onSelect({ val: 'dinas', label: 'Dinas' })
-                        setChoose('dinas')
-                        close(false)
-                     }}>
-                        <Text style={[Styles.textDefaultSemiBold]}>Dinas</Text>
-                        <AntDesign name="check" size={20} />
-                     </Pressable>
-                     <Pressable style={[Styles.itemSelectModal]}>
-                        <Text>Adat</Text>
-                     </Pressable>
-                     <Pressable style={[Styles.itemSelectModal]}>
-                        <Text>Karang Taruna</Text>
-                     </Pressable>
-                     <Pressable style={[Styles.itemSelectModal]}>
-                        <Text>PKK</Text>
-                     </Pressable>
-                  </>
-                  :
-                  <>
-                     <Pressable style={[Styles.itemSelectModal]} onPress={() => {
-                        onSelect({ val: 'blm-dikerjakan', label: 'Belum Dikerjakan' })
-                        setChoose('blm-dikerjakan')
-                        close(false)
-                     }}>
-                        <Text style={[Styles.textDefaultSemiBold]}>Belum Dikerjakan</Text>
-                        <AntDesign name="check" size={20} />
-                     </Pressable>
-                     <Pressable style={[Styles.itemSelectModal]}>
-                        <Text>Selesai</Text>
-                     </Pressable>
-                  </>
-            }
+         <ScrollView>
+            <View>
+               {
+                  category == 'group' ?
+                     entitiesGroup.map((item: any, index: any) => (
+                        <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { onChoose(item.id, item.name) }}>
+                           <Text style={[chooseValue.val == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
+                           {
+                              chooseValue.val == item.id && <AntDesign name="check" size={20} />
+                           }
+                        </Pressable>
+                     ))
+                     :
+                     <>
+                        <Pressable style={[Styles.itemSelectModal]} onPress={() => {
+                           onSelect({ val: 'blm-dikerjakan', label: 'Belum Dikerjakan' })
+                           close(false)
+                        }}>
+                           <Text style={[Styles.textDefaultSemiBold]}>Belum Dikerjakan</Text>
+                           <AntDesign name="check" size={20} />
+                        </Pressable>
+                        <Pressable style={[Styles.itemSelectModal]}>
+                           <Text>Selesai</Text>
+                        </Pressable>
+                     </>
+               }
 
-         </View>
+            </View>
+         </ScrollView>
       </DrawerBottom>
    )
 }

components/sectionTanggalTugas.tsx

@@ -76,7 +76,6 @@ export default function SectionTanggalTugas({ category }: Props) {
                ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
             }}
             title="Status"
-            choose={choose.val}
             open={isSelect}
          />
       </>