keyboard avoidiing fix

add sort element
2025-06-03 21:51:33 +02:00 · 2025-06-03 21:16:05 +02:00
3 changed files with 144 additions and 22 deletions
--- a/ArtisanConnect/app/(tabs)/notices.jsx
+++ b/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";
@@ -11,9 +11,13 @@ import { listCategories } from "@/api/categories";
 import { FormControl, FormControlLabel } from "@/components/ui/form-control";
 import { Input, InputField } from "@/components/ui/input";
 import { HStack } from "@/components/ui/hstack";
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import { KeyboardAvoidingView, Platform } from "react-native";
 import {
    Actionsheet,
    ActionsheetContent,
+    ActionsheetItem,
+    ActionsheetItemText,
    ActionsheetDragIndicator,
    ActionsheetDragIndicatorWrapper,
    ActionsheetBackdrop,
@@ -30,6 +34,7 @@ import {
    SelectDragIndicatorWrapper,
    SelectItem,
 } from "@/components/ui/select";
+import { ScrollView } from "react-native-gesture-handler";

 export default function Notices() {
    // Hooks
@@ -38,6 +43,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 +78,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 +119,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 +159,7 @@ export default function Notices() {
    };

    const handlePriceFrom = (value) => {
-         router.replace({
+        router.replace({
            pathname: "/notices",
            params: { ...params, priceFrom: value }
        });
@@ -144,6 +174,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 +210,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>
@@ -184,12 +227,17 @@ export default function Notices() {
            </Box>
            <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
                <ActionsheetBackdrop />
-                <ActionsheetContent>
+                <ActionsheetContent  style={{ maxHeight: SCREEN_HEIGHT * 0.6, width: '100%' }} >
+    <KeyboardAwareScrollView
+      contentContainerStyle={{ flexGrow: 1, width: '100%' }}
+      enableOnAndroid={true}
+      extraScrollHeight={40}
+      >
                    <ActionsheetDragIndicatorWrapper>
                        <ActionsheetDragIndicator />
                    </ActionsheetDragIndicatorWrapper>
-                    <Box className="mb-4">
-                        <HStack space="md" style={{ width: "100%"}}>
+                    <Box className="mb-4" style={{ width: "100%" }}>
+                        <HStack space="md" style={{ width: "100%" }}>
                            <FormControl
                                style={{ flex: 1 }}>
                                <Input>
@@ -207,16 +255,16 @@ export default function Notices() {
                                    <InputField
                                        keyboardType="numeric"
                                        placeholder="Do:"
-                                        value={params.priceTo || ''} 
+                                        value={params.priceTo || ''}
                                        onChangeText={handlePriceTo}
                                    />
                                </Input>
                            </FormControl>
                        </HStack>
                    </Box>
-                    <Box className="mb-4 w-full">
+                    <Box className="mb-4 w-full" style={{ flex: 1 }}>
                        <Select
-                            style={{ width: '100%' }}
+                            style={{ width: '100%',  flex: 1  }}
                            selectedValue={params.category || ''}
                            onValueChange={handleCategorySelect}
                        >
@@ -250,7 +298,40 @@ export default function Notices() {
                            </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
--- a/ArtisanConnect/package-lock.json
+++ b/ArtisanConnect/package-lock.json
@@ -47,6 +47,7 @@
        "react-native": "0.79.2",
        "react-native-css-interop": "^0.1.22",
        "react-native-gesture-handler": "~2.24.0",
+        "react-native-keyboard-aware-scroll-view": "^0.9.5",
        "react-native-reanimated": "~3.17.4",
        "react-native-safe-area-context": "5.4.0",
        "react-native-screens": "~4.10.0",
@@ -8861,6 +8862,23 @@
        "node": ">= 6"
      }
    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
    "node_modules/proxy-from-env": {
      "version": "1.1.0",
      "license": "MIT"
@@ -9131,6 +9149,15 @@
        "react-native": "*"
      }
    },
+    "node_modules/react-native-iphone-x-helper": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
+      "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-native": ">=0.42.0"
+      }
+    },
    "node_modules/react-native-is-edge-to-edge": {
      "version": "1.1.7",
      "license": "MIT",
@@ -9139,6 +9166,19 @@
        "react-native": "*"
      }
    },
+    "node_modules/react-native-keyboard-aware-scroll-view": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.9.5.tgz",
+      "integrity": "sha512-XwfRn+T/qBH9WjTWIBiJD2hPWg0yJvtaEw6RtPCa5/PYHabzBaWxYBOl0usXN/368BL1XktnZPh8C2lmTpOREA==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.6.2",
+        "react-native-iphone-x-helper": "^1.0.3"
+      },
+      "peerDependencies": {
+        "react-native": ">=0.48.4"
+      }
+    },
    "node_modules/react-native-reanimated": {
      "version": "3.17.5",
      "license": "MIT",
--- a/ArtisanConnect/package.json
+++ b/ArtisanConnect/package.json
@@ -48,6 +48,7 @@
    "react-native": "0.79.2",
    "react-native-css-interop": "^0.1.22",
    "react-native-gesture-handler": "~2.24.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-reanimated": "~3.17.4",
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "~4.10.0",
Author	SHA1	Message	Date
JaPatryk	b8a0d25c09	keyboard avoidiing fix	2025-06-03 21:51:33 +02:00
JaPatryk	35a46a9396	add sort element	2025-06-03 21:16:05 +02:00