From 29c3b8a26fd75209e1faca37dc707a463656dfe6 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 8 Jun 2020 14:01:20 +0700 Subject: [PATCH] added saga for boris load stats --- src/containers/node/BorisLayout/index.tsx | 35 ++++++++++++++++++++- src/containers/node/BorisLayout/styles.scss | 7 ++--- src/redux/boris/actions.ts | 11 +++++++ src/redux/boris/constants.ts | 6 ++++ src/redux/boris/handlers.ts | 12 ++++++- src/redux/boris/reducer.ts | 2 ++ src/redux/boris/sagas.ts | 13 +++++++- src/redux/boris/selectors.ts | 4 +++ 8 files changed, 83 insertions(+), 7 deletions(-) create mode 100644 src/redux/boris/actions.ts create mode 100644 src/redux/boris/constants.ts create mode 100644 src/redux/boris/selectors.ts diff --git a/src/containers/node/BorisLayout/index.tsx b/src/containers/node/BorisLayout/index.tsx index 515bd098..a51f0cd7 100644 --- a/src/containers/node/BorisLayout/index.tsx +++ b/src/containers/node/BorisLayout/index.tsx @@ -14,15 +14,18 @@ import { NodeCommentForm } from '~/components/node/NodeCommentForm'; import * as NODE_ACTIONS from '~/redux/node/actions'; import * as AUTH_ACTIONS from '~/redux/auth/actions'; import * as MODAL_ACTIONS from '~/redux/modal/actions'; +import * as BORIS_ACTIONS from '~/redux/boris/actions'; import isBefore from 'date-fns/isBefore'; import { Card } from '~/components/containers/Card'; import { Footer } from '~/components/main/Footer'; -import { Filler } from '~/components/containers/Filler'; import { Sticky } from '~/components/containers/Sticky'; +import { Placeholder } from '~/components/placeholders/Placeholder'; +import { selectBorisStats } from '~/redux/boris/selectors'; const mapStateToProps = state => ({ node: selectNode(state), user: selectUser(state), + stats: selectBorisStats(state), }); const mapDispatchToProps = { @@ -32,6 +35,7 @@ const mapDispatchToProps = { nodeLoadMoreComments: NODE_ACTIONS.nodeLoadMoreComments, authSetUser: AUTH_ACTIONS.authSetUser, modalShowPhotoswipe: MODAL_ACTIONS.modalShowPhotoswipe, + borisLoadStats: BORIS_ACTIONS.borisLoadStats, }; type IProps = ReturnType & @@ -50,6 +54,8 @@ const BorisLayoutUnconnected: FC = ({ nodeLoadMoreComments, modalShowPhotoswipe, authSetUser, + borisLoadStats, + stats, }) => { const title = getRandomPhrase('BORIS_TITLE'); @@ -67,6 +73,10 @@ const BorisLayoutUnconnected: FC = ({ nodeLoadNode(id, 'DESC'); }, [nodeLoadNode, id]); + useEffect(() => { + borisLoadStats(); + }, [borisLoadStats]); + return (
@@ -111,7 +121,30 @@ const BorisLayoutUnconnected: FC = ({

Здесь мы сидим и слушаем всё, что вас беспокоит.

А потом чиним долгими дождливыми вечерами.

+ + {/* +
Контент
+ + + + + + +
Хранилище
+ + + + + */} +
Изменения
+ + + + + + + diff --git a/src/containers/node/BorisLayout/styles.scss b/src/containers/node/BorisLayout/styles.scss index 900819cf..3939db41 100644 --- a/src/containers/node/BorisLayout/styles.scss +++ b/src/containers/node/BorisLayout/styles.scss @@ -6,10 +6,9 @@ } .content { - flex: 4; + flex: 3; z-index: 2; - border-radius: $radius 0 0 $radius; - // flex: 0 1 $limited_width; + border-radius: $radius; padding: 0; background: $node_bg; box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px; @@ -117,6 +116,7 @@ z-index: 2; align-self: stretch; flex-direction: column; + padding-top: 10px; &__container { background: darken($content_bg, 4%); @@ -132,7 +132,6 @@ text-transform: uppercase; opacity: 0.3; margin-top: 16px !important; - display: none; } &__about { diff --git a/src/redux/boris/actions.ts b/src/redux/boris/actions.ts new file mode 100644 index 00000000..77944e07 --- /dev/null +++ b/src/redux/boris/actions.ts @@ -0,0 +1,11 @@ +import { IBorisState } from './reducer'; +import { BORIS_ACTIONS } from './constants'; + +export const borisSet = (state: Partial) => ({ + type: BORIS_ACTIONS.SET_BORIS, + state, +}); + +export const borisLoadStats = () => ({ + type: BORIS_ACTIONS.LOAD_STATS, +}); diff --git a/src/redux/boris/constants.ts b/src/redux/boris/constants.ts new file mode 100644 index 00000000..490865ca --- /dev/null +++ b/src/redux/boris/constants.ts @@ -0,0 +1,6 @@ +const prefix = `BORIS.`; + +export const BORIS_ACTIONS = { + SET_BORIS: `${prefix}SET_BORIS`, + LOAD_STATS: `${prefix}LOAD_STATS`, +}; diff --git a/src/redux/boris/handlers.ts b/src/redux/boris/handlers.ts index 6b63ab8f..b5152ad0 100644 --- a/src/redux/boris/handlers.ts +++ b/src/redux/boris/handlers.ts @@ -1 +1,11 @@ -export const BORIS_HANDLERS = {}; +import { IBorisState } from './reducer'; +import { BORIS_ACTIONS } from './constants'; + +const borisSet = (current: IBorisState, { state }: ReturnType) => ({ + ...current, + ...state, +}); + +export const BORIS_HANDLERS = { + [BORIS_ACTIONS.SET_BORIS]: borisSet, +}; diff --git a/src/redux/boris/reducer.ts b/src/redux/boris/reducer.ts index 1ed8f038..2a55fff5 100644 --- a/src/redux/boris/reducer.ts +++ b/src/redux/boris/reducer.ts @@ -11,12 +11,14 @@ export type IBorisState = Readonly<{ stats: { git: IStatGitRow[]; }; + is_loading: boolean; }>; const BORIS_INITIAL_STATE: IBorisState = { stats: { git: [], }, + is_loading: false, }; export default createReducer(BORIS_INITIAL_STATE, BORIS_HANDLERS); diff --git a/src/redux/boris/sagas.ts b/src/redux/boris/sagas.ts index 448daaee..e5f8ed9c 100644 --- a/src/redux/boris/sagas.ts +++ b/src/redux/boris/sagas.ts @@ -1 +1,12 @@ -export default function* borisSaga() {} +import { takeLatest, put } from 'redux-saga/effects'; +import { BORIS_ACTIONS } from './constants'; +import { borisSet } from './actions'; + +function* loadStats() { + yield put(borisSet({ is_loading: true })); + yield put(borisSet({ is_loading: false })); +} + +export default function* borisSaga() { + yield takeLatest(BORIS_ACTIONS.LOAD_STATS, loadStats); +} diff --git a/src/redux/boris/selectors.ts b/src/redux/boris/selectors.ts new file mode 100644 index 00000000..6c827414 --- /dev/null +++ b/src/redux/boris/selectors.ts @@ -0,0 +1,4 @@ +import { IState } from '../store'; + +export const selectBoris = (state: IState) => state.boris; +export const selectBorisStats = (state: IState) => state.boris.stats;