added moreMenu on postCard & updated to antd 4.8

.umirc.js

@@ -1,5 +1,5 @@
-import { defineConfig } from 'umi';
-const { resolve, join } = require('path');
+import { defineConfig, chainWebpack } from 'umi'
+import { resolve } from 'path'
 
 export default defineConfig({
   hash: true,

package.json

@@ -13,7 +13,7 @@
       "./dist/**/*"
     ],
     "directories": {
-      "output": "./build" 
+      "output": "./build"
     },
     "appId": "com.rstudio.comty",
     "asar": false
@@ -41,7 +41,7 @@
     "@ragestudio/nodecore-utils": "^0.1.18",
     "@types/jest": "^26.0.14",
     "@types/lodash": "^4.14.162",
-    "antd": "^4.7.2",
+    "antd": "^4.8.0",
     "axios": "^0.20.0",
     "babel-core": "^6.26.3",
     "classnames": "^2.2.6",

src/components/PostCard/index.js

@@ -1,7 +1,9 @@
-import React, { useLayoutEffect } from 'react'
+import React from 'react'
 import * as antd from 'antd'
 import styles from './index.less'
 import { MediaPlayer } from 'components'
+import * as Icons from 'components/Icons'
+
 import { Clipboard, Aperture, FlagOutlined, MessageSquare, MoreOutlined, PushpinFilled, EllipsisOutlined, verifiedBadge } from 'components/Icons'
 import * as core from 'core'
 import Icon from '@ant-design/icons'
@@ -33,6 +35,20 @@ const defaultPayload = {
   ReportIgnore: false,
 }
 
+const moreMenuList = [
+  {
+    key: "save_post",
+    icon: "Save",
+    textEnable: "Save post",
+    textDisable: "Unsave post"
+  },
+  {
+    key: "report_post",
+    icon: "AlertCircle",
+    text: "Report"
+  }
+]
+
 const contextMenuList = [
   {
     key: "inspect_element",
@@ -140,12 +156,12 @@ export default class PostCard extends React.PureComponent {
       this.props.handleActions("like", id, (callbackResponse) => {
         let updated = this.state.payload
         if (callbackResponse.code == 200) {
-          
+
           updated.is_liked = !this.state.payload.is_liked
           updated.post_likes = callbackResponse.response.count ?? 0
           this.setState({ payload: updated })
 
-          if (typeof(callback) !== "undefined") {
+          if (typeof (callback) !== "undefined") {
             callback(callbackResponse.response.count)
           }
 
@@ -158,6 +174,22 @@ export default class PostCard extends React.PureComponent {
     }
   }
 
+  getMenuValue(id) {
+    return true // fetch from local state
+  }
+
+  handleMenuClick(id) {
+    return true // mapToFunction
+  }
+
+  renderMoreMenu() {
+    return moreMenuList.map((e) => {
+      return (<antd.Menu.Item onClick={() => this.handleMenuClick(e.id)} key={e.id ?? ""}>
+        {React.createElement(Icons[e.icon])}{e.textDisable && e.textEnable? (this.getMenuValue(e.id) ? e.textEnable : e.textDisable) : e.title?? e.text ?? "Who knows"}
+      </antd.Menu.Item>)
+    })
+  }
+
   render() {
     const {
       id,
@@ -172,6 +204,12 @@ export default class PostCard extends React.PureComponent {
       get_post_comments
     } = this.state.payload || defaultPayload
 
+    const menuMore = (
+      <antd.Menu>
+        {this.renderMoreMenu()}
+      </antd.Menu>
+    )
+
     const actions = [
       <LikeBtn handleClick={(callback) => { this.handleLikeClick(id, (response) => { callback(response) }) }} count={post_likes} liked={core.booleanFix(is_liked)} />,
       <antd.Badge dot={this.state.payload.post_comments > 0 ? true : false}>
@@ -204,7 +242,7 @@ export default class PostCard extends React.PureComponent {
                   </h4>
                   <div className={styles.PostTags}>
                     <div className={styles.MoreMenu}>
-                      <antd.Dropdown onVisibleChange={this.handleVisibleChange} visible={this.state.visibleMoreMenu} trigger={['click']}>
+                      <antd.Dropdown overlay={menuMore} trigger={['click']}>
                         <MoreOutlined key="actionMenu" />
                       </antd.Dropdown>
                     </div>

src/pages/@/components/menu/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import * as antd from 'antd'
-import { Icons } from 'components'
+import { MoreOutlined } from 'components/Icons'
 
 const moreMenu = (
     <antd.Menu>
@@ -12,7 +12,7 @@ const moreMenu = (
 const Menu = (props) => {
   return (
     <antd.Dropdown overlay={moreMenu}>
-        <Icons.MoreOutlined />
+        <MoreOutlined />
     </antd.Dropdown> 
   )
 }