left panel with git logs at boris

custom.d.ts

@@ -1,14 +1,19 @@
-declare module "*.svg" {
+declare module '*.svg' {
   const content: any;
   export default content;
 }
 
 declare module '*.scss' {
-  const content: {[className: string]: string};
+  const content: { [className: string]: string };
   export = content;
 }
 
 declare module '*.less' {
-  const content: {[className: string]: string};
+  const content: { [className: string]: string };
   export = content;
 }
+
+declare module '*.json' {
+  const content: any;
+  export default content;
+}

src/components/boris/BorisStats/index.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import { IBorisState } from '~/redux/boris/reducer';
+import { BorisStatsGit } from '../BorisStatsGit';
+
+interface IProps {
+  stats: IBorisState['stats'];
+}
+
+const BorisStats: FC<IProps> = ({ stats }) => {
+  return (
+    <>
+      <BorisStatsGit stats={stats} />
+    </>
+  );
+};
+
+export { BorisStats };

src/components/boris/BorisStatsGit/index.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from 'react';
+import { IBorisState } from '~/redux/boris/reducer';
+import styles from './styles.module.scss';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { BorisStatsGitCard } from '../BorisStatsGitCard';
+
+interface IProps {
+  stats: IBorisState['stats'];
+}
+
+const BorisStatsGit: FC<IProps> = ({ stats }) => {
+  if (!stats.git.length) return null;
+
+  if (stats.is_loading) {
+    return (
+      <>
+        <div className={styles.stats__title}>
+          <Placeholder width="50%" />
+        </div>
+
+        <Placeholder width="50%" />
+        <Placeholder width="100%" />
+        <Placeholder width="50%" />
+        <Placeholder width="70%" />
+        <Placeholder width="60%" />
+        <Placeholder width="100%" />
+      </>
+    );
+  }
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.stats__title}>Изменения</div>
+
+      {stats.git
+        .filter(data => data.commit && data.timestamp && data.subject)
+        .slice(0, 5)
+        .map(data => (
+          <BorisStatsGitCard data={data} key={data.commit} />
+        ))}
+    </div>
+  );
+};
+
+export { BorisStatsGit };

src/components/boris/BorisStatsGit/styles.module.scss

@@ -0,0 +1,8 @@
+.stats {
+  &__title {
+    font: $font_12_semibold;
+    text-transform: uppercase;
+    opacity: 0.3;
+    margin-top: 16px !important;
+  }
+}

src/components/boris/BorisStatsGitCard/index.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+import { IStatGitRow } from '~/redux/boris/reducer';
+import styles from './styles.module.scss';
+import { getPrettyDate } from '~/utils/dom';
+
+interface IProps {
+  data: IStatGitRow;
+}
+
+const BorisStatsGitCard: FC<IProps> = ({ data: { timestamp, subject } }) => {
+  if (!subject || !timestamp) return null;
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.time}>
+        {getPrettyDate(new Date(parseInt(`${timestamp}000`)).toISOString())}
+      </div>
+
+      <div className={styles.subject}>{subject}</div>
+    </div>
+  );
+};
+
+export { BorisStatsGitCard };

src/components/boris/BorisStatsGitCard/styles.module.scss

@@ -0,0 +1,9 @@
+.wrap {
+  margin-top: $gap;
+}
+
+.time {
+  font: $font_12_regular;
+  line-height: 17px;
+  opacity: 0.5;
+}

src/containers/node/BorisLayout/index.tsx

@@ -21,6 +21,7 @@ import { Footer } from '~/components/main/Footer';
 import { Sticky } from '~/components/containers/Sticky';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { selectBorisStats } from '~/redux/boris/selectors';
+import { BorisStats } from '~/components/boris/BorisStats';
 
 const mapStateToProps = state => ({
   node: selectNode(state),
@@ -118,33 +119,19 @@ const BorisLayoutUnconnected: FC<IProps> = ({
           <Sticky>
             <Group className={styles.stats__container}>
               <div className={styles.stats__about}>
+                <h4>Господи-боженьки, где это я?</h4>
+
+                <p>
+                  Всё впорядке, это &mdash; главный штаб суицидальных роботов, строящих Убежище.
+                </p>
                 <p>Здесь мы сидим и слушаем всё, что вас беспокоит.</p>
-                <p>Все виновные будут наказаны. Невиновные, впрочем, тоже. Такова жизнь.</p>
+                <p>
+                  Все виновные будут наказаны. Невиновные, впрочем, тоже.{' '}
+                  <span className="grey">//&nbsp;Такова&nbsp;жизнь.</span>
+                </p>
               </div>
 
-              {/*
+              <BorisStats stats={stats} />
-                <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,7 +6,7 @@
 }
 
 .content {
-  flex: 3;
+  flex: 4;
   z-index: 2;
   border-radius: $radius;
   padding: 0;
@@ -117,6 +117,12 @@
   flex-direction: column;
   padding-top: 10px;
 
+  h4 {
+    font: $font_20_semibold;
+    text-transform: uppercase;
+    margin-bottom: $gap * 2;
+  }
+
   &__container {
     background: darken($content_bg, 4%);
     border-radius: 0 $radius $radius 0;
@@ -137,7 +143,7 @@
     line-height: 1.4em;
 
     p {
-      margin-bottom: 8px;
+      margin-bottom: $gap;
     }
   }
 }

src/redux/boris/actions.ts

@@ -6,6 +6,11 @@ export const borisSet = (state: Partial<IBorisState>) => ({
   state,
 });
 
+export const borisSetStats = (stats: Partial<IBorisState['stats']>) => ({
+  type: BORIS_ACTIONS.SET_STATS,
+  stats,
+});
+
 export const borisLoadStats = () => ({
   type: BORIS_ACTIONS.LOAD_STATS,
 });

src/redux/boris/api.ts

@@ -1,8 +1,3 @@
-import Axios from 'axios';
+import git from '~/stats/git.json';
-import { API } from '~/constants/api';
-import { resultMiddleware, errorMiddleware } from '~/utils/api';
 
-export const getBorisGitStats = (): Promise<any> =>
+export const getBorisGitStats = (): Promise<any> => Promise.resolve(git);
-  Axios.get(API.BORIS.GET_GIT_LOG)
-    .then(resultMiddleware)
-    .catch(errorMiddleware);

src/redux/boris/constants.ts

@@ -2,5 +2,7 @@ const prefix = `BORIS.`;
 
 export const BORIS_ACTIONS = {
   SET_BORIS: `${prefix}SET_BORIS`,
+  SET_STATS: `${prefix}SET_STATS`,
+
   LOAD_STATS: `${prefix}LOAD_STATS`,
 };

src/redux/boris/handlers.ts

@@ -6,6 +6,15 @@ const borisSet = (current: IBorisState, { state }: ReturnType<typeof borisSet>)
   ...state,
 });
 
+const borisSetStats = (state: IBorisState, { stats }: ReturnType<typeof borisSetStats>) => ({
+  ...state,
+  stats: {
+    ...state.stats,
+    ...stats,
+  },
+});
+
 export const BORIS_HANDLERS = {
   [BORIS_ACTIONS.SET_BORIS]: borisSet,
+  [BORIS_ACTIONS.SET_STATS]: borisSetStats,
 };

src/redux/boris/reducer.ts

@@ -10,15 +10,15 @@ export type IStatGitRow = {
 export type IBorisState = Readonly<{
   stats: {
     git: IStatGitRow[];
+    is_loading: boolean;
   };
-  is_loading: boolean;
 }>;
 
 const BORIS_INITIAL_STATE: IBorisState = {
   stats: {
     git: [],
+    is_loading: false,
   },
-  is_loading: false,
 };
 
 export default createReducer(BORIS_INITIAL_STATE, BORIS_HANDLERS);

src/redux/boris/sagas.ts

@@ -1,15 +1,17 @@
 import { takeLatest, put, call } from 'redux-saga/effects';
 import { BORIS_ACTIONS } from './constants';
-import { borisSet } from './actions';
+import { borisSet, borisSetStats } from './actions';
 import { getBorisGitStats } from './api';
 
 function* loadStats() {
-  yield put(borisSet({ is_loading: true }));
+  yield put(borisSetStats({ is_loading: true }));
 
-  const result = yield getBorisGitStats();
+  try {
-  console.log(result);
+    const git = yield getBorisGitStats();
-
+    yield put(borisSetStats({ git, is_loading: false }));
-  yield put(borisSet({ is_loading: false }));
+  } catch (e) {
+    yield put(borisSetStats({ git: [], is_loading: false }));
+  }
 }
 
 export default function* borisSaga() {

src/stats/git.json

@@ -0,0 +1,53 @@
+[
+  { "commit": "3b2e59e4454172f89868c16a4f3d0747c38273d4", "subject": "returned styling back", "timestamp": "1591608073" },
+  { "commit": "2027ec65afeee62b8925885763db6e4a382dddee", "subject": "added api fn to request git stats", "timestamp": "1591600250" },
+  { "commit": "29c3b8a26fd75209e1faca37dc707a463656dfe6", "subject": "added saga for boris load stats", "timestamp": "1591599680" },
+  { "commit": "f8b2b3707bbbd92b6ce25f370aeae7d8b7b6cdb4", "subject": "removed about title", "timestamp": "1591596592" },
+  { "commit": "efdc756d21e3a18c490aa7180d6760093e6f3c27", "subject": "added stats panel markup", "timestamp": "1591596562" },
+  { "commit": "6595adcccd027dffed1f95586670725d2bbbdb1d", "subject": "added boris reducer", "timestamp": "1591591083" },
+  { "commit": "381c2fecdaea36266bf0d026e689f5dfb2fef72e", "subject": "added funny phrases", "timestamp": "1591588455" },
+  { "commit": "7d3132237d9c49d574654f1b51b14c434ea5a1b1", "subject": "feature: added image preview for comments", "timestamp": "1591353722" },
+  { "commit": "08f6b518e47a497d09277df9d1380f7fc9b1dfa0", "subject": "cleaned comment", "timestamp": "1591353253" },
+  { "commit": "b8c15cfd9903293734e9e57789c31eaa8dd27162", "subject": "made comment block props type", "timestamp": "1591353209" },
+  { "commit": "c8d8aa356e3c3cb92a50092b50c8b3938e1ed2ed", "subject": "removed more comments bar from node comments", "timestamp": "1591353019" },
+  { "commit": "5e673c27b03b249bde2a4c8bc93a25134c170ccb", "subject": "removed console.log", "timestamp": "1591352733" },
+  { "commit": "924b6d42858dd4cddd8607fe54b97ba7217eea5b", "subject": "ignoring image modal key sliding when modal is shown", "timestamp": "1591352682" },
+  { "commit": "e25caef8a38e973a0e74ab4b7b116daa45f92842", "subject": "removed node image block", "timestamp": "1591351793" },
+  { "commit": "91a551cb6c4b48b150593aeeb41042749b922655", "subject": "removed photoswipe from props", "timestamp": "1591351676" },
+  { "commit": "e6d5c9210b0e253894d2df6042c584c8511ae998", "subject": "fixed stats", "timestamp": "1591341164" },
+  { "commit": "82b255236a6f335c47420ac2f0c283490e5418a0", "subject": "fixed stats", "timestamp": "1591340818" },
+  { "commit": "c18d9e43f0cdb6f03c085695c0f5cd24a81b886e", "subject": "newline for stats", "timestamp": "1591340702" },
+  { "commit": "901f1ed760e9b0bb9f0fe373be8c4406c86edbb5", "subject": "limited number of commits to show in log", "timestamp": "1591340550" },
+  { "commit": "bd90758befc4e05d09c211cd8f072a97c7a13acc", "subject": "fixed stats", "timestamp": "1591340407" },
+  { "commit": "21ca863b8cb2fae4ee48d38de2f6cc778716ab19", "subject": "fixed stats", "timestamp": "1591340257" },
+  { "commit": "db9a0ac501d9e242ad198c0adbbefd2939f7501b", "subject": "updated stats", "timestamp": "1591340188" },
+  { "commit": "5c936b340b1b59ed24b255b2f4d3b58f9dca0d7a", "subject": "fixed stats", "timestamp": "1591339779" },
+  { "commit": "f92310c57af3d189b95dfb462670afc23fa2aaab", "subject": "git log stats", "timestamp": "1591339712" },
+  { "commit": "231beb17aeabef8af91218d49a82475599b256f9", "subject": "fixed stats", "timestamp": "1591339415" },
+  { "commit": "e52afbb53074c9af5d4e62d390e4fb11494c8d1e", "subject": "added stats stage", "timestamp": "1591339190" },
+  { "commit": "391f1b825fdef1e4b49bc82852111c77fd4ea254", "subject": "changed npm to yarn", "timestamp": "1591337652" },
+  { "commit": "ded0f8ffd9fc7fe1adf4a29c2ee7f00093368d16", "subject": "fixed vulnerability issues", "timestamp": "1591337484" },
+  { "commit": "a39a6a699584ab06679e9b67d13dcefc9b79b91d", "subject": "spacer for long comments", "timestamp": "1590404744" },
+  { "commit": "5c1610218da3e7b94cced6ad9765591636f54260", "subject": "added like count to nodes", "timestamp": "1588935639" },
+  { "commit": "7f372bb02502a62fbc0f257fd2a749d5c2ce47ad", "subject": "fixed panel appearance", "timestamp": "1588220582" },
+  { "commit": "c3e92e1b47d18c18d20778a747dc3a208e9e831c", "subject": "fixed node title size", "timestamp": "1588220176" },
+  { "commit": "ee6ec97ea747c0176add9cbe5e610884f1d0e606", "subject": "fixed mobile breakpoints", "timestamp": "1588161451" },
+  { "commit": "b794a44c4f52a935767ea6c5e8098feaac915d09", "subject": "editor buttons fix on mobile", "timestamp": "1588161147" },
+  { "commit": "3d398f23ed04f9d0d14509588c2ed1f8d7494651", "subject": "fixed node title on mobiles", "timestamp": "1588160424" },
+  { "commit": "d1dc914572f84032a6b9e26214576ff5615f2a93", "subject": "fixed photoswipe click", "timestamp": "1588059243" },
+  { "commit": "33016299205285398fd0ea5246e741ea4fe47adb", "subject": "resetting offset on node change", "timestamp": "1588057174" },
+  { "commit": "071e5968c825902179be4dee91aec7e234a9dceb", "subject": "fixed images count", "timestamp": "1588056637" },
+  { "commit": "47ed05999a7e831e1c4e66bbfd17f161296c3f3f", "subject": "made arrows and keyboard triggers to move eveything", "timestamp": "1588056140" },
+  { "commit": "7109db0a528e2f9fffbd3397bb5624eb857e199a", "subject": "removed arrows for now", "timestamp": "1587990023" },
+  { "commit": "ada2e5967621e10c7712f1771bf9675066966613", "subject": "arrows markup", "timestamp": "1587990002" },
+  { "commit": "25a59bf94479efd59c4b8d80e2d6aa5631a2522e", "subject": "added image box shadow", "timestamp": "1587960977" },
+  { "commit": "35210c1d592dc3cc3e58a7684ca03d9c90d13a39", "subject": "better click detection", "timestamp": "1587960883" },
+  { "commit": "6d679ffd29ebec32e12f5d5d7c6551f4eb50fdb5", "subject": "fixed new date type", "timestamp": "1587714447" },
+  { "commit": "38fd09cfe154ece36578c8d9f70afae705cab7d5", "subject": "fixed image sliders appearance for square images", "timestamp": "1587714133" },
+  { "commit": "ad2c8dca8045c443309f95583ebeae1c2d426fa2", "subject": "Merge branch 'develop'", "timestamp": "1587713949" },
+  { "commit": "e1525edccb6c2abc9233cf0aa70eac8006823e6b", "subject": "Merge branch 'feature/better-images'", "timestamp": "1587713851" },
+  { "commit": "f52ae5f0b28eccaeb72d1757740939bd56a495e1", "subject": "fixed image slider", "timestamp": "1587713778" },
+  { "commit": "ac81380557f7aee915ead65711d21bc59bccae89", "subject": "fixed timer", "timestamp": "1587629899" },
+  { "commit": "1dd0f68eb7778093376a57dd74da5fd5fdb559d4", "subject": "fixed hero timer", "timestamp": "1587628659" },
+  {}
+]