Complete user history

Author: velopert

velog-frontend/src/components/user/UserHistory/UserHistory.js

@@ -43,8 +43,8 @@ const HistoryItem = onlyUpdateForKeys(['item', 'username'])(
               <Link to={url}>{item.post.title}</Link>
             </h4>
             <p>
-              {item.post.short_description.slice(0, 150)}
-              {item.post.short_description.length >= 150 && '...'}
+              {item.post.short_description && item.post.short_description.slice(0, 150)}
+              {item.post.short_description && item.post.short_description.length >= 150 && '...'}
             </p>
           </div>
         </div>
@@ -59,7 +59,7 @@ const HistoryItem = onlyUpdateForKeys(['item', 'username'])(
   },
 );
 
-HistoryItem.Placeholder = () => {
+const HistoryItemPlaceholder = () => {
   return (
     <div className="HistoryItem placeholder">
       <div className="message gray-box" style={{ width: '60%' }} />
@@ -103,10 +103,10 @@ class UserHistory extends Component<Props> {
         {this.renderList()}
         {this.props.loading && (
           <Fragment>
-            <HistoryItem.Placeholder />
-            <HistoryItem.Placeholder />
-            <HistoryItem.Placeholder />
-            <HistoryItem.Placeholder />
+            <HistoryItemPlaceholder />
+            <HistoryItemPlaceholder />
+            <HistoryItemPlaceholder />
+            <HistoryItemPlaceholder />
           </Fragment>
         )}
       </div>

velog-frontend/src/components/user/UserHistory/UserHistory.scss

@@ -2,6 +2,9 @@
 .UserHistory {
   width: 768px;
   margin: 0 auto;
+  @include media("<large") {
+    width: 100%;
+  }
   .no-history {
     color: $oc-gray-6;
     font-size: 1.125rem;
@@ -41,6 +44,10 @@
         border-radius: 16px;
         overflow: hidden;
         border: 1px solid $oc-gray-3;
+        @include media("<large") {
+          width: 96px;
+          height: 96px;
+        }
         img {
           width: 100%;
           height: 100%;
@@ -55,6 +62,10 @@
         height: 96px;
         margin-left: 1rem;
         margin-right: 1rem;
+        @include media("<large") {
+          margin-left: 0.5rem;
+          margin-right: 0.5rem;
+        }
       }
       .post-info {
         h4 {
@@ -66,6 +77,14 @@
           color: $oc-gray-7;
           margin-bottom: 0;
         }
+        @include media("<large") {
+          h4 {
+            font-size: 0.875rem;
+          }
+          p {
+            font-size: 0.75rem;
+          }
+        }
       }
     }
     .comment-block {
@@ -83,6 +102,10 @@
         font-family: "Noto Serif KR", sans-serif;
         padding-top: 0.5rem;
         padding-left: 1.5rem;
+        white-space: pre-wrap;
+        @include media("<large") {
+          font-size: 0.875rem;
+        }
       }
     }
     &.placeholder {

velog-frontend/src/lib/defaultClient.js

@@ -4,8 +4,14 @@ import axios, { type Axios } from 'axios';
 
 axios.defaults.withCredentials = true;
 
+const baseURL = (() => {
+  if (process.env.NODE_ENV === 'development') return '/';
+  if (process.env.APP_ENV === 'server') return 'http://localhost:4000/';
+  return 'https://api.velog.io';
+})();
+
 const defaultClient: Axios = axios.create({
-  baseURL: process.env.NODE_ENV === 'development' ? '/' : 'https://api.velog.io',
+  baseURL,
   withCredentials: true,
 });
 

velog-frontend/src/routeConfig.js

@@ -108,6 +108,30 @@ const routes = [
     },
     stop: true,
   },
+  {
+    path: '/@:username/history',
+    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;
+      await ProfileActions.getProfile(username);
+      const state: State = getState();
+      const { profile } = state.profile;
+      const promises = [
+        ProfileActions.getUserTags(username),
+        ProfileActions.getUserHistory({ username }),
+      ];
+      if (profile) {
+        if (ctx.state.logged) {
+          promises.push(FollowActions.getUserFollow(profile.id));
+        }
+      }
+      return Promise.all(promises);
+    },
+    stop: true,
+  },
   {
     path: '/@:username/:urlSlug',
     component: Post,

velog-ssr/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "NODE_PATH=dist nodemon dist/local.js --watch ./dist",
-    "deploy:local": ". ./scripts/loadenv sls deploy",
+    "deploy:local": "./scripts/loadenv && sls deploy",
     "deploy": "sls deploy"
   },
   "dependencies": {

velog-ssr/src/ssr/rules.ts

@@ -25,12 +25,16 @@ const rules = [
     path: '/@:username/tags/:tag',
     maxAge: 60 * 10,
   },
+  {
+    path: '/@:username/history',
+    maxAge: 60 * 60 * 3,
+  },
   {
     path: '/@:username/:urlSlug',
     maxAge: 60 * 60 * 3,
   },
-]
+];
 
 export function check(path) {
   return rules.find(r => pathToRegexp(r.path).exec(path) !== null);
-}
+}