# #reactjs #react-hooks #firebase-authentication #local-storage #firebase-storage
Вопрос:
Я использую 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 };