Hướng dẫn clone instagram với React JS và Firebase phần 4.

import React, { useState, useEffect } from "react";
import "./App.css";
import Header from "./components/Header/Header";
import PostItem from "./components/PostItem/PostItem";
import { db } from "./firebaseConfig";
import { collection, getDocs } from "firebase/firestore";
import { makeStyles } from "@material-ui/core/styles";
import Modal from "@material-ui/core/Modal";


function getModalStyle() {
	const top = 50;
	const left = 50;

	return {
		top: `${top}%`,
		left: `${left}%`,
		transform: `translate(-${top}%, -${left}%)`,
	};
}

const useStyles = makeStyles((theme) => ({
	paper: {
		position: "absolute",
		width: 400,
		backgroundColor: theme.palette.background.paper,
		border: "2px solid #000",
		boxShadow: theme.shadows[5],
		padding: theme.spacing(2, 4, 3),
	},
}));

function App() {
	const [posts, setPosts] = useState([]);
	const [open, setOpen] = useState(false); // Check open modal
	const classes = useStyles();
	const [modalStyle] = React.useState(getModalStyle);

	//useEffect -> Runs a piece of code based on a specific condition.
	useEffect(() => {
		// this is where the code runs
		getData();
	}, []);

	const getData = async () => {
		const postsCol = collection(db, "posts");
		const snapshot = await getDocs(postsCol);
		setPosts(
			snapshot.docs.map((doc) => ({
				id: doc.id,
				post: doc.data(),
			}))
		);
	};

	const handleClickSignUp = (childData) => {
		setOpen(childData);
	}

	return (
		<div className="App">
			{/* Header */}
			<Header takeMessSignUp={handleClickSignUp} />
			{/* Posts */}
			<div className="Post__list">
				{posts.map(({ id, post }) => (
					<PostItem key={id} data={post} />
				))}
			</div>
			<Modal open={open} onClose={() => setOpen(false)}>
				<div style={modalStyle} className={classes.paper}>
					<h2 id="simple-modal-title">Text in a modal</h2>
				</div>
			</Modal>
		</div>
	);
}

export default App;

import React, { useState } from "react";
import Button from "@material-ui/core/Button";
import "./Style-Header.css";

export default function Header(props) {
	const [openModal, setOpenModal] = useState(true);

	const transferMesageSignUp = () => {
		setOpenModal(true);
		props.takeMessSignUp(openModal);
	};

	return (
		<div className="container">
			<div className="header">
				<div className="header__logo">
					<a href="/#">
						<img
							src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
							alt="Logo"
						/>
					</a>
				</div>
				<div className="header__search">
					<input type="text" placeholder="Tìm kiếm" />
					<i className="bx bx-search-alt-2"></i>
				</div>
				<div className="header__login">
					<Button
						onClick={transferMesageSignUp}
						className="btn btn-login"
					>
						Sign up
					</Button>
				</div>
			</div>
		</div>
	);
}

import firebase from 'firebase/compat';

const firebaseApp = firebase.initializeApp( {
    apiKey: "***************************************",
    authDomain: "***************************************",
    databaseURL: "***************************************",
    projectId: "***************************************",
    storageBucket: "***************************************",
    messagingSenderId: "************",
    appId: "***************************************",
    measurementId: "************"
});

const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
const storage = firebaseApp.storage();

export { db, auth, storage };

import { auth, db } from "./firebaseConfig";
//...
import { Button, Input } from '@material-ui/core';

//...

function App() {
    //...
	const [email, setEmail] = useState('');
	const [password, setPassword] = useState('');
	const [username, setUsername] = useState('');
	const [user, setUser] = useState(null);
	//...

	//useEffect -> Runs a piece of code based on a specific condition.
	useEffect(() => {
		// this is where the code runs
		getData();
	}, []);

	useEffect(() => {
		const unSubcribe = auth.onAuthStateChanged((authUser) => {
			if(authUser) {
				// user has logged in...
				setUser(authUser);
                setUsername(authUser.displayName);

				if(authUser.displayName) {
					//don't update username
				} else {
					// if we just create someone...
					return updateProfile(authUser, {
						displayName: username,
					});
				}
			} else {
				// user has logged out...
				setUser(null);
			}
		});
		return () => {
			// Perform some cleanup actions
			unSubcribe();
		}
	}, [user, username])

	const getData = async () => {
		const postsCol = collection(db, "posts");
		const snapshot = await getDocs(postsCol);
		setPosts(
			snapshot.docs.map((doc) => ({
				id: doc.id,
				post: doc.data(),
			}))
		);
	};

	const handleClickSignUp = (childData) => {
		setOpenModal(childData);
	}

	const handleSignUp = (event) => {
		event.preventDefault();
		auth.createUserWithEmailAndPassword(email, password).then((authUser) => {
			return authUser.user.updateProfile({
				displayName: username
			});
		}).catch((error) => alert(error.message));
		setOpenModal(false);
	}

	return (
		<div className="App">
			{/* Header */}
			<Header takeMessSignUp={handleClickSignUp} />
			{/* Posts */}
			<div className="Post__list">
				{posts.map(({ id, post }) => (
					<PostItem key={id} data={post} />
				))}
			</div>
			{/* Modal form sign up */}
			<Modal open={openModal} onClose={() => setOpenModal(false)}>
				<div style={modalStyle} className={classes.paper}>
					<form className="form__signup">
						<img className="form__logo"
							src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
							alt="Logo"
						/>
						<div className="form__group">
							<label>User name:</label>
							<Input className="form__field" placeholder="username" type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
						</div>
						<div className="form__group">
							<label>Email:</label>
							<Input className="form__field" placeholder="email" type="text" value={email} onChange={(e) => setEmail(e.target.value)} />
						</div>
						<div className="form__group">
							<label>Password:</label>
							<Input className="form__field" placeholder="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
						</div>
						<Button className="btn-signup" onClick={handleSignUp}>Sign up</Button>
					</form>
				</div>
			</Modal>
		</div>
	);
}

export default App;
'>Copy