Small fixes

components/pages/brain_dump/AddBrainDump.tsx

@@ -1,151 +1,149 @@
-import {
-  View,
-  Text,
-  Button,
-  TextField,
-  TextFieldRef,
-  TouchableOpacity,
-} from "react-native-ui-lib";
-import React, { useEffect, useState, useRef } from "react";
-import { Dialog } from "react-native-ui-lib";
-import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
-import { Dimensions, Keyboard, StyleSheet } from "react-native";
+import {Button, Dialog, TextField, TextFieldRef, TouchableOpacity, View,} from "react-native-ui-lib";
+import React, {useEffect, useRef, useState} from "react";
+import {PanningDirectionsEnum} from "react-native-ui-lib/src/incubator/panView";
+import {Dimensions, StyleSheet} from "react-native";
 
 import DropModalIcon from "@/assets/svgs/DropModalIcon";
-import { useBrainDumpContext } from "@/contexts/DumpContext";
+import {useBrainDumpContext} from "@/contexts/DumpContext";
 import KeyboardManager from "react-native-keyboard-manager";
 
 
 interface IAddBrainDumpProps {
-  isVisible: boolean;
-  setIsVisible: (value: boolean) => void;
+    isVisible: boolean;
+    setIsVisible: (value: boolean) => void;
 }
 
 const AddBrainDump = ({
-  addBrainDumpProps,
-}: {
-  addBrainDumpProps: IAddBrainDumpProps;
+                          addBrainDumpProps,
+                      }: {
+    addBrainDumpProps: IAddBrainDumpProps;
 }) => {
-  const { addBrainDump } = useBrainDumpContext();
-  const [dumpTitle, setDumpTitle] = useState<string>("");
-  const [dumpDesc, setDumpDesc] = useState<string>("");
-  const { width } = Dimensions.get("screen");
+    const {addBrainDump} = useBrainDumpContext();
+    const [dumpTitle, setDumpTitle] = useState<string>("");
+    const [dumpDesc, setDumpDesc] = useState<string>("");
+    const {width} = Dimensions.get("screen");
 
 
-  // Refs for the two TextFields
-  const descriptionRef = useRef<TextFieldRef>(null);
-  const titleRef = useRef<TextFieldRef>(null);
+    // Refs for the two TextFields
+    const descriptionRef = useRef<TextFieldRef>(null);
+    const titleRef = useRef<TextFieldRef>(null);
 
-  useEffect(() => {
-    setDumpDesc("");
-    setDumpTitle("");
-  }, [addBrainDumpProps.isVisible]);
+    useEffect(() => {
+        setDumpDesc("");
+        setDumpTitle("");
+    }, [addBrainDumpProps.isVisible]);
 
-  useEffect(() => {
-    setTimeout(() => {
-      titleRef?.current?.focus()
-    }, 500)
-  }, []);
+    useEffect(() => {
+        if (addBrainDumpProps.isVisible) {
+            setTimeout(() => {
+                titleRef?.current?.focus()
+            }, 500)
+        }
+    }, [addBrainDumpProps.isVisible]);
 
-  useEffect(() => {
-    KeyboardManager.setEnableAutoToolbar(false);
-  },[])
+    useEffect(() => {
+        KeyboardManager.setEnableAutoToolbar(false);
+    }, [])
 
-  return (
-    <Dialog
-      bottom={true}
-      height={"90%"}
-      width={width}
-      panDirection={PanningDirectionsEnum.DOWN}
-      onDismiss={() => addBrainDumpProps.setIsVisible(false)}
-      containerStyle={styles.dialogContainer}
-      visible={addBrainDumpProps.isVisible}
-    >
-      <View row spread style={styles.topBtns} marginB-20>
-        <Button
-          color="#05a8b6"
-          label="Cancel"
-          style={styles.topBtn}
-          onPress={() => {
-            addBrainDumpProps.setIsVisible(false);
-          }}
-        />
-        <TouchableOpacity onPress={() => addBrainDumpProps.setIsVisible(false)}>
-          <DropModalIcon style={{ marginTop: 15 }} />
-        </TouchableOpacity>
-        <Button
-          color="#05a8b6"
-          label="Save"
-          style={styles.topBtn}
-          onPress={() => {
-            addBrainDump({ id: 99, title: dumpTitle.trimEnd().trimStart(), description: dumpDesc.trimEnd().trimStart() });
-            addBrainDumpProps.setIsVisible(false);
-          }}
-        />
-      </View>
-      <View marginH-20>
-        <TextField
-          value={dumpTitle}
-          ref={titleRef}
-          placeholder="Set Title"
-          text60R
-          onChangeText={(text) => {
-            setDumpTitle(text);
-          }}
-          onSubmitEditing={() => {
-            // Move focus to the description field
-            descriptionRef.current?.focus();
-          }}
-          style={styles.title}
-          blurOnSubmit={false} // Keep the keyboard open when moving focus
-          returnKeyType="next"
-        />
-        <View height={2} backgroundColor="#b3b3b3" width={"100%"} marginB-20 />
-        <TextField
-          ref={descriptionRef}
-          value={dumpDesc}
-          placeholder="Write Description"
-          text70
-          onChangeText={(text) => {
-            setDumpDesc(text);
-          }}
-          style={styles.description}
-          multiline
-          numberOfLines={4}
-          maxLength={255}
-          onEndEditing={() => {
-            descriptionRef.current?.blur();
-          }}
-          returnKeyType="done"
-        />
-      </View>
-    </Dialog>
-  );
+    return (
+        <Dialog
+            bottom={true}
+            height={"90%"}
+            width={width}
+            panDirection={PanningDirectionsEnum.DOWN}
+            onDismiss={() => addBrainDumpProps.setIsVisible(false)}
+            containerStyle={styles.dialogContainer}
+            visible={addBrainDumpProps.isVisible}
+        >
+            <View row spread style={styles.topBtns} marginB-20>
+                <Button
+                    color="#05a8b6"
+                    label="Cancel"
+                    style={styles.topBtn}
+                    onPress={() => {
+                        addBrainDumpProps.setIsVisible(false);
+                    }}
+                />
+                <TouchableOpacity onPress={() => addBrainDumpProps.setIsVisible(false)}>
+                    <DropModalIcon style={{marginTop: 15}}/>
+                </TouchableOpacity>
+                <Button
+                    color="#05a8b6"
+                    label="Save"
+                    style={styles.topBtn}
+                    onPress={() => {
+                        addBrainDump({
+                            id: 99,
+                            title: dumpTitle.trimEnd().trimStart(),
+                            description: dumpDesc.trimEnd().trimStart()
+                        });
+                        addBrainDumpProps.setIsVisible(false);
+                    }}
+                />
+            </View>
+            <View marginH-20>
+                <TextField
+                    value={dumpTitle}
+                    ref={titleRef}
+                    placeholder="Set Title"
+                    text60R
+                    onChangeText={(text) => {
+                        setDumpTitle(text);
+                    }}
+                    onSubmitEditing={() => {
+                        // Move focus to the description field
+                        descriptionRef.current?.focus();
+                    }}
+                    style={styles.title}
+                    blurOnSubmit={false} // Keep the keyboard open when moving focus
+                    returnKeyType="next"
+                />
+                <View height={2} backgroundColor="#b3b3b3" width={"100%"} marginB-20/>
+                <TextField
+                    ref={descriptionRef}
+                    value={dumpDesc}
+                    placeholder="Write Description"
+                    text70
+                    onChangeText={(text) => {
+                        setDumpDesc(text);
+                    }}
+                    style={styles.description}
+                    multiline
+                    numberOfLines={4}
+                    maxLength={255}
+                    onEndEditing={() => {
+                        descriptionRef.current?.blur();
+                    }}
+                    returnKeyType="done"
+                />
+            </View>
+        </Dialog>
+    );
 };
 
 const styles = StyleSheet.create({
-  dialogContainer: {
-    borderTopRightRadius: 15,
-    borderTopLeftRadius: 15,
-    backgroundColor: "white",
-    padding: 0,
-    paddingTop: 3,
-    margin: 0,
-  },
-  topBtns: {},
-  topBtn: {
-    backgroundColor: "white",
-    color: "#05a8b6",
-  },
-  title: {
-    fontSize: 22,
-    fontFamily: "Manrope_500Medium",
-  },
-  description: {
-    fontFamily: "Manrope_400Regular",
-    fontSize: 14,
-    textAlignVertical: 'top'
-  },
+    dialogContainer: {
+        borderTopRightRadius: 15,
+        borderTopLeftRadius: 15,
+        backgroundColor: "white",
+        padding: 0,
+        paddingTop: 3,
+        margin: 0,
+    },
+    topBtns: {},
+    topBtn: {
+        backgroundColor: "white",
+        color: "#05a8b6",
+    },
+    title: {
+        fontSize: 22,
+        fontFamily: "Manrope_500Medium",
+    },
+    description: {
+        fontFamily: "Manrope_400Regular",
+        fontSize: 14,
+        textAlignVertical: 'top'
+    },
 });
 
 export default AddBrainDump;