From c54c50f2e8ebc17601f47fae3842df670c8200cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Sat, 27 Mar 2021 10:20:18 +0100
Subject: [PATCH] Migrating workspace component to functional component

---
 webapp/src/components/workspace.tsx | 82 ++++++++++++-----------------
 1 file changed, 34 insertions(+), 48 deletions(-)

diff --git a/webapp/src/components/workspace.tsx b/webapp/src/components/workspace.tsx
index bd66a32d4..9cc7f5c47 100644
--- a/webapp/src/components/workspace.tsx
+++ b/webapp/src/components/workspace.tsx
@@ -21,55 +21,41 @@ type Props = {
     readonly: boolean
 }
 
-class Workspace extends React.PureComponent<Props> {
-    render(): JSX.Element {
-        const {boardTree, workspaceTree, showBoard, showView, setLanguage} = this.props
+const Workspace = React.memo((props: Props) => {
+    const {boardTree, setSearchText, workspaceTree, showBoard, showView, setLanguage} = props
+    const {activeView} = boardTree || {}
 
-        Utils.assert(workspaceTree || !this.props.readonly)
-        const element = (
-            <div className='Workspace'>
-                {!this.props.readonly &&
-                    <Sidebar
-                        showBoard={showBoard}
-                        showView={showView}
-                        workspaceTree={workspaceTree}
-                        activeBoardId={boardTree?.board.id}
-                        setLanguage={setLanguage}
+    Utils.assert(workspaceTree || !props.readonly)
+
+    return (
+        <div className='Workspace'>
+            {!props.readonly &&
+                <Sidebar
+                    showBoard={showBoard}
+                    showView={showView}
+                    workspaceTree={workspaceTree}
+                    activeBoardId={boardTree?.board.id}
+                    setLanguage={setLanguage}
+                />
+            }
+            <div className='mainFrame'>
+                {(boardTree?.board.isTemplate) &&
+                <div className='banner'>
+                    <FormattedMessage
+                        id='Workspace.editing-board-template'
+                        defaultMessage="You're editing a board template"
                     />
-                }
-                <div className='mainFrame'>
-                    {(boardTree?.board.isTemplate) &&
-                    <div className='banner'>
-                        <FormattedMessage
-                            id='Workspace.editing-board-template'
-                            defaultMessage="You're editing a board template"
-                        />
-                    </div>
-                    }
-                    {this.mainComponent()}
-                </div>
-            </div>)
-
-        return element
-    }
-
-    private mainComponent() {
-        const {boardTree, setSearchText, showView} = this.props
-        const {activeView} = boardTree || {}
-
-        if (!boardTree || !activeView) {
-            return <div/>
-        }
-
-        return (
-            <CenterPanel
-                boardTree={boardTree}
-                setSearchText={setSearchText}
-                showView={showView}
-                readonly={this.props.readonly}
-            />
-        )
-    }
-}
+                </div>}
+                {boardTree && activeView &&
+                    <CenterPanel
+                        boardTree={boardTree}
+                        setSearchText={setSearchText}
+                        showView={showView}
+                        readonly={props.readonly}
+                    />}
+            </div>
+        </div>
+    )
+})
 
 export default Workspace