Show UserLogo when user visits velog page

Author: velopert

src/components/base/Header.tsx

@@ -9,6 +9,8 @@ import useToggle from '../../lib/hooks/useToggle';
 import HeaderUserMenu from './HeaderUserMenu';
 import { logout } from '../../lib/api/auth';
 import storage from '../../lib/storage';
+import { UserLogo } from '../../modules/header';
+import { Link } from 'react-router-dom';
 
 const HeaderBlock = styled.div<{
   floating: boolean;
@@ -50,15 +52,32 @@ interface HeaderProps {
   floatingMargin: number;
   onLoginClick: () => void;
   user: CurrentUser | null;
+  custom: boolean;
+  userLogo: UserLogo | null;
+  velogUsername: string | null;
 }
 
 const { useCallback } = React;
 
+const CustomLogo = styled(Link)``;
+
+const createFallbackTitle = (username: string | null) => {
+  if (!username) return null;
+  const lastChar = username.slice(-1).toLowerCase();
+  if (lastChar === 's') {
+    return `${username}' velog`;
+  }
+  return `${username}'s velog`;
+};
+
 const Header: React.SFC<HeaderProps> = ({
   floating,
   floatingMargin,
   onLoginClick,
   user,
+  custom,
+  userLogo,
+  velogUsername,
 }) => {
   const [userMenu, toggleUserMenu] = useToggle(false);
 
@@ -78,7 +97,17 @@ const Header: React.SFC<HeaderProps> = ({
       >
         <div className="wrapper">
           <div className="brand">
-            <Logo />
+            {custom ? (
+              userLogo ? (
+                <CustomLogo to="/">
+                  {userLogo.title
+                    ? userLogo.title
+                    : createFallbackTitle(velogUsername)}
+                </CustomLogo>
+              ) : null
+            ) : (
+              <Logo />
+            )}
           </div>
           <div className="right">
             {user ? (

src/components/base/HeaderLogo.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Logo } from '../../static/svg';
+import { UserLogo } from '../../modules/header';
+
+const HeaderLogoBlock = styled.div``;
+
+export interface HeaderLogoProps {
+  custom: boolean;
+  userLogo: UserLogo | null;
+  velogUsername: string | null;
+}
+
+const HeaderLogo: React.FC<HeaderLogoProps> = props => {
+  return <HeaderLogoBlock />;
+};
+
+export default HeaderLogo;

src/containers/base/HeaderContainer.tsx

@@ -4,22 +4,30 @@ import { getScrollTop } from '../../lib/utils';
 import { RootState } from '../../modules';
 import { connect } from 'react-redux';
 import { showAuthModal } from '../../modules/core';
-import { CurrentUser } from '../../lib/graphql/user';
 
 const { useEffect, useRef, useState, useCallback } = React;
 
+const mapStateToProps = (state: RootState) => ({
+  user: state.core.user,
+  custom: state.header.custom,
+  userLogo: state.header.userLogo,
+  velogUsername: state.header.velogUsername,
+});
+
+const mapDispatchToProps = {
+  showAuthModal,
+};
 interface OwnProps {}
-interface StateProps {
-  user: CurrentUser | null;
-}
-interface DispatchProps {
-  showAuthModal: typeof showAuthModal;
-}
+type StateProps = ReturnType<typeof mapStateToProps>;
+type DispatchProps = typeof mapDispatchToProps;
 type HeaderContainerProps = OwnProps & StateProps & DispatchProps;
 
 const HeaderContainer: React.SFC<HeaderContainerProps> = ({
   showAuthModal,
   user,
+  custom,
+  userLogo,
+  velogUsername,
 }) => {
   const lastY = useRef(0);
   const direction = useRef<null | 'UP' | 'DOWN'>(null);
@@ -79,13 +87,14 @@ const HeaderContainer: React.SFC<HeaderContainerProps> = ({
       floatingMargin={floatingMargin}
       onLoginClick={onLoginClick}
       user={user}
+      custom={custom}
+      userLogo={userLogo}
+      velogUsername={velogUsername}
     />
   );
 };
 
 export default connect<StateProps, DispatchProps, OwnProps, RootState>(
-  state => ({
-    user: state.core.user,
-  }),
-  { showAuthModal },
+  mapStateToProps,
+  mapDispatchToProps,
 )(HeaderContainer);

src/containers/velog/ConfigLoader.tsx

@@ -2,33 +2,54 @@ import React, { useEffect } from 'react';
 import { Query, QueryResult } from 'react-apollo';
 import { connect } from 'react-redux';
 import { GET_VELOG_CONFIG, VelogConfig } from '../../lib/graphql/user';
-import { setUserLogo } from '../../modules/header';
-
-export interface ConfigLoaderProps {
-  username: string;
-}
+import { setUserLogo, setCustom, setVelogUsername } from '../../modules/header';
+import { RootState } from '../../modules';
 
 interface ConfigEffectProps {
   velogConfig: VelogConfig;
-  setUserLogo: typeof setUserLogo;
+  onConfigChange: (config: VelogConfig) => any;
 }
 
 const ConfigEffect: React.FC<ConfigEffectProps> = ({
   velogConfig,
-  setUserLogo,
+  onConfigChange,
 }) => {
   useEffect(() => {
-    setUserLogo(velogConfig);
-  }, [setUserLogo, velogConfig]);
+    onConfigChange(velogConfig);
+  }, [onConfigChange, velogConfig]);
   return null;
 };
 
-const ConfigEffectContainer = connect(
-  () => ({}),
-  { setUserLogo },
-)(ConfigEffect);
+const mapDispatchToProps = {
+  setUserLogo,
+  setCustom,
+  setVelogUsername,
+};
+
+type OwnProps = {
+  username: string;
+};
+type StateProps = {};
+type DispatchProps = typeof mapDispatchToProps;
+export type ConfigLoaderProps = OwnProps & StateProps & DispatchProps;
+
+const ConfigLoader: React.FC<ConfigLoaderProps> = ({
+  username,
+  setUserLogo,
+  setCustom,
+  setVelogUsername,
+}) => {
+  useEffect(() => {
+    setCustom(true);
+    return () => {
+      setCustom(false);
+    };
+  }, [setCustom]);
+
+  useEffect(() => {
+    setVelogUsername(username);
+  }, [setVelogUsername, username]);
 
-const ConfigLoader: React.FC<ConfigLoaderProps> = ({ username }) => {
   return (
     <Query query={GET_VELOG_CONFIG} variables={{ username }}>
       {({
@@ -41,10 +62,18 @@ const ConfigLoader: React.FC<ConfigLoaderProps> = ({ username }) => {
         }
         if (error || loading) return null;
         if (!data) return null;
-        return <ConfigEffectContainer velogConfig={data.velog_config} />;
+        return (
+          <ConfigEffect
+            velogConfig={data.velog_config}
+            onConfigChange={setUserLogo}
+          />
+        );
       }}
     </Query>
   );
 };
 
-export default ConfigLoader;
+export default connect<StateProps, DispatchProps, OwnProps, RootState>(
+  () => ({}),
+  mapDispatchToProps,
+)(ConfigLoader);

src/containers/velog/__tests__/ConfigLoader.test.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { render, waitForDomChange } from 'react-testing-library';
 import ConfigLoader, { ConfigLoaderProps } from '../ConfigLoader';
 import { MockedProvider } from 'react-apollo/test-utils';
 import { GET_VELOG_CONFIG } from '../../../lib/graphql/user';
@@ -8,7 +7,9 @@ import waitUntil from '../../../lib/waitUntil';
 
 describe('ConfigLoader', () => {
   const setup = (props: Partial<ConfigLoaderProps> = {}) => {
-    const initialProps: ConfigLoaderProps = { username: 'velopert' };
+    const initialProps: Partial<ConfigLoaderProps> & { username: string } = {
+      username: 'velopert',
+    };
     const mocks = [
       {
         request: {
@@ -36,7 +37,17 @@ describe('ConfigLoader', () => {
   it('renders properly', () => {
     setup();
   });
-  it('loads GET_VELOG_CONFIG and dispatches setUserLogo', async () => {
+  it('dispatches SET_VELOG_USERNAME action', () => {
+    const { store } = setup();
+    expect(store.getState().header.velogUsername).toBe('velopert');
+  });
+  it('dispatches SET_CUSTOM action', () => {
+    const { store, unmount } = setup();
+    expect(store.getState().header.custom).toBeTruthy();
+    unmount();
+    expect(store.getState().header.custom).toBeFalsy();
+  });
+  it('loads GET_VELOG_CONFIG and dispatches SET_USER_LOGO action', async () => {
     const { store } = setup();
     const userLogo = store.getState().header.userLogo;
     await waitUntil(() => store.getState().header.userLogo !== userLogo);

src/modules/__tests__/header.test.ts

@@ -1,10 +1,11 @@
-import header, { setCustom, setUserLogo } from '../header';
+import header, { setCustom, setUserLogo, setVelogUsername } from '../header';
 
 describe('header redux module', () => {
   describe('reducer', () => {
     const initialState = {
       custom: false,
       userLogo: null,
+      velogUsername: null,
     };
     it('should have initialState', () => {
       const state = header(undefined, {});
@@ -23,5 +24,9 @@ describe('header redux module', () => {
       );
       expect(state.userLogo).toHaveProperty('title', 'SAMPLE');
     });
+    it('handles SET_VELOG_USER', () => {
+      let state = header(initialState, setVelogUsername('velopert'));
+      expect(state.velogUsername).toBe('velopert');
+    });
   });
 });

src/modules/header.ts

@@ -3,26 +3,33 @@ import { createStandardAction } from 'typesafe-actions';
 
 const SET_CUSTOM = 'header/SET_CUSTOM';
 const SET_USER_LOGO = 'header/SET_USER_LOGO';
+const SET_VELOG_USERNAME = 'header/SET_VELOG_USERNAME';
 
-type UserLogo = {
+export type UserLogo = {
   title: string | null;
   logo_image: string | null;
 };
 
 export interface HeaderState {
   custom: boolean;
   userLogo: null | UserLogo;
+  velogUsername: string | null;
 }
 
 export const setCustom = createStandardAction(SET_CUSTOM)<boolean>();
 export const setUserLogo = createStandardAction(SET_USER_LOGO)<UserLogo>();
+export const setVelogUsername = createStandardAction(SET_VELOG_USERNAME)<
+  string
+>();
 
 type SetCustom = ReturnType<typeof setCustom>;
 type SetUserLogo = ReturnType<typeof setUserLogo>;
+type SetVelogUsername = ReturnType<typeof setVelogUsername>;
 
 const initialState: HeaderState = {
   custom: false,
   userLogo: null,
+  velogUsername: null,
 };
 
 const header = createReducer(
@@ -33,6 +40,9 @@ const header = createReducer(
     [SET_USER_LOGO]: (state, { payload }: SetUserLogo) => {
       return updateKey(state, 'userLogo', payload);
     },
+    [SET_VELOG_USERNAME]: (state, { payload }: SetVelogUsername) => {
+      return updateKey(state, 'velogUsername', payload);
+    },
   },
   initialState,
 );