refactor log menu as function component

src/components/context-menu.tsx

@@ -538,7 +538,7 @@ function GroupContextMenu() {
 
 function MarkReadContextMenu() {
     const dispatch = useAppDispatch()
-    
+
     const menuItems: IContextualMenuItem[] = [
         {
             key: "section_1",

src/components/log-menu.tsx

@@ -7,15 +7,10 @@ import {
     DirectionalHint,
     Link,
 } from "@fluentui/react"
-import { AppLog, AppLogType } from "../scripts/models/app"
+import { AppLog, AppLogType, toggleLogMenu } from "../scripts/models/app"
 import Time from "./utils/time"
-
+import { useAppDispatch, useAppSelector } from "../scripts/reducer"
-type LogMenuProps = {
+import { showItemFromId } from "../scripts/models/page"
-    display: boolean
-    logs: AppLog[]
-    close: () => void
-    showItem: (iid: number) => void
-}
 
 function getLogIcon(log: AppLog) {
     switch (log.type) {
@@ -28,58 +23,56 @@ function getLogIcon(log: AppLog) {
     }
 }
 
-class LogMenu extends React.Component<LogMenuProps> {
+function LogMenu() {
-    activityItems = () =>
+    const dispatch = useAppDispatch()
-        this.props.logs
+    const { display, logs } = useAppSelector(state => state.app.logMenu)
-            .map((l, i) => ({
+
-                key: i,
+    return (
-                activityDescription: l.iid ? (
+        display && (
-                    <b>
+            <Callout
-                        <Link onClick={() => this.handleArticleClick(l)}>
+                target="#log-toggle"
-                            {l.title}
+                role="log-menu"
-                        </Link>
+                directionalHint={DirectionalHint.bottomCenter}
-                    </b>
+                calloutWidth={320}
+                calloutMaxHeight={240}
+                onDismiss={() => dispatch(toggleLogMenu())}>
+                {logs.length == 0 ? (
+                    <p style={{ textAlign: "center" }}>
+                        {intl.get("log.empty")}
+                    </p>
                 ) : (
-                    <b>{l.title}</b>
+                    logs
-                ),
+                        .map((l, i) => (
-                comments: l.details,
-                activityIcon: <Icon iconName={getLogIcon(l)} />,
-                timeStamp: <Time date={l.time} />,
-            }))
-            .reverse()
-
-    handleArticleClick = (log: AppLog) => {
-        this.props.close()
-        this.props.showItem(log.iid)
-    }
-
-    render() {
-        return (
-            this.props.display && (
-                <Callout
-                    target="#log-toggle"
-                    role="log-menu"
-                    directionalHint={DirectionalHint.bottomCenter}
-                    calloutWidth={320}
-                    calloutMaxHeight={240}
-                    onDismiss={this.props.close}>
-                    {this.props.logs.length == 0 ? (
-                        <p style={{ textAlign: "center" }}>
-                            {intl.get("log.empty")}
-                        </p>
-                    ) : (
-                        this.activityItems().map(item => (
                             <ActivityItem
-                                {...item}
+                                activityDescription={
-                                key={item.key}
+                                    l.iid ? (
+                                        <b>
+                                            <Link
+                                                onClick={() => {
+                                                    dispatch(toggleLogMenu())
+                                                    dispatch(
+                                                        showItemFromId(l.iid)
+                                                    )
+                                                }}>
+                                                {l.title}
+                                            </Link>
+                                        </b>
+                                    ) : (
+                                        <b>{l.title}</b>
+                                    )
+                                }
+                                comments={l.details}
+                                activityIcon={<Icon iconName={getLogIcon(l)} />}
+                                timeStamp={<Time date={l.time} />}
+                                key={i}
                                 style={{ margin: 12 }}
                             />
                         ))
-                    )}
+                        .reverse()
-                </Callout>
+                )}
-            )
+            </Callout>
         )
-    }
+    )
 }
 
 export default LogMenu

src/components/root.tsx

@@ -4,10 +4,10 @@ import { closeContextMenu } from "../scripts/models/app"
 import PageContainer from "../containers/page-container"
 import MenuContainer from "../containers/menu-container"
 import NavContainer from "../containers/nav-container"
-import LogMenuContainer from "../containers/log-menu-container"
 import SettingsContainer from "../containers/settings-container"
 import { RootState } from "../scripts/reducer"
 import { ContextMenu } from "./context-menu"
+import LogMenu from "./log-menu"
 
 const Root = ({ locale, dispatch }) =>
     locale && (
@@ -17,7 +17,7 @@ const Root = ({ locale, dispatch }) =>
             onMouseDown={() => dispatch(closeContextMenu())}>
             <NavContainer />
             <PageContainer />
-            <LogMenuContainer />
+            <LogMenu />
             <MenuContainer />
             <SettingsContainer />
             <ContextMenu />

src/containers/log-menu-container.tsx

@@ -1,20 +0,0 @@
-import { connect } from "react-redux"
-import { createSelector } from "reselect"
-import { RootState } from "../scripts/reducer"
-import { toggleLogMenu } from "../scripts/models/app"
-import LogMenu from "../components/log-menu"
-import { showItemFromId } from "../scripts/models/page"
-
-const getLogs = (state: RootState) => state.app.logMenu
-
-const mapStateToProps = createSelector(getLogs, logs => logs)
-
-const mapDispatchToProps = dispatch => {
-    return {
-        close: () => dispatch(toggleLogMenu()),
-        showItem: (iid: number) => dispatch(showItemFromId(iid)),
-    }
-}
-
-const LogMenuContainer = connect(mapStateToProps, mapDispatchToProps)(LogMenu)
-export default LogMenuContainer