fix: clunky login in kids app #17

Signed-off-by: Jeet Viramgama <[email protected]>

src/frontend_kids/contexts/ChildContext.jsx

@@ -42,10 +42,6 @@ export default function ChildProvider({ children }) {
   useCheckIsUserNewToTransactions({ handleUpdateCalloutState });
   useCheckIsUserNewToSwipeActions({ handleUpdateCalloutState });
 
-  const handleUpdateChild = (...args) => {
-    setChild((prevState) => ({ ...prevState, ...args?.[0] }));
-  };
-
   async function getBalance(childID) {
     return new Promise((resolve, reject) => {
       get("balance-" + childID, store)
@@ -147,11 +143,7 @@ export default function ChildProvider({ children }) {
     const balance = actor
       ?.getBalance(child.id)
       .then(async (returnedBalance) => {
-        setChild({
-          id: child.id,
-          balance: parseInt(returnedBalance),
-          name: child.name,
-        });
+        setChild((prevState) => ({ ...prevState, balance: parseInt(returnedBalance) }));
       });
 
     promises.push(balance);
@@ -268,7 +260,6 @@ export default function ChildProvider({ children }) {
       blockingChildUpdate,
       setTransactions,
       transactions,
-      handleUpdateChild,
       setTasks,
       tasks,
       setRewards,
@@ -289,7 +280,6 @@ export default function ChildProvider({ children }) {
     setBlockingChildUpdate,
     setTransactions,
     transactions,
-    handleUpdateChild,
     setTasks,
     tasks,
     setRewards,

src/frontend_kids/screens/LoggedOut.jsx

@@ -37,12 +37,14 @@ function checkForIOS() {
 
 function LoggedOut() {
   const { login, isAuthenticated, isLoading, logout, store, actor } = useAuth();
-  const { getBalance, handleUpdateChild } = React.useContext(ChildContext);
+  const { getBalance, child, setChild } = React.useContext(ChildContext);
   const [code, setCode] = useState(null);
   const [error, setError] = useState("");
   const clearContextState = useClearContextState();
   const [checkingCode, setCheckingCode] = useState(false)
 
+  const [isAuthenticatedWithChildData, setIsAuthenticatedWithChildData] = useState(!!(isAuthenticated && child?.id))
+
   React.useEffect(() => {
     if (!isLoading && !isAuthenticated) {
       logout();
@@ -60,7 +62,6 @@ function LoggedOut() {
     }
     setCheckingCode(true)
     const data = await login(code);
-    setCheckingCode(false)
 
     if (!data) {
       setError("Incorrect or expired magic code.");
@@ -75,11 +76,12 @@ function LoggedOut() {
     const balance = await getBalance(data);
     const name = await actor.getChild(data);
     set("selectedChildName", name, store)
-
-    handleUpdateChild({ id: data, name: name, balance: parseInt(balance) })
+    setChild({ name: name, id: data, balance: parseInt(balance) })
+    setCheckingCode(false)
+    setIsAuthenticatedWithChildData(true)
   };
 
-  if (!isLoading && isAuthenticated) {
+  if (!isLoading && isAuthenticatedWithChildData) {
     return <Navigate to="/" replace />;
   }