After running a Graphql query, I am calling a showUsers function from getUserIdwhich is supposed to display all the users in a styled box.
Currently in my showUsersfunction, even when the 'Number of Users in Loop: ', numberOfUsers is 1, I get multiple (3-4) console.logs for the same
console.log('Whats the Id', userId);console.log('UserName', userName);console.log('LOOP');I don't understand what I am doing wrong. Perhaps something with the useStates?
Here's my full code:
export const Page: React.FunctionComponent<PageProps> = ({ toggleShowPage, showAddFriendEmailPage,}) => { const initialValues: FormValues = { email: '', }; const [errorMessage, setErrorMessage] = useState(''); const [userData, setUserData] = useState<UsersLazyQueryHookResult>(''); const [numberOfUsers, setNumberOfUsers] = useState(''); const validationSchema = emailValidationSchema; useEffect(() => { setUserData(userData); setNumberOfUsers(numberOfUsers); }, [userData, numberOfUsers]); const showAlert = () => { Alert.alert('Friend Added'); }; useEffect(() => { if (showAddFriendEmailPage) return; initialValues.email = ''; }, [showAddFriendEmailPage]); const _onLoadUserError = React.useCallback((error: ApolloError) => { setErrorMessage(error.message); Alert.alert('Unable to Add Friend'); }, []); const [ createUserRelationMutation, { data: addingFriendData, loading: addingFriendLoading, error: addingFriendError, called: isMutationCalled, }, ] = useCreateUserRelationMutation({ onCompleted: (data: CreateUserRelationMutationResult) => { showAlert(); }, }); const showUsers = React.useCallback( (data: UsersLazyQueryHookResult, numberOfUsers: Number) => { for (var i = 0; i < numberOfUsers; i++) { console.log('Number of Users in Loop: ', numberOfUsers); const userId = data.users.nodes[i].id; const userName = ((data.users.nodes[i].firstName).concat('')).concat(data.users.nodes[i].lastName); console.log('Whats the Id', userId); console.log('UserName', userName); console.log('Loop'); return(<View style={styles.friends}><View style={styles.item}><Text>{userName}</Text></View></View> ) } }, [createUserRelationMutation], ); const addFriend = React.useCallback( (id: Number) => { console.log('Whats the Id', id); createUserRelationMutation({ variables: { input: { relatedUserId: id, type: RelationType.Friend, userId: 7 }, }, }); }, [createUserRelationMutation], ); const getFriendId = React.useCallback( (data: UsersLazyQueryHookResult) => { if (data) { if (data.users.nodes.length == 0) { setErrorMessage('User Not Found'); Alert.alert('User Not Found'); } else { setUserData(data); setNumberOfUsers(data.users.nodes.length); showUsers(data, Number(numberOfUsers)); addFriend(Number(data.users.nodes[0].id)); } } }, [addFriend], ); const [loadUsers] = useUsersLazyQuery({ onCompleted: getFriendId, onError: _onLoadUserError, }); const handleSubmitForm = React.useCallback( (values: FormValues, helpers: FormikHelpers<FormValues>) => { console.log('Submitted'); loadUsers({ variables: { where: { email: values.email }, }, }); values.email = ''; }, [loadUsers], ); return (<Modal visible={showAddFriendEmailPage} animationType="slide" transparent={true}><SafeAreaView><View style={styles.container}><View style={styles.searchTopContainer}><Formik initialValues={initialValues} onSubmit={handleSubmitForm} validationSchema={validationSchema}> {({ handleChange, handleBlur, handleSubmit, values }) => (<View style={styles.searchFieldContainer}><View style={styles.form}><FieldInput handleChange={handleChange} handleBlur={handleBlur} value={values.email} fieldType="email" /><ErrorMessage name="email" render={msg => (<Text style={styles.errorText}>{msg}</Text> )} /></View><View style={styles.buttonContainer}><Button rounded style={styles.button} onPress={handleSubmit}><Text style={styles.text}>Add Friend </Text></Button></View></View> )}</Formik></View> {showUsers(userData, Number(numberOfUsers))}</View></View></SafeAreaView></Modal> );};