update component structure

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 {

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} />

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

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()} />

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,

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

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 />

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,

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(

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)
+const LogMenuContainer = connect(mapStateToProps, mapDispatchToProps)(LogMenu)
+export default LogMenuContainer

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)
+const MenuContainer = connect(mapStateToProps, mapDispatchToProps)(Menu)
+export default MenuContainer

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)
+const NavContainer = connect(mapStateToProps, mapDispatchToProps)(Nav)
+export default NavContainer

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

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)
+const SettingsContainer = connect(mapStateToProps, mapDispatchToProps)(Settings)
+export default SettingsContainer

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({