upd: tab navigation

Deskripsi:
- fix tab navigation :: diganti pake useState
- group
- position
- member
- diskusi umum
- project
- divisi
- tugas divisi

No Issues
This commit is contained in:
amel
2025-06-09 16:38:31 +08:00
parent d585f541ac
commit 88d9cd117d
14 changed files with 175 additions and 167 deletions

View File

@@ -1,109 +0,0 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import { ButtonForm } from "@/components/buttonForm";
import ButtonMenuHeader from "@/components/buttonMenuHeader";
import DrawerBottom from "@/components/drawerBottom";
import { InputForm } from "@/components/inputForm";
import MenuItemRow from "@/components/menuItemRow";
import { Headers } from "@/constants/Headers";
import Styles from "@/constants/Styles";
import { apiCreateGroup } from "@/lib/api";
import { setUpdateGroup } from "@/lib/groupSlice";
import { useAuthSession } from "@/providers/AuthProvider";
import AntDesign from "@expo/vector-icons/AntDesign";
import { router, Stack } from "expo-router";
import React, { useState } from "react";
import { ToastAndroid, View } from "react-native";
import { useDispatch, useSelector } from "react-redux";
export default function RootLayout() {
const dispatch = useDispatch()
const update = useSelector((state: any) => state.groupUpdate)
const { token, decryptToken } = useAuthSession()
const [isVisible, setVisible] = useState(false)
const [isVisibleTambah, setVisibleTambah] = useState(false)
const [title, setTitle] = useState('')
const [error, setError] = useState({
title: false,
});
async function handleTambah() {
try {
const hasil = await decryptToken(String(token?.current))
const response = await apiCreateGroup({ user: hasil, name: title })
dispatch(setUpdateGroup(!update))
} catch (error) {
console.error(error)
} finally {
setVisibleTambah(false)
setVisible(false)
ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
}
}
function onCheck() {
if (Object.values(error).some((v) => v == true))
return false
handleTambah()
}
function validationForm(val: any, cat: 'title') {
if (cat === 'title') {
setTitle(val)
if (val == "" || val.length < 3) {
setError({ ...error, title: true })
} else {
setError({ ...error, title: false })
}
}
}
return (
<>
<Stack screenOptions={Headers.shadow}>
<Stack.Screen name="index" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Lembaga Desa',
headerTitleAlign: 'center',
headerRight: () => <ButtonMenuHeader onPress={() => { setVisible(true) }} />
}} />
</Stack>
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />}
title="Tambah Lembaga"
onPress={() => {
setVisible(false);
setTimeout(
() => {
setVisibleTambah(true)
},
100,
);
}}
/>
</View>
</DrawerBottom>
<DrawerBottom animation="none" height={30} isVisible={isVisibleTambah} setVisible={setVisibleTambah} title="Tambah Lembaga Desa">
<View style={{ flex: 1 }}>
<View>
<InputForm
type="default"
placeholder="Nama Lembaga Desa"
required label="Lembaga Desa"
error={error.title}
errorText="Lembaga Desa tidak boleh kosong & minimal 3 karakter"
onChange={(val) => { validationForm(val, 'title') }}
/>
</View>
<View>
<ButtonForm text="SIMPAN" onPress={() => { onCheck() }} />
</View>
</View>
</DrawerBottom>
</>
)
}

View File

@@ -13,7 +13,7 @@ import { apiDeleteGroup, apiEditGroup, apiGetGroup } from "@/lib/api";
import { setUpdateGroup } from "@/lib/groupSlice";
import { useAuthSession } from "@/providers/AuthProvider";
import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
import { useDispatch, useSelector } from "react-redux";
@@ -33,6 +33,7 @@ export default function Index() {
const [search, setSearch] = useState('')
const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
const [loading, setLoading] = useState(true)
const [status, setStatus] = useState<'true' | 'false'>('true')
const [idChoose, setIdChoose] = useState('')
const [activeChoose, setActiveChoose] = useState(true)
@@ -74,7 +75,7 @@ export default function Index() {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetGroup({ user: hasil, active: String(active), search: search })
const response = await apiGetGroup({ user: hasil, active: status, search: search })
setData(response.data)
} catch (error) {
console.error(error)
@@ -90,7 +91,7 @@ export default function Index() {
useEffect(() => {
handleLoad(true)
}, [active, search])
}, [status, search])
@@ -101,18 +102,18 @@ export default function Index() {
<View style={[Styles.p15]}>
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
active={status == "false" ? "false" : "true"}
value="true"
onPress={() => { router.replace('/group?active=true') }}
onPress={() => { setStatus("true") }}
label="Aktif"
icon={<Feather name="check-circle" color={active == "true" ? 'white' : 'black'} size={20} />}
icon={<Feather name="check-circle" color={status == "true" ? 'white' : 'black'} size={20} />}
n={2} />
<ButtonTab
active={active == "false" ? "false" : "true"}
active={status == "false" ? "false" : "true"}
value="false"
onPress={() => { router.replace('/group?active=false') }}
onPress={() => { setStatus("false") }}
label="Tidak Aktif"
icon={<AntDesign name="closecircleo" color={active == "false" ? 'white' : 'black'} size={20} />}
icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />}
n={2} />
</View>
<InputSearch onChange={setSearch} />