React states are being properly updated on an action

22 views Asked by At
const [image_URL, setImageURL] = useState(null) // To store the URL of image

const [edu_list, setEduList] = useState([]) // To store array of educational qualification
const [skill_list, setSkillList] = useState([]) // To store array of skills
const [project_list, setProjectList] = useState([]) // To store array of skills
const [language_list, setLanguageList] = useState([]) // To store array of languages

const [certificate_list, setCertificateList] = useState([]) // To store array of certificate
const [certificate_url_list, setCertificateURLList] = useState([]) //To store the array of uploaded document url

const saveChanges = async () => {

        setEdit(false)
        setInputBox1(false)
        setInputBox2(false)
        setInputBox3(false)
        setInputBox4(false)
        setInputBox5(false)

        try {

            if (certificate_list) {

                const store_urls = []

                for (let certificate of certificate_list) { // This will upload the all certificates to firebase storage

                    const certificateRef = ref(FirebaseStorage, `Certificates/${user_details.email}/${certificate.text}`)
                    const response = await uploadBytes( certificateRef , certificate.preview )
                    const downloadURL = await getDownloadURL( response.ref )
                    store_urls.push( { url : downloadURL , text: certificate.text } )

                }

                setCertificateURLList( previous => [ ...previous , ...store_urls ] )

            }

            if (image) { // This will upload the profile picture to firebase storage

                const dpRef = ref(FirebaseStorage,
                    `Profile pictures/${user_details.user_type}/${user_details.email}/${image.name}`)
                
                const response = await uploadBytes(dpRef, image)
                const downloadURL = await getDownloadURL( response.ref )
                setImageURL( downloadURL )

            }

            console.log( 'Certificates = ' , certificate_url_list )
            console.log('Profile picture = ' , image_URL)

            const user_ref = collection(FirebaseFirestore, 'Users')  // Selects the collection
            const condition = where('email', '==', user_details.email) // Providing the condition for selecting the user
            const selected_user = query(user_ref, condition) // Selects the user from the total collection

            await getDocs(selected_user).then(async (user_document) => { // This code will upload the data to firebase firestore

                const userDocRef = user_document.docs[0].ref
                await updateDoc(userDocRef, {

                    username: new_username,
                    phone_number: new_phonenumber,
                    location: location,
                    age: age,
                    experience: experience,
                    summary: summary,
                    profile_picture: image_URL,
                    educational_qualification: edu_list,
                    skills: skill_list,
                    projects: project_list,
                    languages_known: language_list,
                    certificates: certificate_url_list,
                    job_applied: 0,
                    job_saved: 0,
                    profile_views: 0,


                }).then(alert('Profile is updated'))
                    .catch((error) => alert(error.message, 'Data are not updated'))

            }).catch((error) => console.log(error.message, 'Error with getdocs'))

        } catch (error) { console.log(error.message) }

    }

In the provided code, I have been trying to update an existing document in the Firebase Firestore after uploading. I am uploading the list of certificates one by one and a picture into Firebase Storage, and they are stored in storage and return the URL of the corresponding files.

However, when I try to store the URLs such as certificate URLs into 'certificate_url_list' using 'setCertificateURLList' and the profile picture URL into 'image_URL' using 'setImageURL' functions, they are not getting stored properly. So the 'certificate' and 'profile_picture' fields in the 'updateDoc' become null and are not stored in the Firebase Firestore.

0

There are 0 answers