정의왕

Set user-action & register form

1 -import {BrowserRouter as Router, Route, Routes, Link} from "react-router-dom"; 1 +import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
2 import MainPage from "./component/views/MainPage/MainPage"; 2 import MainPage from "./component/views/MainPage/MainPage";
3 import LoginPage from "./component/views/LoginPage/LoginPage"; 3 import LoginPage from "./component/views/LoginPage/LoginPage";
4 import RegisterPage from "./component/views/RegisterPage/RegisterPage"; 4 import RegisterPage from "./component/views/RegisterPage/RegisterPage";
......
1 -export const LOGIN_USER = "login_user";
...\ No newline at end of file ...\ No newline at end of file
1 +export const LOGIN_USER = "login_user";
2 +export const REGISTER_USER = "register_user";
...\ No newline at end of file ...\ No newline at end of file
......
1 import Axios from 'axios'; 1 import Axios from 'axios';
2 -import { LOGIN_USER } from './types'; 2 +import { LOGIN_USER, REGISTER_USER } from './types';
3 3
4 export function loginUser(dataToSubmit) { 4 export function loginUser(dataToSubmit) {
5 5
...@@ -9,4 +9,14 @@ export function loginUser(dataToSubmit) { ...@@ -9,4 +9,14 @@ export function loginUser(dataToSubmit) {
9 type: LOGIN_USER, 9 type: LOGIN_USER,
10 payload: request 10 payload: request
11 } 11 }
12 +}
13 +
14 +export function registerUser(dataToSubmit) {
15 +
16 + const request = Axios.post('/api/users/register', dataToSubmit)
17 + .then( response => response.data )
18 + return {
19 + type: REGISTER_USER,
20 + payload: request
21 + }
12 } 22 }
...\ No newline at end of file ...\ No newline at end of file
......
1 import { 1 import {
2 - LOGIN_USER 2 + LOGIN_USER, REGISTER_USER
3 } from '../_actions/types'; 3 } from '../_actions/types';
4 4
5 export default function (state = {}, action) { 5 export default function (state = {}, action) {
...@@ -7,7 +7,9 @@ export default function (state = {}, action) { ...@@ -7,7 +7,9 @@ export default function (state = {}, action) {
7 case LOGIN_USER: 7 case LOGIN_USER:
8 return { ...state, loginSuccess: action.payload } 8 return { ...state, loginSuccess: action.payload }
9 break; 9 break;
10 - 10 + case REGISTER_USER:
11 + return {...state, registerSuccess: action.payload}
12 + break;
11 default: 13 default:
12 return state; 14 return state;
13 } 15 }
......
1 -import React, { useEffect } from 'react' 1 +import React from 'react'
2 -import axios from 'axios' 2 +//import axios from 'axios'
3 // import { response } from 'express' 3 // import { response } from 'express'
4 4
5 function LandingPage() { 5 function LandingPage() {
6 6
7 - useEffect(() => { 7 + // useEffect(() => {
8 - axios.get('/api/hello') 8 + // axios.get('/api/hello')
9 - .then(response => console.log(response.data)) 9 + // .then(response => console.log(response.data))
10 - }, []) 10 + // }, [])
11 11
12 return ( 12 return (
13 <div> 13 <div>
......
1 -import React, {useEffect, useState} from "react"; 1 +import React, {useState} from "react";
2 -import Axios from 'axios'
3 -import {Link} from "react-router-dom";
4 import "../style/LoginPage.scss"; 2 import "../style/LoginPage.scss";
5 import { Icon, Input } from "semantic-ui-react" 3 import { Icon, Input } from "semantic-ui-react"
6 import { useNavigate } from "react-router-dom"; 4 import { useNavigate } from "react-router-dom";
......
1 -import {Button, Grid, Image, Segment} from "semantic-ui-react" 1 +import {Button} from "semantic-ui-react"
2 import "../style/MainPage.scss"; 2 import "../style/MainPage.scss";
3 -import {useNavigate} from "react-router-dom"; 3 +import { useNavigate } from "react-router-dom";
4 4
5 function MainPage() { 5 function MainPage() {
6 const navigate = useNavigate(); 6 const navigate = useNavigate();
......
1 -import React, {useCallback, useState} from "react"; 1 +import React, {useState} from "react";
2 import "../style/RegisterPage.scss"; 2 import "../style/RegisterPage.scss";
3 import { Button, Icon, Input } from "semantic-ui-react"; 3 import { Button, Icon, Input } from "semantic-ui-react";
4 +import {useDispatch} from "react-redux";
5 +import { registerUser } from '../../../_actions/user_action'
4 6
5 -function RegisterPage() { 7 +function RegisterPage(props) {
8 + const dispatch = useDispatch();
6 const [Id, setId] = useState(""); 9 const [Id, setId] = useState("");
7 const [Password, setPassword] = useState(""); 10 const [Password, setPassword] = useState("");
8 const [PasswordCheck,setPasswordCheck] = useState(""); 11 const [PasswordCheck,setPasswordCheck] = useState("");
9 const [Personality, setPersonality] = useState(""); 12 const [Personality, setPersonality] = useState("");
10 - const [PasswordError,setPasswordError] = useState(false);
11 13
12 const onIdHandler = (event) => { 14 const onIdHandler = (event) => {
13 setId(event.currentTarget.value); 15 setId(event.currentTarget.value);
...@@ -18,23 +20,32 @@ function RegisterPage() { ...@@ -18,23 +20,32 @@ function RegisterPage() {
18 const onPersonalityHandler = (event) => { 20 const onPersonalityHandler = (event) => {
19 setPersonality(event.currentTarget.value); 21 setPersonality(event.currentTarget.value);
20 }; 22 };
21 - const onPasswordChkHandler = useCallback((event) => { 23 + const onPasswordChkHandler = (event) => {
22 //비밀번호를 입력할때마다 password 를 검증하는 함수 24 //비밀번호를 입력할때마다 password 를 검증하는 함수
23 setPasswordCheck(event.currentTarget.value); 25 setPasswordCheck(event.currentTarget.value);
24 - },[PasswordCheck]); 26 + };
25 - const onSubmitHandler = useCallback((event) => { 27 + const onSubmitHandler = (event) => {
26 event.preventDefault(); 28 event.preventDefault();
27 console.log("ID", Id); 29 console.log("ID", Id);
28 console.log("Password", Password); 30 console.log("Password", Password);
29 console.log("MBTI", Personality); 31 console.log("MBTI", Personality);
30 - if(Password !== PasswordCheck){ 32 + if (Password !== PasswordCheck) {
31 - return setPasswordError(true); 33 + return alert('비밀번호가 일치하지 않습니다.')
32 } 34 }
33 - else{ 35 + let body = {
34 - return setPasswordError(false); 36 + id: Id,
37 + password: Password,
38 + personality: Personality
35 } 39 }
36 - },[Password,PasswordCheck]); 40 + dispatch(registerUser(body))
37 - 41 + .then(response => {
42 + if (response.payload.success) {
43 + props.history.push('/login')
44 + } else {
45 + alert('Failed to sign up')
46 + }
47 + })
48 + }
38 return ( 49 return (
39 <div id="Register"> 50 <div id="Register">
40 <div className="register-form"> 51 <div className="register-form">
...@@ -42,9 +53,9 @@ function RegisterPage() { ...@@ -42,9 +53,9 @@ function RegisterPage() {
42 <h1>Tunnel</h1> 53 <h1>Tunnel</h1>
43 <div className="input-area"> 54 <div className="input-area">
44 <Input 55 <Input
45 - icon={<Icon name='at'/>} 56 + icon={<Icon name="id badge"/>}
46 iconPosition='left' 57 iconPosition='left'
47 - placeholder="Email" 58 + placeholder="ID"
48 type="text" 59 type="text"
49 value={Id} 60 value={Id}
50 autoComplete="off" 61 autoComplete="off"
...@@ -68,11 +79,7 @@ function RegisterPage() { ...@@ -68,11 +79,7 @@ function RegisterPage() {
68 type="password" 79 type="password"
69 value={Password} 80 value={Password}
70 autoComplete="off" 81 autoComplete="off"
71 - onChange={onPasswordHandler} 82 + onChange={onPasswordHandler}/>
72 - onFocus={()=>setPasswordError(false)}/>
73 - {PasswordError &&
74 - <div>비밀번호 오류</div>
75 - }
76 </div> 83 </div>
77 <div className="input-area"> 84 <div className="input-area">
78 <Input 85 <Input
...@@ -82,8 +89,7 @@ function RegisterPage() { ...@@ -82,8 +89,7 @@ function RegisterPage() {
82 type="password" 89 type="password"
83 value={PasswordCheck} 90 value={PasswordCheck}
84 autoComplete="off" 91 autoComplete="off"
85 - onChange={onPasswordChkHandler} 92 + onChange={onPasswordChkHandler}/>
86 - onFocus={()=>setPasswordError(false)}/>
87 </div> 93 </div>
88 <div className="btn-area" > 94 <div className="btn-area" >
89 <Button className='register-btn' 95 <Button className='register-btn'
...@@ -93,9 +99,7 @@ function RegisterPage() { ...@@ -93,9 +99,7 @@ function RegisterPage() {
93 </div> 99 </div>
94 </form> 100 </form>
95 </div> 101 </div>
96 -
97 </div> 102 </div>
98 ); 103 );
99 } 104 }
100 -
101 export default RegisterPage; 105 export default RegisterPage;
......