refactor: mutation debug 1 (#1166)

* chore: basic login

* chore: communityBrief adjust

* refactor(followButton): adjust styles && offset prop

* refactor(clean-up): unused store & containers

* refactor(footer): move joinUS to footer item

* refactor(upvote): re-org post action workflow

* refactor(upvote): re-org general schema-thread logic

* refactor(upvote): ux enhance, wip

* refactor(comment): emotion wip

* refactor(comment): emotion selector re-org

* refactor(comment): emotion selector styles re-org

* refactor(emotion): basic action & panel style

* refactor(comment): style adjust

* refactor(comment): emotion UX with server

* refactor(comment): reply emotion UX done

Author: mydearxym

src/components/ArtimentBody/FoldBox.tsx

@@ -12,7 +12,11 @@ type TProps = {
 
 const FoldBox: FC<TProps> = ({ fold, onFold, onExpand, mode }) => {
   return (
-    <Wrapper fold={fold} onClick={() => (fold ? onExpand() : onFold())}>
+    <Wrapper
+      fold={fold}
+      mode={mode}
+      onClick={() => (fold ? onExpand() : onFold())}
+    >
       {!fold && (
         <FoldHint mode={mode}>
           折叠

src/components/ArtimentBody/styles/fold_box.ts

@@ -4,9 +4,10 @@ import Img from '@/Img'
 // import { theme } from '@/utils/themes'
 import css from '@/utils/css'
 
-export const Wrapper = styled.div<{ fold: boolean }>`
+type TWrapper = { fold: boolean; mode: 'article' | 'comment' }
+export const Wrapper = styled.div<TWrapper>`
   ${css.flex('align-both')};
-  width: 100%;
+  width: ${({ mode }) => (mode === 'article' ? '100%' : '96%')};
   margin-top: 28px;
   margin-bottom: 28px;
   padding: 5px 0;

src/components/Buttons/FollowButton/FollowingBtn.tsx

@@ -1,26 +1,32 @@
 import { FC, memo } from 'react'
 
 import { TSIZE_TSM } from '@/spec'
-import { ICON } from '@/config'
 
 import { LavaLampLoading } from '@/components/dynamic'
 import Tooltip from '@/components/Tooltip'
 
 import {
   BtnWrapper,
   Popinfo,
-  CheckedIcon,
+  FollowingIcon,
   FollowingButton,
 } from '../styles/follow_button'
 
 type TProps = {
   size: TSIZE_TSM
   loading: boolean
+  followingOffset: number
   text: string
   onClick: () => void
 }
 
-const FollowingBtn: FC<TProps> = ({ size, loading, text, onClick }) => {
+const FollowingBtn: FC<TProps> = ({
+  size,
+  loading,
+  followingOffset,
+  text,
+  onClick,
+}) => {
   return (
     <>
       {loading ? (
@@ -34,13 +40,14 @@ const FollowingBtn: FC<TProps> = ({ size, loading, text, onClick }) => {
         >
           <FollowingButton
             size={size}
+            followingOffset={followingOffset}
             type="primary"
             ghost
             onClick={onClick}
             noBorder
           >
             <BtnWrapper>
-              <CheckedIcon src={`${ICON}/shape/checked.svg`} />
+              <FollowingIcon />
               {text}
             </BtnWrapper>
           </FollowingButton>

src/components/Buttons/FollowButton/index.tsx

@@ -19,48 +19,51 @@ type TProps = {
   userId?: TID
   size?: TSIZE_TSM
   loading?: boolean
-  fakeLoading?: boolean
+  simuLoading?: boolean
   followText?: string
   followingText?: string
+  followingOffset?: number
   onFollow?: (userId: TID) => void
   onUndoFollow?: (userId: TID) => void
 }
 
 const FollowButton: FC<TProps> = ({
   userId,
   size = SIZE.SMALL,
-  fakeLoading = false,
+  simuLoading = true,
   loading = false,
   hasFollowed = false,
   followText = '关 注',
   followingText = '已关注',
+  followingOffset = 0,
   onFollow = log,
   onUndoFollow = log,
 }) => {
-  const [simuLoading, setSimuLoading] = useState(false)
-  const isLoading = fakeLoading ? simuLoading : loading
+  const [fakeLoading, setFakeLoading] = useState(false)
+  const isLoading = simuLoading ? fakeLoading : loading
 
   const handleFollow = useCallback(() => {
-    if (fakeLoading) {
-      setSimuLoading(true)
-      setTimeout(() => setSimuLoading(false), 1500)
+    if (simuLoading) {
+      setFakeLoading(true)
+      setTimeout(() => setFakeLoading(false), 1500)
     }
     onFollow(userId)
-  }, [fakeLoading, onFollow, userId])
+  }, [simuLoading, onFollow, userId])
 
   const handleUndoFollow = useCallback(() => {
-    if (fakeLoading) {
-      setSimuLoading(true)
-      setTimeout(() => setSimuLoading(false), 1500)
+    if (simuLoading) {
+      setFakeLoading(true)
+      setTimeout(() => setFakeLoading(false), 1500)
     }
     onUndoFollow(userId)
-  }, [fakeLoading, onUndoFollow, userId])
+  }, [simuLoading, onUndoFollow, userId])
 
   return (
     <>
       {hasFollowed ? (
         <FollowingBtn
           size={size}
+          followingOffset={followingOffset}
           loading={isLoading}
           text={followingText}
           onClick={handleUndoFollow}

src/components/Buttons/styles/follow_button/index.ts

@@ -6,9 +6,11 @@ import animate from '@/utils/animations'
 import Button from '@/components/Buttons/Button'
 import Img from '@/Img'
 
+import JoinEyeSVG from '@/icons/JoinEye'
+
 export const BtnWrapper = styled.div`
   ${css.flex('align-center')};
-  padding: 2px 5px;
+  padding: 2px 4px;
 `
 const BtnIcon = styled(Img)`
   ${css.size(14)};
@@ -32,23 +34,31 @@ export const LoadingIcon = styled(BtnIcon)<{ light: boolean }>`
   ${css.size(15)};
   animation: ${animate.rotate360} 1s linear infinite;
 `
-export const CheckedIcon = styled(BtnIcon)`
+export const FollowingIcon = styled(JoinEyeSVG)`
   fill: ${theme('baseColor.green')};
+  ${css.size(15)};
+  margin-right: 3px;
+  transform: scaleX(0.9);
+  margin-top: -1px;
+  ${BtnWrapper}:hover & {
+    fill: ${theme('thread.articleTitle')};
+  }
 `
 export const FollowedButton = styled(Button)`
   border-radius: 10px;
 `
-export const FollowingButton = styled(Button)`
-  color: ${theme('thread.articleTitle')};
-  /* color: ${theme('baseColor.green')}; */
+export const FollowingButton = styled(Button)<{ followingOffset: number }>`
+  color: ${theme('baseColor.green')};
+  font-weight: bold;
   border: none;
-  border-radius: 10px;
-  background: #003745;
+  border-radius: 8px;
+  margin-left: ${({ followingOffset }) => `${followingOffset}px` || 0};
+  /* background: #034556; */
   padding-top: 2px;
   padding-bottom: 2px;
 
   &:hover {
-    background: #003745;
-    /* border: 1px solid; */
+    color: ${theme('thread.articleTitle')};
+    background: #034556;
   }
 `

src/components/CommunityJoinSign/index.tsx

@@ -0,0 +1,55 @@
+/*
+ * CommunityJoinSign
+ */
+
+import { FC, memo } from 'react'
+
+import { ICON_CMD } from '@/config'
+import { buildLog } from '@/utils/logger'
+
+import FollowButton from '@/components/Buttons/FollowButton'
+
+import {
+  Wrapper,
+  PopContentWrapper,
+  PopHeader,
+  PopHeaderIcon,
+  PopHeaderText,
+  PopHighlight,
+} from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:VerifiedSign:index')
+
+const PopContent = () => {
+  return (
+    <PopContentWrapper>
+      <PopHeader>
+        <PopHeaderIcon src={`${ICON_CMD}/verified.svg`} />
+        <PopHeaderText>官方认证</PopHeaderText>
+      </PopHeader>
+      <div>
+        我们已通过各种渠道证实该社区为{' '}
+        <PopHighlight>communityTitle</PopHighlight> 官方开通
+      </div>
+    </PopContentWrapper>
+  )
+}
+
+// type TProps = {}
+
+const CommunityJoinSign: FC = () => {
+  const hasFollowed = false
+  return (
+    <Wrapper hasFollowed={hasFollowed}>
+      <FollowButton
+        followText="&nbsp;加 入&nbsp;"
+        followingText="已加入"
+        size="tiny"
+        hasFollowed={hasFollowed}
+      />
+    </Wrapper>
+  )
+}
+
+export default memo(CommunityJoinSign)

src/components/CommunityJoinSign/styles/index.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components'
+
+import Img from '@/Img'
+import { theme } from '@/utils/themes'
+import css from '@/utils/css'
+
+export const Wrapper = styled.div<{ hasFollowed: boolean }>`
+  ${css.flex('align-center')};
+  margin-left: ${({ hasFollowed }) => (hasFollowed ? '-8px' : '5px')};
+`
+export const PopContentWrapper = styled.div`
+  text-align: left;
+  width: 200px;
+  font-size: 13px !important;
+  line-height: 1.6;
+`
+export const PopHeader = styled.div`
+  ${css.flex('align-center')}
+  margin-bottom: 10px;
+`
+export const PopHeaderIcon = styled(Img)`
+  fill: ${theme('baseColor.green')};
+  padding: 0;
+  margin-right: 4px;
+  ${css.size(14)};
+`
+export const PopHeaderText = styled.div`
+  color: ${theme('baseColor.green')};
+  font-size: 13px;
+  font-weight: bold;
+`
+export const PopHighlight = styled.span`
+  font-size: 14px;
+  font-weight: bold;
+`

src/containers/editor/PostEditor/tests/index.test.ts renamed to src/components/CommunityJoinSign/tests/index.test.ts

@@ -1,9 +1,9 @@
 // import React from 'react'
 // import { shallow } from 'enzyme'
 
-// import PostEditor from '../index'
+// import VerifiedSign from '../index'
 
-describe('TODO <PostEditor />', () => {
+describe('TODO <VerifiedSign />', () => {
   it('Expect to have unit tests specified', () => {
     expect(true).toEqual(true)
   })

src/components/CommunityStatesPad/index.tsx

@@ -40,13 +40,13 @@ const CommunityStatesPad: FC<TProps> = ({
   onShowSubscriberList = log,
   withoutFounding = true,
 }) => {
-  const { editorsCount, subscribersCount, viewerHasSubscribed } = community
+  const { editorsCount, subscribersCount } = community
   const { isMobile } = usePlatform()
   const contentsCount = getContentCount(community)
 
   return (
     <Wrapper>
-      <NumberSection active={viewerHasSubscribed}>
+      <NumberSection>
         {!isMobile && <NumberTitle>成员</NumberTitle>}
         <NumberGroup
           count={subscribersCount}

src/components/CommunityStatesPad/styles/index.ts

@@ -1,6 +1,5 @@
 import styled from 'styled-components'
 
-import type { TActive } from '@/spec'
 // import Img from '@/Img'
 import { theme } from '@/utils/themes'
 import css from '@/utils/css'
@@ -12,11 +11,9 @@ export const Wrapper = styled.div`
     margin-top: -4px;
   `};
 `
-type TNumberSection = TActive & { readOnly?: boolean }
+type TNumberSection = { readOnly?: boolean }
 export const NumberSection = styled.div<TNumberSection>`
   ${css.flexColumn('align-end')};
-  background-color: ${({ active }) =>
-    active ? theme('banner.numberHoverBg') : ''};
 
   padding: 0 5px;
   border-radius: 4px;