added confirmation dialogs, fixed scroll wheels ui tweaks

components/pages/brain_dump/MoveBrainDump.tsx

@@ -18,6 +18,7 @@ import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
 import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
 import RemindersIcon from "@/assets/svgs/RemindersIcon";
 import MenuIcon from "@/assets/svgs/MenuIcon";
+import BrainDumpDialog from "./BrainDumpDialog";
 
 const MoveBrainDump = (props: {
   item: IBrainDump;
@@ -28,12 +29,26 @@ const MoveBrainDump = (props: {
   const [description, setDescription] = useState<string>(
     props.item.description
   );
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+
   const { width } = Dimensions.get("screen");
 
   useEffect(() => {
     updateBrainDumpItem(props.item.id, { description: description });
   }, [description]);
 
+  const showConfirmationDialog = () => {
+    setModalVisible(true);
+  };
+
+  const handleDeleteNote = () =>{
+    deleteBrainDump(props.item.id);
+  }
+
+  const hideConfirmationDialog = () => {
+    setModalVisible(false);
+  }
+
   return (
     <Dialog
       bottom={true}
@@ -81,8 +96,7 @@ const MoveBrainDump = (props: {
             marginL-5
             iconSource={() => <BinIcon />}
             onPress={() => {
-              deleteBrainDump(props.item.id);
-              props.setIsVisible(false);
+              showConfirmationDialog();
             }}
           />
         </View>
@@ -145,6 +159,7 @@ const MoveBrainDump = (props: {
           </View>
         </TouchableOpacity>
       </View>
+      <BrainDumpDialog visible={modalVisible} title={props.item.title} onDismiss={hideConfirmationDialog} onConfirm={handleDeleteNote} />
     </Dialog>
   );
 };
@@ -191,10 +206,10 @@ const styles = StyleSheet.create({
     fontSize: 22,
     fontFamily: "Manrope_500Medium",
   },
-  description:{
+  description: {
     fontFamily: "Manrope_400Regular",
     fontSize: 14,
-  }
+  },
 });
 
 export default MoveBrainDump;