Skip to content

Commit d4a8c76

Browse files
cangzhangcangzhang
committed
change: message exchange.
1 parent e44d9cf commit d4a8c76

File tree

8 files changed

+79
-49
lines changed

8 files changed

+79
-49
lines changed

‎src/extension.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,14 @@ export async function activate(context: vscode.ExtensionContext) {
4646
context.subscriptions.push(
4747
vscode.commands.registerCommand('codingPlugin.showMROverview', async (mr: IMRWebViewDetail) => {
4848
Panel.createOrShow(context, codingSrv);
49+
Panel.currentPanel?.broadcast(`mr.update.toggleLoading`, {});
4950
codingSrv.getMRDetail(mr.iid).then((detailResp) => {
5051
Panel.currentPanel?.broadcast(`mr.update`, {
5152
...mr,
52-
data: detailResp.data,
53+
data: {
54+
...detailResp.data,
55+
loading: false,
56+
},
5357
user: context.workspaceState.get(`session`, {} as ISessionData)?.user,
5458
});
5559
});

‎src/panel.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ export class Panel {
197197
}
198198

199199
private _updateForCat(webview: vscode.Webview) {
200-
this._panel.title = `Merge Request`;
200+
this._panel.title = `Merge Request Overview`;
201201
this._panel.webview.html = this._getHtmlForWebview(webview);
202202
}
203203

‎src/typings/commonTypes.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ export interface IMRWebViewDetail {
3434
iid: string;
3535
accessToken: string;
3636
repoInfo: IRepoInfo;
37-
data: IMRDetail;
37+
data: IMRDetail & {
38+
loading: boolean;
39+
};
3840
user: UserResponse;
3941
}

‎webviews/App.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,20 @@ import appStore from 'webviews/store/appStore';
66
import persistDataHook from 'webviews/hooks/persistDataHook';
77
import Activities from 'webviews/components/Activities';
88
import Reviewers from 'webviews/components/Reviewers';
9+
import messageTransferHook from 'webviews/hooks/messageTransferHook';
910

10-
const LoadingWrapper = styled.div`
11+
const EmptyWrapper = styled.div`
1112
font-size: 16px;
1213
`;
1314
const TitleWrapper = styled.div`
1415
display: flex;
1516
align-items: center;
1617
font-size: 20px;
18+
1719
.edit {
1820
display: none;
1921
}
22+
2023
&:hover .edit {
2124
display: block;
2225
}
@@ -57,15 +60,11 @@ function App() {
5760
const [isEditing, setEditing] = useState(false);
5861
const [title, setTitle] = useState(currentMR?.data?.merge_request?.title);
5962
const inputRef = useRef<HTMLInputElement | null>(null);
63+
const { repoInfo, data } = currentMR;
64+
const { merge_request: mergeRequest } = data || {};
6065

6166
persistDataHook();
62-
63-
if (!currentMR.iid) {
64-
return <LoadingWrapper>Please select an merge request first.</LoadingWrapper>;
65-
}
66-
67-
const { repoInfo, data } = currentMR;
68-
const { merge_request: mergeRequest } = data;
67+
messageTransferHook();
6968

7069
const handleKeyDown = async (event: any) => {
7170
if (event.key === 'Enter') {
@@ -88,6 +87,14 @@ function App() {
8887
inputRef.current?.focus();
8988
};
9089

90+
if (!currentMR.iid) {
91+
return <EmptyWrapper>Please select an merge request first.</EmptyWrapper>;
92+
}
93+
94+
if (data.loading) {
95+
return <EmptyWrapper>Loading...</EmptyWrapper>;
96+
}
97+
9198
return (
9299
<div>
93100
<TitleWrapper>

‎webviews/hooks/messageTransferHook.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { useEffect } from 'react';
2+
import appStore from 'webviews/store/appStore';
3+
import { actions } from 'webviews/store/constants';
4+
5+
export default function messageTransferHook() {
6+
useEffect(() => {
7+
window.addEventListener('message', (ev) => {
8+
const {
9+
updateCurrentMR,
10+
updateMRActivities,
11+
updateMRReviewers,
12+
updateMRComments,
13+
toggleMRLoading,
14+
} = appStore;
15+
const { command, res } = ev?.data;
16+
17+
switch (command) {
18+
case actions.MR_TOGGLE_LOADING: {
19+
toggleMRLoading();
20+
break;
21+
}
22+
case actions.UPDATE_CURRENT_MR: {
23+
updateCurrentMR(res);
24+
break;
25+
}
26+
case actions.UPDATE_MR_ACTIVITIES: {
27+
updateMRActivities(res);
28+
break;
29+
}
30+
case actions.UPDATE_MR_REVIEWERS: {
31+
updateMRReviewers(res);
32+
break;
33+
}
34+
case actions.MR_UPDATE_COMMENTS: {
35+
updateMRComments(res);
36+
break;
37+
}
38+
default:
39+
break;
40+
}
41+
});
42+
}, []);
43+
}

‎webviews/store/appStore.ts‎

Lines changed: 10 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { autoEffect, clearEffect, store } from '@risingstack/react-easy-state';
22
import { IMRWebViewDetail } from 'src/typings/commonTypes';
33
import { IActivity, IReviewer, IComment } from 'src/typings/respResult';
4-
import { getMessageHandler } from 'webviews/utils/message';
54
import { vscode } from 'webviews/constants/vscode';
65
import { actions } from 'webviews/store/constants';
76
import { MERGE_STATUS } from 'webviews/constants/mergeRequest';
@@ -31,19 +30,22 @@ const appStore = store({
3130
updateMRComments(data: IComment[]) {
3231
appStore.comments = data;
3332
},
33+
toggleMRLoading() {
34+
appStore.currentMR.data.loading = !appStore.currentMR.data.loading;
35+
},
3436
updateMRStatus(status: MERGE_STATUS) {
3537
appStore.currentMR.data.merge_request.merge_status = status;
3638
},
3739
async refetchMRActivities() {
38-
const result = await messageHandler.postMessage({
40+
const result = await vscode.postMessage({
3941
command: actions.MR_GET_ACTIVITIES,
4042
args: appStore.currentMR.iid,
4143
});
4244
appStore.activities = result;
4345
return result;
4446
},
4547
async closeMR() {
46-
const result = await messageHandler.postMessage({
48+
const result = await vscode.postMessage({
4749
command: actions.CLOSE_MR,
4850
args: appStore.currentMR.iid,
4951
});
@@ -52,7 +54,7 @@ const appStore = store({
5254
return result;
5355
},
5456
async approveMR() {
55-
const result = await messageHandler.postMessage({
57+
const result = await vscode.postMessage({
5658
command: actions.MR_APPROVE,
5759
args: appStore.currentMR.iid,
5860
});
@@ -66,7 +68,7 @@ const appStore = store({
6668
return result;
6769
},
6870
async disapproveMR() {
69-
const result = await messageHandler.postMessage({
71+
const result = await vscode.postMessage({
7072
command: actions.MR_DISAPPROVE,
7173
args: appStore.currentMR.iid,
7274
});
@@ -80,7 +82,7 @@ const appStore = store({
8082
return result;
8183
},
8284
async mergeMR() {
83-
const result = await messageHandler.postMessage({
85+
const result = await vscode.postMessage({
8486
command: actions.MR_MERGE,
8587
args: appStore.currentMR.iid,
8688
});
@@ -89,7 +91,7 @@ const appStore = store({
8991
return result;
9092
},
9193
async updateMRTitle(newTitle: string) {
92-
const result = await messageHandler.postMessage({
94+
const result = await vscode.postMessage({
9395
command: actions.MR_UPDATE_TITLE,
9496
args: {
9597
iid: appStore.currentMR.iid,
@@ -101,7 +103,7 @@ const appStore = store({
101103
return result;
102104
},
103105
async commentMR(comment: string) {
104-
const result = await messageHandler.postMessage({
106+
const result = await vscode.postMessage({
105107
command: actions.MR_ADD_COMMENT,
106108
args: {
107109
id: appStore.currentMR.data.merge_request.id,
@@ -125,32 +127,4 @@ export const persistData = () =>
125127
});
126128
export const removeDataPersist = (e: () => void) => clearEffect(e);
127129

128-
// handle broadcast message
129-
export const messageHandler = getMessageHandler((message: any) => {
130-
if (!message) return;
131-
const { updateCurrentMR, updateMRActivities, updateMRReviewers, updateMRComments } = appStore;
132-
const { command, res } = message;
133-
134-
switch (command) {
135-
case actions.UPDATE_CURRENT_MR: {
136-
updateCurrentMR(res);
137-
break;
138-
}
139-
case actions.UPDATE_MR_ACTIVITIES: {
140-
updateMRActivities(res);
141-
break;
142-
}
143-
case actions.UPDATE_MR_REVIEWERS: {
144-
updateMRReviewers(res);
145-
break;
146-
}
147-
case actions.MR_UPDATE_COMMENTS: {
148-
updateMRComments(res);
149-
break;
150-
}
151-
default:
152-
break;
153-
}
154-
});
155-
156130
export default appStore;

‎webviews/store/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ export enum actions {
1010
MR_UPDATE_COMMENTS = `mr.udpate.comments`,
1111
MR_ADD_COMMENT = `mr.add.comment`,
1212
MR_GET_ACTIVITIES = `mr.get.activities`,
13+
MR_TOGGLE_LOADING = `mr.update.toggleLoading`,
1314
}

‎webviews/utils/message.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ export class MessageHandler {
1010
this._commandHandler = commandHandler;
1111
this.lastSentReq = 0;
1212
this.pendingReplies = Object.create(null);
13-
window.addEventListener('message', this.handleMessage.bind(this));
1413
}
1514

1615
public registerCommandHandler(commandHandler: (message: any) => void) {
@@ -34,7 +33,7 @@ export class MessageHandler {
3433
});
3534
}
3635

37-
private handleMessage(event: any) {
36+
public handleMessage(event: any) {
3837
const message: IReplyMessage = event.data;
3938
if (message.seq) {
4039
const pendingReply = this.pendingReplies[message.seq];

0 commit comments

Comments
 (0)