add todo repeat freq

components/pages/grocery/EditGroceryItem.tsx

@@ -1,74 +1,141 @@
-import {Text, View} from "react-native";
-import React, {useEffect, useRef, useState} from "react";
-import {TextField, TextFieldRef} from "react-native-ui-lib";
-import {GroceryCategory, useGroceryContext,} from "@/contexts/GroceryContext";
-import CategoryDropdown from "./CategoryDropdown";
+import { Text, View } from "react-native-ui-lib";
+import React, { useEffect, useRef, useState } from "react";
+import { TextField, TextFieldRef } from "react-native-ui-lib";
+import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext";
+import { Dropdown } from "react-native-element-dropdown";
+import CloseXIcon from "@/assets/svgs/CloseXIcon";
+import { StyleSheet } from "react-native";
+import DropdownIcon from "@/assets/svgs/DropdownIcon";
 
 interface IEditGrocery {
-    id?: string;
-    title: string;
-    category: GroceryCategory;
-    setTitle: (value: string) => void;
-    setCategory?: (category: GroceryCategory) => void;
-    setSubmit?: (value: boolean) => void;
-    closeEdit?: (value: boolean) => void;
-    handleEditSubmit?: Function
+  id?: string;
+  title: string;
+  category: GroceryCategory;
+  setTitle: (value: string) => void;
+  setCategory?: (category: GroceryCategory) => void;
+  setSubmit?: (value: boolean) => void;
+  closeEdit?: (value: boolean) => void;
+  handleEditSubmit?: Function;
 }
 
-const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
-    const {fuzzyMatchGroceryCategory} = useGroceryContext();
-    const inputRef = useRef<TextFieldRef>(null);
-    const [category, setCategory] = useState<GroceryCategory>(GroceryCategory.None);
+const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
+  const { fuzzyMatchGroceryCategory } = useGroceryContext();
+  const inputRef = useRef<TextFieldRef>(null);
 
-    useEffect(() => {
-        if (editGrocery.setCategory)
-            editGrocery.setCategory(fuzzyMatchGroceryCategory(editGrocery.title));
-    }, [editGrocery.title]);
+  const groceryCategoryOptions = Object.values(GroceryCategory).map(
+    (category) => ({
+      label: category,
+      value: category,
+    })
+  );
 
-    useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.focus(); // Focus on the TextField
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus(); // Focus on the TextField
+    }
+    console.log(editGrocery.category);
+  }, []);
+
+  return (
+    <View
+      style={{
+        backgroundColor: "white",
+        width: "100%",
+        borderRadius: 25,
+        paddingHorizontal: 13,
+        paddingVertical: 10,
+        marginTop: 0,
+      }}
+    >
+      <View row spread centerV>
+        <TextField
+          text70T
+          style={{}}
+          ref={inputRef}
+          placeholder="Grocery"
+          value={editGrocery.title}
+          onChangeText={(value) => {
+            editGrocery.setTitle(value);
+          }}
+          onSubmitEditing={() => {
+            if (editGrocery.setSubmit) {
+              editGrocery.setSubmit(true);
+            }
+            if (editGrocery.handleEditSubmit) {
+              editGrocery.handleEditSubmit({
+                id: editGrocery.id,
+                title: editGrocery.title,
+                category: editGrocery.category,
+              });
+            }
+            if (editGrocery.closeEdit) {
+              editGrocery.closeEdit(false);
+            }
+          }}
+          maxLength={25}
+        />
+        <CloseXIcon
+          onPress={() => {
+            if (editGrocery.closeEdit) editGrocery.closeEdit(false);
+          }}
+        />
+      </View>
+      <Dropdown
+      style={{marginTop: 15}}
+        data={groceryCategoryOptions}
+        placeholder="Select grocery category"
+        placeholderStyle={{ color: "#a2a2a2", fontFamily: "Manrope_500Medium", fontSize: 13.2 }}
+        labelField="label"
+        valueField="value"
+        value={
+          editGrocery.category == GroceryCategory.None
+            ? null
+            : editGrocery.category
         }
-    }, []);
-
-    return (
-        <View
-            style={{
-                backgroundColor: "white",
-                width: "100%",
-                borderRadius: 25,
-                padding: 15,
-                marginTop: 10
-            }}
-        >
-            <TextField
-                text70T
-                style={{fontWeight: "400"}}
-                ref={inputRef}
-                placeholder="Grocery"
-                value={editGrocery.title}
-                onChangeText={(value) => {
-                    editGrocery.setTitle(value);
-                }}
-                onSubmitEditing={() => {
-                    if (editGrocery.setSubmit) {
-                        editGrocery.setSubmit(true);
-                    }
-                    if (editGrocery.setCategory) {
-                        editGrocery.setCategory(fuzzyMatchGroceryCategory(editGrocery.title));
-                    }
-                    if (editGrocery.handleEditSubmit) {
-                        editGrocery.handleEditSubmit({id: editGrocery.id, title: editGrocery.title, category: editGrocery.category});
-                    }
-                    if (editGrocery.closeEdit) {
-                        editGrocery.closeEdit(false);
-                    }
-                }}
-                maxLength={25}
-            />
-            <Text>{editGrocery.category}</Text>
-        </View>
-    );
+        iconColor="white"
+        activeColor={"#fd1775"}
+        containerStyle={styles.dropdownStyle}
+        itemTextStyle={styles.itemText}
+        itemContainerStyle={styles.itemStyle}
+        selectedTextStyle={styles.selectedText}
+        renderLeftIcon={() => (
+          <DropdownIcon style={{ marginRight: 8 }} color={editGrocery.category == GroceryCategory.None ? "#7b7b7b" : "#fd1775"} />
+        )}
+        renderItem={(item) => {
+          return (
+            <View height={36.02} centerV>
+              <Text style={styles.itemText}>{item.label}</Text>
+            </View>
+          );
+        }}
+        onChange={(item) => {
+          if (editGrocery.handleEditSubmit) {
+            editGrocery.handleEditSubmit({
+              id: editGrocery.id,
+              category: item.value,
+            });
+            console.log("kategorija vo diropdown: " + item.value);
+            if (editGrocery.closeEdit) editGrocery.closeEdit(false);
+          }
+        }}
+      />
+    </View>
+  );
 };
 
+const styles = StyleSheet.create({
+  itemText: {
+    fontFamily: "Manrope_400Regular",
+    fontSize: 15.42,
+    paddingLeft: 15,
+  },
+  selectedText: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 13.2,
+    color: "#fd1775",
+  },
+  dropdownStyle: { borderRadius: 6.61, height: 115.34, width: 187 },
+  itemStyle: { padding: 0, margin: 0 },
+});
+
 export default EditGroceryItem;