Merge pull request #3115 from KBVE/dev

Preparing Alpha Branch
KBVE · Oct 25, 2024 · 9cbd586 · 9cbd586
2 parents b93954f + 6a3dab5
commit 9cbd586
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 56 deletions.
diff --git a/apps/expo-lcagents/src/app/login.tsx b/apps/expo-lcagents/src/app/login.tsx
@@ -6,7 +6,13 @@ import React, {
 	useCallback,
 } from 'react';
 import { YStack, SizableText, ScrollView, View, Button } from 'tamagui';
-import { TamaLogin, LottieAnimation, TamaSheet, useBBQ, TamaSkeleton } from '@kbve/expo-bbq';
+import {
+	TamaLogin,
+	LottieAnimation,
+	TamaSheet,
+	useBBQ,
+	TamaSkeleton,
+} from '@kbve/expo-bbq';
 import { useNavigation } from 'expo-router';
 
 const Login = () => {
@@ -17,8 +23,8 @@ const Login = () => {
 		hideSheet: () => void;
 	} | null>(null);
 	const [sheetMessage, setSheetMessage] = useState('');
-	const [isLoggedIn, setIsLoggedIn] = useState(false); // Track login state
-	const [hasError, setHasError] = useState(false); // Track error state
+	const [isLoggedIn, setIsLoggedIn] = useState(false);
+	const [hasError, setHasError] = useState(false);
 
 	const lottieLoginAnimation = useMemo(
 		() => require('../../assets/json/vr.json'),
@@ -38,8 +44,8 @@ const Login = () => {
 	}, [updateNavigationOptions]);
 
 	const handleSuccess = () => {
-		setIsLoggedIn(true); 
-		setHasError(false); 
+		setIsLoggedIn(true);
+		setHasError(false);
 		if (sheetRef.current) {
 			setSheetMessage('Login successful! ...');
 			sheetRef.current.showSheet();
@@ -49,10 +55,10 @@ const Login = () => {
 	const MemoizedLottieAnimation = React.memo(LottieAnimation);
 
 	const handleError = (error: string) => {
-		setIsLoggedIn(false); 
+		setIsLoggedIn(false);
 		setHasError(true);
 		if (sheetRef.current) {
-			setSheetMessage(error); 
+			setSheetMessage(error);
 			sheetRef.current.showSheet();
 		}
 	};
@@ -62,40 +68,32 @@ const Login = () => {
 			<YStack ai="center" jc="center" paddingVertical={10}>
 				<SizableText>{sheetMessage}</SizableText>
 				{isLoggedIn && !hasError && (
-					<YStack
-					f={1}
-					jc="center"
-					ai="center"
-					padding="$1"
-					gap>
-					<Button
-						onPress={() => {
-							if (sheetRef.current) {
-								sheetRef.current.hideSheet();
-							}
-							router.go('/profile');
-						}}
-						color="green"
-						size="$4"
-						marginTop={10}
-					>
-						Go to Profile
-					</Button>
-
-					<Button
-						onPress={() => {
-							if (sheetRef.current) {
-								sheetRef.current.hideSheet();
-							}
-							router.go('/dashboard');
-						}}
-						color="green"
-						size="$4"
-						marginTop={10}
-					>
-						Go to Dashboard
-					</Button>
+					<YStack f={1} jc="center" ai="center" padding="$1" gap>
+						<Button
+							onPress={() => {
+								if (sheetRef.current) {
+									sheetRef.current.hideSheet();
+								}
+								router.go('/profile');
+							}}
+							color="green"
+							size="$4"
+							marginTop={10}>
+							Go to Profile
+						</Button>
 
+						<Button
+							onPress={() => {
+								if (sheetRef.current) {
+									sheetRef.current.hideSheet();
+								}
+								router.go('/dashboard');
+							}}
+							color="green"
+							size="$4"
+							marginTop={10}>
+							Go to Dashboard
+						</Button>
 					</YStack>
 				)}
 			</YStack>

diff --git a/apps/kbve.com/src/content/journal/10-24.mdx b/apps/kbve.com/src/content/journal/10-24.mdx
@@ -47,6 +47,8 @@ Next we can customize the BBQ router, at least in the future, to have a skeleton
 Damn it seems that the issue still has not been resolved, maybe we could go back to the board and start removing the redirects that we have on all the applications.
 Manually moving from one scene to another would be the only way we can move forward at this point because I still do not understand why we having issues with the redirect.
 
+Ugh okay, I am just going to remove the redirecting because its too much of a pain and we will just present the user with some buttons that will give them the option to go to where they want to go.
+
 **BBQ**
 
 Updated the BBQ component with the base skeleton and added a couple other mount checks.
@@ -57,3 +59,8 @@ This should work but I am still on the fenece.
 
 I am still having some weird issues with the media query but I will have to reference back to the notes and get a better understanding of them.
 There are a couple more things that I want to focus on but we can get there through test casing.
+
+**Captcha**
+
+Maybe the reason we are having that minified bug and react 301 error from the way we are handling the state of the captcha.
+The plan is to track back and see if there are any issues with how we are handling the state management within this component.
diff --git a/packages/expo-bbq/src/components/wrapper/HCaptchaWrapper.tsx b/packages/expo-bbq/src/components/wrapper/HCaptchaWrapper.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { Platform } from 'react-native';
 import { YStack, Button, Text } from 'tamagui';
 import { CheckCircle, XCircle } from '@tamagui/lucide-icons';
@@ -20,11 +20,27 @@ export const HCaptchaWrapper: React.FC<HCaptchaWrapperProps> = ({
 }) => {
   const [captchaStatus, setCaptchaStatus] = useState<'waiting' | 'verified' | 'error' | 'loading'>('waiting');
   const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+  const [isMounted, setIsMounted] = useState(false); // Track mounting status
   const captchaForm = useRef<ConfirmHcaptcha | null>(null); // Ref for mobile captcha
 
+  useEffect(() => {
+    setIsMounted(true); // Mark the component as mounted
+    return () => {
+      setIsMounted(false); // Clean up on unmount
+    };
+  }, []);
+
+  // Memoize the resetCaptcha function with useCallback
+  const resetCaptcha = useCallback(() => {
+    if (isMounted) { // Ensure component is mounted before resetting
+      setCaptchaStatus('waiting');
+      setCaptchaToken(null);
+    }
+  }, [isMounted]);
+
   // Only called when we actually receive a token from captcha
   const onVerify = (captchaToken: string) => {
-    if (captchaToken) {
+    if (isMounted && captchaToken) { // Ensure component is mounted
       setCaptchaToken(captchaToken); // Store the token
       setCaptchaStatus('verified'); // Mark as verified
       onToken(captchaToken); // Pass token back to parent
@@ -33,13 +49,17 @@ export const HCaptchaWrapper: React.FC<HCaptchaWrapperProps> = ({
 
   // Handles errors for both web and mobile
   const onErrorHandler = (err: any) => {
-    const errorMessage = err.message || 'Error with hCaptcha';
-    setCaptchaStatus('error');
-    if (onError) onError(errorMessage); // Pass the error back to parent
+    if (isMounted) { // Only update state if mounted
+      const errorMessage = err.message || 'Error with hCaptcha';
+      setCaptchaStatus('error');
+      if (onError) onError(errorMessage); // Pass the error back to parent
+    }
   };
 
   // Handles mobile captcha events through onMessage
   const onMessage = (event: any) => {
+    if (!isMounted) return; // Only handle messages if component is mounted
+
     const eventData = event?.nativeEvent?.data;
 
     if (eventData === 'open') {
@@ -59,27 +79,25 @@ export const HCaptchaWrapper: React.FC<HCaptchaWrapperProps> = ({
   };
 
   const openCaptcha = () => {
-    setCaptchaStatus('loading'); // Loading state while opening
-    captchaForm.current?.show(); // Show mobile captcha manually using ref
+    if (isMounted) { // Only open captcha if component is mounted
+      setCaptchaStatus('loading'); // Loading state while opening
+      captchaForm.current?.show(); // Show mobile captcha manually using ref
+    }
   };
 
   const handleRetryCaptcha = () => {
-    setCaptchaStatus('waiting');
-    captchaForm.current?.reset(); // Reset and retry on mobile
-  };
-
-  // Function to reset the captcha status back to 'waiting'
-  const resetCaptcha = () => {
-    setCaptchaStatus('waiting');
-    setCaptchaToken(null);
+    if (isMounted) { // Only retry captcha if mounted
+      setCaptchaStatus('waiting');
+      captchaForm.current?.reset(); // Reset and retry on mobile
+    }
   };
 
   // Use useEffect to reset when the reset prop changes
   useEffect(() => {
     if (reset) {
       resetCaptcha(); // Trigger reset when the reset prop changes
     }
-  }, [reset]);
+  }, [reset, resetCaptcha]);
 
   return (
     <YStack alignItems="center" justifyContent="center" padding="$4">