wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: load scroll

Browse Source 
Deskripsi:
- kegiatan
- divisi
- tugas divisi
- diskusi
- history kalender

No Issues
This commit is contained in:
amel
2025-06-12 15:10:19 +08:00
parent 6479069f17
commit 055bbe4c0f
9 changed files with 842 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/(application)/division/[id]/(fitur-division)/_layout.tsx
View File

@@ -7,22 +7,29 @@ import { StatusBar } from "expo-status-bar"
export default function RootLayout() {
return (
<>
<Stack screenOptions={Headers.shadow}>
<Stack.Screen name="task/index" options={{
<>
<Stack screenOptions={Headers.shadow}>
<Stack.Screen name="task/index" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
title: 'Tugas Divisi',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightTaskList />
}} />
<Stack.Screen name="discussion/index" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
title: 'Diskusi Divisi',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightDiscussionList />
}} />
<Stack.Screen name="calendar/history"
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
title: 'Tugas Divisi',
headerTitle: 'Riwayat Acara',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightTaskList />
}} />
<Stack.Screen name="discussion/index" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
title: 'Diskusi Divisi',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightDiscussionList />
}} />
</Stack>
<StatusBar style="light" />
</>
)
}}
/>
</Stack>
<StatusBar style="light" />
</>
)
}

108
app/(application)/division/[id]/(fitur-division)/calendar/history.tsx
View File

@@ -1,13 +1,12 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import ItemHistoryEvent from "@/components/calendar/itemHistoryEvent";
import InputSearch from "@/components/inputSearch";
import Skeleton from "@/components/skeleton";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiGetCalendarHistory } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, View } from "react-native";
import { FlatList, Text, View, VirtualizedList } from "react-native";
type Props = {
dateStart: Date
@@ -21,47 +20,92 @@ export default function CalendarHistory() {
const [search, setSearch] = useState('')
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 5 })
const [page, setPage] = useState(1)
const [waiting, setWaiting] = useState(false)
async function handleLoad() {
async function handleLoad(loading: boolean, thisPage: number) {
try {
setLoading(true)
setWaiting(true)
setLoading(loading)
setPage(thisPage)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetCalendarHistory({ user: hasil, search: search, division: id });
setData(response.data);
const response = await apiGetCalendarHistory({ user: hasil, search: search, division: id, page: thisPage });
if (thisPage == 1) {
setData(response.data)
} else if (thisPage > 1 && response.data.length > 0) {
setData([...data, ...response.data])
} else {
return;
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
setWaiting(false)
}
}
useEffect(() => {
handleLoad()
handleLoad(true, 1)
}, [search])
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Riwayat Acara',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15]}>
<InputSearch onChange={(val) => setSearch(val)} />
{
loading ?
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={60} widthType="percent" borderRadius={10} />
))
:
<ItemHistoryEvent data={data} />
}
const loadMoreData = () => {
if (waiting) return
setTimeout(() => {
handleLoad(false, page + 1)
}, 1000);
};
</View>
</ScrollView>
</SafeAreaView>
const getItem = (_data: unknown, index: number): Props => ({
dateStart: data[index].dateStart,
year: data[index].year,
data: data[index].data,
})
return (
<View style={[Styles.p15, { flex: 1 }]}>
<View>
<InputSearch onChange={(val) => setSearch(val)} />
</View>
<View style={[{ flex: 2, }]}>
{
loading ?
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={60} widthType="percent" borderRadius={10} />
))
:
<VirtualizedList
data={data}
getItemCount={() => data.length}
getItem={getItem}
renderItem={({ item, index }: { item: Props, index: number }) => {
return (
<View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
<View style={[Styles.mr10, Styles.ph05]}>
<Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</Text>
<Text style={[Styles.textDefault, { textAlign: 'center' }]}>{item.year}</Text>
</View>
<View style={[{ flex: 1 }]}>
<FlatList data={item.data}
renderItem={({ item, index }: { item: { title: string, timeStart: string, timeEnd: string }, index: number }) => (
<View key={index} style={[Styles.mb05, Styles.w80]}>
<Text style={[Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode="tail">{item.title}</Text>
<Text style={[Styles.textDefault]}>{item.timeStart} | {item.timeEnd}</Text>
</View>
)}
keyExtractor={(item, index) => String(index)}
/>
</View>
</View>
)
}}
keyExtractor={(item, index) => String(index)}
onEndReached={loadMoreData}
onEndReachedThreshold={0.5}
showsVerticalScrollIndicator={false}
/>
}
</View>
</View>
)
}

154
app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
View File

@@ -10,7 +10,7 @@ import { useAuthSession } from "@/providers/AuthProvider";
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, Text, View } from "react-native";
import { Text, View, VirtualizedList } from "react-native";
import { useSelector } from "react-redux";
@@ -35,61 +35,97 @@ export default function DiscussionDivision() {
const update = useSelector((state: any) => state.discussionUpdate);
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 5 })
const [page, setPage] = useState(1)
const [waiting, setWaiting] = useState(false)
async function handleLoad(loading: boolean) {
async function handleLoad(loading: boolean, thisPage: number) {
try {
setWaiting(true)
setLoading(loading)
setPage(thisPage)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetDiscussion({ user: hasil, search, division: id, active })
setData(response.data)
const response = await apiGetDiscussion({ user: hasil, search, division: id, active, page: thisPage })
if (thisPage == 1) {
setData(response.data)
} else if (thisPage > 1 && response.data.length > 0) {
setData([...data, ...response.data])
} else {
return;
}
} catch (error) {
console.error(error)
} finally {
setLoading(false)
setWaiting(false)
}
}
useEffect(() => {
handleLoad(false)
handleLoad(false, 1)
}, [update.data])
useEffect(() => {
handleLoad(true)
handleLoad(true, 1)
}, [active, search])
const loadMoreData = () => {
if (waiting) return
setTimeout(() => {
handleLoad(false, page + 1)
}, 1000);
}
const getItem = (_data: unknown, index: number): Props => ({
id: data[index].id,
title: data[index].title,
desc: data[index].desc,
status: data[index].status,
user_name: data[index].user_name,
img: data[index].img,
total_komentar: data[index].total_komentar,
createdAt: data[index].createdAt,
isActive: data[index].isActive,
})
return (
<SafeAreaView>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
value="true"
onPress={() => { router.replace('./discussion?active=true') }}
label="Aktif"
icon={<Feather name="check-circle" color={active == "false" ? 'black' : 'white'} size={20} />}
n={2} />
<ButtonTab
active={active == "false" ? "false" : "true"}
value="false"
onPress={() => { router.replace('./discussion?active=false') }}
label="Arsip"
icon={<AntDesign name="closecircleo" color={active == "true" ? 'black' : 'white'} size={20} />}
n={2} />
</View>
<InputSearch onChange={setSearch} />
<View>
{
loading ?
arrSkeleton.map((item: any, i: number) => {
<View style={[Styles.p15, { flex: 1 }]}>
<View>
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
value="true"
onPress={() => { router.replace('./discussion?active=true') }}
label="Aktif"
icon={<Feather name="check-circle" color={active == "false" ? 'black' : 'white'} size={20} />}
n={2} />
<ButtonTab
active={active == "false" ? "false" : "true"}
value="false"
onPress={() => { router.replace('./discussion?active=false') }}
label="Arsip"
icon={<AntDesign name="closecircleo" color={active == "true" ? 'black' : 'white'} size={20} />}
n={2} />
</View>
<InputSearch onChange={setSearch} />
</View>
<View style={[{ flex: 2 }]}>
{
loading ?
arrSkeleton.map((item: any, i: number) => {
return (
<SkeletonContent key={i} />
)
})
:
data.length > 0 ?
<VirtualizedList
data={data}
getItemCount={() => data.length}
getItem={getItem}
renderItem={({ item, index }: { item: Props, index: number }) => {
return (
<SkeletonContent key={i} />
)
})
:
data.length > 0 ?
data.map((item, index) => (
<BorderBottomItem
key={index}
width={55}
@@ -112,15 +148,43 @@ export default function DiscussionDivision() {
}
rightBottomInfo={item.total_komentar + ' Komentar'}
/>
))
:
(
<Text style={[Styles.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>
)
}
</View>
</View>
</ScrollView>
</SafeAreaView>
}}
keyExtractor={(item, index) => String(index)}
onEndReached={loadMoreData}
onEndReachedThreshold={0.5}
showsVerticalScrollIndicator={false}
/>
// data.map((item, index) => (
// <BorderBottomItem
// key={index}
// width={55}
// onPress={() => { router.push(`./discussion/${item.id}`) }}
// borderType="bottom"
// icon={
// <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
// }
// title={item.user_name}
// subtitle={
// active == "true" ? item.status == 1 ? <LabelStatus category='success' text='BUKA' size="small" /> : <LabelStatus category='error' text='TUTUP' size="small" /> : <></>
// }
// rightTopInfo={item.createdAt}
// desc={item.desc}
// leftBottomInfo={
// <View style={[Styles.rowItemsCenter]}>
// <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
// <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
// </View>
// }
// rightBottomInfo={item.total_komentar + ' Komentar'}
// />
// ))
:
(
<Text style={[Styles.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>
)
}
</View>
</View>
);
}

321
app/(application)/division/[id]/(fitur-division)/task/index.tsx
View File

@@ -17,7 +17,7 @@ import {
} from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native";
import { Pressable, ScrollView, Text, View, VirtualizedList } from "react-native";
import { useSelector } from "react-redux";
type Props = {
@@ -39,125 +39,157 @@ export default function ListTask() {
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 3 })
const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>('0')
const [page, setPage] = useState(1)
const [waiting, setWaiting] = useState(false)
async function handleLoad(loading: boolean) {
async function handleLoad(loading: boolean, thisPage: number) {
try {
setWaiting(true)
setLoading(loading)
setPage(thisPage)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetTask({
user: hasil,
division: id,
status: statusFix,
search,
page: thisPage
});
setData(response.data);
if (thisPage == 1) {
setData(response.data);
} else if (thisPage > 1 && response.data.length > 0) {
setData([...data, ...response.data]);
} else {
return;
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
setWaiting(false)
}
}
useEffect(() => {
handleLoad(false)
handleLoad(false, 1)
}, [update.data])
useEffect(() => {
handleLoad(true);
handleLoad(true, 1);
}, [statusFix, search]);
return (
<SafeAreaView>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<ScrollView horizontal style={[Styles.mb10]}>
<ButtonTab
active={statusFix}
value="0"
onPress={() => { setStatusFix("0") }}
label="Segera"
icon={
<MaterialCommunityIcons
name="clock-alert-outline"
color={statusFix == "0" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="1"
onPress={() => { setStatusFix("1") }}
label="Dikerjakan"
icon={
<MaterialCommunityIcons
name="progress-check"
color={statusFix == "1" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="2"
onPress={() => { setStatusFix("2") }}
label="Selesai"
icon={
<Ionicons
name="checkmark-done-circle-outline"
color={statusFix == "2" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="3"
onPress={() => { setStatusFix("3") }}
label="Batal"
icon={
<AntDesign
name="closecircleo"
color={statusFix == "3" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
</ScrollView>
<View style={[Styles.rowSpaceBetween]}>
<InputSearch width={68} onChange={setSearch} />
<Pressable
onPress={() => {
setList(!isList);
}}
>
<MaterialCommunityIcons
name={isList ? "format-list-bulleted" : "view-grid"}
color={"black"}
size={30}
/>
</Pressable>
</View>
{
const loadMoreData = () => {
if (waiting) return
setTimeout(() => {
handleLoad(false, page + 1)
}, 1000);
}
loading ?
isList ?
arrSkeleton.map((item, index) => (
<SkeletonTwoItem key={index} />
))
:
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
))
const getItem = (_data: unknown, index: number): Props => ({
id: data[index].id,
title: data[index].title,
desc: data[index].desc,
status: data[index].status,
progress: data[index].progress,
member: data[index].member,
})
return (
<View style={[Styles.p15, { flex: 1 }]}>
<View>
<ScrollView horizontal style={[Styles.mb10]}>
<ButtonTab
active={statusFix}
value="0"
onPress={() => { setStatusFix("0") }}
label="Segera"
icon={
<MaterialCommunityIcons
name="clock-alert-outline"
color={statusFix == "0" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="1"
onPress={() => { setStatusFix("1") }}
label="Dikerjakan"
icon={
<MaterialCommunityIcons
name="progress-check"
color={statusFix == "1" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="2"
onPress={() => { setStatusFix("2") }}
label="Selesai"
icon={
<Ionicons
name="checkmark-done-circle-outline"
color={statusFix == "2" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="3"
onPress={() => { setStatusFix("3") }}
label="Batal"
icon={
<AntDesign
name="closecircleo"
color={statusFix == "3" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
</ScrollView>
<View style={[Styles.rowSpaceBetween]}>
<InputSearch width={68} onChange={setSearch} />
<Pressable
onPress={() => {
setList(!isList);
}}
>
<MaterialCommunityIcons
name={isList ? "format-list-bulleted" : "view-grid"}
color={"black"}
size={30}
/>
</Pressable>
</View>
</View>
<View style={[{ flex: 2 }]}>
{
loading ?
isList ?
arrSkeleton.map((item, index) => (
<SkeletonTwoItem key={index} />
))
:
data.length > 0 ? (
isList ? (
<View>
{data.map((item, index) => (
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
))
:
data.length > 0 ? (
isList ? (
<View>
<VirtualizedList
data={data}
getItemCount={() => data.length}
getItem={getItem}
renderItem={({ item, index }) => (
<BorderBottomItem
key={index}
onPress={() => {
@@ -171,11 +203,35 @@ export default function ListTask() {
}
title={item.title}
/>
))}
</View>
) : (
<View>
{data.map((item, index) => (
)}
keyExtractor={(item, index) => index.toString()}
onEndReached={loadMoreData}
onEndReachedThreshold={0.5}
showsVerticalScrollIndicator={false}
/>
{/* {data.map((item, index) => (
<BorderBottomItem
key={index}
onPress={() => {
router.push(`./task/${item.id}`);
}}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="areachart" size={25} color={"#384288"} />
</View>
}
title={item.title}
/>
))} */}
</View>
) : (
<View>
<VirtualizedList
data={data}
getItemCount={() => data.length}
getItem={getItem}
renderItem={({ item, index }) => (
<PaperGridContent
key={index}
onPress={() => {
@@ -207,24 +263,55 @@ export default function ListTask() {
/>
</View>
</PaperGridContent>
))}
</View>
)
) : (
<Text
style={[
Styles.textDefault,
Styles.cGray,
{ textAlign: "center" },
]}
>
Tidak ada data
</Text>
)}
keyExtractor={(item, index) => index.toString()}
onEndReached={loadMoreData}
onEndReachedThreshold={0.5}
showsVerticalScrollIndicator={false}
/>
{/* {data.map((item, index) => (
<PaperGridContent
key={index}
onPress={() => {
router.push(`./task/${item.id}`);
}}
content="page"
title={item.title}
headerColor="primary"
>
<ProgressBar category="page" value={item.progress} />
<View style={[Styles.rowSpaceBetween]}>
<Text></Text>
<LabelStatus
size="default"
category={
item.status === 0 ? 'primary' :
item.status === 1 ? 'warning' :
item.status === 2 ? 'success' :
item.status === 3 ? 'error' :
'primary'
}
text={
item.status === 0 ? 'SEGERA' :
item.status === 1 ? 'DIKERJAKAN' :
item.status === 2 ? 'SELESAI' :
item.status === 3 ? 'DIBATALKAN' :
'SEGERA'
}
/>
</View>
</PaperGridContent>
))} */}
</View>
)
) : (
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: "center" },]} >
Tidak ada data
</Text>
)
}
</View>
</ScrollView>
</SafeAreaView>
}
</View>
</View>
);
}