From eb4f6d57d87547870ae9c339477c96ed7d2350a1 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Thu, 1 Feb 2024 15:48:01 -0500
Subject: [PATCH 1/2] refact(explorer): rewrite ExplorerSearchContent to be
 func

---
 .../explorer/ExplorerSearchContent.js         | 112 ++++++++----------
 1 file changed, 50 insertions(+), 62 deletions(-)

diff --git a/src/components/explorer/ExplorerSearchContent.js b/src/components/explorer/ExplorerSearchContent.js
index 6ff860fdd..98a6ca479 100644
--- a/src/components/explorer/ExplorerSearchContent.js
+++ b/src/components/explorer/ExplorerSearchContent.js
@@ -1,67 +1,55 @@
-import React, {Component} from "react";
-import {connect} from "react-redux";
-import {Redirect, Route, Switch} from "react-router-dom";
-import PropTypes from "prop-types";
+import React, { useMemo } from "react";
+import { useSelector } from "react-redux";
+import { Redirect, Route, Switch } from "react-router-dom";
 
-import {Layout, Menu, Skeleton} from "antd";
+import { Layout, Menu, Skeleton } from "antd";
 
-import SitePageHeader from "../SitePageHeader";
-import {LAYOUT_CONTENT_STYLE} from "../../styles/layoutContent";
 import ExplorerDatasetSearch from "./ExplorerDatasetSearch";
-import {matchingMenuKeys, renderMenuItem} from "../../utils/menu";
-import {projectPropTypesShape} from "../../propTypes";
-
-class ExplorerSearchContent extends Component {
-    render() {
-        const menuItems = this.props.projects.map(project => ({
-            // url: `/data/explorer/projects/${project.identifier}`,
-            key: project.identifier,
-            text: project.title,
-            children: project.datasets.map(dataset => ({
-                url: `/data/explorer/search/${dataset.identifier}`,
-                text: dataset.title,
-            })),
-        }));
-
-        const datasets = this.props.projects.flatMap(p => p.datasets);
-
-        return <>
-            <SitePageHeader title="Data Explorer" />
-            <Layout>
-                <Layout.Sider style={{background: "white"}} width={256} breakpoint="lg" collapsedWidth={0}>
-                    <div style={{display: "flex", height: "100%", flexDirection: "column"}}>
-                    <Menu mode="inline"
-                          style={{flex: 1, paddingTop: "8px"}}
-                          defaultOpenKeys={menuItems.map(p => p.key)}
-                          selectedKeys={matchingMenuKeys(menuItems)}>
-                        {menuItems.map(renderMenuItem)}
-                    </Menu>
-                    </div>
-                </Layout.Sider>
-                <Layout.Content style={LAYOUT_CONTENT_STYLE}>
-                    {datasets.length > 0 ? (
-                        <Switch>
-                            <Route path="/data/explorer/search/:dataset" component={ExplorerDatasetSearch} />
-                            <Redirect
-                                from="/data/explorer/search"
-                                to={`/data/explorer/search/${datasets[0].identifier}`} />
-                        </Switch>
-                    ) : (this.props.isFetchingDependentData ? <Skeleton /> : "No datasets available")}
-                </Layout.Content>
-            </Layout>
-        </>;
-    }
+import SitePageHeader from "../SitePageHeader";
+import { LAYOUT_CONTENT_STYLE } from "../../styles/layoutContent";
+import { matchingMenuKeys, renderMenuItem } from "../../utils/menu";
+
+const ExplorerSearchContent = () => {
+    const projects = useSelector((state) => state.projects.items);
+    const isFetchingDependentData = useSelector((state) => state.user.isFetchingDependentData)
+
+    const menuItems = useMemo(() => projects.map(project => ({
+        // url: `/data/explorer/projects/${project.identifier}`,
+        key: project.identifier,
+        text: project.title,
+        children: project.datasets.map(dataset => ({
+            url: `/data/explorer/search/${dataset.identifier}`,
+            text: dataset.title,
+        })),
+    })), [projects]);
+
+    const datasets = useMemo(() => projects.flatMap(p => p.datasets), [projects]);
+
+    return <>
+        <SitePageHeader title="Data Explorer" />
+        <Layout>
+            <Layout.Sider style={{background: "white"}} width={256} breakpoint="lg" collapsedWidth={0}>
+                <div style={{display: "flex", height: "100%", flexDirection: "column"}}>
+                <Menu mode="inline"
+                      style={{flex: 1, paddingTop: "8px"}}
+                      defaultOpenKeys={menuItems.map(p => p.key)}
+                      selectedKeys={matchingMenuKeys(menuItems)}>
+                    {menuItems.map(renderMenuItem)}
+                </Menu>
+                </div>
+            </Layout.Sider>
+            <Layout.Content style={LAYOUT_CONTENT_STYLE}>
+                {datasets.length > 0 ? (
+                    <Switch>
+                        <Route path="/data/explorer/search/:dataset" component={ExplorerDatasetSearch} />
+                        <Redirect
+                            from="/data/explorer/search"
+                            to={`/data/explorer/search/${datasets[0].identifier}`} />
+                    </Switch>
+                ) : (isFetchingDependentData ? <Skeleton /> : "No datasets available")}
+            </Layout.Content>
+        </Layout>
+    </>;
 }
 
-ExplorerSearchContent.propTypes = {
-    projects: PropTypes.arrayOf(projectPropTypesShape),
-    isFetchingDependentData: PropTypes.bool,
-};
-
-const mapStateToProps = state => ({
-    projects: state.projects.items,
-    isFetchingDependentData: state.user.isFetchingDependentData,
-    autoQuery: state.explorer.autoQuery,
-});
-
-export default connect(mapStateToProps)(ExplorerSearchContent);
+export default ExplorerSearchContent;

From dbf19dd5c81cec38df72175652be342f4607b62e Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Thu, 1 Feb 2024 15:49:36 -0500
Subject: [PATCH 2/2] lint

---
 src/components/explorer/ExplorerSearchContent.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/explorer/ExplorerSearchContent.js b/src/components/explorer/ExplorerSearchContent.js
index 98a6ca479..d2715cee2 100644
--- a/src/components/explorer/ExplorerSearchContent.js
+++ b/src/components/explorer/ExplorerSearchContent.js
@@ -11,7 +11,7 @@ import { matchingMenuKeys, renderMenuItem } from "../../utils/menu";
 
 const ExplorerSearchContent = () => {
     const projects = useSelector((state) => state.projects.items);
-    const isFetchingDependentData = useSelector((state) => state.user.isFetchingDependentData)
+    const isFetchingDependentData = useSelector((state) => state.user.isFetchingDependentData);
 
     const menuItems = useMemo(() => projects.map(project => ({
         // url: `/data/explorer/projects/${project.identifier}`,
@@ -50,6 +50,6 @@ const ExplorerSearchContent = () => {
             </Layout.Content>
         </Layout>
     </>;
-}
+};
 
 export default ExplorerSearchContent;