add attribures to notices list

ArtisanConnect/app/(tabs)/notice/create.jsx

@@ -31,6 +31,7 @@ import { ChevronDownIcon } from "@/components/ui/icon";
 import { useNoticesStore } from "@/store/noticesStore";
 import { listCategories } from "@/api/categories";
 import { useRouter } from "expo-router";
+import { attributes } from "@/data/attributesData"; // Assuming you have a separate file for attributes data}
 
 export default function CreateNotice() {
   const router = useRouter();
@@ -84,35 +85,6 @@ export default function CreateNotice() {
     },
   });
 
-  const attributes = {
-    Kolor: [
-      "Zielony",
-      "Czerwony",
-      "Niebieski",
-      "Żółty",
-      "Biały",
-      "Czarny",
-      "Różowy",
-      "Szary",
-      "Fioletowy",
-      "Pomarańczowy",
-      "Inny",
-    ],
-    Materiał: [
-      "Bawełna",
-      "Wełna",
-      "Syntetyk",
-      "Skóra",
-      "Len",
-      "Jedwab",
-      "Poliester",
-      "Akryl",
-      "Wiskoza",
-      "Nylon",
-      "Inny",
-    ],
-  };
-
   const handleAddNotice = async () => {
     setError({
       title: !title,

ArtisanConnect/app/(tabs)/notices.jsx

@@ -39,11 +39,11 @@ import {
   SelectDragIndicator,
   SelectDragIndicatorWrapper,
   SelectItem,
+  SelectScrollView,
 } from "@/components/ui/select";
-import { ScrollView } from "react-native-gesture-handler";
+import { attributes } from "@/data/attributesData";
 
 export default function Notices() {
-  // Hooks
   const { notices, fetchNotices } = useNoticesStore();
   const [refreshing, setRefreshing] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
@@ -52,6 +52,7 @@ export default function Notices() {
   const [showSortSheet, setShowSortSheet] = useState(false);
   const [categories, setCategories] = useState([]);
   const [filteredNotices, setFilteredNotices] = useState([]);
+  const [selectedAttributes, setSelectedAttributes] = useState({});
   const params = useLocalSearchParams();
   const router = useRouter();
 
@@ -131,6 +132,21 @@ export default function Notices() {
       });
     }
 
+    Object.keys(params).forEach((key) => {
+      if (key.startsWith("attribute_")) {
+        // console.log("Filtering by attribute:", key);
+        const attributeName = key.replace("attribute_", "");
+        const attributeValue = params[key];
+
+        result = result.filter((notice) =>
+          notice.attributes?.some(
+            (attr) =>
+              attr.name === attributeName && attr.value === attributeValue
+          )
+        );
+      }
+    });
+
     setFilteredNotices(result);
   }, [
     notices,
@@ -139,6 +155,8 @@ export default function Notices() {
     params.priceFrom,
     params.priceTo,
     params.search,
+    params.attribute_Kolor,
+    params.attribute_Materiał,
   ]);
 
   let filterActive =
@@ -146,7 +164,8 @@ export default function Notices() {
     !!params.sort ||
     !!params.priceFrom ||
     !!params.priceTo ||
-    !!params.search;
+    !!params.search ||
+    Object.keys(params).some((key) => key.startsWith("attribute_"));
 
   const loadData = async () => {
     setIsLoading(true);
@@ -181,6 +200,20 @@ export default function Notices() {
     });
   };
 
+  const handleAttributeSelect = (attributeName, value) => {
+    const newParams = { ...params };
+
+    if (value) {
+      newParams[`attribute_${attributeName}`] = value;
+    }
+
+    // console.log("New Params:", newParams);
+    router.replace({
+      pathname: "/notices",
+      params: newParams,
+    });
+  };
+
   const handleClose = () => setShowActionsheet(false);
 
   const handleSort = (value) => {
@@ -217,6 +250,8 @@ export default function Notices() {
       categories?.find((cat) => cat.value === params.category)) ||
     null;
 
+  // console.log("Filtered Notices:", filteredNotices);
+
   return (
     <>
       <Box
@@ -321,6 +356,42 @@ export default function Notices() {
                 </SelectPortal>
               </Select>
             </Box>
+            <Box>
+              {Object.entries(attributes).map(([label, options]) => (
+                <Box className="mb-4" key={label}>
+                  {/* <Text className="text-typography-500">{label}</Text> */}
+                  <Select
+                    style={{ flex: 1 }}
+                    onValueChange={(value) =>
+                      handleAttributeSelect(label, value)
+                    }
+                  >
+                    <SelectTrigger variant="outline" size="md">
+                      <SelectInput
+                        style={{ flex: 1 }}
+                        placeholder={`Wybierz ${label.toLowerCase()}`}
+                        value={params[`attribute_${label}`] || ""}
+                      />
+                      <SelectIcon className="mr-3" as={ChevronDownIcon} />
+                    </SelectTrigger>
+                    <SelectPortal>
+                      <SelectBackdrop />
+                      <SelectContent style={{ maxHeight: 400 }}>
+                        <SelectScrollView>
+                          {options.map((option) => (
+                            <SelectItem
+                              key={option}
+                              label={option}
+                              value={option}
+                            />
+                          ))}
+                        </SelectScrollView>
+                      </SelectContent>
+                    </SelectPortal>
+                  </Select>
+                </Box>
+              ))}
+            </Box>
           </KeyboardAwareScrollView>
         </ActionsheetContent>
       </Actionsheet>

ArtisanConnect/data/attributesData.jsx

@@ -0,0 +1,28 @@
+export const attributes = {
+  Kolor: [
+    "Zielony",
+    "Czerwony",
+    "Niebieski",
+    "Żółty",
+    "Biały",
+    "Czarny",
+    "Różowy",
+    "Szary",
+    "Fioletowy",
+    "Pomarańczowy",
+    "Inny",
+  ],
+  Materiał: [
+    "Bawełna",
+    "Wełna",
+    "Syntetyk",
+    "Skóra",
+    "Len",
+    "Jedwab",
+    "Poliester",
+    "Akryl",
+    "Wiskoza",
+    "Nylon",
+    "Inny",
+  ],
+};