From 2b55c5db0ca4f8d5f8b4f544cf55e945b949e57d Mon Sep 17 00:00:00 2001
From: ivic00 <102467664+ivic00@users.noreply.github.com>
Date: Mon, 7 Oct 2024 00:10:51 +0200
Subject: [PATCH] grocery changes
---
app/(auth)/_layout.tsx | 3 +
components/pages/grocery/EditGroceryItem.tsx | 12 +-
components/pages/grocery/GroceryItem.tsx | 140 ++++++++--------
components/pages/grocery/GroceryList.tsx | 160 +++++++++++++------
components/pages/grocery/GroceryWrapper.tsx | 24 ++-
5 files changed, 204 insertions(+), 135 deletions(-)
diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx
index 867d5fd..b6e8aee 100644
--- a/app/(auth)/_layout.tsx
+++ b/app/(auth)/_layout.tsx
@@ -16,6 +16,8 @@ import {
MaterialCommunityIcons,
Octicons,
} from "@expo/vector-icons";
+import MenuIcon from "@/assets/svgs/MenuIcon";
+import { router } from "expo-router";
export default function TabLayout() {
const { mutateAsync: signOut } = useSignOut();
@@ -30,6 +32,7 @@ export default function TabLayout() {
backgroundColor: "#f9f8f7",
height: "100%",
},
+ drawerIcon: () => ,
}}
drawerContent={(props) => {
return (
diff --git a/components/pages/grocery/EditGroceryItem.tsx b/components/pages/grocery/EditGroceryItem.tsx
index 2d8d6d1..c92ac2f 100644
--- a/components/pages/grocery/EditGroceryItem.tsx
+++ b/components/pages/grocery/EditGroceryItem.tsx
@@ -1,6 +1,6 @@
import { View, Text } from "react-native";
-import React, { useEffect, useState } from "react";
-import { TextField } from "react-native-ui-lib";
+import React, { RefObject, useEffect, useRef, useState } from "react";
+import { TextField, TextFieldRef } from "react-native-ui-lib";
import {
GroceryCategory,
IGrocery,
@@ -21,12 +21,19 @@ interface IEditGrocery {
const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
const { fuzzyMatchGroceryCategory } = useGroceryContext();
+ const inputRef = useRef(null);
useEffect(() => {
if (editGrocery.setCategory)
editGrocery.setCategory(fuzzyMatchGroceryCategory(editGrocery.title));
}, [editGrocery.title]);
+ useEffect(() => {
+ if (inputRef.current) {
+ inputRef.current.focus(); // Focus on the TextField
+ }
+ }, []);
+
return (
{
}}
>
{
diff --git a/components/pages/grocery/GroceryItem.tsx b/components/pages/grocery/GroceryItem.tsx
index 750040a..97e5ade 100644
--- a/components/pages/grocery/GroceryItem.tsx
+++ b/components/pages/grocery/GroceryItem.tsx
@@ -54,13 +54,11 @@ const GroceryItem = ({
style={{ borderRadius: 18, marginVertical: 5 }}
backgroundColor="white"
centerV
- padding-0
+ paddingV-12
+ paddingR-12
+ paddingL-12
>
- {
- setOpenFreqEdit(true);
- }}
- >
+
-
- {!isEditingTitle ? (
-
- setIsEditingTitle(true)}>
- {item.title}
-
-
- ) : (
-
+ setIsEditingTitle(true)}>
+ {item.title}
+
+
+ ) : (
+
+ )}
+ {!item.approved ? (
+
+ {
+ handleItemApproved(item.id, { approved: true });
}}
/>
- )}
-
-
- {!item.approved ? (
-
-
- }
- backgroundColor="transparent"
- size={Button.sizes.small}
- onPress={() => {
- handleItemApproved(item.id, { approved: true });
- }}
- />
-
- }
- backgroundColor="transparent"
- size={Button.sizes.small}
- onPress={() => {
- handleItemApproved(item.id, { approved: false });
- }}
- />
-
- ) : (
-
- updateGroceryItem(item.id, { bought: !item.bought })
- }
+ {
+ handleItemApproved(item.id, { approved: false });
+ }}
/>
- )}
-
-
+
+ ) : (
+
+ updateGroceryItem(item.id, { bought: !item.bought })
+ }
+ />
+ )}
+
{!item.approved && (
-
+
- Requested by Austin
+
+ Requested by Austin
+
)}
@@ -161,12 +145,14 @@ const GroceryItem = ({
};
const styles = StyleSheet.create({
- checkbox:{
+ checkbox: {
borderRadius: 50,
borderWidth: 1,
color: "#bfbfbf",
borderColor: "#bfbfbf",
- }
-})
+ width: 28,
+ aspectRatio: 1,
+ },
+});
export default GroceryItem;
diff --git a/components/pages/grocery/GroceryList.tsx b/components/pages/grocery/GroceryList.tsx
index 46cf1fa..3d69679 100644
--- a/components/pages/grocery/GroceryList.tsx
+++ b/components/pages/grocery/GroceryList.tsx
@@ -1,6 +1,6 @@
-import { FlatList } from "react-native";
-import React, { useEffect, useState } from "react";
-import { View, Text, ListItem, Button, TextField } from "react-native-ui-lib";
+import { FlatList, StyleSheet } from "react-native";
+import React, { RefObject, useEffect, useState } from "react";
+import { View, Text, ListItem, Button, TextField, TextFieldRef } from "react-native-ui-lib";
import GroceryItem from "./GroceryItem";
import {
IGrocery,
@@ -10,7 +10,7 @@ import {
} from "@/contexts/GroceryContext";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import CategoryDropdown from "./CategoryDropdown";
-import { MaterialIcons } from "@expo/vector-icons";
+import { AntDesign, MaterialIcons } from "@expo/vector-icons";
import EditGroceryItem from "./EditGroceryItem";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
@@ -35,6 +35,9 @@ const GroceryList = () => {
const [title, setTitle] = useState("");
const [submit, setSubmitted] = useState(false);
+ const [pendingVisible, setPendingVisible] = useState(true);
+ const [approvedVisible, setApprovedVisible] = useState(true);
+
// Group approved groceries by category
const approvedGroceriesByCategory = approvedGroceries.reduce(
(groups: any, item: IGrocery) => {
@@ -122,47 +125,98 @@ const GroceryList = () => {
{/* Pending Approval Section */}
-
- Pending Approval
+
+
+ Pending Approval
+ {pendingVisible && (
+ {
+ setPendingVisible(false);
+ }}
+ />
+ )}
+ {!pendingVisible && (
+ {
+ setPendingVisible(true);
+ }}
+ />
+ )}
+
-
+
{pendingGroceries.length.toString()}
- {pendingGroceries.length > 0 ? (
- (
-
- )}
- keyExtractor={(item) => item.id.toString()}
- />
- ) : (
- No items pending approval.
- )}
+ {pendingGroceries.length > 0
+ ? pendingVisible && (
+ (
+
+ )}
+ keyExtractor={(item) => item.id.toString()}
+ />
+ )
+ : pendingVisible && No items pending approval.}
{/* Approved Section */}
-
- Shopping List
+
+
+ Shopping List
+ {approvedVisible && (
+ {
+ setApprovedVisible(false);
+ }}
+ />
+ )}
+ {!approvedVisible && (
+ {
+ setApprovedVisible(true);
+ }}
+ />
+ )}
+
-
+
{approvedGroceries.length.toString()}
@@ -180,38 +234,40 @@ const GroceryList = () => {
)}
{/* Render Approved Groceries Grouped by Category */}
- {approvedGroceries.length > 0 ? (
- (
-
- {/* Render Category Header */}
-
- {category}
-
- {/* Render Grocery Items for this Category */}
- {approvedGroceriesByCategory[category].map(
- (grocery: IGrocery) => (
-
- )
+ {approvedGroceries.length > 0
+ ? approvedVisible && (
+ (
+
+ {/* Render Category Header */}
+
+ {category}
+
+ {/* Render Grocery Items for this Category */}
+ {approvedGroceriesByCategory[category].map(
+ (grocery: IGrocery) => (
+
+ )
+ )}
+
)}
-
- )}
- keyExtractor={(category) => category}
- />
- ) : (
- No approved items.
- )}
+ keyExtractor={(category) => category}
+ />
+ )
+ : approvedVisible && No approved items.}
);
};
+const styles = StyleSheet.create({
+ dropIcon: {
+ marginHorizontal: 10,
+ },
+});
+
export default GroceryList;
diff --git a/components/pages/grocery/GroceryWrapper.tsx b/components/pages/grocery/GroceryWrapper.tsx
index 32e3dc1..18174c5 100644
--- a/components/pages/grocery/GroceryWrapper.tsx
+++ b/components/pages/grocery/GroceryWrapper.tsx
@@ -1,17 +1,33 @@
import { Text, ScrollView } from "react-native";
import { View } from "react-native-ui-lib";
-import React from "react";
+import React, { useEffect, useRef } from "react";
import AddGroceryItem from "./AddGroceryItem";
import GroceryList from "./GroceryList";
import { useGroceryContext } from "@/contexts/GroceryContext";
const GroceryWrapper = () => {
const { isAddingGrocery } = useGroceryContext();
+ const scrollViewRef = useRef(null); // Reference to the ScrollView
+
+ useEffect(() => {
+ if (isAddingGrocery && scrollViewRef.current) {
+ scrollViewRef.current.scrollTo({
+ y: 400, // Adjust this value to scroll a bit down (100 is an example)
+ animated: true,
+ });
+ }
+ }, [isAddingGrocery]);
+
return (
-
-
-
+
+
+
+
+
{!isAddingGrocery && }