리엑트 블로그 만들기 9 - 회원가입
리엑트 블로그 만들기 15 - Post Card List 만들기 2 리엑트 블로그 만들기 14 - Post Card List 만들기 리엑트 블로그 만들기 13 - 라우트 리엑트 블로그 만들기 12 - Loading 만들기 리엑트 블로그 만들기 11 - 회원가입 리덕스 작업 리엑트 블로그 만들기 10 - 회원가입 2 리엑트 블로그 만들기 9 - 회원가입 리엑트 블로그 만들기 8 - 로그인 & 로그아웃 리엑트 블로그 만들기 7 - Login Modal 만들기 2 리엑트 블로그 만들기 6 - Login Modal 만들기 1 리엑트 블로그 만들기 5 - 리덕스 세팅하기 리엑트 블로그 만들기 4 - Navbar 작성하기 리엑트 블로그 만들기 3 - Header 작성하기 리엑트 블로그 만들기 2 - Footer 작성하기 리엑트 블로그 만들기 1 - 초기 setting 하기 리엑트 블로그 만들기 9 - 회원가입// REGISTERexport const REGISTER_REQUEST = "REGISTER_REQUEST";export const REGISTER_SUCCESS = "REGISTER_SUCCESS";export const REGISTER_FAILURE = "REGISTER_FAILURE"; import React, { useEffect, useState } from "react";import { useDispatch, useSelector } from "react-redux";import { Alert, Button, Form, FormGroup, Input, Label, Modal, ModalBody, ModalHeader, NavLink,} from "reactstrap";import { CLEAR_ERROR_REQUEST, REGISTER_REQUEST } from "../../redux/types";const RegisterModal = () => { const [modal, setModal] = useState(false); const [form, setValue] = useState({ name: "", email: "", password: "", }); const [localMsg, setLocalMsg] = useState(""); const { errorMsg } = useSelector((state) => state.auth); const dispatch = useDispatch(); const handleToggle = () => { dispatch({ type: CLEAR_ERROR_REQUEST, }); setModal(!modal); }; useEffect(() => { try { setLocalMsg(errorMsg); } catch (e) { console.error(e); } }, [errorMsg]); const onChange = (e) => { setValue({ ...form, [e.target.name]: e.target.value, }); }; const onSubmit = (e) => { e.preventDefault(); const { name, email, password } = form; const newUser = { name, email, password }; console.log(newUser, "newUser"); dispatch({ type: REGISTER_REQUEST, payload: newUser, }); }; return ( <div> <NavLink onClick={handleToggle} href="#"> Register </NavLink> <Modal isOpen={modal} toggle={handleToggle}> <ModalHeader toggle={handleToggle}>Register</ModalHeader> <ModalBody> {localMsg ? <Alert color="danger"></Alert> : null} <Form onSubmit={onSubmit}> <FormGroup> <Label for="name">Name</Label> <Input type="text" name="name" id="name" placeholder="Name" onChange={onChange} /> <Label for="email">Email</Label> <Input type="text" name="email" id="email" placeholder="email" onChange={onChange} /> <Label for="password">Password</Label> <Input type="text" name="password" id="password" placeholder="Password" onChange={onChange} /> <Button color="dark" className="mt-2" block> Register </Button> </FormGroup> </Form> </ModalBody> </Modal> </div> );};export default RegisterModal; import React, { Fragment, useCallback, useEffect, useState } from "react";import { useDispatch, useSelector } from "react-redux";import { Link } from "react-router-dom";import { Button, Collapse, Container, Form, Nav, Navbar, NavbarToggler, NavItem,} from "reactstrap";import { LOGOUT_REQUEST } from "../redux/types";import LoginModal from "./auth/LoginModal";import RegisterModal from "./auth/RegisterModal";const AppNavbar = () => { const [isOpen, setIsOpen] = useState(false); const { isAuthenticated, user, userRole } = useSelector( (state) => state.auth ); console.log(userRole, "UserRole"); const dispatch = useDispatch(); const onLogout = useCallback(() => { dispatch({ type: LOGOUT_REQUEST, }); }, [dispatch]); useEffect(() => { setIsOpen(false); }, [user]); const handleToggle = () => { setIsOpen(!isOpen); }; const addPostClick = () => {}; const authLink = ( <Fragment> <NavItem> {userRole === "MainJuin" ? ( <Form className="col mt-2"> <Link to="posts" className="btn btn-success block text-white px-3" onClick={addPostClick} > AddPost </Link> </Form> ) : ( "" )} </NavItem> <NavItem className="d-flex justify-content-center"> <Form className="col mt-2"> {user && user.name ? ( <Link> <Button outline color="light" className="px-3" block> <strong>{user ? `Welcom ${user.name}` : ""}</strong> </Button> </Link> ) : ( <Button outline color="light" className="px-3" block> <strong>No User</strong> </Button> )} </Form> </NavItem> <NavItem> <Form className="col"> <Link onClick={onLogout} to="#"> <Button outline color="light" className="mt-2" block> Logout </Button> </Link> </Form> </NavItem> </Fragment> ); const guestLink = ( <Fragment> <NavItem> <RegisterModal /> </NavItem> <NavItem> <LoginModal /> </NavItem> </Fragment> ); return ( <div> <Navbar color="dark" dark expand="lg" className="sticky-top"> <Container> <Link to="/" className="text-white text-decoration-none"> Victor의 블로그 </Link> <NavbarToggler onClick={handleToggle} /> <Collapse isOpen={isOpen} navbar> <Nav className="ml-auto d-flex justify-content-around" navbar> {isAuthenticated ? authLink : guestLink} </Nav> </Collapse> </Container> </Navbar> </div> );};export default AppNavbar;