fixes, deleteFamily function, household signup

components/pages/feedback/AddFeedback.tsx

@@ -32,8 +32,11 @@ const AddFeedback = ({
   const descriptionRef = useRef<TextFieldRef>(null);
   const titleRef = useRef<TextFieldRef>(null);
 
+  const isTitleValid = feedbackTitle.trim().length >= 3;
+
   useEffect(() => {
     setFeedback("");
+    setFeedbackTitle("");
   }, [addFeedbackProps.isVisible]);
 
   useEffect(() => {
@@ -46,9 +49,8 @@ const AddFeedback = ({
 
   useEffect(() => {
     if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(false);
-
-    setFeedbackTitle("");
-    setFeedback("");
+    setFeedbackTitle('');
+    setFeedback('');
   }, []);
 
   return (
@@ -76,16 +78,17 @@ const AddFeedback = ({
         <Button
           color="#05a8b6"
           label="Save"
-          style={styles.topBtn}
+          style={[styles.topBtn, !isTitleValid && styles.disabledBtn]}
+          disabled={!isTitleValid}
           onPress={() => {
-            addFeedback({
-              id: 99,
-
-              title: feedbackTitle.trimEnd().trimStart(),
-
-              text: feedback.trimEnd().trimStart(),
-            });
-            addFeedbackProps.setIsVisible(false);
+            if (isTitleValid) {
+              addFeedback({
+                id: 99,
+                title: feedbackTitle.trim(),
+                text: feedback.trim(),
+              });
+              addFeedbackProps.setIsVisible(false);
+            }
           }}
         />
       </View>
@@ -142,6 +145,9 @@ const styles = StyleSheet.create({
     backgroundColor: "white",
     color: "#05a8b6",
   },
+  disabledBtn: {
+    opacity: 0.2,
+  },
   title: {
     fontSize: 22,
     fontFamily: "Manrope_500Medium",
@@ -153,4 +159,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default AddFeedback;
+export default AddFeedback;

components/pages/feedback/Feedback.tsx

@@ -10,7 +10,7 @@ const Feedback = (props: { item: IFeedback }) => {
   const [isVisible, setIsVisible] = useState<boolean>(false);
 
   return (
-    <View>
+    <View key={props.item.id}>
       <TouchableWithoutFeedback onPress={() => setIsVisible(true)}>
         <View
           backgroundColor="white"

components/pages/feedback/FeedbackList.tsx

@@ -1,13 +1,13 @@
-import { View } from "react-native-ui-lib";
+import { View, Text } from "react-native-ui-lib";
 import React from "react";
-import { FlatList } from "react-native";
+import { StyleSheet } from "react-native";
 import { useFeedbackContext } from "@/contexts/FeedbackContext";
 import Feedback from "./Feedback";
 
 const FeedbackList = (props: { searchText: string }) => {
   const { feedbacks } = useFeedbackContext();
 
-  const filteredBrainDumps =
+  const filteredFeedbacks =
     props.searchText.trim() === ""
       ? feedbacks
       : feedbacks.filter(
@@ -20,16 +20,24 @@ const FeedbackList = (props: { searchText: string }) => {
 
   return (
     <View marginB-70>
-      <FlatList
-        style={{ zIndex: -1 }}
-        data={filteredBrainDumps}
-        keyExtractor={(item) => item.title}
-        renderItem={({ item }) => (
-          <Feedback key={item.title} item={item} />
-        )}
-      />
+      {filteredFeedbacks?.length ? (
+        filteredFeedbacks.map((item) => (
+          <Feedback key={item.id} item={item} />
+        ))
+      ) : (
+        <Text marginT-20 center style={styles.alert}>
+          You have no Feedbacks
+        </Text>
+      )}
     </View>
   );
 };
 
-export default FeedbackList;
+const styles = StyleSheet.create({
+  alert: {
+    fontFamily: "PlusJakartaSans_300Light", 
+    fontSize: 20
+  }
+});
+
+export default FeedbackList;