diff --git a/package.json b/package.json index b55fada..6bb249a 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index 702b285..3aab432 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,29 +1,20 @@ -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 ( - +
- + diff --git a/src/assets/api/index.ts b/src/assets/api/index.ts index 1bd7fc5..0802608 100644 --- a/src/assets/api/index.ts +++ b/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}` diff --git a/src/assets/store/actions.ts b/src/assets/store/actions.ts index 038c4e3..9a1ff4a 100644 --- a/src/assets/store/actions.ts +++ b/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'; diff --git a/src/assets/store/context.ts b/src/assets/store/context.ts new file mode 100644 index 0000000..f61ffe1 --- /dev/null +++ b/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(ApiDefault); diff --git a/src/container/Almanac.hook.ts b/src/container/Almanac.hook.ts index df2761c..5f43797 100644 --- a/src/container/Almanac.hook.ts +++ b/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()); diff --git a/src/container/Article.hook.ts b/src/container/Article.hook.ts index b515a03..ae58d29 100644 --- a/src/container/Article.hook.ts +++ b/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, diff --git a/src/container/Articles.tsx b/src/container/Articles.tsx index a8cc4e5..a512b9a 100644 --- a/src/container/Articles.tsx +++ b/src/container/Articles.tsx @@ -1,7 +1,7 @@ -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'; @@ -9,11 +9,10 @@ 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,12 +21,12 @@ 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; @@ -35,12 +34,18 @@ export default function Articles(props: ArticlesProps, ...rest: any[]) { return (
    { - list.map((item: any) =>( + list.map((item: any) => (

  • {item.title }

    {item.abstract }

    - {item.author} | { new Date(item.created).toLocaleString() } + + {item.author} + {' '} +| + {' '} + { new Date(item.created).toLocaleString() } +
    • )) @@ -49,11 +54,11 @@ export default function Articles(props: ArticlesProps, ...rest: any[]) { showLoading &&
  • 加载中...
    • } { - showLoadMore &&
  • 加载更多
    • + showLoadMore &&
  • 加载更多
    • } { noMore &&
  • 没有更多了
    • }
- ) + ); } diff --git a/src/container/index.tsx b/src/container/index.tsx index b083b83..78ba00e 100644 --- a/src/container/index.tsx +++ b/src/container/index.tsx @@ -11,7 +11,7 @@ export default function Container() { const { articleState, loading } = useArticles() return ( - Articles({ loading, ...articleState }) } /> + Articles({ loading, ...articleState }) } /> diff --git a/src/container/styles/Articles.scss b/src/container/styles/Articles.scss index c9034fd..38406c9 100644 --- a/src/container/styles/Articles.scss +++ b/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; } } } diff --git a/src/index.d.ts b/src/index.d.ts index 52ca18d..c72c04b 100644 --- a/src/index.d.ts +++ b/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 }> diff --git a/src/types/index.ts b/src/types/index.ts index ba745a7..298e7ac 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,3 +1,7 @@ +export interface PlainObject { + [key: string]: any +} + export interface Paging { page: number, size?: number, diff --git a/yarn.lock b/yarn.lock index 66bc862..642b333 100644 --- a/yarn.lock +++ b/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"