[Feature] With firebase auth login and used localStorage

src/App.jsx

@@ -1,25 +1,41 @@
 import React from 'react';
 
+import { useDispatch } from 'react-redux';
 import { Switch, Route } from 'react-router-dom';
 
+import { loadItem } from './services/storage';
+import { setUser } from './reducers/slice';
+
 import MainPage from './pages/MainPage';
 import WritePage from './pages/WritePage';
 import IntroducePage from './pages/IntroducePage';
 import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
 import HeaderContainer from './containers/common/HeaderContainer';
 
-const App = () => (
- <>
- <HeaderContainer />
- <Switch>
- <Route exact path="/" component={MainPage} />
- <Route path="/introduce/:id" component={IntroducePage} />
- <Route component={LoginPage} path="/login" />
- <Route component={RegisterPage} path="/register" />
- <Route path="/write" component={WritePage} />
- </Switch>
- </>
-);
+const App = () => {
+ const dispatch = useDispatch();
+
+ const user = loadItem('user');
+
+ if (user) {
+ const { email } = user;
+
+ dispatch(setUser(email));
+ }
+
+ return (
+ <>
+ <HeaderContainer />
+ <Switch>
+ <Route exact path="/" component={MainPage} />
+ <Route path="/introduce/:id" component={IntroducePage} />
+ <Route component={LoginPage} path="/login" />
+ <Route component={RegisterPage} path="/register" />
+ <Route path="/write" component={WritePage} />
+ </Switch>
+ </>
+ );
+};
 
 export default App;

src/App.test.jsx

@@ -1,17 +1,19 @@
 import React from 'react';
 
-import { useDispatch, useSelector } from 'react-redux';
-
 import { MemoryRouter } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { render } from '@testing-library/react';
 
 import App from './App';
 
+import { loadItem } from './services/storage';
+
 import STUDY_GROUPS from '../fixtures/study-groups';
 import STUDY_GROUP from '../fixtures/study-group';
 
 jest.mock('react-redux');
+jest.mock('./services/storage');
 
 describe('App', () => {
  const dispatch = jest.fn();
@@ -87,4 +89,23 @@ describe('App', () => {
  expect(container).toHaveTextContent('회원가입');
  });
  });
+
+ context('when logged in', () => {
+ const user = {
+ email: 'seungmin@naver.com',
+ };
+
+ beforeEach(() => {
+ loadItem.mockImplementation(() => user);
+ });
+
+ it('calls dispatch with "setUser" action', () => {
+ renderApp({ path: '/' });
+
+ expect(dispatch).toBeCalledWith({
+ type: 'application/setUser',
+ payload: user.email,
+ });
+ });
+ });
 });

src/components/common/Header.jsx

@@ -43,15 +43,21 @@ const Spacer = styled.div`
  height: 6rem;
 `;
 
-const Header = () => (
+const Header = ({ user }) => (
  <>
  <HeaderWrapper>
  <Wrapper>
  <TitleWrapper to="/">제목(미정)</TitleWrapper>
- <div>
- <LinkWrapper to="/login">로그인</LinkWrapper>
- <LinkWrapper to="/register">회원가입</LinkWrapper>
- </div>
+ {user ? (
+ <div>
+ <button type="button">로그아웃</button>
+ </div>
+ ) : (
+ <div>
+ <LinkWrapper to="/login">로그인</LinkWrapper>
+ <LinkWrapper to="/register">회원가입</LinkWrapper>
+ </div>
+ )}
  </Wrapper>
  </HeaderWrapper>
  <Spacer />

src/containers/auth/LoginFormContainer.jsx

@@ -1,16 +1,20 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 
+import { useHistory } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 
 import { get } from '../../util/utils';
-import { changeAuthField } from '../../reducers/slice';
+import { changeAuthField, clearAuth, requestLogin } from '../../reducers/slice';
 
 import AuthForm from '../../components/auth/AuthForm';
 
 const LoginFormContainer = () => {
  const dispatch = useDispatch();
+ const history = useHistory();
 
  const login = useSelector(get('login'));
+ const user = useSelector(get('user'));
+ const authError = useSelector(get('authError'));
 
  const onChangeLoginField = useCallback(({ name, value }) => {
  dispatch(
@@ -22,11 +26,33 @@ const LoginFormContainer = () => {
  );
  });
 
+ const onSubmit = useCallback(() => {
+ // TODO: 로그인 validation 체크 로직 추가
+
+ dispatch(requestLogin());
+ }, [dispatch]);
+
+ useEffect(() => {
+ if (user) {
+ history.push('/');
+ }
+
+ if (authError) {
+ // TODO: error 처리 추가
+ console.error(authError);
+ }
+ }, [user, authError]);
+
+ useEffect(() => () => {
+ dispatch(clearAuth());
+ }, [dispatch]);
+
  return (
  <AuthForm
  type="login"
  fields={login}
  onChange={onChangeLoginField}
+ onSubmit={onSubmit}
  />
  );
 };

src/containers/auth/LoginFormContainer.test.jsx

@@ -6,18 +6,31 @@ import { render, fireEvent } from '@testing-library/react';
 
 import LoginFormContainer from './LoginFormContainer';
 
+const mockPush = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useHistory() {
+ return { push: mockPush };
+ },
+}));
+
 describe('LoginFormContainer', () => {
  const dispatch = jest.fn();
 
  beforeEach(() => {
  dispatch.mockClear();
+ mockPush.mockClear();
+
  useDispatch.mockImplementation(() => dispatch);
 
  useSelector.mockImplementation((selector) => selector({
  login: {
  userEmail: '',
  password: '',
  },
+ user: given.user,
+ authError: given.authError,
  }));
  });
 
@@ -59,5 +72,38 @@ describe('LoginFormContainer', () => {
  });
  });
  });
+
+ it('submit event calls dispatch', () => {
+ const { getByTestId } = renderLoginFormContainer();
+
+ const button = getByTestId('auth-button');
+
+ expect(button).not.toBeNull();
+
+ fireEvent.submit(button);
+
+ expect(dispatch).toBeCalled();
+ });
+ });
+
+ describe('actions after login', () => {
+ context('when success auth to login', () => {
+ given('user', () => ({
+ user: 'seungmin@naver.com',
+ }));
+
+ it('redirection go to main page', () => {
+ renderLoginFormContainer();
+
+ expect(mockPush).toBeCalledWith('/');
+ });
+ });
+
+ // TODO: 현재 authError는 콘솔 출력
+ context('when failure auth to login', () => {
+ given('authError', () => ({
+ authError: 'error',
+ }));
+ });
  });
 });

src/containers/auth/RegisterFormContainer.jsx

@@ -14,6 +14,7 @@ const RegisterFormContainer = () => {
 
  const register = useSelector(get('register'));
  const auth = useSelector(get('auth'));
+ const user = useSelector(get('user'));
  const authError = useSelector(get('authError'));
 
  const onChangeRegisterField = useCallback(({ name, value }) => {
@@ -27,23 +28,31 @@ const RegisterFormContainer = () => {
  }, [dispatch]);
 
  const onSubmit = useCallback(() => {
+ // TODO: 회원가입 validation 체크 로직 추가
+
  dispatch(requestRegister());
  }, [dispatch]);
 
+ useEffect(() => {
+ if (user) {
+ history.push('/');
+ }
+ }, [user]);
+
  useEffect(() => {
  if (auth) {
  history.push('/login');
  }
 
  if (authError) {
- // TODO: 추 후 error 처리
+ // TODO: error 처리 추가
  console.error(authError);
  }
+ }, [auth, authError]);
 
- return () => {
- dispatch(clearAuth());
- };
- }, [dispatch, auth, authError]);
+ useEffect(() => () => {
+ dispatch(clearAuth());
+ }, [dispatch]);
 
  return (
  <AuthForm

src/containers/auth/RegisterFormContainer.test.jsx

@@ -21,16 +21,19 @@ describe('RegisterFormContainer', () => {
 
  beforeEach(() => {
  dispatch.mockClear();
+ mockPush.mockClear();
+
  useDispatch.mockImplementation(() => dispatch);
 
  useSelector.mockImplementation((selector) => selector({
+ user: given.user,
+ auth: given.auth,
+ authError: given.authError,
  register: {
  userEmail: '',
  password: '',
  passwordConfirm: '',
  },
- auth: given.auth,
- authError: given.authError,
  }));
  });
 
@@ -90,7 +93,7 @@ describe('RegisterFormContainer', () => {
  });
  });
 
- describe('action after signing up', () => {
+ describe('actions after signing up', () => {
  context('when success auth to register', () => {
  given('auth', () => ({
  auth: 'seungmin@naver.com',
@@ -110,4 +113,16 @@ describe('RegisterFormContainer', () => {
  }));
  });
  });
+
+ describe('action after login', () => {
+ given('user', () => ({
+ user: 'seungmin@naver.com',
+ }));
+
+ it('redirection go to main page', () => {
+ renderRegisterFormContainer();
+
+ expect(mockPush).toBeCalledWith('/');
+ });
+ });
 });

src/containers/common/HeaderContainer.jsx

@@ -1,10 +1,19 @@
 import React from 'react';
 
+import { useSelector } from 'react-redux';
+
+import { get } from '../../util/utils';
+
 import Header from '../../components/common/Header';
 
-const HeaderContainer = () => ((
- <Header />
-)
-);
+const HeaderContainer = () => {
+ const user = useSelector(get('user'));
+
+ return (
+ <Header
+ user={user}
+ />
+ );
+};
 
 export default HeaderContainer;