fixes and bug features

components/pages/grocery/GroceryItem.tsx

@@ -9,6 +9,7 @@ import { IGrocery } from "@/hooks/firebase/types/groceryData";
 import { UserProfile } from "@/hooks/firebase/types/profileTypes";
 import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 import { useGetUserById } from "@/hooks/firebase/useGetUserById";
+import { useDeleteGrocery } from "@/hooks/firebase/useDeleteGrocery";
 
 const GroceryItem = ({
   item,
@@ -20,6 +21,7 @@ const GroceryItem = ({
   onInputFocus: (y: number) => void;
 }) => {
   const { updateGroceryItem } = useGroceryContext();
+  const { mutateAsync: deleteGrocery } = useDeleteGrocery();
   const { profileData } = useAuthContext();
   const { data: creator } = useGetUserById(item.creatorId);
   const isParent = profileData?.userType === ProfileType.PARENT;
@@ -120,9 +122,10 @@ const GroceryItem = ({
                   name="close"
                   size={24}
                   style={{ color: "red" }}
-                  onPress={() =>
-                    handleItemApproved(item.id, { approved: false })
-                  }
+                  onPress={() => {
+                    handleItemApproved(item.id, { approved: false });
+                    deleteGrocery(item.id);
+                  }}
                 />
               </>
             )}

components/pages/main/SignInPage.tsx

@@ -7,6 +7,7 @@ import {
   Text,
   TextField,
   TextFieldRef,
+  TouchableOpacity,
   View,
 } from "react-native-ui-lib";
 import React, { useEffect, useRef, useState } from "react";
@@ -23,6 +24,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { useRouter } from "expo-router";
 import * as Device from "expo-device";
 import { DeviceType } from "expo-device";
+import { AntDesign } from "@expo/vector-icons";
 
 if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(true);
 
@@ -44,6 +46,7 @@ const SignInPage = () => {
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
   const passwordRef = useRef<TextFieldRef>(null);
+  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
 
   const isTablet: boolean = Device.deviceType === DeviceType.TABLET;
   const [isPortrait, setIsPortrait] = useState(() => {
@@ -130,7 +133,7 @@ const SignInPage = () => {
               textContentType={"emailAddress"}
               defaultValue={email}
               onChangeText={setEmail}
-              style={styles.textfield}
+              style={[styles.textfield, styles.jakartaLight, {fontSize: 13}]}
               autoComplete={"email"}
               autoCorrect={false}
               onSubmitEditing={() => {
@@ -138,16 +141,30 @@ const SignInPage = () => {
                 passwordRef.current?.focus();
               }}
             />
+            <View
+              centerV
+              style={[styles.textfield, { padding: 0, paddingHorizontal: 30 }]}
+            >
             <TextField
-              ref={passwordRef}
-              placeholder="Password"
-              textContentType={"oneTimeCode"}
-              value={password}
-              onChangeText={setPassword}
-              secureTextEntry
-              style={styles.textfield}
-              autoCorrect={false}
-            />
+                ref={passwordRef}
+                placeholder="Password"
+                style={[styles.jakartaLight, {fontSize: 13}]}
+                value={password}
+                onChangeText={setPassword}
+                secureTextEntry={!isPasswordVisible}
+                trailingAccessory={
+                  <TouchableOpacity
+                    onPress={() => setIsPasswordVisible(!isPasswordVisible)}
+                  >
+                    <AntDesign
+                      name={isPasswordVisible ? "eye" : "eyeo"}
+                      size={24}
+                      color="gray"
+                    />
+                  </TouchableOpacity>
+                }
+              />
+              </View>
           </KeyboardAvoidingView>
 
           {isTablet ? <View /> : <View flexG />}

hooks/firebase/useDeleteGrocery.ts

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from "react-query";
+import firestore from "@react-native-firebase/firestore";
+
+export const useDeleteGrocery = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ["deleteGrocery"],
+    mutationFn: async (groceryId: string) => {
+      try {
+        await firestore().collection("Groceries").doc(groceryId).delete();
+      } catch (e) {
+        console.error(e);
+        throw new Error("Failed to delete the grocery item.");
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries("groceries");
+    },
+  });
+};