add sort element

ArtisanConnect/app/(tabs)/notices.jsx

@@ -1,6 +1,6 @@
 import { FlatList, Text, ActivityIndicator, RefreshControl, Dimensions } from "react-native";
 import { useState, useEffect } from "react";
-import { Ionicons } from "@expo/vector-icons";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useNoticesStore } from "@/store/noticesStore";
 import { NoticeCard } from "@/components/NoticeCard";
 import { useLocalSearchParams, useRouter } from "expo-router";
@@ -14,6 +14,8 @@ import { HStack } from "@/components/ui/hstack";
 import {
     Actionsheet,
     ActionsheetContent,
+    ActionsheetItem,
+    ActionsheetItemText,
     ActionsheetDragIndicator,
     ActionsheetDragIndicatorWrapper,
     ActionsheetBackdrop,
@@ -38,6 +40,7 @@ export default function Notices() {
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
     const [showActionsheet, setShowActionsheet] = useState(false);
+    const [showSortSheet, setShowSortSheet] = useState(false);
     const [categories, setCategories] = useState([]);
     const [filteredNotices, setFilteredNotices] = useState([]);
     const params = useLocalSearchParams();
@@ -72,13 +75,32 @@ export default function Notices() {
             result = result.filter(notice => notice.category === params.category);
         }
 
-        if (params.sort === "latest") {
-            result = [...result].sort(
-                (a, b) => new Date(b.publishDate) - new Date(a.publishDate)
-            );
+        if (params.sort) {
+            if( params.sort == "latest"){
+                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;
+                });
+            }
+
         }
 
-        if(params.priceFrom) {
+        if (params.priceFrom) {
             result = result.filter(notice => {
                 const price = parseFloat(notice.price);
                 const priceFrom = parseFloat(params.priceFrom);
@@ -94,16 +116,21 @@ export default function Notices() {
             });
         }
 
-        
+
         if (params.search) {
             const searchTerm = params.search.toLowerCase();
-            result = result.filter(notice =>{
-                 return notice.title.toLowerCase().includes(searchTerm);
+            result = result.filter(notice => {
+                return notice.title.toLowerCase().includes(searchTerm);
             });
         }
 
         setFilteredNotices(result);
-    }, );
+    }, [notices,
+    params.category,
+    params.sort,
+    params.priceFrom,
+    params.priceTo,
+    params.search]);
 
 
     let filterActive = !!params.category || !!params.sort || !!params.priceFrom || !!params.priceTo || !!params.search;
@@ -129,7 +156,7 @@ export default function Notices() {
     };
 
     const handlePriceFrom = (value) => {
-         router.replace({
+        router.replace({
             pathname: "/notices",
             params: { ...params, priceFrom: value }
         });
@@ -144,6 +171,14 @@ export default function Notices() {
 
     const handleClose = () => setShowActionsheet(false);
 
+    const handleSort = (value) => {
+        router.replace({
+            pathname: "/notices",
+            params: { ...params, sort: value }
+        });
+        setShowSortSheet(false);
+    }
+
     const onRefresh = async () => {
         setRefreshing(true);
         try {
@@ -172,10 +207,15 @@ export default function Notices() {
     return (
         <>
             <Box style={{ flexDirection: "row", padding: 8, paddingTop: 16, paddingBottom: 16, backgroundColor: "white", alignItems: "center", justifyContent: "space-between" }}>
-                <Button variant="outline" onPress={() => setShowActionsheet(true)}>
-                    <ButtonText>Filtry</ButtonText>
-                    <Ionicons name="filter-outline" size={20} color="black" />
-                </Button>
+                <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>
@@ -189,7 +229,7 @@ export default function Notices() {
                         <ActionsheetDragIndicator />
                     </ActionsheetDragIndicatorWrapper>
                     <Box className="mb-4">
-                        <HStack space="md" style={{ width: "100%"}}>
+                        <HStack space="md" style={{ width: "100%" }}>
                             <FormControl
                                 style={{ flex: 1 }}>
                                 <Input>
@@ -207,7 +247,7 @@ export default function Notices() {
                                     <InputField
                                         keyboardType="numeric"
                                         placeholder="Do:"
-                                        value={params.priceTo || ''} 
+                                        value={params.priceTo || ''}
                                         onChangeText={handlePriceTo}
                                     />
                                 </Input>
@@ -253,6 +293,39 @@ export default function Notices() {
 
                 </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}