hamx/ArtisanConnectFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix notice status

Browse Source
This commit is contained in:
Patryk
2025-06-08 10:30:14 +02:00
parent ca59c94783
commit e2e5543e0d
5 changed files with 523 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ArtisanConnect/api/order.jsx Normal file
View File

@@ -0,0 +1,12 @@
import axios from "axios";
import FormData from "form-data";
const API_URL = "https://hopp.zikor.pl/api/v1";
export async function listOrders() {
const response = await fetch(`${API_URL}/orders/get/all`);
const data = await response.json();
if (!response.ok) {
throw new Error(response.toString());
}
return data;
}

103
ArtisanConnect/app/(tabs)/dashboard/userNotices.jsx
View File

@@ -1,11 +1,11 @@
import { useNoticesStore } from "@/store/noticesStore"; import { useNoticesStore } from "@/store/noticesStore";
import { NoticeCard } from "@/components/NoticeCard"; import { NoticeCard } from "@/components/NoticeCard";
import {Button} from "react-native"; import { Button } from "react-native";
import {Box} from "@/components/ui/box"; import { Box } from "@/components/ui/box";
import {Text} from "@/components/ui/text"; import { Text } from "@/components/ui/text";
import {VStack} from "@/components/ui/vstack"; import { VStack } from "@/components/ui/vstack";
import {ActivityIndicator, FlatList } from "react-native"; import { ActivityIndicator, FlatList } from "react-native";
import {useEffect, useState} from "react"; import { useEffect, useState } from "react";
export default function UserNotices() { export default function UserNotices() {
const { notices, fetchNotices } = useNoticesStore(); const { notices, fetchNotices } = useNoticesStore();
@@ -26,50 +26,63 @@ export default function UserNotices() {
loadNotices(); loadNotices();
}, []); }, []);
const userNotices = notices.filter(notice => notice.clientId === currentUserId); const userNotices = notices
.filter((notice) => notice.clientId === currentUserId)
.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate));
if (isLoading) { if (isLoading) {
return <ActivityIndicator />; return <ActivityIndicator />;
} }
return ( return (
<VStack className="p-4"> <VStack className="p-4">
<Text className="text-2xl font-bold mb-4">Moje ogłoszenia</Text> {/* <Text className="text-2xl font-bold mb-4">Moje ogłoszenia</Text> */}
{userNotices.length > 0 ? ( {userNotices.length > 0 ? (
<FlatList <FlatList
data={userNotices} data={userNotices}
numColumns={2} // numColumns={1}
columnWrapperStyle={{ marginBottom: 10, justifyContent: "space-between" }} // columnWrapperStyle={{
renderItem={({ item }) => ( // marginBottom: 10,
<Box className="flex-1"> // justifyContent: "space-between",
<NoticeCard notice={item} /> // }}
<Box className="flex-row justify-between mt-2"> renderItem={({ item }) => (
<Button <Box className="flex-1 mb-4 pb-2 bg-white rounded-lg">
title="Promuj" <NoticeCard notice={item} />
onPress={() => { <Box className="flex-row justify-between mt-2">
// TODO: Implementacja promocji ogłoszenia {item.status === "ACTIVE" ? (
console.log(`Promuj ogłoszenie ${item.noticeId}`); <Button
}} title="Usuń"
className="bg-primary-500 py-2 px-4 rounded-md" onPress={() => {
> console.log(`Promuj ogłoszenie ${item.noticeId}`);
</Button> }}
<Button className="bg-primary-500 py-2 px-4 rounded-md"
title="Podbij" ></Button>
onPress={() => { ) : (
// TODO: Implementacja podbicia ogłoszenia <Button
console.log(`Podbij ogłoszenie ${item.noticeId}`); title="Aktywj"
}} onPress={() => {
className="bg-primary-500 py-2 px-4 rounded-md" console.log(`Promuj ogłoszenie ${item.noticeId}`);
> }}
</Button> className="bg-primary-500 py-2 px-4 rounded-md"
</Box> ></Button>
</Box>
)} )}
keyExtractor={(item) => item.noticeId.toString()}
/> <Button
) : ( title="Podbij"
<Text>Nie masz żadnych ogłoszeń.</Text> onPress={() => {
)} // TODO: Implementacja podbicia ogłoszenia
</VStack> console.log(`Podbij ogłoszenie ${item.noticeId}`);
}}
className="bg-primary-500 py-2 px-4 rounded-md"
></Button>
</Box>
</Box>
)}
keyExtractor={(item) => item.noticeId.toString()}
/>
) : (
<Text>Nie masz żadnych ogłoszeń.</Text>
)}
</VStack>
); );
} }

11
ArtisanConnect/app/(tabs)/index.jsx
View File

@@ -34,11 +34,14 @@ export default function Home() {
const notices = useNoticesStore((state) => state.notices); const notices = useNoticesStore((state) => state.notices);
// console.log("Notices:", notices); // console.log("Notices:", notices);
// console.log("Notices length:", notices.length);
const latestNotices = [...notices] const activeNotices = notices.filter((notice) => notice.status === "ACTIVE");
// console.log("Activer Notices:", activeNotices.length);
const latestNotices = [...activeNotices]
.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate)) .sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate))
.slice(0, 6); .slice(0, 6);
const recomendedNotices = [...notices] const recomendedNotices = [...activeNotices]
.sort(() => Math.random() - 0.5) .sort(() => Math.random() - 0.5)
.slice(0, 6); .slice(0, 6);
@@ -47,13 +50,13 @@ export default function Home() {
{/* <View> */} {/* <View> */}
<SearchSection /> <SearchSection />
<ScrollView showsVerticalScrollIndicator={false}> <ScrollView showsVerticalScrollIndicator={false}>
<CategorySection title="Polecane kategorie" notices={notices} /> <CategorySection title="Polecane kategorie" notices={activeNotices} />
<NoticeSection <NoticeSection
title="Najnowsze ogłoszenia" title="Najnowsze ogłoszenia"
notices={latestNotices} notices={latestNotices}
ctaLink="/notices?sort=latest" ctaLink="/notices?sort=latest"
/> />
<UserSection title="Popularni sprzedawcy" notices={notices} /> <UserSection title="Popularni sprzedawcy" notices={activeNotices} />
<NoticeSection <NoticeSection
title="Proponowane ogłoszenia" title="Proponowane ogłoszenia"
notices={recomendedNotices} notices={recomendedNotices}

650
ArtisanConnect/app/(tabs)/notices.jsx
View File

@@ -1,4 +1,10 @@
import { FlatList, Text, ActivityIndicator, RefreshControl, Dimensions } from "react-native"; import {
FlatList,
Text,
ActivityIndicator,
RefreshControl,
Dimensions,
} from "react-native";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"; import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import { useNoticesStore } from "@/store/noticesStore"; import { useNoticesStore } from "@/store/noticesStore";
@@ -11,345 +17,369 @@ import { listCategories } from "@/api/categories";
import { FormControl, FormControlLabel } from "@/components/ui/form-control"; import { FormControl, FormControlLabel } from "@/components/ui/form-control";
import { Input, InputField } from "@/components/ui/input"; import { Input, InputField } from "@/components/ui/input";
import { HStack } from "@/components/ui/hstack"; import { HStack } from "@/components/ui/hstack";
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { KeyboardAvoidingView, Platform } from "react-native"; import { KeyboardAvoidingView, Platform } from "react-native";
import { import {
Actionsheet, Actionsheet,
ActionsheetContent, ActionsheetContent,
ActionsheetItem, ActionsheetItem,
ActionsheetItemText, ActionsheetItemText,
ActionsheetDragIndicator, ActionsheetDragIndicator,
ActionsheetDragIndicatorWrapper, ActionsheetDragIndicatorWrapper,
ActionsheetBackdrop, ActionsheetBackdrop,
} from "@/components/ui/actionsheet"; } from "@/components/ui/actionsheet";
import { import {
Select, Select,
SelectTrigger, SelectTrigger,
SelectInput, SelectInput,
SelectIcon, SelectIcon,
SelectPortal, SelectPortal,
SelectBackdrop, SelectBackdrop,
SelectContent, SelectContent,
SelectDragIndicator, SelectDragIndicator,
SelectDragIndicatorWrapper, SelectDragIndicatorWrapper,
SelectItem, SelectItem,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { ScrollView } from "react-native-gesture-handler"; import { ScrollView } from "react-native-gesture-handler";
export default function Notices() { export default function Notices() {
// Hooks // Hooks
const { notices, fetchNotices } = useNoticesStore(); const { notices, fetchNotices } = useNoticesStore();
const [refreshing, setRefreshing] = useState(false); const [refreshing, setRefreshing] = useState(false);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [showActionsheet, setShowActionsheet] = useState(false); const [showActionsheet, setShowActionsheet] = useState(false);
const [showSortSheet, setShowSortSheet] = useState(false); const [showSortSheet, setShowSortSheet] = useState(false);
const [categories, setCategories] = useState([]); const [categories, setCategories] = useState([]);
const [filteredNotices, setFilteredNotices] = useState([]); const [filteredNotices, setFilteredNotices] = useState([]);
const params = useLocalSearchParams(); const params = useLocalSearchParams();
const router = useRouter(); const router = useRouter();
useEffect(() => { useEffect(() => {
const fetchSelectItems = async () => { const fetchSelectItems = async () => {
try { try {
const data = await listCategories(); const data = await listCategories();
if (Array.isArray(data)) { if (Array.isArray(data)) {
setCategories(data); setCategories(data);
} else { } else {
console.error('listCategories did not return an array:', data); console.error("listCategories did not return an array:", data);
setError(new Error('Invalid categories data')); setError(new Error("Invalid categories data"));
}
} catch (error) {
console.error('Error fetching select items:', error);
setError(error);
}
};
fetchSelectItems();
}, []);
useEffect(() => {
loadData();
}, []);
useEffect(() => {
let result = notices;
if (params.category) {
result = result.filter(notice => notice.category === params.category);
} }
} catch (error) {
console.error("Error fetching select items:", error);
setError(error);
}
};
fetchSelectItems();
}, []);
if (params.sort) { useEffect(() => {
if( params.sort == "latest"){ loadData();
result = [...result].sort( }, []);
(a, b) => new Date(b.publishDate) - new Date(a.publishDate)
);
}else if (params.sort == "oldest") {
result = [...result].sort(
(a, b) => new Date(a.publishDate) - new Date(b.publishDate)
);
}else if (params.sort == "cheapest") {
result = [...result].sort((a, b) => {
const priceA = parseFloat(a.price);
const priceB = parseFloat(b.price);
return isNaN(priceA) || isNaN(priceB) ? 0 : priceA - priceB;
});
}else if (params.sort == "expensive") {
result = [...result].sort((a, b) => {
const priceA = parseFloat(a.price);
const priceB = parseFloat(b.price);
return isNaN(priceA) || isNaN(priceB) ? 0 : priceB - priceA;
});
}
} useEffect(() => {
let result = notices.filter((notice) => notice.status === "ACTIVE");
if (params.priceFrom) { if (params.category) {
result = result.filter(notice => { result = result.filter((notice) => notice.category === params.category);
const price = parseFloat(notice.price); }
const priceFrom = parseFloat(params.priceFrom);
return !isNaN(price) && price >= priceFrom;
});
}
if (params.priceTo) { if (params.sort) {
result = result.filter(notice => { if (params.sort == "latest") {
const price = parseFloat(notice.price); result = [...result].sort(
const priceTo = parseFloat(params.priceTo); (a, b) => new Date(b.publishDate) - new Date(a.publishDate)
return !isNaN(price) && price <= priceTo; );
}); } else if (params.sort == "oldest") {
} result = [...result].sort(
(a, b) => new Date(a.publishDate) - new Date(b.publishDate)
);
} else if (params.sort == "cheapest") {
result = [...result].sort((a, b) => {
const priceA = parseFloat(a.price);
const priceB = parseFloat(b.price);
return isNaN(priceA) || isNaN(priceB) ? 0 : priceA - priceB;
});
} else if (params.sort == "expensive") {
result = [...result].sort((a, b) => {
const priceA = parseFloat(a.price);
const priceB = parseFloat(b.price);
return isNaN(priceA) || isNaN(priceB) ? 0 : priceB - priceA;
});
}
}
if (params.priceFrom) {
result = result.filter((notice) => {
const price = parseFloat(notice.price);
const priceFrom = parseFloat(params.priceFrom);
return !isNaN(price) && price >= priceFrom;
});
}
if (params.search) { if (params.priceTo) {
const searchTerm = params.search.toLowerCase(); result = result.filter((notice) => {
result = result.filter(notice => { const price = parseFloat(notice.price);
return notice.title.toLowerCase().includes(searchTerm); const priceTo = parseFloat(params.priceTo);
}); return !isNaN(price) && price <= priceTo;
} });
}
setFilteredNotices(result); if (params.search) {
}, [notices, const searchTerm = params.search.toLowerCase();
result = result.filter((notice) => {
return notice.title.toLowerCase().includes(searchTerm);
});
}
setFilteredNotices(result);
}, [
notices,
params.category, params.category,
params.sort, params.sort,
params.priceFrom, params.priceFrom,
params.priceTo, params.priceTo,
params.search]); params.search,
]);
let filterActive =
!!params.category ||
!!params.sort ||
!!params.priceFrom ||
!!params.priceTo ||
!!params.search;
let filterActive = !!params.category || !!params.sort || !!params.priceFrom || !!params.priceTo || !!params.search; const loadData = async () => {
setIsLoading(true);
try {
const loadData = async () => { await fetchNotices();
setIsLoading(true); setError(null);
try { } catch (err) {
await fetchNotices(); setError(err);
setError(null); } finally {
} catch (err) { setIsLoading(false);
setError(err);
} finally {
setIsLoading(false);
}
};
const handleCategorySelect = (value) => {
router.replace({
pathname: "/notices",
params: { ...params, category: value }
});
};
const handlePriceFrom = (value) => {
router.replace({
pathname: "/notices",
params: { ...params, priceFrom: value }
});
} }
};
const handlePriceTo = (value) => { const handleCategorySelect = (value) => {
router.replace({ router.replace({
pathname: "/notices", pathname: "/notices",
params: { ...params, priceTo: value } params: { ...params, category: value },
}); });
};
const handlePriceFrom = (value) => {
router.replace({
pathname: "/notices",
params: { ...params, priceFrom: value },
});
};
const handlePriceTo = (value) => {
router.replace({
pathname: "/notices",
params: { ...params, priceTo: value },
});
};
const handleClose = () => setShowActionsheet(false);
const handleSort = (value) => {
router.replace({
pathname: "/notices",
params: { ...params, sort: value },
});
setShowSortSheet(false);
};
const onRefresh = async () => {
setRefreshing(true);
try {
await fetchNotices();
} catch (err) {
setError(err);
} finally {
setRefreshing(false);
} }
};
const handleClose = () => setShowActionsheet(false); if (isLoading && !refreshing) {
return <ActivityIndicator />;
}
const handleSort = (value) => { if (error) {
router.replace({ return <Text>Nie udało się pobrać listy. {error.message}</Text>;
pathname: "/notices", }
params: { ...params, sort: value }
});
setShowSortSheet(false);
}
const onRefresh = async () => { const SCREEN_HEIGHT = Dimensions.get("window").height;
setRefreshing(true);
try {
await fetchNotices();
} catch (err) {
setError(err);
} finally {
setRefreshing(false);
}
};
if (isLoading && !refreshing) { const selectedCategory =
return <ActivityIndicator />; (params.category &&
} categories?.find((cat) => cat.value === params.category)) ||
null;
if (error) { return (
return <Text>Nie udało się pobrać listy. {error.message}</Text>; <>
} <Box
style={{
const SCREEN_HEIGHT = Dimensions.get('window').height; flexDirection: "row",
padding: 8,
const selectedCategory = params.category && categories?.find( paddingTop: 16,
(cat) => cat.value === params.category paddingBottom: 16,
) || null; backgroundColor: "white",
alignItems: "center",
return ( justifyContent: "space-between",
<> }}
<Box style={{ flexDirection: "row", padding: 8, paddingTop: 16, paddingBottom: 16, backgroundColor: "white", alignItems: "center", justifyContent: "space-between" }}>
<Box style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
<Button variant="outline" onPress={() => setShowActionsheet(true)}>
<ButtonText>Filtruj</ButtonText>
<Ionicons name="filter-outline" size={20} color="black" />
</Button>
<Button variant="outline" onPress={() => setShowSortSheet(true)}>
<Ionicons name="chevron-expand-outline" size={20} color="black" />
</Button>
</Box>
{filterActive && (
<Button variant="link" onPress={() => router.replace("/notices")}>
<ButtonText>Wyczyść</ButtonText>
</Button>
)}
</Box>
<Actionsheet isOpen={showActionsheet} onClose={handleClose}>
<ActionsheetBackdrop />
<ActionsheetContent style={{ maxHeight: SCREEN_HEIGHT * 0.6, width: '100%' }} >
<KeyboardAwareScrollView
contentContainerStyle={{ flexGrow: 1, width: '100%' }}
enableOnAndroid={true}
extraScrollHeight={40}
> >
<ActionsheetDragIndicatorWrapper> <Box style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
<ActionsheetDragIndicator /> <Button variant="outline" onPress={() => setShowActionsheet(true)}>
</ActionsheetDragIndicatorWrapper> <ButtonText>Filtruj</ButtonText>
<Box className="mb-4" style={{ width: "100%" }}> <Ionicons name="filter-outline" size={20} color="black" />
<HStack space="md" style={{ width: "100%" }}> </Button>
<FormControl <Button variant="outline" onPress={() => setShowSortSheet(true)}>
style={{ flex: 1 }}> <Ionicons name="chevron-expand-outline" size={20} color="black" />
<Input> </Button>
<InputField </Box>
keyboardType="numeric" {filterActive && (
placeholder="Od:" <Button variant="link" onPress={() => router.replace("/notices")}>
value={params.priceFrom || ''} <ButtonText>Wyczyść</ButtonText>
onChangeText={handlePriceFrom} </Button>
/> )}
</Input> </Box>
</FormControl> <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
<FormControl <ActionsheetBackdrop />
style={{ flex: 1 }}> <ActionsheetContent
<Input> style={{ maxHeight: SCREEN_HEIGHT * 0.6, width: "100%" }}
<InputField >
keyboardType="numeric" <KeyboardAwareScrollView
placeholder="Do:" contentContainerStyle={{ flexGrow: 1, width: "100%" }}
value={params.priceTo || ''} enableOnAndroid={true}
onChangeText={handlePriceTo} extraScrollHeight={40}
/> >
</Input> <ActionsheetDragIndicatorWrapper>
</FormControl> <ActionsheetDragIndicator />
</HStack> </ActionsheetDragIndicatorWrapper>
</Box> <Box className="mb-4" style={{ width: "100%" }}>
<Box className="mb-4" style={{ flex: 1 }}> <HStack space="md" style={{ width: "100%" }}>
<Select <FormControl style={{ flex: 1 }}>
style={{ flex: 1 }} <Input>
selectedValue={params.category || ''} <InputField
onValueChange={handleCategorySelect} keyboardType="numeric"
> placeholder="Od:"
<SelectTrigger variant="outline" size="md"> value={params.priceFrom || ""}
<SelectInput onChangeText={handlePriceFrom}
style={{ flex: 1 }}
placeholder="Wybierz kategorię"
value={selectedCategory ? selectedCategory.label : ""}
/>
<SelectIcon style={{ marginRight: 12 }} as={ChevronDownIcon} />
</SelectTrigger>
<SelectPortal>
<SelectBackdrop />
<SelectContent
style={{ maxHeight: SCREEN_HEIGHT * 0.6}}
>
<SelectDragIndicatorWrapper>
<SelectDragIndicator />
</SelectDragIndicatorWrapper>
<FlatList
style={{ width: '100%' }}
data={categories}
keyExtractor={(item) => item.value?.toString() || item.id?.toString() || Math.random().toString()}
renderItem={({ item }) => (
<SelectItem
label={item.label}
value={item.value}
/>
)}
/>
</SelectContent>
</SelectPortal>
</Select>
</Box>
</KeyboardAwareScrollView>
</ActionsheetContent>
</Actionsheet>
<Actionsheet isOpen={showSortSheet} onClose={() => setShowSortSheet(false)}>
<ActionsheetBackdrop />
<ActionsheetContent>
<ActionsheetDragIndicatorWrapper>
<ActionsheetDragIndicator />
</ActionsheetDragIndicatorWrapper>
<ActionsheetItem
className={ !params.sort ? 'bg-gray-200' : ''}
onPress={() => handleSort()}>
<ActionsheetItemText>Trafność</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={ params.sort == 'latest' ? 'bg-gray-200' : ''}
onPress={() => handleSort('latest')}>
<ActionsheetItemText>Najnowsze</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={ params.sort == 'oldest' ? 'bg-gray-200' : ''}
onPress={() => handleSort('oldest')}>
<ActionsheetItemText>Najstarsze</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={ params.sort == 'cheapest' ? 'bg-gray-200' : ''}
onPress={() => handleSort('cheapest')}>
<ActionsheetItemText>Najtańsze</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={ params.sort == 'expensive' ? 'bg-gray-200' : ''}
onPress={() => handleSort('expensive')}>
<ActionsheetItemText>Najdroższe</ActionsheetItemText>
</ActionsheetItem>
</ActionsheetContent>
</Actionsheet>
<FlatList
data={filteredNotices}
numColumns={2}
columnWrapperStyle={{ gap: 8, marginHorizontal: 8 }}
contentContainerStyle={{ paddingBottom: 16 }}
renderItem={({ item }) => <NoticeCard notice={item} />}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
colors={["#3b82f6"]}
tintColor="#3b82f6"
/> />
} </Input>
/> </FormControl>
</> <FormControl style={{ flex: 1 }}>
); <Input>
} <InputField
keyboardType="numeric"
placeholder="Do:"
value={params.priceTo || ""}
onChangeText={handlePriceTo}
/>
</Input>
</FormControl>
</HStack>
</Box>
<Box className="mb-4" style={{ flex: 1 }}>
<Select
style={{ flex: 1 }}
selectedValue={params.category || ""}
onValueChange={handleCategorySelect}
>
<SelectTrigger variant="outline" size="md">
<SelectInput
style={{ flex: 1 }}
placeholder="Wybierz kategorię"
value={selectedCategory ? selectedCategory.label : ""}
/>
<SelectIcon
style={{ marginRight: 12 }}
as={ChevronDownIcon}
/>
</SelectTrigger>
<SelectPortal>
<SelectBackdrop />
<SelectContent style={{ maxHeight: SCREEN_HEIGHT * 0.6 }}>
<SelectDragIndicatorWrapper>
<SelectDragIndicator />
</SelectDragIndicatorWrapper>
<FlatList
style={{ width: "100%" }}
data={categories}
keyExtractor={(item) =>
item.value?.toString() ||
item.id?.toString() ||
Math.random().toString()
}
renderItem={({ item }) => (
<SelectItem label={item.label} value={item.value} />
)}
/>
</SelectContent>
</SelectPortal>
</Select>
</Box>
</KeyboardAwareScrollView>
</ActionsheetContent>
</Actionsheet>
<Actionsheet
isOpen={showSortSheet}
onClose={() => setShowSortSheet(false)}
>
<ActionsheetBackdrop />
<ActionsheetContent>
<ActionsheetDragIndicatorWrapper>
<ActionsheetDragIndicator />
</ActionsheetDragIndicatorWrapper>
<ActionsheetItem
className={!params.sort ? "bg-gray-200" : ""}
onPress={() => handleSort()}
>
<ActionsheetItemText>Trafność</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={params.sort == "latest" ? "bg-gray-200" : ""}
onPress={() => handleSort("latest")}
>
<ActionsheetItemText>Najnowsze</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={params.sort == "oldest" ? "bg-gray-200" : ""}
onPress={() => handleSort("oldest")}
>
<ActionsheetItemText>Najstarsze</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={params.sort == "cheapest" ? "bg-gray-200" : ""}
onPress={() => handleSort("cheapest")}
>
<ActionsheetItemText>Najtańsze</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem
className={params.sort == "expensive" ? "bg-gray-200" : ""}
onPress={() => handleSort("expensive")}
>
<ActionsheetItemText>Najdroższe</ActionsheetItemText>
</ActionsheetItem>
</ActionsheetContent>
</Actionsheet>
<FlatList
data={filteredNotices}
numColumns={2}
columnWrapperStyle={{ gap: 8, marginHorizontal: 8 }}
contentContainerStyle={{ paddingBottom: 16 }}
renderItem={({ item }) => <NoticeCard notice={item} />}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
colors={["#3b82f6"]}
tintColor="#3b82f6"
/>
}
/>
</>
);
}

206
ArtisanConnect/components/NoticeCard.jsx
View File

@@ -1,111 +1,117 @@
import {Box} from "@/components/ui/box"; import { Box } from "@/components/ui/box";
import {Card} from "@/components/ui/card"; import { Card } from "@/components/ui/card";
import {Heading} from "@/components/ui/heading"; import { Heading } from "@/components/ui/heading";
import {Image} from "@/components/ui/image"; import { Image } from "@/components/ui/image";
import {Text} from "@/components/ui/text"; import { Text } from "@/components/ui/text";
import {VStack} from "@/components/ui/vstack"; import { VStack } from "@/components/ui/vstack";
import {Link} from "expo-router"; import { Link } from "expo-router";
import {Pressable, ActivityIndicator, View} from "react-native"; import { Pressable, ActivityIndicator, View } from "react-native";
import {useWishlist} from "@/store/wishlistStore"; import { useWishlist } from "@/store/wishlistStore";
import {useNoticesStore} from "@/store/noticesStore"; import { useNoticesStore } from "@/store/noticesStore";
import {Ionicons} from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import {useEffect, useState} from "react"; import { useEffect, useState } from "react";
export function NoticeCard({notice}) { export function NoticeCard({ notice }) {
const noticeId = notice?.noticeId; const noticeId = notice?.noticeId;
const toggleNoticeInWishlist = useWishlist((state) => state.toggleNoticeInWishlist); const toggleNoticeInWishlist = useWishlist(
const isInWishlist = useWishlist((state) => (state) => state.toggleNoticeInWishlist
noticeId ? state.wishlistNotices.some((item) => item.noticeId === noticeId) : false );
); const isInWishlist = useWishlist((state) =>
noticeId
? state.wishlistNotices.some((item) => item.noticeId === noticeId)
: false
);
const [image, setImage] = useState(null); const [image, setImage] = useState(null);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const {getAllImagesByNoticeId} = useNoticesStore(); const { getAllImagesByNoticeId } = useNoticesStore();
useEffect(() => { useEffect(() => {
let isMounted = true; let isMounted = true;
const fetchImage = async () => { const fetchImage = async () => {
if (!noticeId) { if (!noticeId) {
if (isMounted) { if (isMounted) {
setImage("https://http.cat/404.jpg"); setImage("https://http.cat/404.jpg");
setIsLoading(false); setIsLoading(false);
} }
return; return;
} }
setIsLoading(true); setIsLoading(true);
try { try {
const images = await getAllImagesByNoticeId(noticeId); const images = await getAllImagesByNoticeId(noticeId);
if (isMounted) { if (isMounted) {
setImage(images && images.length > 0 ? images[0] : "https://http.cat/404.jpg"); setImage(
} images && images.length > 0 ? images[0] : "https://http.cat/404.jpg"
} catch (error) { );
console.error(`Error while loading image: ${error}`); }
if (isMounted) { } catch (error) {
setImage("https://http.cat/404.jpg"); console.error(`Error while loading image: ${error}`);
} if (isMounted) {
} finally { setImage("https://http.cat/404.jpg");
if (isMounted) { }
setIsLoading(false); } finally {
} if (isMounted) {
} setIsLoading(false);
}; }
}
};
fetchImage(); fetchImage();
return () => { return () => {
isMounted = false; isMounted = false;
}; };
}, [noticeId]); }, [noticeId]);
if (!notice) { if (!notice) {
return <View style={{flex: 1}} />; return <View style={{ flex: 1 }} />;
} }
return ( return (
<Link href={`/notice/${noticeId}`} asChild> <Link href={`/notice/${noticeId}`} asChild>
<Pressable className="flex-1"> <Pressable className="flex-1">
<Card className="p-0 rounded-lg max-w-[460px] flex-1"> <Card className="p-0 rounded-lg max-w-[460px] flex-1">
{isLoading ? ( {isLoading ? (
<Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center"> <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
<ActivityIndicator size="large" color="#3b82f6" /> <ActivityIndicator size="large" color="#3b82f6" />
</Box> </Box>
) : ( ) : (
<Image <Image
source={{ source={{
uri: image, uri: image,
}} }}
className="h-auto w-full rounded-md aspect-[1/1]" className="h-auto w-full rounded-md aspect-[1/1]"
alt="image" alt="image"
resizeMode="cover" resizeMode="cover"
/> />
)} )}
<VStack className="p-2"> <VStack className="p-2">
<Text className="text-sm font-normal mb-2 text-typography-700"> <Text className="text-sm font-normal mb-2 text-typography-700">
{notice.title} {notice.title}
</Text> </Text>
<Box className="flex-row items-center"> <Box className="flex-row items-center">
<Heading size="md" className="flex-1"> <Heading size="md" className="flex-1">
{notice.price}zł {notice.price}zł
</Heading> </Heading>
<Pressable <Pressable
onPress={() => { onPress={() => {
toggleNoticeInWishlist(noticeId); toggleNoticeInWishlist(noticeId);
}} }}
> >
<Ionicons <Ionicons
name={isInWishlist ? "heart" : "heart-outline"} name={isInWishlist ? "heart" : "heart-outline"}
size={24} size={24}
color={"primary-heading-500"} color={"primary-heading-500"}
/> />
</Pressable> </Pressable>
</Box> </Box>
</VStack> </VStack>
</Card> </Card>
</Pressable> </Pressable>
</Link> </Link>
); );
} }