Review context

OutSystems · Feb 16, 2024 · 15cdde3 · 15cdde3
1 parent 4e82ffa
commit 15cdde3
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 42 deletions.
diff --git a/ReactViewResources/Loader/Internal/ComponentWithMountCallback.tsx b/ReactViewResources/Loader/Internal/ComponentWithMountCallback.tsx
@@ -12,5 +12,5 @@ export function ComponentWithMountCallback({ mounted, children }: PropsWithChild
         mounted?.();
     }, []);
 
-    return isMounted ? <>{children}</> : null;
+    return isMounted ? <React.Fragment key={"asd"}>{children}</React.Fragment> : null;
 }
diff --git a/ReactViewResources/Loader/Internal/Loader.View.tsx b/ReactViewResources/Loader/Internal/Loader.View.tsx
@@ -33,7 +33,7 @@ export function createView(componentClass: any, properties: {}, view: ViewMetada
 export function renderMainView(children: React.ReactElement, container: Element) {
     return new Promise<void>(resolve => {
         const childrenWithRenderCallback = (
-            <ComponentWithMountCallback mounted={resolve}>
+            <ComponentWithMountCallback key={"ooodd"} mounted={resolve}>
                 {children}
             </ComponentWithMountCallback>
         );

diff --git a/ReactViewResources/Loader/Internal/ViewPortal.tsx b/ReactViewResources/Loader/Internal/ViewPortal.tsx
@@ -79,7 +79,7 @@ export class ViewPortal extends React.Component<IViewPortalProps, IViewPortalSta
 
     public render(): React.ReactNode {
         return ReactDOM.createPortal(
-            <div id={webViewRootId} ref={e => this.props.view.root = e!}>
+            <div id={webViewRootId} key={"fdsdfsdf"} ref={e => this.props.view.root = e!}>
                 {this.state.component ? this.state.component : null}
             </div>,
             this.shadowRoot);

diff --git a/ReactViewResources/Loader/Internal/ViewPortalsCollection.tsx b/ReactViewResources/Loader/Internal/ViewPortalsCollection.tsx
@@ -28,7 +28,8 @@ export class ViewPortalsCollection extends React.Component<IViewPortalsCollectio
 
     private renderViewPortal(view: ViewMetadata) {
         return (
-            <ViewPortal key={view.name}
+            <ViewPortal
+                key={view.name}
                 view={view}
                 viewMounted={this.props.viewAdded}
                 viewUnmounted={this.props.viewRemoved}

diff --git a/Sample.Avalonia/MainView/MainView.tsx b/Sample.Avalonia/MainView/MainView.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ViewFrame } from "ViewFrame";
 import ViewPlugin from "./../ViewPlugin/ViewPlugin";
-import {IPluginsContext, PluginsContext} from "PluginsProvider";
+import { PluginsContext } from "PluginsProvider";
 import "./MainView.scss"; // import a stylesheet
 import TaskListView from "./../TaskListView/TaskListView"; // import another component
 import * as BackgroundImage from "./Tasks.png"; // import images
@@ -53,26 +53,21 @@ export default class MainView extends React.Component<IMainViewProperties, MainV
     private readonly inputRef = React.createRef<HTMLInputElement>();
 
     constructor(props: IMainViewProperties) {
-        super(props, );
-        this.initialize();
-    }
-
-    private async initialize(): Promise<void> {
+        super(props);
         this.state = {
             tasksCount: 0,
             taskListShowStatus: TaskListShowStatus.Show
         };
+
         this.refresh();
     }
 
-    public refresh(): void {
-        (async () => {
-            const tasksCount = await this.props.getTasksCount();
-            this.setState({ tasksCount });
-        })();
+    public async refresh(): Promise<void> {
+        const tasksCount = await this.props.getTasksCount();
+        this.setState({ tasksCount });
     }
 
-    public componentDidMount(): void {
+    public async componentDidMount(): Promise<void> {
         this.viewPlugin = this.context.getPluginInstance<ViewPlugin>(ViewPlugin);
         this.viewPlugin.notifyViewLoaded("Main View");
 
@@ -116,9 +111,9 @@ export default class MainView extends React.Component<IMainViewProperties, MainV
 
     public render(): JSX.Element {
         return (
-            <div className="wrapper">
+            <div key={"dsdsfdfs"} className="wrapper">
                 <div className="title">{this.props.titleMessage}</div>
-                <input className="task-input" ref={this.inputRef} onChange={() => this.props.inputChanged()} />
+                <input className="task-input" ref={this.inputRef} onChange={() => this.props.inputChanged()}/>
                 <button className="task-add" onClick={this.onAddTaskButtonClicked}>Add Task</button>
                 <button className="tasks-toggle-show" onClick={this.toggleShowTasks}>Show/Block/Hide Tasks</button>
                 {this.renderListView()}

diff --git a/Sample.Avalonia/TaskListView/TaskListView.tsx b/Sample.Avalonia/TaskListView/TaskListView.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import ViewPlugin from "./../ViewPlugin/ViewPlugin";
-import { IPluginsContext } from "PluginsProvider";
+import {IPluginsContext, PluginsContext} from "PluginsProvider";
 import "./TaskListView.scss";
 import { ResourceLoader } from "ResourceLoader";
 
@@ -30,9 +30,8 @@ interface ITaskListItemProperties {
 }
 
 class TaskListItem extends React.Component<{ task: ITask }, {}, IPluginsContext> {
-
-    constructor(props: ITaskListItemProperties, context: IPluginsContext) {
-        super(props, context);
+    constructor(props: ITaskListItemProperties) {
+        super(props);
     }
 
     render(): JSX.Element {
@@ -54,13 +53,18 @@ class TaskListItem extends React.Component<{ task: ITask }, {}, IPluginsContext>
 }
 
 export default class TaskListView extends React.Component<ITaskListViewProperties, ITaskListViewState> implements ITaskListViewBehaviors {
+    declare context: React.ContextType<typeof PluginsContext>;
 
-    private readonly viewplugin: ViewPlugin;
+    private viewPlugin: ViewPlugin;
 
-    constructor(props: ITaskListViewProperties, context: IPluginsContext) {
-        super(props, context);
-        this.initialize();
-        this.viewplugin = context.getPluginInstance<ViewPlugin>(ViewPlugin);
+    constructor(props: ITaskListViewProperties) {
+        super(props);
+        this.state = {
+            tasks: [],
+            hideCompletedTasks: false
+        };
+
+        this.refresh();
     }
 
     public toggleHideCompletedTasks(): void {
@@ -69,23 +73,14 @@ export default class TaskListView extends React.Component<ITaskListViewPropertie
         }));
     }
 
-    public refresh(): void {
-        (async () => {
-            const tasks = await this.props.getTasks();
-            this.setState({ tasks });
-        })();
-    }
-
-    private async initialize(): Promise<void> {
-        this.state = {
-            tasks: [],
-            hideCompletedTasks: false
-        };
-        this.refresh();
+    public async refresh(): Promise<void> {
+        const tasks = await this.props.getTasks();
+        this.setState({ tasks });
     }
 
-    public componentDidMount(): void {
-        this.viewplugin.notifyViewLoaded("Task List View");
+    public async componentDidMount(): Promise<void> {
+        this.viewPlugin = this.context.getPluginInstance<ViewPlugin>(ViewPlugin);
+        this.viewPlugin.notifyViewLoaded("Task List View");
     }
 
     private renderItems(): JSX.Element {