Merge pull request #8 from cangzhang/feat/ui

uniquemo · web-flow · commit 585327ef8209 · 2020-12-04T17:56:00.000+08:00
feat: optimize ui and logic
diff --git a/package.json b/package.json
@@ -139,6 +139,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
     "style-loader": "^2.0.0",
+    "svg-inline-loader": "^0.8.2",
     "ts-loader": "^8.0.5",
     "typescript": "^4.0.3",
     "webpack": "4",
diff --git a/src/extension.ts b/src/extension.ts
@@ -46,14 +46,14 @@ export async function activate(context: vscode.ExtensionContext) {
     vscode.commands.registerCommand('codingPlugin.showMROverview', async (mr: IMRWebViewDetail) => {
       Panel.createOrShow(context, codingSrv);
       codingSrv.getMRDetail(mr.iid).then((detailResp) => {
-        Panel.currentPanel?.broadcast(`UPDATE_CURRENT_MR`, {
+        Panel.currentPanel?.broadcast(`mr.update`, {
           ...mr,
           data: detailResp.data,
           user: context.workspaceState.get(`session`, {} as ISessionData)?.user,
         });
       });
       codingSrv.getMRActivities(mr.iid).then((activityResp) => {
-        Panel.currentPanel?.broadcast(`UPDATE_MR_ACTIVITIES`, activityResp.data);
+        Panel.currentPanel?.broadcast(`mr.update.activities`, activityResp.data);
       });
       codingSrv.getMRReviewers(mr.iid).then((reviewerResp) => {
         Panel.currentPanel?.broadcast(`mr.update.reviewers`, reviewerResp.data);
diff --git a/src/panel.ts b/src/panel.ts
@@ -115,8 +115,12 @@ export class Panel {
               this.replyMessage(message);
               break;
             case 'mr.add.comment':
-              const result = await this._codingSrv.commentMR(args.id, args.comment);
-              this.replyMessage(message, result.data);
+              const commentRes = await this._codingSrv.commentMR(args.id, args.comment);
+              this.replyMessage(message, commentRes.data);
+              break;
+            case 'mr.get.activities':
+              const getActivitiesRes = await this._codingSrv.getMRActivities(args);
+              this.replyMessage(message, getActivitiesRes.data);
               break;
           }
         } catch (err) {
diff --git a/webpack.config.js b/webpack.config.js
@@ -34,6 +34,10 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.svg$/,
+        loader: 'svg-inline-loader',
+      },
     ],
   },
   performance: {
diff --git a/webviews/App.tsx b/webviews/App.tsx
@@ -24,7 +24,9 @@ const TitleWrapper = styled.div`
 const Row = styled.div`
   display: flex;
   align-items: center;
-  margin: 16px 0;
+  margin: 16px 0 0;
+  padding-bottom: 15px;
+  border-bottom: 1px solid var(--vscode-list-inactiveSelectionBackground);
 `;
 const Desc = styled.article`
   border: 1px solid gray;
@@ -40,6 +42,15 @@ const Sidebar = styled.div`
   width: 200px;
   margin-left: 20px;
 `;
+const EditBtn = styled.span`
+  width: 16px;
+  height: 16px;
+  margin-left: 10px;
+  cursor: pointer;
+`;
+const Empty = styled.div`
+  text-align: center;
+`;
 
 function App() {
   const { currentMR, updateMRTitle } = appStore;
@@ -56,9 +67,10 @@ function App() {
   const { repoInfo, data } = currentMR;
   const { merge_request: mergeRequest } = data;
 
-  const handleKeyDown = (event: any) => {
+  const handleKeyDown = async (event: any) => {
     if (event.key === 'Enter') {
-      updateMRTitle(title);
+      await updateMRTitle(title);
+      setEditing(false);
     }
   };
 
@@ -97,9 +109,11 @@ function App() {
               #{currentMR.iid}
             </a>
             )
-            <span className='edit' onClick={handleEdit}>
-              编辑
-            </span>
+            <EditBtn
+              className='edit'
+              onClick={handleEdit}
+              dangerouslySetInnerHTML={{ __html: require('./assets/edit.svg') }}
+            />
           </>
         )}
       </TitleWrapper>
@@ -109,10 +123,15 @@ function App() {
       </Row>
       <BodyWrap>
         <Body>
-          <h3>Description:</h3>
+          <h3>Description</h3>
           <Desc>
-            <div dangerouslySetInnerHTML={{ __html: mergeRequest?.body }} />
+            {mergeRequest?.body ? (
+              <div dangerouslySetInnerHTML={{ __html: mergeRequest?.body }} />
+            ) : (
+              <Empty>Empty</Empty>
+            )}
           </Desc>
+          <h3>Activities</h3>
           <Activities />
         </Body>
         <Sidebar>
diff --git a/webviews/assets/check.svg b/webviews/assets/check.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 3.76345L5.80687 11.9351L5.08584 11.8927L1 7.29614L1.76345 6.61752L5.50997 10.8324L14.3214 3L15 3.76345Z" fill="#C5C5C5"/>
+</svg>
diff --git a/webviews/assets/edit.svg b/webviews/assets/edit.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.40706 15L1 13.5929L3.35721 9.46781L3.52339 9.25025L11.7736 1L13.2321 1L15 2.76791V4.22636L6.74975 12.4766L6.53219 12.6428L2.40706 15ZM2.40706 13.5929L6.02053 11.7474L14.2708 3.49714L12.5029 1.72923L4.25262 9.97947L2.40706 13.5929Z" fill="#C5C5C5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.64642 12.3536L3.64642 10.3536L4.35353 9.64645L6.35353 11.6464L5.64642 12.3536Z" fill="#C5C5C5"/>
+</svg>
diff --git a/webviews/components/Activities.tsx b/webviews/components/Activities.tsx
@@ -30,10 +30,9 @@ function Activities() {
     );
   };
 
-  const allActivities = [...activities.map((i) => [i]), ...comments];
-  allActivities.sort((a, b) => {
-    return a[0].created_at - b[0].create_at;
-  });
+  const allActivities = [...activities.map((i) => [i]), ...comments].sort(
+    (a, b) => a[0].created_at - b[0].created_at,
+  );
 
   return (
     <div>
diff --git a/webviews/components/Comment.tsx b/webviews/components/Comment.tsx
@@ -15,6 +15,7 @@ const Header = styled.div`
   align-items: center;
   border: 1px solid var(--vscode-list-inactiveSelectionBackground);
   background: var(--vscode-list-inactiveSelectionBackground);
+  padding: 5px 10px;
 `;
 const AuthorLinkWrap = styled.div`
   margin-left: 5px;
@@ -25,7 +26,7 @@ const Body = styled.div`
   border-top: none;
 `;
 const Time = styled.div`
-  margin-left: 20px;
+  margin-left: 15px;
 `;
 
 const ChildComment = styled.div`
@@ -41,7 +42,7 @@ function Comment({ comment }: IProps) {
   const renderChildComments = () => {
     return comment.childComments?.map((c) => {
       return (
-        <ChildComment>
+        <ChildComment key={c.id}>
           <AuthorLink for={c.author} />
           <ChildCommentContent>
             <div dangerouslySetInnerHTML={{ __html: c.content }} />
diff --git a/webviews/components/Reviewers.tsx b/webviews/components/Reviewers.tsx
@@ -1,7 +1,57 @@
 import React from 'react';
+import styled from 'styled-components';
+import { view } from '@risingstack/react-easy-state';
+import appStore from 'webviews/store/appStore';
+import { Avatar, AuthorLink } from 'webviews/components/User';
+
+const Title = styled.div`
+  margin-top: 15px;
+  font-size: 16px;
+  font-weight: 600;
+`;
+const FlexCenter = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const Item = styled(FlexCenter)`
+  padding: 5px 0;
+  justify-content: space-between;
+  a:first-child {
+    margin-right: 5px;
+  }
+`;
+const Icon = styled.div`
+  width: 16px;
+  height: 16px;
+  position: relative;
+  top: 4px;
+`;
 
 function Reviewers() {
-  return <div>reviewers</div>;
+  const { reviewers } = appStore;
+  const { reviewers: rReviewers = [], volunteer_reviewers: volunteerReviewers = [] } = reviewers;
+  const allReviewers = [...rReviewers, ...volunteerReviewers];
+
+  return (
+    <div>
+      <Title>Reviewers</Title>
+      {allReviewers.map((r) => {
+        return (
+          <Item>
+            <FlexCenter>
+              <Avatar for={r.reviewer} />
+              <AuthorLink for={r.reviewer} />
+            </FlexCenter>
+            {r.value === 100 && (
+              <Icon>
+                <span dangerouslySetInnerHTML={{ __html: require('../assets/check.svg') }} />
+              </Icon>
+            )}
+          </Item>
+        );
+      })}
+    </div>
+  );
 }
 
-export default Reviewers;
+export default view(Reviewers);
diff --git a/webviews/components/User.tsx b/webviews/components/User.tsx
@@ -2,15 +2,20 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { IMRDetailMR } from 'src/typings/respResult';
 
+const Link = styled.a`
+  position: relative;
+  top: 2px;
+`;
 const AvatarImg = styled.img`
   width: 24px;
   height: 24px;
+  border-radius: 50%;
 `;
 
 export const Avatar = ({ for: author }: { for: Partial<IMRDetailMR['author']> }) => (
-  <a href={author.avatar}>
+  <Link href={author.avatar}>
     <AvatarImg src={author.avatar} alt='' />
-  </a>
+  </Link>
 );
 
 export const AuthorLink = ({ for: author }: { for: IMRDetailMR['author'] }) => (
diff --git a/webviews/store/appStore.ts b/webviews/store/appStore.ts
@@ -34,12 +34,21 @@ const appStore = store({
   updateMRStatus(status: MERGE_STATUS) {
     appStore.currentMR.data.merge_request.merge_status = status;
   },
+  async refetchMRActivities() {
+    const result = await messageHandler.postMessage({
+      command: actions.MR_GET_ACTIVITIES,
+      args: appStore.currentMR.iid,
+    });
+    appStore.activities = result;
+    return result;
+  },
   async closeMR() {
     const result = await messageHandler.postMessage({
       command: actions.CLOSE_MR,
       args: appStore.currentMR.iid,
     });
     appStore.updateMRStatus(MERGE_STATUS.REFUSED);
+    appStore.refetchMRActivities();
     return result;
   },
   async approveMR() {
@@ -53,6 +62,7 @@ const appStore = store({
     if (index >= 0) {
       appStore.reviewers.reviewers[index].value = 100;
     }
+    appStore.refetchMRActivities();
     return result;
   },
   async disapproveMR() {
@@ -66,6 +76,7 @@ const appStore = store({
     if (index >= 0) {
       appStore.reviewers.reviewers[index].value = 0;
     }
+    appStore.refetchMRActivities();
     return result;
   },
   async mergeMR() {
@@ -74,6 +85,7 @@ const appStore = store({
       args: appStore.currentMR.iid,
     });
     appStore.updateMRStatus(MERGE_STATUS.ACCEPTED);
+    appStore.refetchMRActivities();
     return result;
   },
   async updateMRTitle(newTitle: string) {
@@ -85,6 +97,7 @@ const appStore = store({
       },
     });
     appStore.currentMR.data.merge_request.title = newTitle;
+    appStore.refetchMRActivities();
     return result;
   },
   async commentMR(comment: string) {
@@ -95,7 +108,6 @@ const appStore = store({
         comment,
       },
     });
-    console.log('result => ', result);
     appStore.comments.push([result] as any);
     return result;
   },
@@ -113,7 +125,7 @@ export const persistData = () =>
   });
 export const removeDataPersist = (e: () => void) => clearEffect(e);
 
-// broadcast message
+// handle broadcast message
 export const messageHandler = getMessageHandler((message: any) => {
   if (!message) return;
   const { updateCurrentMR, updateMRActivities, updateMRReviewers, updateMRComments } = appStore;
diff --git a/webviews/store/constants.ts b/webviews/store/constants.ts
@@ -1,6 +1,6 @@
 export enum actions {
-  UPDATE_CURRENT_MR = `UPDATE_CURRENT_MR`,
-  UPDATE_MR_ACTIVITIES = `UPDATE_MR_ACTIVITIES`,
+  UPDATE_CURRENT_MR = `mr.update`,
+  UPDATE_MR_ACTIVITIES = `mr.update.activities`,
   CLOSE_MR = `mr.close`,
   MR_APPROVE = `mr.approve`,
   MR_DISAPPROVE = `mr.disapprove`,
@@ -9,4 +9,5 @@ export enum actions {
   MR_UPDATE_TITLE = `mr.update.title`,
   MR_UPDATE_COMMENTS = `mr.udpate.comments`,
   MR_ADD_COMMENT = `mr.add.comment`,
+  MR_GET_ACTIVITIES = `mr.get.activities`,
 }
diff --git a/yarn.lock b/yarn.lock
@@ -4380,7 +4380,7 @@ loader-runner@^2.4.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
-loader-utils@^1.0.2, loader-utils@^1.2.3:
+loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -4950,7 +4950,7 @@ oauth-sign@~0.9.0:
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
   integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
 
-object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -6063,6 +6063,11 @@ simple-get@^3.0.3:
     once "^1.3.1"
     simple-concat "^1.0.0"
 
+simple-html-tokenizer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz#05c2eec579ffffe145a030ac26cfea61b980fabe"
+  integrity sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4=
+
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
@@ -6474,6 +6479,15 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svg-inline-loader@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/svg-inline-loader/-/svg-inline-loader-0.8.2.tgz#9872414f9e4141601e04eb80cda748c9a50dae71"
+  integrity sha512-kbrcEh5n5JkypaSC152eGfGcnT4lkR0eSfvefaUJkLqgGjRQJyKDvvEE/CCv5aTSdfXuc+N98w16iAojhShI3g==
+  dependencies:
+    loader-utils "^1.1.0"
+    object-assign "^4.0.1"
+    simple-html-tokenizer "^0.1.1"
+
 table-layout@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/table-layout/-/table-layout-1.0.1.tgz#8411181ee951278ad0638aea2f779a9ce42894f9"
