Merge pull request #51 from GNU-CS/bug#50

bug#50

catlas/src/App.js

@@ -1,28 +1,29 @@
 import React from "react";
 import { BrowserRouter, Switch, Route } from "react-router-dom";
-import { Main, Clubs, About, Links } from "./pages";
 
 import Theme from "./component/theme";
 
+import { Main, Clubs, About, Links } from "./pages";
+
 import Talks from "./pages/Talks";
 import Auth from "./pages/Auth";
 import Scenes from "./pages/Scenes";
 
 function App() {
-  return (
-    <BrowserRouter>
-      <Theme />
-      <Switch>
-        <Route exact path="/" component={Main} />
-        <Route path="/clubs" component={Clubs} />
-        <Route path="/about" component={About} />
-        <Route path="/talks" component={Talks} />
-        <Route path="/links" component={Links} />
-        <Route path="/scenes" component={Scenes} />
-        <Route path="/auth" component={Auth} />
-      </Switch>
-    </BrowserRouter>
-  );
+    return (
+        <BrowserRouter>
+            <Theme />
+            <Switch>
+                <Route exact path="/" component={Main} />
+                <Route path="/clubs" component={Clubs} />
+                <Route path="/about" component={About} />
+                <Route path="/talks" component={Talks} />
+                <Route path="/links" component={Links} />
+                <Route path="/scenes" component={Scenes} />
+                <Route path="/auth" component={Auth} />
+            </Switch>
+        </BrowserRouter>
+    );
 }
 
 export default App;

catlas/src/component/theme.jsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Container, Grid, Image, Menu } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link, useHistory, useLocation } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 
-import { logout } from '../redux/modules/auth';
+import { check, logout } from '../redux/modules/auth';
 
 import bgimg from "../assets/img/catlas-logo.png";
 
@@ -27,18 +27,35 @@ function Theme() {
                         <Auth />
                     </Menu>
                 </Grid.Column>
-            </Grid>           
+            </Grid>
         </>
     );
 }
 
 function Auth() {
     const dispatch = useDispatch();
+    const history = useHistory();
+    const location = useLocation();
+
     const isLoggedIn = useSelector(state => state.auth.isLoggedIn);
     const token = useSelector(state => state.auth.token);
 
+    useEffect(() => {
+        const onLocationChange = async () => {
+            await dispatch(check(token));
+        }
+
+        onLocationChange();
+    }, [dispatch, location, token]);
+
+    const handleLogout = async () => {
+        history.replace('/');
+
+        await dispatch(logout(token));
+    }
+
     if (isLoggedIn) {
-        return (<Menu.Item name='auth' onClick={() => dispatch(logout(token))}>로그아웃</Menu.Item>);
+        return (<Menu.Item name='auth' onClick={handleLogout}>로그아웃</Menu.Item>);
     }
 
     else {

catlas/src/redux/helper.js

@@ -0,0 +1,16 @@
+/**
+ * Creates Redux action types.
+ * @param {string} state - Redux store state.
+ * @param {string} action - Redux action.
+ */
+export function createActionType(state, action) {
+    const base = 'catlas';
+
+    const result = `${base}/${state}/${action}`;
+
+    return {
+        START: result,
+        SUCCESS: `${result}/SUCCESS`,
+        FAIL: `${result}/FAIL`
+    }
+}

catlas/src/redux/modules/auth.js

@@ -1,72 +1,96 @@
 import { createInstance } from "../../component/request";
+import { createActionType } from "../helper";
 
-// Ducks pattern
+const state = "auth";
 
-const LOGIN = "catlas/auth/LOGIN";
-const LOGIN_SUCCEEDED = "catlas/auth/LOGIN_SUCCESS";
-const LOGIN_FAILED = "catlas/auth/LOGIN_FAILED";
-
-const LOGOUT = "catlas/auth/LOGOUT";
-const LOGOUT_SUCCEEDED = "catlas/auth/LOGOUT_SUCCESS";
-const LOGOUT_FAILED = "catlas/auth/LOGOUT_FAILED";
+const LOGIN = createActionType(state, "LOGIN");
+const LOGOUT = createActionType(state, "LOGOUT");
+const CHECK = createActionType(state, "CHECK");
 
 const initialState = {
     loading: false,
     isLoggedIn: false,
-    token: '',
+    token: undefined,
     user: undefined,
     errorCode: ''
 };
 
 export default function reducer(state = initialState, action) {
     switch (action.type) {
-        case LOGIN:
+
+        // LOGIN
+        case LOGIN.START:
             return {
                 ...state,
                 loading: true,
                 errorCode: ''
             };
-        case LOGIN_SUCCEEDED:
+        case LOGIN.SUCCESS:
             return {
                 ...state,
                 loading: false,
                 isLoggedIn: true,
-                user: action.user,
-                token: action.token
+                token: action.token,
+                user: action.user
             };
-        case LOGIN_FAILED:
+        case LOGIN.FAIL:
             return {
                 ...state,
                 loading: false,
                 errorCode: action.code
             };
-        case LOGOUT:
+
+        // LOGOUT
+        case LOGOUT.START:
             return {
                 ...state,
                 loading: true,
                 errorCode: ''
             };
-        case LOGOUT_SUCCEEDED:
+        case LOGOUT.SUCCESS:
             return {
                 ...state,
                 loading: false,
                 isLoggedIn: false,
-                user: undefined,
-                token: ''
+                token: undefined,
+                user: undefined
             };
-        case LOGOUT_FAILED:
+        case LOGOUT.FAIL:
             return {
                 ...state,
                 loading: false,
                 errorCode: action.code
             };
+
+        // CHECK
+        case CHECK.START:
+            return {
+                ...state,
+                loading: true,
+                errorCode: ''
+            };
+        case CHECK.SUCCESS:
+            return {
+                ...state,
+                loading: false
+            }
+        case CHECK.FAIL:
+            return {
+                ...state,
+                loading: false,
+                isLoggedIn: false,
+                token: undefined,
+                user: undefined,
+                errorCode: action.code
+            }
+
         default:
             return state;
     }
 }
 
 export const login = data => async dispatch => {
-    dispatch({ type: LOGIN });
+    dispatch({ type: LOGIN.START });
 
     try {
         const instance = createInstance();
@@ -86,33 +110,31 @@ export const login = data => async dispatch => {
 
 const loginSuccess = data => {
     return {
-        type: LOGIN_SUCCEEDED,
+        type: LOGIN.SUCCESS,
         token: data.token,
         user: data.user
     }
 }
 
 const loginFail = error => {
     let errorCode = '';
-    
+
     // axios request timeout
     if (error.code === 'ECONNABORTED') errorCode = error.code
     else errorCode = error.response.status;
 
     return {
-        type: LOGIN_FAILED,
+        type: LOGIN.FAIL,
         code: errorCode
     }
 }
 
 export const logout = token => async dispatch => {
-    dispatch({ type: LOGOUT });
+    dispatch({ type: LOGOUT.START });
 
     try {
 
-        const instance = createInstance();
-
-        instance.defaults.headers.common['Authorization'] = 'token ' + token;
+        const instance = createInstance(token);
 
         await instance.post('/auth/logout/');
 
@@ -129,19 +151,58 @@ export const logout = token => async dispatch => {
 
 const logoutSuccess = () => {
     return {
-        type: LOGOUT_SUCCEEDED
+        type: LOGOUT.SUCCESS
     }
 }
 
 const logoutFail = error => {
     let errorCode = '';
-
+
+    // axios request timeout
+    if (error.code === 'ECONNABORTED') errorCode = error.code
+    else errorCode = error.response.status;
+
+    return {
+        type: LOGOUT.FAIL,
+        code: errorCode
+    }
+}
+
+export const check = token => async dispatch => {
+    dispatch({ type: CHECK.START });
+
+    try {
+        const instance = createInstance(token);
+
+        await instance.post('/auth/check/');
+
+        dispatch(checkSuccess());
+
+        return true;
+    }
+
+    catch (error) {
+        dispatch(checkFail(error));
+
+        return false;
+    }
+}
+
+const checkSuccess = () => {
+    return {
+        type: CHECK.SUCCESS
+    }
+}
+
+const checkFail = error => {
+    let errorCode = '';
+
     // axios request timeout
     if (error.code === 'ECONNABORTED') errorCode = error.code
     else errorCode = error.response.status;
 
     return {
-        type: LOGOUT_FAILED,
+        type: CHECK.FAIL,
         code: errorCode
     }
-}
+}