diff --git a/components/pages/brain_dump/AddBrainDump.tsx b/components/pages/brain_dump/AddBrainDump.tsx index 33fd602..29c6f2c 100644 --- a/components/pages/brain_dump/AddBrainDump.tsx +++ b/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(""); - const [dumpDesc, setDumpDesc] = useState(""); - const { width } = Dimensions.get("screen"); + const {addBrainDump} = useBrainDumpContext(); + const [dumpTitle, setDumpTitle] = useState(""); + const [dumpDesc, setDumpDesc] = useState(""); + const {width} = Dimensions.get("screen"); - // Refs for the two TextFields - const descriptionRef = useRef(null); - const titleRef = useRef(null); + // Refs for the two TextFields + const descriptionRef = useRef(null); + const titleRef = useRef(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 ( - addBrainDumpProps.setIsVisible(false)} - containerStyle={styles.dialogContainer} - visible={addBrainDumpProps.isVisible} - > - - - ); + return ( + addBrainDumpProps.setIsVisible(false)} + containerStyle={styles.dialogContainer} + visible={addBrainDumpProps.isVisible} + > + + + ); }; 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; diff --git a/components/pages/brain_dump/MoveBrainDump.tsx b/components/pages/brain_dump/MoveBrainDump.tsx index 7480767..8143509 100644 --- a/components/pages/brain_dump/MoveBrainDump.tsx +++ b/components/pages/brain_dump/MoveBrainDump.tsx @@ -1,11 +1,11 @@ -import React, { useEffect, useState } from "react"; +import React, {useEffect, useRef, useState} from "react"; import { Button, Dialog, View, Text, TextField, - TouchableOpacity, + TouchableOpacity, TextFieldRef, } from "react-native-ui-lib"; import { Dimensions, StyleSheet } from "react-native"; import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView"; @@ -30,6 +30,7 @@ const MoveBrainDump = (props: { props.item.description ); const [modalVisible, setModalVisible] = useState(false); + const descriptionRef = useRef(null) const { width } = Dimensions.get("screen"); @@ -37,6 +38,14 @@ const MoveBrainDump = (props: { updateBrainDumpItem(props.item.id, { description: description }); }, [description]); + useEffect(() => { + if (props.isVisible) { + setTimeout(() => { + descriptionRef?.current?.focus() + }, 500) + } + }, [props.isVisible]); + const showConfirmationDialog = () => { setModalVisible(true); }; @@ -112,7 +121,6 @@ const MoveBrainDump = (props: { { setDescription(value); }} + ref={descriptionRef} returnKeyType="default" /> diff --git a/components/pages/main/SignInPage.tsx b/components/pages/main/SignInPage.tsx index f18d0c5..cd4b1fa 100644 --- a/components/pages/main/SignInPage.tsx +++ b/components/pages/main/SignInPage.tsx @@ -1,7 +1,16 @@ -import {Button, ButtonSize, Dialog, Text, TextField, TextFieldRef, View,} from "react-native-ui-lib"; +import { + Button, + ButtonSize, Colors, + Dialog, + KeyboardAwareScrollView, LoaderScreen, Modal, + Text, + TextField, + TextFieldRef, + View, +} from "react-native-ui-lib"; import React, {useRef, useState} from "react"; import {useSignIn} from "@/hooks/firebase/useSignIn"; -import {StyleSheet} from "react-native"; +import {KeyboardAvoidingView, Platform, StyleSheet} from "react-native"; import Toast from "react-native-toast-message"; import {useLoginWithQrCode} from "@/hooks/firebase/useLoginWithQrCode"; import {Camera, CameraView} from "expo-camera"; @@ -19,8 +28,10 @@ const SignInPage = ({ const [showCameraDialog, setShowCameraDialog] = useState(false); const passwordRef = useRef(null); - const {mutateAsync: signIn, error, isError} = useSignIn(); - const {mutateAsync: signInWithQrCode} = useLoginWithQrCode(); + const {mutateAsync: signIn, error, isError, isLoading: isSigninIn} = useSignIn(); + const {mutateAsync: signInWithQrCode, isLoading: isQRCodeLoggingIn} = useLoginWithQrCode(); + + const isLoading = isSigninIn || isQRCodeLoggingIn const handleSignIn = async () => { await signIn({email, password}); @@ -64,8 +75,13 @@ const SignInPage = ({ }; return ( - - + + { // Move focus to the description field passwordRef.current?.focus(); @@ -99,62 +117,64 @@ const SignInPage = ({ style={{marginBottom: 20, height: 50}} backgroundColor="#fd1775" /> -