diff --git a/components/HeartButton.js b/components/HeartButton.js index d20e847..430a0f6 100644 --- a/components/HeartButton.js +++ b/components/HeartButton.js @@ -1,16 +1,17 @@ -import { firestore, auth, increment } from '@lib/firebase'; +import { firestore, auth } from '@lib/firebase'; +import { collection, doc, increment, writeBatch } from 'firebase/firestore'; import { useDocument } from 'react-firebase-hooks/firestore'; // Allows user to heart or like a post export default function Heart({ postRef }) { // Listen to heart document for currently logged in user - const heartRef = postRef.collection('hearts').doc(auth.currentUser.uid); + const heartRef = doc(collection(postRef, 'hearts'), auth.currentUser.uid); const [heartDoc] = useDocument(heartRef); // Create a user-to-post relationship const addHeart = async () => { const uid = auth.currentUser.uid; - const batch = firestore.batch(); + const batch = writeBatch(firestore); batch.update(postRef, { heartCount: increment(1) }); batch.set(heartRef, { uid }); @@ -20,7 +21,7 @@ export default function Heart({ postRef }) { // Remove a user-to-post relationship const removeHeart = async () => { - const batch = firestore.batch(); + const batch = writeBatch(firestore); batch.update(postRef, { heartCount: increment(-1) }); batch.delete(heartRef); @@ -28,7 +29,7 @@ export default function Heart({ postRef }) { await batch.commit(); }; - return heartDoc?.exists ? ( + return heartDoc?.exists() ? ( ) : ( diff --git a/components/ImageUploader.js b/components/ImageUploader.js index 66831f2..616bd82 100644 --- a/components/ImageUploader.js +++ b/components/ImageUploader.js @@ -1,5 +1,6 @@ import { useState } from 'react'; -import { auth, storage, STATE_CHANGED } from '@lib/firebase'; +import { auth, storage } from '@lib/firebase'; +import { getDownloadURL, ref, uploadBytesResumable } from "firebase/storage"; import Loader from './Loader'; // Uploads images to Firebase Storage @@ -15,25 +16,33 @@ export default function ImageUploader() { const extension = file.type.split('/')[1]; // Makes reference to the storage bucket location - const ref = storage.ref(`uploads/${auth.currentUser.uid}/${Date.now()}.${extension}`); + const fileRef = ref( storage, `uploads/${auth.currentUser.uid}/${Date.now()}.${extension}` ); setUploading(true); // Starts the upload - const task = ref.put(file); - - // Listen to updates to upload task - task.on(STATE_CHANGED, (snapshot) => { - const pct = ((snapshot.bytesTransferred / snapshot.totalBytes) * 100).toFixed(0); - setProgress(pct); - }); - - // Get downloadURL AFTER task resolves (Note: this is not a native Promise) - task - .then((d) => ref.getDownloadURL()) - .then((url) => { - setDownloadURL(url); + const task = uploadBytesResumable(fileRef, file); + + // Get downloadURL AFTER task resolves + task.on( + "state_changed", + (snapshot) => { + const pct = ( + (snapshot.bytesTransferred / snapshot.totalBytes) * + 100 + ).toFixed(0); + setProgress(Number(pct)); + }, + (error) => { + // TODO handle error setUploading(false); - }); + }, + () => { + getDownloadURL(task.snapshot.ref).then((url) => { + setDownloadURL(url); + setUploading(false); + }); + } + ); }; return ( diff --git a/components/Navbar.js b/components/Navbar.js index a92710e..5d0f128 100644 --- a/components/Navbar.js +++ b/components/Navbar.js @@ -19,7 +19,7 @@ export default function Navbar() {