110 lines
2.8 KiB
JavaScript
110 lines
2.8 KiB
JavaScript
import React, { useState, useCallback, useEffect } from "react";
|
|
import "./App.css";
|
|
import SignupModal from "./components/SignupModal.jsx";
|
|
import Login from "./components/Login.jsx";
|
|
import "bootstrap/dist/css/bootstrap.min.css";
|
|
import Col from "react-bootstrap/Col";
|
|
import Row from "react-bootstrap/Row";
|
|
import RecentLogins from "./components/RecentLogins.jsx";
|
|
import Button from "react-bootstrap/Button";
|
|
import UserAccount from "./components/UserAccount";
|
|
import PasswordReminderModal from "./components/PasswordReminderModal";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { subscribeAuth } from "./backend/backend";
|
|
import { profileLinkSet } from "./features/accountPage/accountPageSlice";
|
|
|
|
function App() {
|
|
const user = useSelector((state) => state.user);
|
|
const dispatch = useDispatch();
|
|
|
|
useEffect(() => {
|
|
const unsubscribe = subscribeAuth();
|
|
return unsubscribe;
|
|
}, []);
|
|
|
|
//Handle the modal
|
|
const [show, setShow] = useState(false);
|
|
|
|
function handleClose() {
|
|
setShow(false);
|
|
}
|
|
|
|
function handleShow() {
|
|
setShow(true);
|
|
}
|
|
|
|
const handleCloseCallback = useCallback(handleClose, []);
|
|
|
|
//get the first and lastName for the route of the profile
|
|
const name =
|
|
(user && user.displayName && user.displayName.trim().split(" ")) || [];
|
|
|
|
const lastName = name.pop();
|
|
|
|
const firstName = name.join(" ");
|
|
|
|
const profileLink = `/fakebook/${lastName}.${firstName}`;
|
|
|
|
|
|
useEffect(() => dispatch(profileLinkSet(profileLink)), [profileLink, dispatch]);
|
|
|
|
//handling the password reminder button
|
|
const [isModalSignup, setModalSignup] = useState(true);
|
|
|
|
function handleClickPasswordReminderBtn() {
|
|
setModalSignup(false);
|
|
handleShow();
|
|
}
|
|
|
|
if (user.isLoading) {
|
|
return <div>...Loading</div>;
|
|
}
|
|
|
|
if (user.isSignedIn && !user.error) {
|
|
if (user.isEmailVerified) return <UserAccount />;
|
|
else return <></>;
|
|
} else {
|
|
return (
|
|
<Col className="bg-200 vh-100">
|
|
<Row className="h-100 align-items-center">
|
|
<Col
|
|
lg={{ span: 5, offset: 1 }}
|
|
className="d-flex justify-content-center">
|
|
<RecentLogins />
|
|
</Col>
|
|
<Col lg={5} className="bg-200 d-flex justify-content-center">
|
|
<div className="login p-3 bg-light">
|
|
<Login
|
|
onClickForgottenPswd={handleClickPasswordReminderBtn}
|
|
></Login>
|
|
|
|
<hr />
|
|
|
|
<Button
|
|
variant="success"
|
|
size="lg"
|
|
className="d-block w-60 mx-auto mt-4"
|
|
onClick={handleShow}>
|
|
<b>Create New Account</b>
|
|
</Button>
|
|
</div>
|
|
</Col>
|
|
|
|
<SignupModal
|
|
show={show && isModalSignup}
|
|
onHide={handleCloseCallback}
|
|
onExit={() => setModalSignup(true)}></SignupModal>
|
|
|
|
<PasswordReminderModal
|
|
show={show && !isModalSignup}
|
|
onHide={handleClose}
|
|
onExit={() => setModalSignup(true)}
|
|
/>
|
|
</Row>
|
|
</Col>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|