Creates plannings for series viewer page

Author: velopert

velog-backend/src/database/rawQuery/series.js

@@ -0,0 +1,28 @@
+// @flow
+import Sequelize from 'sequelize';
+import db from 'database/db';
+
+type SeriesPostCountRow = {
+  id: string,
+  count: number,
+};
+
+export const getSeriesPostCountList = async (
+  seriesIds: string[],
+): Promise<SeriesPostCountRow[]> => {
+  const matches = `(${seriesIds.map(seriesId => `'${seriesId}'`).join(', ')})`;
+  const query = `
+  select series.id, COUNT(series_posts.fk_post_id) FROM series
+  left join series_posts on series.id = series_posts.fk_series_id
+  where series.id IN ${matches}
+  group by series.id
+`;
+  try {
+    const rows = await db.query(query, {
+      type: Sequelize.QueryTypes.SELECT,
+    });
+    return rows;
+  } catch (e) {
+    throw e;
+  }
+};

velog-backend/src/router/posts/posts.ctrl.js

@@ -187,7 +187,6 @@ export const writePost = async (ctx: Context): Promise<*> => {
         userId: ctx.user.id,
         urlSlug: url_slug,
       });
-      console.log(exists);
       if (exists > 0) {
         processedSlug = uniqueUrlSlug;
       }
@@ -265,6 +264,8 @@ export const writePost = async (ctx: Context): Promise<*> => {
         ctx.status = 403;
         return;
       }
+      series.changed('updated_at', true);
+      await series.save();
       await SeriesPosts.append(series_id, post.id, ctx.user.id);
     }
 
@@ -385,7 +386,6 @@ export const readPost = async (ctx: Context): Promise<*> => {
       liked,
     });
 
-    console.log(seriesPost);
     ctx.body = {
       ...serialized,
       series: seriesPost

velog-backend/src/router/series/series.ctrl.js

@@ -4,6 +4,9 @@ import Joi from 'joi';
 import { checkEmpty, validateSchema, isUUID } from 'lib/common';
 import { UserProfile, User, Post } from 'database/models';
 import pick from 'lodash/pick';
+import {
+  getSeriesPostCountList,
+} from 'database/rawQuery/series';
 import SeriesPosts from '../../database/models/SeriesPosts';
 import Series, { serializeSeries } from '../../database/models/Series';
 
@@ -171,18 +174,35 @@ export const createSeries = async (ctx: Context) => {
   }
 };
 export const listSeries = async (ctx: Context) => {
+  const { username } = ctx.params;
   try {
     const seriesList = await Series.findAll({
-      limit: 20,
+      // limit: 20,
       include: [
         {
           model: User,
           include: [UserProfile],
+          ...(username
+            ? {
+              where: {
+                username,
+              },
+            }
+            : {}),
         },
       ],
       order: [['updated_at', 'DESC']],
     });
-    ctx.body = seriesList.map(serializeSeries);
+    const counts = await getSeriesPostCountList(seriesList.map(series => series.id));
+    const flatData = {};
+    counts.forEach((c) => {
+      flatData[c.id] = c.count;
+    });
+    const serialized = seriesList.map(serializeSeries);
+    serialized.forEach((s) => {
+      s.posts_count = flatData[s.id];
+    });
+    ctx.body = serialized;
   } catch (e) {
     ctx.throw(500, e);
   }

velog-frontend/sketch/velog-temp.sketch

@@ -1,6 +1,17 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
-import { Home, Register, Write, Post, User, Saves, Settings, Policy, NotFound } from 'pages';
+import {
+  Home,
+  Register,
+  Write,
+  Post,
+  User,
+  Saves,
+  Settings,
+  Policy,
+  Series,
+  NotFound,
+} from 'pages';
 import EmailLogin from 'containers/etc/EmailLogin';
 import Core from 'containers/base/Core';
 import { Helmet } from 'react-helmet';
@@ -32,6 +43,7 @@ const App = () => (
       <Route exact path="/@:username/" component={User} />
       <Route exact path="/@:username/tags/:tag" component={User} />
       <Route exact path="/@:username/:tab(history|about|series)" component={User} />
+      <Route path="/@:username/series/:urlSlug" component={Series} />
       <Route path="/@:username/:urlSlug" component={Post} />
       <Route path="/posts/preview/:id" component={Post} />
       <Route path="/saves" component={Saves} />

velog-frontend/src/components/App.js

@@ -1,18 +1,19 @@
 // @flow
 import React, { type Node } from 'react';
 import { Link } from 'react-router-dom';
+import RightCorner from 'containers/base/RightCorner';
 import './ViewerHead.scss';
 
-type Props = {
-  rightCorner: Node,
-};
+type Props = {};
 
-const ViewerHead = ({ rightCorner }: Props) => (
+const ViewerHead = (props: Props) => (
   <div className="ViewerHead">
     <Link to="/" className="logo-area">
       velog
     </Link>
-    <div className="right-corner">{rightCorner}</div>
+    <div className="right-corner">
+      <RightCorner />
+    </div>
   </div>
 );
 

velog-frontend/src/components/base/ViewerHead/ViewerHead.js

@@ -0,0 +1,52 @@
+// @flow
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { resizeImage } from 'lib/common';
+import defaultThumbnail from 'static/images/default_thumbnail.png';
+
+import './HorizontalUserInfo.scss';
+
+type Props = {
+  user: {
+    username: string,
+    id: string,
+    thumbnail: ?string,
+    short_bio: ?string,
+  },
+};
+const HorizontalUserInfo = ({ user }: Props) => {
+  const userLink = `/@${user.username}`;
+  return (
+    <div className="HorizontalUserInfo">
+      <Link to={userLink} className="user-thumbnail">
+        <img src={resizeImage(user.thumbnail || defaultThumbnail, 128)} alt="user-thumbnail" />
+      </Link>
+      <div className="info">
+        <Link to={userLink} className="username">
+          @{user.username}
+        </Link>
+        <div className="description">{user.short_bio}</div>
+      </div>
+    </div>
+  );
+};
+
+HorizontalUserInfo.Placeholder = () => {
+  return (
+    <div className="HorizontalUserInfo placeholder">
+      <div className="user-thumbnail">
+        <div className="fake-img" />
+      </div>
+      <div className="info">
+        <div className="username">
+          <div className="gray-block _username" />
+        </div>
+        <div className="description">
+          <div className="gray-block _description" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HorizontalUserInfo;

velog-frontend/src/components/common/HorizontalUserInfo/HorizontalUserInfo.js

@@ -0,0 +1,70 @@
+@import 'utils';
+
+.HorizontalUserInfo {
+  @include media('<medium') {
+    background: $oc-gray-0;
+    margin-top: -0.25rem;
+    border-top: 1px solid $oc-gray-2;
+    border-bottom: 1px solid $oc-gray-2;
+    padding: 1rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  display: flex;
+  margin-top: 1em;
+  margin-bottom: 2rem;
+  align-items: center;
+  .user-thumbnail {
+    flex-shrink: 0;
+    width: 4em;
+    height: 4em;
+    position: relative;
+    img {
+      border-radius: 50%;
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .info {
+    margin-left: 1em;
+    font-size: 0.875em;
+    line-height: 1.5em;
+    .username {
+      font-weight: 500;
+      color: $oc-gray-9;
+    }
+    .description {
+      word-break: break-word;
+      color: $oc-gray-6;
+    }
+  }
+
+  // for placeholder
+  .fake-img {
+    background: $oc-gray-1;
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+    animation: Blink 0.5s ease-in-out;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+  }
+  .gray-block {
+    background: $oc-gray-1;
+    border-radius: 2px;
+    height: 1em;
+    animation: Blink 0.5s ease-in-out;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    &._username {
+      width: 7rem;
+    }
+    &._description {
+      margin-top: 0.5rem;
+      width: 11rem;
+    }
+  }
+}

velog-frontend/src/components/common/HorizontalUserInfo/HorizontalUserInfo.scss

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './HorizontalUserInfo';

velog-frontend/src/components/common/HorizontalUserInfo/index.js

@@ -0,0 +1,17 @@
+// @flow
+import React, { type Node } from 'react';
+import './PlainTemplate.scss';
+
+type Props = {
+  header: Node,
+  children: Node,
+};
+
+const PlainTemplate = ({ children, header }: Props) => (
+  <div className="PlainTemplate">
+    <div className="header-area">{header}</div>
+    <div className="content-area">{children}</div>
+  </div>
+);
+
+export default PlainTemplate;

velog-frontend/src/components/common/PlainTemplate/PlainTemplate.js

@@ -0,0 +1,17 @@
+@import 'utils';
+.PlainTemplate {
+  & > .content-area {
+    margin: 0 auto;
+    width: 768px;
+    position: relative;
+    @include media('<large') {
+      padding-left: 2rem;
+      padding-right: 2rem;
+      width: 100%;
+    }
+    @include media('<medium') {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+  }
+}

velog-frontend/src/components/common/PlainTemplate/PlainTemplate.scss

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './PlainTemplate';