refactor(comments): create/update/reply with new editor workflow (#1170)

* refactor(comment-editor): wip

* refactor(comment-editor): re-org wip

* refactor(comment-editor): re-org wip

* refactor(comment-editor): re-org & ssr cookie logic

* refactor(comment-editor): publish workflow done & style dajust

* refactor(update): put isAuthorUptoved into workflow

* refactor(comment-editor): update logic wip

* refactor(comment-editor): update logic done

* refactor(comment-editor): show action when hover

* refactor(comment-editor): reply, update, create workflow done

* refactor(comment-editor): re-org update method

* refactor: re-org all editor to Editor

* refactor(comment-list): replies states debug

* refactor(comment-list): replies logic & upvote style

* refactor(comment-list): replies pagi logic

* refactor(comment-list): remove tobeDelete concept

* refactor(comment-list): pagi logic & adjust style

* refactor(comment-list): wip

* refactor(comment-list): adjust upvote & indent-line size/margin

* refactor(comments): new comment state api

Author: mydearxym

package-lock.json

@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.13.14",
-    "@groupher/react-editor": "^1.1.28",
+    "@groupher/react-editor": "^1.1.29",
     "@next/bundle-analyzer": "^9.4.4",
     "@sentry/browser": "5.17.0",
     "@sentry/node": "5.17.0",
@@ -56,14 +56,14 @@
     "chalk": "^2.4.1",
     "compatible-debug": "^1.0.0",
     "cookie-parser": "^1.4.4",
+    "cookies-next": "^2.0.3",
     "core-js": "3.6.5",
     "cross-env": "^7.0.2",
     "express": "^4.16.4",
     "glob": "^7.1.2",
     "graphql": "^15.5.1",
     "graphql-request": "3.5.0",
     "graphql-voyager": "^1.0.0-rc.31",
-    "js-cookie": "^2.2.0",
     "mastani-codehighlight": "0.0.7",
     "mobx": "6.3.2",
     "mobx-react": "7.2.0",

package.json

@@ -9,7 +9,6 @@ const renderAndCache = ({ req, res, path }) => {
   // do not cache in dev mode
   if (dev) {
     const pagePath = path || req.path
-    console.log('# pagePath: ', pagePath)
     return app.render(req, res, pagePath, {
       ...req.query,
       ...req.params,

server/helper.js

@@ -13,7 +13,7 @@ const AnimatedCount: FC<TProps> = ({
   active = false,
 }) => {
   return (
-    <Wrapper size={size} $active={active}>
+    <Wrapper size={size} $active={active} count={count}>
       <AnimateOnChange
         animationIn="fadeInUp"
         animationOut="bounceOut"

src/components/AnimatedCount/AnimatedCount.tsx

@@ -20,7 +20,7 @@ const AnimatedCount = dynamic(() => import('./AnimatedCount'), {
       active: boolean
     }
     return (
-      <Wrapper size={size} $active={active}>
+      <Wrapper size={size} $active={active} count={count}>
         {count}
       </Wrapper>
     )

src/components/AnimatedCount/index.tsx

@@ -1,15 +1,13 @@
 import styled from 'styled-components'
 
 import type { TSIZE, TActive } from '@/spec'
-import { theme } from '@/utils/themes'
 
-import { getFontSize } from './metric'
+import { getFontSize, getCountColor } from './metric'
 
-type TWrapper = { size: TSIZE } & TActive
+type TWrapper = { size: TSIZE; count: number } & TActive
 
 export const Wrapper = styled.div<TWrapper>`
-  color: ${({ $active }) =>
-    $active ? '#139C9E' : theme('thread.articleTitle')};
+  color: ${({ $active, count }) => getCountColor($active, count)};
   font-size: ${({ size }) => getFontSize(size)};
   font-weight: ${({ $active }) => ($active ? 'bold' : 'normal')};
   overflow-y: hidden;

src/components/AnimatedCount/styles/index.ts

@@ -1,6 +1,8 @@
 import type { TSIZE } from '@/spec'
 import { SIZE } from '@/constant'
 
+import { theme } from '@/utils/themes'
+
 export const getFontSize = (size: TSIZE): string => {
   switch (size) {
     case SIZE.TINY: {
@@ -15,4 +17,10 @@ export const getFontSize = (size: TSIZE): string => {
   }
 }
 
-export const holder = 1
+export const getCountColor = ($active: boolean, count: number): string => {
+  if ($active) return '#139C9E'
+  if (count === 0) return '#4f7478'
+  if (count >= 5) return theme('thread.articleTitle')
+
+  return theme('thread.articleDigest')
+}

src/components/AnimatedCount/styles/metric.ts

@@ -52,7 +52,7 @@ const ArtimentBody: FC<TProps> = ({
 
   return (
     <Wrapper testid={testid}>
-      <Body ref={bodyRef} lineClampNum={lineClampNum}>
+      <Body ref={bodyRef} lineClampNum={lineClampNum} mode={mode}>
         <HTML
           dangerouslySetInnerHTML={{
             __html: document.bodyHtml,

src/components/ArtimentBody/index.tsx

@@ -8,8 +8,9 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
 }))<TTestable>``
 
-export const Body = styled.div<{ lineClampNum: number }>`
-  font-size: 16px;
+type TBody = { lineClampNum: number; mode: 'article' | 'comment' }
+export const Body = styled.div<TBody>`
+  font-size: ${({ mode }) => (mode === 'article' ? '16px' : '15px')};
   line-height: 1.85;
   position: relative;
   display: -webkit-box;

src/components/ArtimentBody/styles/index.ts

@@ -33,7 +33,7 @@ const SubmitButton: FC<TProps> = ({
       {publishDone ? (
         <DonwWrapper>
           <DoneIcon />
-          <DoneHint>已完成</DoneHint>
+          <DoneHint>已提交</DoneHint>
         </DonwWrapper>
       ) : (
         <YesOrNoButtons