added saga for boris load stats

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<typeof mapStateToProps> &
@@ -50,6 +54,8 @@ const BorisLayoutUnconnected: FC<IProps> = ({
   nodeLoadMoreComments,
   modalShowPhotoswipe,
   authSetUser,
+  borisLoadStats,
+  stats,
 }) => {
   const title = getRandomPhrase('BORIS_TITLE');
 
@@ -67,6 +73,10 @@ const BorisLayoutUnconnected: FC<IProps> = ({
     nodeLoadNode(id, 'DESC');
   }, [nodeLoadNode, id]);
 
+  useEffect(() => {
+    borisLoadStats();
+  }, [borisLoadStats]);
+
   return (
     <div className={styles.wrap}>
       <div className={styles.cover} />
@@ -111,7 +121,30 @@ const BorisLayoutUnconnected: FC<IProps> = ({
                 <p>Здесь мы сидим и слушаем всё, что вас беспокоит.</p>
                 <p>А потом чиним долгими дождливыми вечерами.</p>
               </div>
+
+              {/*
+                <div className={styles.stats__title}>Контент</div>
+
+              <Placeholder width="35%" />
+              <Placeholder width="40%" />
+              <Placeholder width="35%" />
+              <Placeholder width="20%" />
+
+              <div className={styles.stats__title}>Хранилище</div>
+
+              <Placeholder width="35%" />
+              <Placeholder width="35%" />
+              <Placeholder width="40%" />
+                */}
+
               <div className={styles.stats__title}>Изменения</div>
+
+              <Placeholder width="50%" />
+              <Placeholder width="100%" />
+              <Placeholder width="50%" />
+              <Placeholder width="70%" />
+              <Placeholder width="60%" />
+              <Placeholder width="100%" />
             </Group>
           </Sticky>
         </Group>

src/containers/node/BorisLayout/styles.scss

@@ -6,10 +6,9 @@
 }
 
 .content {
-  flex: 4;
+  flex: 3;
   z-index: 2;
-  border-radius: $radius 0 0 $radius;
+  border-radius: $radius;
-  // flex: 0 1 $limited_width;
   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 {

src/redux/boris/actions.ts

@@ -0,0 +1,11 @@
+import { IBorisState } from './reducer';
+import { BORIS_ACTIONS } from './constants';
+
+export const borisSet = (state: Partial<IBorisState>) => ({
+  type: BORIS_ACTIONS.SET_BORIS,
+  state,
+});
+
+export const borisLoadStats = () => ({
+  type: BORIS_ACTIONS.LOAD_STATS,
+});

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`,
+};

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<typeof borisSet>) => ({
+  ...current,
+  ...state,
+});
+
+export const BORIS_HANDLERS = {
+  [BORIS_ACTIONS.SET_BORIS]: borisSet,
+};

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);

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);
+}

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;