feat(alias): add update alias function to project cards

Author: foreseaz

src/pages/dashboard/components/Projects.js

@@ -5,16 +5,29 @@ import _get from 'lodash/get'
 import moment from 'moment'
 import makeBlockie from 'ethereum-blockies-base64'
 import PropTypes from 'prop-types'
-import { Card, Button, Modal, Col, Tag, Avatar, InputNumber } from 'antd'
+import {
+  Card,
+  Button,
+  Modal,
+  Col,
+  Tag,
+  Avatar,
+  Input,
+  InputNumber,
+  Icon,
+} from 'antd'
 import { addLangPrefix, toPTC, fromPTC } from 'utils'
 import { Trans, withI18n } from '@lingui/react'
+import UpdateAliasModal from './UpdateAliasModal'
 import styles from './Projects.less'
 
 @withI18n()
 @connect(({ loading, dashboard, app }) => ({ loading, dashboard, app }))
 class Projects extends PureComponent {
   state = {
     amount: 0.1,
+    alias: '',
+    updateAlias: false,
   }
   confirmAmount = db => {
     const { i18n } = this.props
@@ -50,6 +63,17 @@ class Projects extends PureComponent {
       },
     })
   }
+  confirmEditAlias = (project, e) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    this.setState({
+      alias: project.alias,
+      db: project.project,
+      updateAlias: true,
+    })
+  }
+  closeUpdateAliasModal = () => this.setState({ alias: '', updateAlias: false })
   topup = async db => {
     const { dispatch, i18n } = this.props
     const { amount } = this.state
@@ -118,6 +142,13 @@ class Projects extends PureComponent {
                 />
               )}
               <div className={styles.alias}>{p.alias}</div>
+              <Button
+                onClick={e => this.confirmEditAlias(p, e)}
+                className={styles.editBtn}
+                size="small"
+              >
+                <Icon type="edit" theme="twoTone" />
+              </Button>
             </div>
           </Link>
         </div>
@@ -136,6 +167,13 @@ class Projects extends PureComponent {
                 {this._renderProjectCard(p)}
               </Col>
             ))}
+        {this.state.updateAlias && (
+          <UpdateAliasModal
+            db={this.state.db}
+            alias={this.state.alias}
+            close={this.closeUpdateAliasModal}
+          />
+        )}
       </>
     )
   }

src/pages/dashboard/components/Projects.less

@@ -34,9 +34,11 @@
     }
   }
   .name {
-    padding: 20px 10px 10px;
+    margin-top: 10px;
+    padding: 10px;
     display: flex;
     align-content: center;
+    position: relative;
 
     .avatar {
       border: solid 2px #fcfcfc;
@@ -46,9 +48,16 @@
       margin-left: 15px;
       font-size: 1rem;
       font-weight: 600;
-      padding: 12px 0;
+      padding: 12px 20px 12px 0;
       text-overflow: ellipsis;
       overflow: hidden;
     }
+    .editBtn {
+      height: 16px;
+      font-size: 10px;
+      position: absolute;
+      right: 0;
+      top: calc(50% - 8px);
+    }
   }
 }

src/pages/dashboard/components/UpdateAliasModal.js

@@ -0,0 +1,76 @@
+import React, { PureComponent } from 'react'
+import { connect } from 'dva'
+import moment from 'moment'
+import PropTypes from 'prop-types'
+import { Form, Input, Button, Modal, Icon, message } from 'antd'
+import { Trans, withI18n } from '@lingui/react'
+
+@withI18n()
+@Form.create()
+@connect(({ loading, dashboard }) => ({ loading, dashboard }))
+class UpdateAliasModal extends PureComponent {
+  submitAlias = () => {
+    const { db, alias, dispatch, form, close } = this.props
+
+    form.validateFields(async (err, values) => {
+      if (err) {
+        return
+      }
+      console.log('Received values of form: ', values)
+
+      const { alias } = values
+      const { data, success } = await dispatch({
+        type: 'dashboard/updateProjectMisc',
+        payload: { db, alias },
+      })
+
+      if (success) {
+        dispatch({ type: 'app/getProjectList' })
+        message.success('Update project alias success')
+        close()
+      }
+    })
+  }
+  render() {
+    const { close, form } = this.props
+    const { getFieldDecorator } = form
+
+    return (
+      <Modal
+        visible={true}
+        title={'请输入希望修改的别名:'}
+        onCancel={close}
+        footer={[
+          <Button type="primary" onClick={this.submitAlias}>
+            <Trans>OK</Trans>
+          </Button>,
+        ]}
+      >
+        <Form>
+          <Form.Item label="alias">
+            {getFieldDecorator('alias', {
+              rules: [
+                {
+                  required: true,
+                  message: 'Please input the new alias',
+                },
+                {
+                  max: 16,
+                  message: 'Max length of alias is 16 characters',
+                },
+              ],
+              initialValue: this.props.alias,
+            })(<Input placeholder="Please input the new alias" />)}
+          </Form.Item>
+        </Form>
+      </Modal>
+    )
+  }
+}
+
+UpdateAliasModal.propTypes = {
+  alias: PropTypes.string.isRequired,
+  close: PropTypes.func,
+}
+UpdateAliasModal.defaultProps = {}
+export default UpdateAliasModal

src/pages/dashboard/components/index.js

@@ -3,5 +3,6 @@ import TaskList from './taskList'
 import CreateProject from './createProject'
 import Projects from './Projects'
 import User from './user'
+import UpdateAliasModal from './UpdateAliasModal'
 
-export { GetPTC, TaskList, CreateProject, Projects, User }
+export { GetPTC, TaskList, CreateProject, Projects, User, UpdateAliasModal }

src/pages/dashboard/model.js

@@ -5,14 +5,13 @@ import { pathMatchRegexp } from 'utils'
 import { model } from 'utils/model'
 
 const {
-  // queryDashboard,
-  // queryWeather,
   getPTC,
   queryTasks,
   queryTask,
   createProject,
   queryProject,
   topupProject,
+  updateProjectMiscConfig,
 } = api
 
 export default modelExtend(model, {
@@ -34,41 +33,12 @@ export default modelExtend(model, {
 
           dispatch({ type: 'app/getProjectList' })
           // query dashboard related
-          // dispatch({ type: 'query' })
-          // dispatch({ type: 'queryWeather' })
           dispatch({ type: 'getTaskList', payload: { all: true } })
         }
       })
     },
   },
   effects: {
-    // *query({ payload }, { call, put }) {
-    //   const data = yield call(queryDashboard, parse(payload))
-    //   yield put({
-    //     type: 'updateState',
-    //     payload: data,
-    //   })
-    // },
-    // *queryWeather({ payload = {} }, { call, put }) {
-    //   payload.location = 'shenzhen'
-    //   const result = yield call(queryWeather, payload)
-    //   const { success } = result
-    //   if (success) {
-    //     const data = result.results[0]
-    //     const weather = {
-    //       city: data.location.name,
-    //       temperature: data.now.temperature,
-    //       name: data.now.text,
-    //       icon: `//s5.sencdn.com/web/icons/3d_50/${data.now.code}.png`,
-    //     }
-    //     yield put({
-    //       type: 'updateState',
-    //       payload: {
-    //         weather,
-    //       },
-    //     })
-    //   }
-    // },
     *getPTC({ payload }, { call, put }) {
       const { data, success } = yield call(getPTC)
       yield put({ type: 'app/checkMainWallet' })
@@ -101,5 +71,9 @@ export default modelExtend(model, {
       const { data, success } = yield call(topupProject, payload)
       return { data, success }
     },
+    *updateProjectMisc({ payload }, { call, put }) {
+      const { data, success } = yield call(updateProjectMiscConfig, payload)
+      return { data, success }
+    },
   },
 })