From 8debcfe7e42119b2b2ce70a8f61e498b75959f1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B5=A9=E8=BF=9C?= <yang991178@live.com>
Date: Fri, 5 Jun 2020 13:48:06 +0800
Subject: [PATCH] update component structure

---
 dist/styles.css                       |  4 ----
 src/components/cards/default-card.tsx |  3 ++-
 src/components/log-menu.tsx           |  3 +--
 src/components/menu.tsx               | 15 +++++----------
 src/components/nav.tsx                |  3 +--
 src/components/page.tsx               | 23 +++++++++++++++++++++++
 src/components/root.tsx               | 15 ++++++---------
 src/components/settings.tsx           |  3 +--
 src/containers/feed-container.tsx     |  4 ++--
 src/containers/log-menu-container.tsx |  5 ++---
 src/containers/menu-container.tsx     |  5 ++---
 src/containers/nav-container.tsx      |  5 ++---
 src/containers/page-container.tsx     | 18 ++++++++++++++++++
 src/containers/settings-container.tsx |  5 ++---
 src/scripts/utils.ts                  |  3 +--
 15 files changed, 68 insertions(+), 46 deletions(-)
 create mode 100644 src/components/page.tsx
 create mode 100644 src/containers/page-container.tsx

diff --git a/dist/styles.css b/dist/styles.css
index bba77a1..7fa1467 100644
--- a/dist/styles.css
+++ b/dist/styles.css
@@ -162,10 +162,6 @@ nav.hide-btns .btn-group .btn.system {
     font-size: 12px;
     color: #797775;
     margin: 2px 8px;
-    animation-name: css-1;
-    animation-duration: 0.367s;
-    animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-    animation-fill-mode: both;
 }
 
 .settings-container {
diff --git a/src/components/cards/default-card.tsx b/src/components/cards/default-card.tsx
index 3d37964..f10f15b 100644
--- a/src/components/cards/default-card.tsx
+++ b/src/components/cards/default-card.tsx
@@ -1,11 +1,12 @@
 import * as React from "react"
 import { Card } from "./card"
 import Time from "../utils/time"
+import { AnimationClassNames } from "@fluentui/react"
 
 class DefaultCard extends Card {
     render() {
         return (
-            <div className={"card"+(this.props.item.snippet&&this.props.item.thumb?" transform":"")} 
+            <div className={"card "+AnimationClassNames.slideUpIn10+(this.props.item.snippet&&this.props.item.thumb?" transform":"")} 
                 onClick={this.onClick} onMouseUp={this.onMouseUp} >
                 {this.props.item.thumb ? (
                     <img className="bg" src={this.props.item.thumb} />
diff --git a/src/components/log-menu.tsx b/src/components/log-menu.tsx
index 13a4d50..4f232ec 100644
--- a/src/components/log-menu.tsx
+++ b/src/components/log-menu.tsx
@@ -1,10 +1,9 @@
 import * as React from "react"
 import { Callout, ActivityItem, Icon, DirectionalHint } from "@fluentui/react"
 import { AppLog, AppLogType } from "../scripts/models/app"
-import { LogsReduxProps } from "../containers/log-menu-container"
 import Time from "./utils/time"
 
-type LogMenuProps = LogsReduxProps & {
+type LogMenuProps = {
     display: boolean,
     logs: AppLog[]
     close: Function
diff --git a/src/components/menu.tsx b/src/components/menu.tsx
index aaeab88..0377a4a 100644
--- a/src/components/menu.tsx
+++ b/src/components/menu.tsx
@@ -1,13 +1,13 @@
 import * as React from "react"
 import { Icon } from "@fluentui/react/lib/Icon"
-import { Nav, INavLink, INavStyles, INavLinkGroup } from "office-ui-fabric-react/lib/Nav"
+import { Nav, INavLink, INavLinkGroup } from "office-ui-fabric-react/lib/Nav"
 import { MenuStatus } from "../scripts/models/app"
 import { SourceGroup } from "../scripts/models/page"
 import { SourceState, RSSSource } from "../scripts/models/source"
-import { MenuReduxProps } from "../containers/menu-container"
 import { ALL } from "../scripts/models/feed"
+import { AnimationClassNames } from "@fluentui/react"
 
-export type MenuProps = MenuReduxProps & {
+export type MenuProps = {
     status: MenuStatus,
     selected: string,
     sources: SourceState,
@@ -73,10 +73,6 @@ export class Menu extends React.Component<MenuProps> {
         }
     })
 
-    _onRenderGroupHeader(group: INavLinkGroup): JSX.Element {
-        return <p className="subs-header">{group.name}</p>;
-    }
-
     render() {
         return this.props.status == MenuStatus.Hidden ? null : (
             <div className="menu-container" onClick={this.props.closeMenu}>
@@ -87,9 +83,8 @@ export class Menu extends React.Component<MenuProps> {
                     <div className="nav-wrapper">
                         <Nav 
                             groups={this.getItems()} 
-                            selectedKey={this.props.selected}
-                            onRenderGroupHeader={this._onRenderGroupHeader} />
-                        <p className="subs-header">订阅源</p>
+                            selectedKey={this.props.selected} />
+                        <p className={"subs-header " + AnimationClassNames.slideDownIn10}>订阅源</p>
                         <Nav 
                             selectedKey={this.props.selected}
                             groups={this.getGroups()} />
diff --git a/src/components/nav.tsx b/src/components/nav.tsx
index c9636cb..21515bc 100644
--- a/src/components/nav.tsx
+++ b/src/components/nav.tsx
@@ -2,9 +2,8 @@ import * as React from "react"
 import { ipcRenderer, remote } from "electron"
 import { Icon } from "@fluentui/react/lib/Icon"
 import { AppState, MenuStatus } from "../scripts/models/app"
-import { NavReduxProps } from "../containers/nav-container"
 
-type NavProps = NavReduxProps & {
+type NavProps = {
     state: AppState,
     fetch: () => void,
     menu: () => void,
diff --git a/src/components/page.tsx b/src/components/page.tsx
new file mode 100644
index 0000000..041cad9
--- /dev/null
+++ b/src/components/page.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import { FeedIdType } from "../scripts/models/feed"
+import { FeedContainer } from "../containers/feed-container"
+
+type PageProps = {
+    settingsOn: boolean
+    feeds: FeedIdType[]
+}
+
+class Page extends React.Component<PageProps> {
+    render = () => (
+        <>
+            {this.props.settingsOn ? null :
+            <div className="main">
+                {this.props.feeds.map(fid => (
+                    <FeedContainer feedId={fid} key={fid} />
+                ))}
+            </div>}
+        </>
+    )
+}
+
+export default Page
\ No newline at end of file
diff --git a/src/components/root.tsx b/src/components/root.tsx
index 018d302..759879c 100644
--- a/src/components/root.tsx
+++ b/src/components/root.tsx
@@ -1,20 +1,17 @@
 import * as React from "react"
 import { connect } from 'react-redux'
-import { FeedContainer } from "../containers/feed-container"
 import { ContextMenuContainer } from "../containers/context-menu-container"
 import { closeContextMenu } from "../scripts/models/app"
-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 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"
 
 const Root = ({ dispatch }) => (
     <div id="root" onMouseDown={() => dispatch(closeContextMenu())}>
         <NavContainer />
-        <div className="main">
-            <FeedContainer />
-        </div>
+        <PageContainer />
         <LogMenuContainer />
         <MenuContainer />
         <SettingsContainer />
diff --git a/src/components/settings.tsx b/src/components/settings.tsx
index 7119a2d..2a3167c 100644
--- a/src/components/settings.tsx
+++ b/src/components/settings.tsx
@@ -1,14 +1,13 @@
 import * as React from "react"
 import { Icon } from "@fluentui/react/lib/Icon"
 import { AnimationClassNames } from "@fluentui/react/lib/Styling"
-import { SettingsReduxProps } from "../containers/settings-container"
 import AboutTab from "./settings/about"
 import { Pivot, PivotItem, Spinner } from "@fluentui/react"
 import SourcesTabContainer from "../containers/settings/sources-container"
 import GroupsTabContainer from "../containers/settings/groups-container"
 import ProxyTab from "./settings/proxy"
 
-type SettingsProps = SettingsReduxProps & {
+type SettingsProps = {
     display: boolean,
     blocked: boolean,
     exitting: boolean,
diff --git a/src/containers/feed-container.tsx b/src/containers/feed-container.tsx
index e5a87f3..8678cc1 100644
--- a/src/containers/feed-container.tsx
+++ b/src/containers/feed-container.tsx
@@ -2,7 +2,7 @@ import { connect } from "react-redux"
 import { createSelector } from "reselect"
 import { RootState } from "../scripts/reducer"
 import CardsFeed from "../components/feeds/cards-feed"
-import { markRead, markUnread } from "../scripts/models/item"
+import { markRead } from "../scripts/models/item"
 import { openItemMenu } from "../scripts/models/app"
 import { FeedIdType, loadMore } from "../scripts/models/feed"
 
@@ -12,7 +12,7 @@ interface FeedContainerProps {
 
 const getSources = (state: RootState) => state.sources
 const getItems = (state: RootState) => state.items
-const getFeed = (state: RootState) => state.feeds[state.page.feedId]
+const getFeed = (state: RootState, props: FeedContainerProps) => state.feeds[props.feedId]
 
 const makeMapStateToProps = () => {
     return createSelector(
diff --git a/src/containers/log-menu-container.tsx b/src/containers/log-menu-container.tsx
index eb08fb3..5c42577 100644
--- a/src/containers/log-menu-container.tsx
+++ b/src/containers/log-menu-container.tsx
@@ -12,6 +12,5 @@ const mapDispatchToProps = dispatch => {
     return { close: () => dispatch(toggleLogMenu()) }
 }
 
-const connector = connect(mapStateToProps, mapDispatchToProps)
-export type LogsReduxProps = typeof connector
-export const LogMenuContainer = connector(LogMenu)
\ No newline at end of file
+const LogMenuContainer = connect(mapStateToProps, mapDispatchToProps)(LogMenu)
+export default LogMenuContainer
\ No newline at end of file
diff --git a/src/containers/menu-container.tsx b/src/containers/menu-container.tsx
index 112071a..0217223 100644
--- a/src/containers/menu-container.tsx
+++ b/src/containers/menu-container.tsx
@@ -38,6 +38,5 @@ const mapDispatchToProps = dispatch => ({
     }
 })
 
-const connector = connect(mapStateToProps, mapDispatchToProps)
-export type MenuReduxProps = typeof connector
-export const MenuContainer = connector(Menu)
\ No newline at end of file
+const MenuContainer = connect(mapStateToProps, mapDispatchToProps)(Menu)
+export default MenuContainer
\ No newline at end of file
diff --git a/src/containers/nav-container.tsx b/src/containers/nav-container.tsx
index 5005782..8d32a16 100644
--- a/src/containers/nav-container.tsx
+++ b/src/containers/nav-container.tsx
@@ -18,6 +18,5 @@ const mapDispatchToProps = (dispatch) => ({
     settings: () => dispatch(toggleSettings())
 })
 
-const connector = connect(mapStateToProps, mapDispatchToProps)
-export type NavReduxProps = typeof connector
-export const NavContainer = connector(Nav)
\ No newline at end of file
+const NavContainer = connect(mapStateToProps, mapDispatchToProps)(Nav)
+export default NavContainer
\ No newline at end of file
diff --git a/src/containers/page-container.tsx b/src/containers/page-container.tsx
new file mode 100644
index 0000000..0d3e6e9
--- /dev/null
+++ b/src/containers/page-container.tsx
@@ -0,0 +1,18 @@
+import { connect } from "react-redux"
+import { createSelector } from "reselect"
+import { RootState } from "../scripts/reducer"
+import Page from "../components/page"
+
+const getFeeds = (state: RootState) => state.page.feedId
+const getSettings = (state: RootState) => state.app.settings.display
+
+const mapStateToProps = createSelector(
+    [getFeeds, getSettings],
+    (feeds, settingsOn) => ({
+        feeds: [feeds],
+        settingsOn: settingsOn
+    })
+)
+
+const PageContainer = connect(mapStateToProps)(Page)
+export default PageContainer
\ No newline at end of file
diff --git a/src/containers/settings-container.tsx b/src/containers/settings-container.tsx
index 7132f38..c4f18ee 100644
--- a/src/containers/settings-container.tsx
+++ b/src/containers/settings-container.tsx
@@ -20,6 +20,5 @@ const mapDispatchToProps = dispatch => {
     }
 }
 
-const connector = connect(mapStateToProps, mapDispatchToProps)
-export type SettingsReduxProps = typeof connector
-export const SettingsContainer = connector(Settings)
\ No newline at end of file
+const SettingsContainer = connect(mapStateToProps, mapDispatchToProps)(Settings)
+export default SettingsContainer
\ No newline at end of file
diff --git a/src/scripts/utils.ts b/src/scripts/utils.ts
index 8dd9e8c..8c36cc4 100644
--- a/src/scripts/utils.ts
+++ b/src/scripts/utils.ts
@@ -31,7 +31,7 @@ export function toggleProxyStatus() {
     setProxy()
 }
 export function getProxy() {
-    return localStorage.getItem(PAC_STORE_KEY)
+    return localStorage.getItem(PAC_STORE_KEY) || ""
 }
 export function setProxy(address = null) {
     if (!address) {
@@ -44,7 +44,6 @@ export function setProxy(address = null) {
     })
 }
 
-
 import ElectronProxyAgent = require("@yang991178/electron-proxy-agent")
 let agent = new ElectronProxyAgent(remote.getCurrentWebContents().session)
 export const rssParser = new Parser({