import React, { useState, useContext } from "react";
import { useHistory } from "react-router-dom";
import { FirebaseContext } from "../context/firebase";
import { HeaderContainer, FooterContainer } from "../containers/index";
import { Form } from "../components/index";
import * as ROUTES from "../constants/routes";

export default function SignUp() {
	const { firebase } = useContext(FirebaseContext);
	const history = useHistory();

	const [firstName, setFirstName] = useState("");
	const [email, setEmail] = useState("");
	const [password, setPassword] = useState("");
	const [errorMessage, setErrorMessage] = useState("");

	// Check form input elements are valid
	const isInvalid = firstName === "" || password === "" || email === "";

	const handleSignUp = (event) => {
		event.preventDefault();

		firebase
			.auth()
			.createUserWithEmailAndPassword(email, password)
			.then((res) => {
				res.user
					.updateProfile({
						displayName: firstName,
						photoURL: Math.floor(Math.random() * 5) + 1
					})
					.then(() => {
						history.push(ROUTES.BROWSE);
					});
			})
			.catch((error) => {
				setErrorMessage(error.code);
			});
	};
	return (
		<>
			<HeaderContainer status="hidden">
				<Form>
					<Form.Title>Sign Up</Form.Title>
					{errorMessage && (
						<Form.ErrorMessage>{errorMessage}</Form.ErrorMessage>
					)}
					<Form.Base onSubmit={handleSignUp} method="POST">
						<Form.Input
							placeholder="First name"
							value={firstName}
							onChange={({ target }) =>
								setFirstName(target.value)
							}
						/>
						<Form.Input
							type="email"
							placeholder="Your email"
							value={email}
							onChange={({ target }) => setEmail(target.value)}
						/>
						<Form.Input
							type="password"
							placeholder="Your password"
							value={password}
							onChange={({ target }) => setPassword(target.value)}
						/>
						<Form.Button disabled={isInvalid} type="submit">
							Sign Up
						</Form.Button>
						<Form.FlexBox style={{ justifyContent: "flex-end" }}>
							<Form.SmallLink to="/">Need help?</Form.SmallLink>
						</Form.FlexBox>
					</Form.Base>
					<Form.Wrapper
						style={{
							flexDirection: "column",
							alignItems: "flex-start"
						}}
					>
						<Form.SocialButton>
							<Form.Image src="./images/icons/FB-Logo.png" />
							<Form.SmallLink to="/">
								Login with Facebook
							</Form.SmallLink>
						</Form.SocialButton>
						<Form.Text style={{ marginBottom: "0" }}>
							Already a user?{" "}
							<Form.RedirectLink to={ROUTES.SIGN_IN}>
								Sign in now
							</Form.RedirectLink>
							.
						</Form.Text>
						<Form.SmallText>
							This page is protected by Google reCAPTCHA to ensure
							you're not a bot.{" "}
							<Form.SmallLink to="/" style={{ color: "#0071eb" }}>
								Learn more
							</Form.SmallLink>
							.
						</Form.SmallText>
					</Form.Wrapper>
				</Form>
			</HeaderContainer>
			<FooterContainer />
		</>
	);
}

import React from "react";
import { Route, Redirect } from "react-router-dom";

export function IsUser({ user, LoggedInPath, children, ...rest }) {
	return (
		<Route
			{...rest}
			render={() => {
				if (!user) {
					return children;
				}
				if (user) {
					return <Redirect to={{ pathname: LoggedInPath }} />;
				}
				return null;
			}}
		/>
	);
}

export function ProtectedRoute({ user, children, ...rest }) {
	return (
		<Route
			{...rest}
			render={({ location }) => {
				if (user) {
					return children;
				}
				if (!user) {
					return (
						<Redirect
							to={{
								pathname: "signin",
								state: { from: location }
							}}
						/>
					);
				}

				return null;
			}}
		/>
	);
}

import React from "react";
import { BrowserRouter } from "react-router-dom";
import * as ROUTES from "./constants/routes";
import { Home, SignIn, SignUp, Browse } from "./pages/index";
import { IsUser, ProtectedRoute } from "./helpers/routes"; //<------------ import here

export default function App() {
	const user = null;
	return (
		<BrowserRouter>
			{/*Use it here*/}
			<IsUser
				user={user}
				path={ROUTES.SIGN_IN}
				LoggedInPath={ROUTES.BROWSE}
			>
				<SignIn />
			</IsUser>
			<IsUser
				user={user}
				path={ROUTES.SIGN_UP}
				LoggedInPath={ROUTES.BROWSE}
			>
				<SignUp />
			</IsUser>
			<ProtectedRoute user={user} path={ROUTES.BROWSE} exact>
				<Browse />
			</ProtectedRoute>
			<IsUser user={user} path={ROUTES.HOME} LoggedInPath={ROUTES.BROWSE}>
				<Home />
			</IsUser>
		</BrowserRouter>
	);
}

import React, { useState, useContext, useEffect } from "react";
import { FirebaseContext } from "../context/firebase";

export default function useAuthListener() {
	const [user, setUser] = useState(
		JSON.parse(localStorage.getItem("authUser"))
	);
	const { firebase } = useContext(FirebaseContext);

	useEffect(() => {
		const listener = firebase.auth().onAuthStateChanged((authUser) => {
			if (authUser) {
				localStorage.setItem("authUser", JSON.stringify(authUser));
				setUser(authUser);
			} else {
				localStorage.removeItem("authUser");
				setUser(null);
			}
		});
		return () => listener();
	}, [firebase]);
	return { user };
}

import useAuthListener from "./useAuthListener";

export { useAuthListener };

import React from "react";
import { BrowserRouter } from "react-router-dom";
import * as ROUTES from "./constants/routes";
import { Home, SignIn, SignUp, Browse } from "./pages/index";
import { IsUser, ProtectedRoute } from "./helpers/routes";
import { useAuthListener } from "./hooks/index"; //<---------- Import here

export default function App() {
	const { user } = useAuthListener(); //<---------- Use it here
	return (
		<BrowserRouter>
			<IsUser
				user={user}
				path={ROUTES.SIGN_IN}
				LoggedInPath={ROUTES.BROWSE}
			>
				<SignIn />
			</IsUser>
			<IsUser
				user={user}
				path={ROUTES.SIGN_UP}
				LoggedInPath={ROUTES.BROWSE}
			>
				<SignUp />
			</IsUser>
			<ProtectedRoute user={user} path={ROUTES.BROWSE} exact>
				<Browse />
			</ProtectedRoute>
			<IsUser user={user} path={ROUTES.HOME} LoggedInPath={ROUTES.BROWSE}>
				<Home />
			</IsUser>
		</BrowserRouter>
	);
}