so i have created a instagram clone in which i go to the profile section its saying user not found but in my code when i remove the “finally” block its showing only the skeleton but it should show the profile in 1sec pls help me solve it enter image description herethis image is when the finally block is written,enter image description hereand this image is when the finally block is removed there is some kind of logic error please help me solve it and this is the code for the
useGetUserProfileByUsername.js
import { useEffect, useState } from "react";
import useShowToast from "./useShowToast";
import { collection, getDocs, query, where } from "firebase/firestore";
import { firestore } from "../firebase/firebase";
import useUserProfileStore from "../store/userProfileStore";
const useGetUserProfileByUsername = (username) => {
const [isLoading, setIsLoading] = useState(true);
const showToast = useShowToast();
const {userProfile, setUserProfile} = useUserProfileStore();
useEffect(() => {
const getUserProfile = async () => {
setIsLoading(true);
try {
const q = query(
collection(firestore, "users"),
where("username", "==", username)
);
const querySnapshot = await getDocs(q);
if (querySnapshot.empty) return setUserProfile(null);
let userDoc;
querySnapshot.forEach((doc) => {
userDoc = doc.data();
});
setUserProfile(userDoc);
console.log(userDoc);
} catch (error) {
showToast("Error", error.message, "error");
}
};
getUserProfile();
}, [setUserProfile,username,showToast]);
return {isLoading, userProfile};
};
export default useGetUserProfileByUsername;
and this is the code for
UserProfileStore.js
import { create } from "zustand";
const useUserProfileStore = create((set) => ({
userProfile : null,
setUserProfile : (userProfile) => set({userProfile})
}))
export default useUserProfileStore
and this is the code for
ProfilePage.jsx
import { Container,Flex, Skeleton, SkeletonCircle, Text, VStack } from "@chakra-ui/react"
import ProfileHeader from "../../components/Profile/ProfileHeader"
import ProfilePosts from "../../components/Profile/ProfilePosts"
import ProfileTabs from "../../components/Profile/ProfileTabs"
import useGetUserProfileByUsername from "../../hooks/useGetUserProfileByUsername"
import { Link, useParams } from "react-router-dom"
import {Link as RouterLink} from "react-router-dom"
const ProfilePage = () => {
const {username} = useParams()
const {isLoading,userProfile} = useGetUserProfileByUsername(username)
const userNotFound = !isLoading && !userProfile
if (userNotFound) return <UserNotFound />
return (
<Container maxW={"container.lg"} py={5}>
<Flex py={10} px={4} pl={{base:4,md:10}} w={"full"} mx={"auto"} flexDirection={"column"}>
{!isLoading && userProfile && <ProfileHeader />}
{isLoading && <ProfileHeaderSkeleton />}
</Flex>
<Flex
px={{base:2,sm:4}}
maxW={"full"}
mx={"auto"}
borderTop={"1px solid"}
borderColor={"whiteAlpha.300"}
direction={"column"}
>
<ProfileTabs/>
<ProfilePosts/>
</Flex>
</Container>
)
}
export default ProfilePage
const ProfileHeaderSkeleton = () => {
return (
<Flex
gap={{ base: 4, sm: 10 }}
py={10}
direction={{ base: "column", sm: "row" }}
justifyContent={"center"}
alignItems={"center"}
>
<SkeletonCircle size='24' />
<VStack alignItems={{ base: "center", sm: "flex-start" }} gap={2} mx={"auto"} flex={1}>
<Skeleton height='12px' width='150px' />
<Skeleton height='12px' width='100px' />
</VStack>
</Flex>
);
};
const UserNotFound = () => {
return (
<Flex flexDir={"column"} textAlign={"center"} mx={"auto"}>
<Text fontSize={"2xl"} >
User Not Found
</Text>
<Link as={RouterLink} to={"/"} color={"blue.500"} w={"max-content"} mx={"auto"}>
Go Home
</Link>
</Flex>
)
}
I have tried chatgpt but its saying Debugging Tips
Check Firebase Configuration:
Ensure your Firebase project is correctly set up and the Firestore rules allow read access.
Add Logging:
Add more logging inside the getUserProfile function to check what is happening at each step.
Test Query Separately:
Run the Firestore query separately in a simple script to ensure it returns the expected results.
Kaushik shaw is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2