Блог

Я использую firebase для отслеживания входа / регистрации пользователя через базу данных firestore, а также для хранения некоторых фотографий через хранилище firebase.

если пользователь вошел в систему, некоторая информация о пользователе отображается в нескольких местах, таких как имя пользователя, и если пользователь загружает фотографию, то она будет отображаться.

если пользователь не подписан, текст имени пользователя заменяется на «Пользователь не найден». А также отображаются фотографии-заполнители. Теперь, если я обновлю страницу или вызову повторную визуализацию, загруженная фотография исчезнет, и фотография-заполнитель появится снова, но пользователь останется в системе, и имя пользователя по-прежнему отображается.

Это нормально ? кажется, я, должно быть, делаю что-то не так, я бы предположил, что фотография не должна исчезать при повторной визуализации/обновлении и исчезать только при выходе из системы.

Я подозреваю, что это потому, что я храню фотографии в хранилище firebase, а не в коллекции пользователей в базе данных firestore? И если это так, могу ли я по-прежнему использовать хранилище firebase для фотографий, чтобы они не исчезали, как есть.

На боковой ноте
У меня также есть версия этого кода, в которой я сохраняю фотографии в localStorage, которая отлично работает до тех пор, пока вы не выйдете из системы, что позволяет по-прежнему отображать фотографии, в то время как имена пользователей не отображаются. Теперь я знаю, что мог бы создать функцию для очистки локального хранилища при выходе, но если бы я снова вошел в систему, изображения, очевидно, исчезли бы, если я не ошибаюсь ?

В любом случае
Вот компонент профиля, содержащий код хранилища firebase:

 import React, { useState } from 'react'; import ReactTooltip from 'react-tooltip'; import { useUserContext, useUserContextUpdate, useUserNameUpdate } from '../../Utilities/Context/UserContext'; import { storage } from "../../Utilities/Firebase/Firebase.utils"; import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";  import ActivityFeed from '../../../src/components/ActivityFeed/ActivityFeed'; import Post from '../../../src/components/Post/Post';  import './Profile.css';  const Profile = ({ imageDate }) =gt; {  const currentUser = useUserContext(); // Current user  const sliceDisplayName = useUserNameUpdate(); // Window width lt; (width) ? update displayName length  const [image, setImage] = useState("");  const [url, setUrl] = useState("");   const metadata = { contentType: 'image/jpeg' };  const storageRef = ref(storage, 'images/'   image.name);  const uploadTask = uploadBytesResumable(storageRef, image, metadata);  // console.log(image.name)  console.log(url)  console.log(storageRef)  console.log(currentUser)   // Listen for state changes, errors, and completion of the upload.  const handleUpload = () =gt; {  const uploadTask = storage.ref(`images/${image.name}`).put(image, metadata);  uploadTask.on('state_changed',  (snapshot) =gt; { console.log(snapshot) },  (error) =gt; {  switch (error.code) {  case 'storage/unauthorized':  break;  case 'storage/canceled':  break;  case 'storage/unknown':  break;  }  },  (e) =gt; {  storage  .ref("images")  .child(image.name)  .getDownloadURL(uploadTask.snapshot.ref)  .then(url =gt; {  setUrl(url);  console.log('File available at', url);  })  }  );  }  console.log("image: ", image);  console.log(image.lastModifiedDate)  console.log(url)   const handleUploadChange = e =gt; {   if (e.target.files[0]) {  setImage(e.target.files[0]);  }  };   return (  lt;div className="container-flex"gt;  lt;div className="top-content-container w-100"gt;  lt;div className="bot-content-wrapper px-1 py-2 mx-lg-auto d-flex flex-column flex-lg-row"gt;  lt;div className="w-spacer profile-image-wrapper position-relative"gt;  lt;input  type="file"  for="Upload Image"  accept="image/*"  name="image"  id="file"  onChange={handleUploadChange}  onClick={handleUploadChange}  style={{ display: "none" }}  /gt;  lt;label for="file"gt;  {  url.length lt;= 0 ?  lt;img  id='myimg'  className="profile-image-default profile-image d-block"  alt=""  /gt;  :  lt;gt;  lt;img  id='myimg'  className="profile-image d-block"  src={url}  alt=""  data-tip="Click me to update profile picture!" /gt;   lt;ReactTooltip place="top" type="dark" effect="float" /gt;  lt;/gt;  }  lt;/labelgt;  lt;/divgt;  lt;div className="d-flex flex-column flex-lg-row align-items-lg-center w-lg-75 m-l-4"gt;  lt;div className="d-flex flex-column flex-lg-row ml-auto pr-1 m-r-md-vw"gt;  lt;div className="m-r-md"gt;  lt;div className="d-flex flex-column w-100 m-r-6"gt;  lt;divgt;  {  currentUser ?  lt;h2  data-tip={currentUser.displayName}gt;  {sliceDisplayName(currentUser)}  lt;spangt;lt;ReactTooltip place="top" type="dark" effect="float" /gt;lt;/spangt;  lt;/h2gt;  :  lt;h2gt;No Userlt;/h2gt;  }  lt;/divgt;  lt;div className="d-flex flex-column flex-lg-row"gt;  lt;div className=""gt;  lt;i className="bi bi-people"gt;lt;/igt;  lt;span className="banner-list-font mx-1"gt;0 friendslt;/spangt;  lt;/divgt;  lt;div className="mx-lg-2"gt;  lt;i className="bi bi-star"gt;lt;/igt;  lt;span className="banner-list-font mx-1"gt;0 reviewslt;/spangt;  lt;/divgt;  lt;div className=""gt;  lt;i className="bi bi-camera"gt;lt;/igt;  lt;span className="banner-list-font mx-1"gt;0 photoslt;/spangt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;hr className=" d-lg-none" style={{ color: '#0a0a0a' }}gt;lt;/hrgt;  lt;div className="ml-3"gt;  lt;div className="update-profile-wrapper grey-line-break d-flex flex-column m-l"gt;  lt;div className=""gt;  {  image.name !== undefined ?  lt;button  className="banner-list-font"  onClick={handleUpload}  // onClick={() =gt; {  // handleUpload();  // forceUpdate();  // }}  gt;Add Profile Photo  lt;/buttongt;  : ''  }  lt;/divgt;  lt;div className=""gt;  lt;a className="banner-list-font" href='#'gt;Update Your Profilelt;/agt;  lt;/divgt;  lt;div className=""gt;  lt;a className="banner-list-font" href='#'gt;Find Friendslt;/agt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div className="bot-content-container px-1 py-4 custom-padding"gt;  lt;div className="bot-content-wrapper mx-lg-auto d-flex flex-column flex-lg-row"gt;  lt;div className="sidebar d-flex flex-column mx-auto mx-lg-0 mt-lg-5 py-lg-2 px-2"gt;  {  currentUser ?  lt;h4 className="mb-3"gt;{currentUser.displayName}lt;/h4gt;  :  lt;h4 className="mb-3"gt;No Userlt;/h4gt;  }  lt;ul className="p-0"gt;  lt;a className="cursor-pointer text-decoration-none"gt;  lt;li className="d-flex flex-row sidebar-item sidebar-list-font"gt;  lt;i className="mx-2 bi bi-person-badge"gt;lt;/igt;  lt;h5 className="sidebar-list-font"gt;Overviewlt;/h5gt;  lt;/ligt;  lt;hr style={{ color: '#0a0a0a' }}gt;lt;/hrgt;  lt;/agt;  lt;a className="cursor-pointer text-decoration-none"gt;  lt;li className="d-flex flex-row sidebar-item sidebar-list-font"gt;  lt;i className="mx-2 bi bi-person-plus"gt;lt;/igt;  lt;h5 className="sidebar-list-font"gt;Friendslt;/h5gt;  lt;/ligt;  lt;hr style={{ color: '#0a0a0a' }}gt;lt;/hrgt;  lt;/agt;  lt;a className="cursor-pointer text-decoration-none"gt;  lt;li className="d-flex flex-row sidebar-item sidebar-list-font"gt;  lt;i className="mx-2 bi bi-award mx-1"gt;lt;/igt;  lt;h5 className="sidebar-list-font"gt;Reviewslt;/h5gt;  lt;/ligt;  lt;hr style={{ color: '#0a0a0a' }}gt;lt;/hrgt;  lt;/agt;  lt;a className="cursor-pointer text-decoration-none"gt;  lt;li className="d-flex flex-row sidebar-item sidebar-list-font"gt;  lt;i className="mx-2 bi bi-lightbulb"gt;lt;/igt;  lt;h5 className="sidebar-list-font"gt;Tipslt;/h5gt;  lt;/ligt;  lt;hr style={{ color: '#0a0a0a' }}gt;lt;/hrgt;  lt;/agt;  lt;a className="cursor-pointer text-decoration-none"gt;  lt;li className="d-flex flex-row sidebar-item sidebar-list-font"gt;  lt;i className="mx-2 bi bi-bookmark-star"gt;lt;/igt;  lt;h5 className="sidebar-list-font"gt;Bookmarkslt;/h5gt;  lt;/ligt;  lt;hr style={{ color: '#0a0a0a' }}gt;lt;/hrgt;  lt;/agt;  lt;a className="cursor-pointer text-decoration-none"gt;  lt;li className="d-flex flex-row sidebar-item sidebar-list-font"gt;  lt;i className="mx-2 bi bi-bookmarks"gt;lt;/igt;  lt;h5 className="sidebar-list-font"gt;Collectionslt;/h5gt;  lt;/ligt;  lt;hr style={{ color: '#0a0a0a' }}gt;lt;/hrgt;  lt;/agt;  lt;a className="cursor-pointer text-decoration-none"gt;  lt;li className="d-flex flex-row sidebar-item sidebar-list-font"gt;  lt;i className="mx-2 bi bi-calendar-check"gt;lt;/igt;  lt;h5 className="sidebar-list-font"gt;Eventslt;/h5gt;  lt;/ligt;  lt;hr style={{ color: '#0a0a0a' }}gt;lt;/hrgt;  lt;/agt;  lt;a className="cursor-pointer text-decoration-none"gt;  lt;li className="d-flex flex-row sidebar-item sidebar-list-font"gt;  lt;i className="mx-2 bi bi-clock-history"gt;lt;/igt;  lt;h5 className="sidebar-list-font"gt;Order Historylt;/h5gt;  lt;/ligt;  lt;hr style={{ color: '#0a0a0a' }}gt;lt;/hrgt;  lt;/agt;  lt;/ulgt;  lt;/divgt;  lt;div className="d-flex flex-column flex-lg-row w-100-md w-75-lg p-3 p-lg-0 m-l-4 pt-lg-3 pt-xl-4"gt;  lt;div className="activity m-l-3"gt;  lt;h3 className="heading-red"gt;Notificationslt;/h3gt;  lt;p className="font-14"gt;No new friend requests or compliments at this time.lt;/pgt;  lt;hr className="d-none d-lg-block" style={{ color: '#0a0a0a' }}gt;lt;/hrgt;  lt;h3 className="heading-red"gt;Recent Activitylt;/h3gt;  {lt;ActivityFeed /gt;}  {lt;Post /gt;}  lt;/divgt;  lt;hr className="d-lg-none" style={{ color: '#0a0a0a' }}gt;lt;/hrgt;  lt;div className="grey-line-break ml-3"gt;  lt;h3 className="heading-red mb-1 break-word"gt;About  {  currentUser ?  lt;h3  data-tip={currentUser.displayName}  className="heading-red mb-1"gt;  {sliceDisplayName(currentUser)}  lt;spangt;lt;ReactTooltip place="top" type="dark" effect="float" /gt;lt;/spangt;  lt;/h3gt;  :  lt;h3 className="heading-red mb-1"gt;No Userlt;/h3gt;  }  lt;/h3gt;  lt;h5 className="about-subHeading mt-2"gt;Yelping Sincelt;/h5gt;  lt;p className="font-14"gt;Some monthlt;/pgt;  lt;h5 className="about-subHeading mt-2"gt;Things I Lovelt;/h5gt;  lt;p className="font-14"gt;You haven't said yet...lt;/pgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  ); };  export default Profile;  

Вот конфигурация и настройка firebase:

 import firebase from 'firebase/compat/app'; import 'firebase/compat/firestore'; import 'firebase/compat/auth'; import "firebase/compat/storage";  const config = {  apiKey: "",  authDomain: "",  projectId: "",  storageBucket: "",  messagingSenderId: "",  appId: "",  measurementId: "" };  firebase.initializeApp(config);  export const createUserProfileDocument = async (userAuth, additionalData) =gt; {  // If user is not signed in do nothing  if (!userAuth) return;   const userRef = firestore.doc(`users/${userAuth.uid}`)   const snapShot = await userRef.get()   if (!snapShot.exists) {  const { displayName, email } = userAuth;  const createdAt = new Date();   try {  await userRef.set({  displayName,  email,  createdAt,  ...additionalData  })  } catch (error) {  console.log('error creating user', error.message)  }  }   return userRef; }  export const auth = firebase.auth(); export const firestore = firebase.firestore(); const storage = firebase.storage();;   export { storage, firebase as default };