Merge pull request #5 from Kagashino/dev

optimize: duplicate effect execution; specify context type

package.json

@@ -6,7 +6,7 @@
   "typings": "./src/types/index.d.ts",
   "dependencies": {
     "dayjs": "^1.8.17",
-    "programmer-almanac-generator": "^0.9.1",
+    "programmer-almanac-generator": "^0.9.3",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-markdown": "^4.2.2",

src/App.tsx

@@ -1,43 +1,34 @@
-import React, {createContext, lazy, useReducer, Suspense} from 'react';
+import React, {lazy, Suspense, useReducer} from 'react';
 import {
   BrowserRouter as Router, NavLink,
   Route,
 } from 'react-router-dom';
 
-import Api from './assets/api/index';
 import Container from './container';
-import Sidebar from "./container/Sidebar";
-import { ArticleReducer } from "./assets/store/reducers";
+import Sidebar from './container/Sidebar';
+import {ApiContext, ApiDefault} from './assets/store/context';
+import { ArticleReducer } from './assets/store/reducers';
 
 import './App.scss';
 
-const TopJumper = lazy(() => import('./components/TopJumper'))
-
-export const ApiContext = createContext({})
+const TopJumper = lazy(() => import('./components/TopJumper'));
 
 export default function App() {
-  const [ articleState, articleDispatch ] = useReducer(ArticleReducer, {
-    article: {},
-    list: [],
-    page: 0,
-    count: 0,
-    size: 10
-  });
-
+  const [articleState, dispatch] = useReducer(ArticleReducer, ApiDefault.articleState)
   return (
     <Router>
       <nav>
         <NavLink to='/' exact className={'nav-link'} activeClassName={'active-link'}>首页</NavLink>
         <NavLink to='/about' exact className={'nav-link'} activeClassName={'active-link'}>关于</NavLink>
       </nav>
       <Route path="/">
-        <ApiContext.Provider value={{ Api, articleState, dispatch: articleDispatch }}>
+        <ApiContext.Provider value={{ ...ApiDefault, articleState, dispatch }}>
           <section className="container">
             <Container />
           </section>
         </ApiContext.Provider>
       </Route>
-      <Suspense fallback={''}>
+      <Suspense fallback={'loading...'}>
         <TopJumper />
       </Suspense>
       <Sidebar />

src/assets/api/index.ts

@@ -1,4 +1,4 @@
-import { Article, Articles, Paging } from "../../types";
+import { Article, Articles, Paging } from '../../types';
 
 const url = (url: string): string => `${process.env.REACT_APP_API_URL}${url}`
 

src/assets/store/actions.ts

@@ -1,4 +1,4 @@
-import {Article, Paging} from "../../types";
+import { Article, Paging } from "../../types";
 
 export const GET_ARTICLE = 'GET_ARTICLE';
 export const UPDATE_ARTICLE_LIST = 'UPDATE_ARTICLE_LIST';

src/assets/store/context.ts

@@ -0,0 +1,39 @@
+import { createContext, Dispatch } from 'react';
+import Api from '../api';
+import { Article, Articles, PlainObject } from '../../types';
+
+interface ArticleState extends Articles {
+  article: Article,
+}
+
+type noop = ()=>void;
+
+
+interface IApiContext {
+  Api: any
+  dispatch: Dispatch<{ type: string } & PlainObject> | noop
+  articleState: ArticleState
+}
+
+const articleState = {
+  article: {
+    id: 0,
+    title: '',
+    tags: '',
+    access: 0,
+    author: '',
+    created: 0
+  },
+  list: [],
+  page: 0,
+  count: 0,
+  size: 10
+};
+
+export const ApiDefault = {
+  Api,
+  articleState,
+  dispatch: () => null
+};
+
+export const ApiContext = createContext<IApiContext>(ApiDefault);

src/container/Almanac.hook.ts

@@ -1,4 +1,4 @@
-import {init} from "programmer-almanac-generator";
+import { init } from 'programmer-almanac-generator';
 
 export const useAlmanac = (): AlmanacResult => {
   return init(new Date());

src/container/Article.hook.ts

@@ -1,18 +1,17 @@
 import {useEffect, useContext, useState} from 'react';
-import { appendArticles, getArticle } from "../assets/store/actions";
-import { ApiContext } from "../App";
+import { appendArticles, getArticle } from '../assets/store/actions';
+import { ApiContext } from '../assets/store/context';
 
 export function useArticles() {
-  // @ts-ignore
   const { Api: { articles }, articleState, dispatch } = useContext(ApiContext);
-  const  { page } = articleState;
+  const { page } = articleState;
   const [loading, switchLoading] = useState(true);
-  useEffect(()=>{
+  useEffect(() => {
     switchLoading(true);
     articles.list({ page }).then((resp: any): void => {
       const { list, ...paging } = resp;
       dispatch(appendArticles({ ...paging, page }, list))
-    }).finally((): void =>{
+    }).finally((): void => {
       switchLoading(false);
     })
   }, [page])
@@ -23,21 +22,17 @@ export function useArticles() {
 }
 
 export function useArticle(id: string) {
-  // @ts-ignore
-  const { Api: { articles }, articleState, dispatch } = useContext(ApiContext);
+  const { Api, articleState, dispatch } = useContext(ApiContext);
   const { article } = articleState;
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
-    const defer = ()=>{
-      setLoading(false)
-      window.scrollTo(0, 0)
-    }
-    articles.get(id).then((resp: any)=>{
+    Api.articles.get(id).then((resp: any) => {
       dispatch(getArticle(resp));
-      return defer()
+      setLoading(false);
+      window.scrollTo(0, 0);
     })
-  }, [article.id, dispatch, articles]);
+  }, [id]);
 
   return {
     loading,

src/container/Articles.tsx

@@ -1,19 +1,18 @@
-import React, {useContext} from 'react';
-import { Link } from "react-router-dom";
-import { ApiContext } from "../App";
-import { appendArticles } from "../assets/store/actions";
+import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
+import { ApiContext } from '../assets/store/context';
+import { appendArticles } from '../assets/store/actions';
 
 import './styles/Articles.scss';
 
 type ArticlesProps = {
   page: number,
   count: number,
   list: Array<{}>,
-  noMore: boolean,
+  noMore?: boolean,
   loading: boolean,
 }
-export default function Articles(props: ArticlesProps, ...rest: any[]) {
-  // @ts-ignore
+export default function Articles(props: ArticlesProps) {
   const { dispatch } = useContext(ApiContext);
   const {
     loading,
@@ -22,25 +21,31 @@ export default function Articles(props: ArticlesProps, ...rest: any[]) {
     list,
   } = props;
 
-  const handleLoadMore = ()=>{
+  const handleLoadMore = () => {
     if (noMore) {
       return;
     }
-    dispatch(appendArticles({ page: page + 1, count }, []))
-  }
+    dispatch(appendArticles({ page: page + 1, count }, []));
+  };
 
   const showLoading: boolean = loading;
   const noMore: boolean = !loading && list.length >= count;
   const showLoadMore: boolean = !loading && !noMore;
   return (
     <ul className="article-list">
       {
-        list.map((item: any) =>(
+        list.map((item: any) => (
           <li key={item.id}>
             <Link to={`article/${item.id}`}>
               <h3>{item.title }</h3>
               <p>{item.abstract }</p>
-              <span>{item.author} | { new Date(item.created).toLocaleString() }</span>
+              <span>
+                {item.author}
+                {' '}
+|
+                {' '}
+                { new Date(item.created).toLocaleString() }
+              </span>
             </Link>
           </li>
         ))
@@ -49,11 +54,11 @@ export default function Articles(props: ArticlesProps, ...rest: any[]) {
         showLoading && <li className="loading-control loading">加载中...</li>
       }
       {
-        showLoadMore && <li className="loading-control more" onClick={ handleLoadMore }>加载更多</li>
+        showLoadMore && <li className="loading-control more" onClick={handleLoadMore}>加载更多</li>
       }
       {
         noMore && <li className="loading-control">没有更多了</li>
       }
     </ul>
-  )
+  );
 }

src/container/index.tsx

@@ -11,7 +11,7 @@ export default function Container() {
   const { articleState, loading } = useArticles()
   return (
     <Switch>
-      <Route exact path="/" component={ ()=>Articles({ loading, ...articleState }) } />
+      <Route exact path="/" component={ () => Articles({ loading, ...articleState }) } />
       <Route exact path="/article/:id" component={ Article } />
       <Route exact path="/about" component={ About} />
       <Route exact path="/almanac" component={ Almanac } />

src/container/styles/Articles.scss

@@ -17,14 +17,16 @@
       text-overflow:ellipsis;
       -webkit-line-clamp:2;
       -webkit-box-orient:vertical;
+      margin: 10px 0;
       max-width: 800px;
       height: 42px;
-      font-size: 16px;
-      color: #999;
+      line-height: 18px;
+      font-size: 14px;
+      color: #666;
     }
     span {
       font-size: 14px;
-      color: #999;
+      color: #666;
     }
   }
 }

src/index.d.ts

@@ -1,22 +1,3 @@
-declare type AlmanacActivity = {
-	name: string,
-	good: string,
-	bad: string,
-  weekend?: boolean
-}
-
-
-declare type AlmanacSet = {
-  Weeks: Array
-  Activities: Array
-  Specials: Array
-  Directions: Array
-  Tools: Array
-  Variables: Array
-  Drinks: Array
-}
-
-
 declare type AlmanacResult = {
   todayStr: string
   good: Array<{ name: string, good: string, bad: string, weekend?: boolean }>

src/types/index.ts

@@ -1,3 +1,7 @@
+export interface PlainObject {
+  [key: string]: any
+}
+
 export interface Paging {
   page: number,
   size?: number,

yarn.lock

@@ -8363,10 +8363,10 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-programmer-almanac-generator@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/programmer-almanac-generator/-/programmer-almanac-generator-0.9.1.tgz#2f2c48bd9410ee293c9658c4c58a97fa53ce2e91"
-  integrity sha512-F3qz7W0kiW3U7nAutfKlCmwmRMWcdYYFTv9cYyJfmAIlyLCOy9fIJtP4JQbyYz0Xjot8EJdoQI4kDeb7BHP9LA==
+programmer-almanac-generator@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/programmer-almanac-generator/-/programmer-almanac-generator-0.9.3.tgz#67d7cd70c71283b07d57502a2e2e840ae737f4ad"
+  integrity sha512-bvqjYdLijD9leSvAe/QEqpC8bWVF/R3EQRs0vii56HSpHxMEkh4CCMcCVlvyDXZ7QroWigbU2bVg662OhdpHCw==
 
 progress@^2.0.0:
   version "2.0.3"