Fixes Series SSR

Author: velopert

velog-frontend/src/containers/series/SeriesContainer.js

@@ -12,10 +12,13 @@ import SeriesTemplate from '../../components/series/SeriesTemplate/SeriesTemplat
 type Props = {
   series: ?SeriesData,
   editing: boolean,
+  shouldCancel: boolean,
 } & ContextRouter;
 
 class SeriesContainer extends Component<Props> {
   initialize = async () => {
+    if (!this.props.shouldCancel) return;
+    SeriesActions.initialize();
     const { username, urlSlug } = this.props.match.params;
     if (!username || !urlSlug) return;
     try {
@@ -85,5 +88,6 @@ export default withRouter(
   connect((state: State) => ({
     series: state.series.series,
     editing: state.series.editing,
+    shouldCancel: state.common.ssr && !state.common.router.altered,
   }))(SeriesContainer),
 );

velog-frontend/src/containers/user/UserSeriesContainer.js

@@ -9,9 +9,11 @@ import { type SeriesItemData } from 'store/modules/profile';
 
 type Props = {
   seriesList: ?(SeriesItemData[]),
+  shouldCancel: boolean,
 } & ContextRouter;
 class UserSeriesContainer extends Component<Props> {
   initialize = async () => {
+    if (this.props.shouldCancel) return;
     const { username } = this.props.match.params;
     try {
       if (!username) return;
@@ -38,4 +40,5 @@ class UserSeriesContainer extends Component<Props> {
 
 export default connect((state: State) => ({
   seriesList: state.profile.seriesList,
+  shouldCancel: state.common.ssr && !state.common.router.altered,
 }))(withRouter(UserSeriesContainer));

velog-frontend/src/routeConfig.js

@@ -5,6 +5,8 @@ import { actionCreators as profileActions } from 'store/modules/profile';
 import { actionCreators as listingActions } from 'store/modules/listing';
 import { actionCreators as commonActions } from 'store/modules/common';
 import { actionCreators as followActions } from 'store/modules/follow';
+import { actionCreators as seriesActions } from 'store/modules/series';
+
 import { bindActionCreators } from 'redux';
 import type { State } from 'store';
 import { type Match } from 'react-router';
@@ -154,6 +156,43 @@ const routes = [
     },
     stop: true,
   },
+  {
+    path: '/@:username/series/:urlSlug',
+    preload: async (ctx: any, { dispatch, getState }: any, match: Match) => {
+      const SeriesActions = bindActionCreators(seriesActions, dispatch);
+      const { username, urlSlug } = match.params;
+      if (!username || !urlSlug) return null;
+      return SeriesActions.getSeries({
+        username,
+        urlSlug,
+      });
+    },
+    stop: true,
+  },
+  {
+    path: '/@:username/series',
+    exact: true,
+    preload: async (ctx: any, { dispatch, getState }: any, match: Match) => {
+      const { username } = match.params;
+      const ProfileActions = bindActionCreators(profileActions, dispatch);
+      const FollowActions = bindActionCreators(followActions, dispatch);
+      if (!username) return null;
+      ProfileActions.setSideVisibility(false);
+      await Promise.all([
+        ProfileActions.getProfile(username),
+        ProfileActions.getSeriesList(username),
+      ]);
+      const state: State = getState();
+      const { profile } = state.profile;
+      if (profile) {
+        if (ctx.state.logged) {
+          await FollowActions.getUserFollow(profile.id);
+        }
+      }
+      return Promise.resolve();
+    },
+    stop: true,
+  },
   {
     path: '/@:username/:urlSlug',
     component: Post,