Intro
Below is a more detailed rundown but essentially my data is not displaying until a refresh on first mount. I'm trying to force a reload with rerender but I dont know what I'm missing. . . . . .
Detailed
I am building a React app that shows users data related to their GitHub accounts using GitHub's API. I'm using AWS Amplify on the backend to trigger lambda functions which access the endpoints and from there I handle my json data.
After a user is redirected from GitHubs oauth/authorize they meet the component below. UserPageWrapper has two child components, Navbar and HomePage, although that shouldn't matter for this case. I'll still mention them for reassurance but Navbar simply takes in input which gets another users GitHub data and HomePage gets passed a few props which are set states from the functions in UserPageWrapper.
On first mount (top useEffect), the access token is saved to local storage so it's ready to be passed along with future API requests. I'm updating rerender from there which should trigger a page reload and the states should be set to return related data. What am I missing?
Note - I am still new to react so forgive me if any of my logic seems absurd.
const UserPageWrapper = () => {
const [userData, setUserData] = useState({}); // JSON {}
const [userRepos, setUserRepos] = useState([]); // Array []
const [rerender, setRerender] = useState(false)
// other states ...
// Gets authentification token on first mount
useEffect(() => {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString)
const codeParam = urlParams.get('code')
if (codeParam && (localStorage.getItem("accessToken") === null)){
async function getAccessToken() {
await fetch("https://6xsg7yktw4.execute-api.us-east-2.amazonaws.com/staging/getAccessToken?code=" + codeParam, {
method:"GET"
}).then((response) => {
return response.json()
}).then((data) => {
if(data.access_token) {
localStorage.setItem("accessToken", data.access_token)
** setRerender(!rerender) // Changing rerender to trigger 2nd useEffect
}
})
}
getAccessToken()
}
}, [])
// Handles user data and repo states
useEffect(() => {
// Fetches user and repo data
const fetchData = async () => {
setIsLoading(true); // Start loading
let userInfo; // User Info
let repoScoreInfo; // User repository Score
let userRepoData
try {
// User searched in a user in navbar
if (searchUserData){
if (searchUserData.message === "Not Found") {
return (<div>user not found</div>)
}
userInfo = searchUserData;
fetchUsers(userInfo.login)
}
// UserData is empty
else if (Object.keys(userData).length === 0){
userInfo = await getUserData();
fetchUsers(userInfo.login)
userRepoData = await getRepoData(userInfo.login)
repoScoreInfo = await getRepoScoreInfo(userRepoData)
userExist(userInfo.login, userInfo.avatar_url, repoScoreInfo, userInfo.location)
}
// UserData is not empty - user clicked profile icon in navbar
else {
fetchUsers(userData.login)
setIsLoading(false); // Start loading
}
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData();
** }, [searchUserData, rerender, ]); //
.
.
.
. /// Below are all the functions that relate to my component
```