fix: improve problems service functions (#254)

mortalYoung · web-flow · commit 7382c030a1d3 · 2021-07-19T15:00:10.000+08:00
diff --git a/src/controller/problems.tsx b/src/controller/problems.tsx
@@ -9,11 +9,14 @@ import {
     StatusBarService,
     ILayoutService,
     LayoutService,
+    ProblemsService,
 } from 'mo/services';
 import { singleton, container } from 'tsyringe';
 import { builtInPanelProblems, builtInStatusProblems } from 'mo/model/problems';
 import { IMonacoService, MonacoService } from 'mo/monaco/monacoService';
 import { QuickTogglePanelAction } from 'mo/monaco/quickTogglePanelAction';
+import { ProblemsPaneView, ProblemsStatusBarView } from 'mo/workbench/problems';
+import { connect } from 'mo/react';
 export interface IProblemsController {
     onClick?: (e: React.MouseEvent, item: IStatusBarItem) => void;
 }
@@ -25,13 +28,16 @@ export class ProblemsController
     private readonly statusBarService: IStatusBarService;
     private readonly layoutService: ILayoutService;
     private readonly monacoService: IMonacoService;
+    private readonly problemsService: ProblemsService;
 
     constructor() {
         super();
         this.panelService = container.resolve(PanelService);
         this.statusBarService = container.resolve(StatusBarService);
         this.monacoService = container.resolve(MonacoService);
         this.layoutService = container.resolve(LayoutService);
+        this.problemsService = container.resolve(ProblemsService);
+
         this.init();
     }
 
@@ -53,12 +59,19 @@ export class ProblemsController
     };
 
     private init() {
-        this.statusBarService.appendLeftItem(
-            Object.assign(builtInStatusProblems(), {
-                onClick: this.onClick,
-            })
-        );
-        this.panelService.add(builtInPanelProblems());
+        const statusProblems = builtInStatusProblems();
+        statusProblems.render = (item) => <ProblemsStatusBarView {...item} />;
+        statusProblems.onClick = this.onClick;
+
+        this.statusBarService.appendLeftItem(statusProblems);
+
+        // keep ProblemsPaneView updated to problems' state
+        const ProblemsView = connect(this.problemsService, ProblemsPaneView);
+
+        const problemsPanel = builtInPanelProblems();
+        problemsPanel.renderPane = () => <ProblemsView />;
+
+        this.panelService.add(problemsPanel);
     }
 }
 
diff --git a/src/model/problems.tsx b/src/model/problems.tsx
@@ -1,7 +1,5 @@
-import * as React from 'react';
 import { IStatusBarItem } from 'mo/model/workbench/statusBar';
 import { IPanelItem } from 'mo/model/workbench/panel';
-import { ProblemsStatusBarView, ProblemsPaneView } from 'mo/workbench/problems';
 import { localize } from 'mo/i18n/localize';
 
 export enum MarkerSeverity {
@@ -45,7 +43,6 @@ export function builtInStatusProblems(): IStatusBarItem {
             infos: 0,
         },
         name: 'Problems',
-        render: (item: IStatusBarItem) => <ProblemsStatusBarView {...item} />,
     };
 }
 
@@ -54,7 +51,6 @@ export function builtInPanelProblems(): IPanelItem {
         id: PANEL_PROBLEMS,
         name: localize(PANEL_PROBLEMS, 'problems'),
         data: null,
-        renderPane: (item) => <ProblemsPaneView {...item} />,
     };
 }
 
diff --git a/src/react/component.ts b/src/react/component.ts
@@ -34,7 +34,7 @@ export abstract class Component<S = any>
      * @param values update target state values
      */
     public setState(
-        values: S,
+        values: Partial<S>,
         callback?: (prevState: S, nextState: S) => void
     ) {
         const nextState = Object.assign(this.state, values);
diff --git a/src/services/problemsService.ts b/src/services/problemsService.ts
@@ -5,28 +5,17 @@ import {
     ProblemsModel,
     MarkerSeverity,
     builtInStatusProblems,
-    builtInPanelProblems,
 } from 'mo/model/problems';
-import { IPanelItem } from 'mo/model/workbench/panel';
 import { IStatusBarItem } from 'mo/model/workbench/statusBar';
-import {
-    PanelService,
-    IPanelService,
-    StatusBarService,
-    IStatusBarService,
-} from 'mo/services';
+import { StatusBarService, IStatusBarService } from 'mo/services';
 import { Component } from 'mo/react';
 import { singleton, container } from 'tsyringe';
 import { searchById } from './helper';
 export interface IProblemsService extends Component<IProblems> {
-    updateStatus<T>(item: IStatusBarItem<T>): void;
-    updatePanel<T>(item: IStatusBarItem<T>): void;
-    removeProblems(id: number): void;
+    removeProblems(id: number | number[]): void;
     clearProblems(): void;
-    addProblems(item: IProblemsItem): void;
-    updateProblems<T>(item: IProblemsItem<T>): void;
-    updateStatus(item: IStatusBarItem): void;
-    updatePanel(item: IPanelItem): void;
+    addProblems(item: IProblemsItem | IProblemsItem[]): void;
+    updateProblems<T>(item: IProblemsItem<T> | IProblemsItem<T>[]): void;
     showHideProblems(): void;
 }
 
@@ -35,12 +24,10 @@ export class ProblemsService
     extends Component<IProblems>
     implements IProblemsService {
     protected state: IProblems;
-    private readonly panelService: IPanelService;
     private readonly statusBarService: IStatusBarService;
     constructor() {
         super();
         this.state = container.resolve(ProblemsModel);
-        this.panelService = container.resolve(PanelService);
         this.statusBarService = container.resolve(StatusBarService);
     }
 
@@ -50,85 +37,92 @@ export class ProblemsService
             show: !this.state.show,
         });
     }
-    public addProblems<T>(item: IProblemsItem<T>): void {
+    public addProblems<T>(item: IProblemsItem<T> | IProblemsItem<T>[]): void {
+        const problems = Array.isArray(item) ? item : [item];
         const { data } = this.state;
-        const index = data.findIndex(searchById(item.id));
-        if (index > -1) {
-            data.splice(index, 1, item);
-        } else {
-            data.push(item);
-        }
+
+        problems.forEach((problem) => {
+            const index = data.findIndex(searchById(problem.id));
+            if (index > -1) {
+                data.splice(index, 1, problem);
+            } else {
+                data.push(problem);
+            }
+        });
+
         this.setState(
             {
-                ...this.state,
                 data: [...data],
             },
             () => {
-                this.update();
+                this.updateStatusBar();
             }
         );
     }
-    public updateProblems<T>(item: IProblemsItem<T>) {
+    public updateProblems<T>(item: IProblemsItem<T> | IProblemsItem<T>[]) {
+        const problems = Array.isArray(item) ? item : [item];
         const { data } = this.state;
-        const index = data.findIndex(searchById(item.id));
-        if (index > -1) {
-            data.splice(index, 1, item);
-            this.setState(
-                {
-                    ...this.state,
-                    data: [...data],
-                },
-                () => {
-                    this.update();
-                }
-            );
-        } else {
-            this.addProblems(item);
-        }
+
+        problems.forEach((problem) => {
+            const index = data.findIndex(searchById(problem.id));
+            if (index > -1) {
+                data.splice(index, 1, problem);
+            }
+        });
+
+        this.setState(
+            {
+                data: [...data],
+            },
+            () => {
+                this.updateStatusBar();
+            }
+        );
     }
-    public removeProblems(id: number): void {
+    public removeProblems(id: number | number[]): void {
+        const ids = Array.isArray(id) ? id : [id];
+
         const { data = [] } = this.state;
-        if (data.length > -1) {
-            const index = data.findIndex(searchById(id));
+        ids.forEach((problemId) => {
+            const index = data.findIndex(searchById(problemId));
             if (index > -1) {
                 data.splice(index, 1);
-                this.setState(
-                    {
-                        ...this.state,
-                        data: [...data],
-                    },
-                    () => {
-                        this.update();
-                    }
-                );
             }
-        }
+        });
+
+        this.setState(
+            {
+                data: [...data],
+            },
+            () => {
+                this.updateStatusBar();
+            }
+        );
     }
+
     public clearProblems(): void {
         this.setState({
             ...this.state,
             data: [],
         });
         this.updateStatus(builtInStatusProblems());
-        this.updatePanel(builtInPanelProblems());
     }
-    public update<T>(): void {
+
+    private updateStatusBar<T>(): void {
         const { data = [] } = this.state;
         const markersData = this.getProblemsMarkers(data);
         this.updateStatus(
             Object.assign(builtInStatusProblems(), {
                 data: markersData,
             })
         );
-        this.updatePanel(Object.assign(builtInPanelProblems(), { data }));
     }
-    public updateStatus<T>(item: IStatusBarItem<T>): void {
+
+    private updateStatus<T>(item: IStatusBarItem<T>): void {
         this.statusBarService.updateItem(item);
     }
-    public updatePanel<T>(item: IPanelItem<T>): void {
-        this.panelService.update(item);
-    }
-    public getProblemsMarkers = (
+
+    private getProblemsMarkers = (
         data: IProblemsItem[]
     ): { warnings: number; errors: number; infos: number } => {
         let warnings = 0;
diff --git a/src/workbench/problems/paneView/index.tsx b/src/workbench/problems/paneView/index.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { getBEMElement, prefixClaName } from 'mo/common/className';
 import TreeView from 'mo/components/tree';
 import { localize } from 'mo/i18n/localize';
+import { Scrollable } from 'mo/components';
 
 const defaultClassName = prefixClaName('problems');
 const treeClassName = getBEMElement(defaultClassName, 'treeview');
@@ -23,32 +24,35 @@ function ProblemsPaneView(props: any) {
         );
 
     return (
-        <div className={defaultClassName}>
-            <TreeView
-                className={treeClassName}
-                data={data}
-                renderTitle={({ children, name, value }, _, isLeaf) => {
-                    return !isLeaf ? (
-                        <span className={treeNodeClassName}>
-                            {value.code}
-                            <span className={treeNodeBadgeClassName}>
-                                {children?.length}
-                            </span>
-                        </span>
-                    ) : (
-                        <span className={treeLeafClassName}>
-                            {value.message}
-                            <span className={treeLeafSubInfoClassName}>
+        <Scrollable>
+            <div className={defaultClassName}>
+                <TreeView
+                    className={treeClassName}
+                    data={data}
+                    renderTitle={({ children, name, value }, _, isLeaf) => {
+                        return !isLeaf ? (
+                            <span className={treeNodeClassName}>
                                 {value.code}
+                                <span className={treeNodeBadgeClassName}>
+                                    {children?.length}
+                                </span>
                             </span>
-                            <span className={treeLeafSubInfoClassName}>
-                                [{value.startLineNumber}, {value.startColumn}]
+                        ) : (
+                            <span className={treeLeafClassName}>
+                                {value.message}
+                                <span className={treeLeafSubInfoClassName}>
+                                    {value.code}
+                                </span>
+                                <span className={treeLeafSubInfoClassName}>
+                                    [{value.startLineNumber},{' '}
+                                    {value.startColumn}]
+                                </span>
                             </span>
-                        </span>
-                    );
-                }}
-            />
-        </div>
+                        );
+                    }}
+                />
+            </div>
+        </Scrollable>
     );
 }
 
diff --git a/stories/extensions/test/testPane.tsx b/stories/extensions/test/testPane.tsx
@@ -98,6 +98,43 @@ export default class TestPane extends React.Component {
             molecule.panel.appendOutput('Number: ' + Math.random() * 10 + '\n');
         };
 
+        const updateProblem = () => {
+            const problems = molecule.problems.getState().data;
+            molecule.problems.addProblems({
+                id: (problems[problems.length - 1]?.id || 0) + 10,
+                name: 'text.tsx',
+                value: {
+                    code: 'text.tsx',
+                    message: '文件夹',
+                    startLineNumber: 0,
+                    startColumn: 1,
+                    endLineNumber: 0,
+                    endColumn: 1,
+                    status: 1,
+                },
+                children: [
+                    {
+                        id: (problems[problems.length - 1]?.id || 0) + 1,
+                        name: '0-1',
+                        value: {
+                            code: 'endLineNumber',
+                            message: '语法错误',
+                            startLineNumber: 0,
+                            startColumn: 1,
+                            endLineNumber: 0,
+                            endColumn: 1,
+                            status: 2,
+                        },
+                        children: [],
+                    },
+                ],
+            });
+        };
+
+        const clearProblems = () => {
+            molecule.problems.clearProblems();
+        };
+
         const newEditor = function () {
             const key = (Math.random() * 10 + 1).toFixed(2);
             const tabData: IEditorTab = {
@@ -270,6 +307,8 @@ PARTITIONED BY (ds string) lifecycle 1000;
                         <Button onClick={addPanel}>Add Panel</Button>
                         <Button onClick={showHidePanel}>Show/Hide Panel</Button>
                         <Button onClick={updateOutput}>Update Output</Button>
+                        <Button onClick={updateProblem}>Update Problem</Button>
+                        <Button onClick={clearProblems}>Clear Problem</Button>
                     </div>
                     <div style={{ margin: '50px 20px' }}>
                         <h2>Notification:</h2>
