133 lines
3.9 KiB
JavaScript
133 lines
3.9 KiB
JavaScript
// import React from "react"
|
|
import {FlatList, Text, ActivityIndicator, RefreshControl} from "react-native";
|
|
import {useState, useEffect} from "react";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import {useNoticesStore} from "@/store/noticesStore";
|
|
import {NoticeCard} from "@/components/NoticeCard";
|
|
import { useLocalSearchParams } from "expo-router";
|
|
import { HStack } from "@/components/ui/hstack"
|
|
import { Box } from "@/components/ui/box"
|
|
import { Button, ButtonText, ButtonIcon } from "@/components/ui/button";
|
|
import {
|
|
Actionsheet,
|
|
ActionsheetContent,
|
|
ActionsheetItem,
|
|
ActionsheetItemText,
|
|
ActionsheetDragIndicator,
|
|
ActionsheetDragIndicatorWrapper,
|
|
ActionsheetBackdrop,
|
|
} from "@/components/ui/actionsheet"
|
|
import { useRouter } from "expo-router";
|
|
|
|
export default function Notices() {
|
|
const {notices, fetchNotices} = useNoticesStore();
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
const [showActionsheet, setShowActionsheet] = useState(false)
|
|
const handleClose = () => setShowActionsheet(false)
|
|
|
|
const params = useLocalSearchParams();
|
|
console.log("GET params:", params);
|
|
useEffect(() => {
|
|
loadData();
|
|
}, []);
|
|
|
|
|
|
|
|
const loadData = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
await fetchNotices();
|
|
setError(null);
|
|
} catch (err) {
|
|
setError(err);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const router = useRouter();
|
|
|
|
let filteredNotices = notices;
|
|
let filterActive = false;
|
|
if (params.sort) {
|
|
if( params.sort === "latest") {
|
|
filteredNotices = [...filteredNotices].sort(
|
|
(a, b) => new Date(b.publishDate) - new Date(a.publishDate)
|
|
);
|
|
}
|
|
}
|
|
|
|
if(params.category) {
|
|
filteredNotices = filteredNotices.filter(
|
|
(notice) => notice.category === params.category
|
|
);
|
|
filterActive = true;
|
|
}
|
|
|
|
if(params.attribute) {
|
|
filterActive = true;
|
|
}
|
|
|
|
const onRefresh = async () => {
|
|
setRefreshing(true);
|
|
try {
|
|
await fetchNotices();
|
|
} catch (err) {
|
|
setError(err);
|
|
} finally {
|
|
setRefreshing(false);
|
|
}
|
|
};
|
|
|
|
if (isLoading && !refreshing) {
|
|
return <ActivityIndicator/>;
|
|
}
|
|
|
|
if (error) {
|
|
return <Text>Nie udało sie pobrać listy. {error.message}</Text>;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Box className="flex-row p-2 pt-4 pb-4 bg-white items-center justify-between">
|
|
<Button variant="outline" onPress={() => setShowActionsheet(true)}>
|
|
<ButtonText>Filtry</ButtonText>
|
|
<Ionicons name="filter-outline" size={20} color="black" />
|
|
</Button>
|
|
{filterActive && (
|
|
<Button variant="link" onPress={() => router.replace("/notices")}>
|
|
<ButtonText>Wyczyść</ButtonText>
|
|
</Button>)}
|
|
</Box>
|
|
<Actionsheet isOpen={showActionsheet} onClose={handleClose}>
|
|
<ActionsheetBackdrop />
|
|
<ActionsheetContent>
|
|
<ActionsheetDragIndicatorWrapper>
|
|
<ActionsheetDragIndicator />
|
|
</ActionsheetDragIndicatorWrapper>
|
|
<ActionsheetItem>
|
|
<ActionsheetItemText>Kategoria</ActionsheetItemText>
|
|
</ActionsheetItem>
|
|
</ActionsheetContent>
|
|
</Actionsheet>
|
|
<FlatList
|
|
key={2}
|
|
data={filteredNotices}
|
|
numColumns={2}
|
|
columnContainerClassName="m-2"
|
|
columnWrapperClassName="gap-2 m-2"
|
|
renderItem={({item}) => <NoticeCard notice={item}/>}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={refreshing}
|
|
onRefresh={onRefresh}
|
|
colors={["#3b82f6"]}
|
|
tintColor="#3b82f6"
|
|
/>
|
|
}
|
|
/>
|
|
</>
|
|
);
|
|
} |