#25 getting github issues as tasks

src/components/boris/BorisStatsGit/index.tsx

@@ -9,7 +9,7 @@ interface IProps {
 }
 
 const BorisStatsGit: FC<IProps> = ({ stats }) => {
-  if (!stats.git.length) return null;
+  if (!stats.issues.length) return null;
 
   if (stats.is_loading) {
     return (
@@ -35,11 +35,12 @@ const BorisStatsGit: FC<IProps> = ({ stats }) => {
         <img src="https://jenkins.vault48.org/api/badges/muerwre/vault-golang/status.svg" />
       </div>
 
-      {stats.git
-        .filter(data => data.commit && data.timestamp && data.subject)
-        .slice(0, 5)
+      {stats.issues
+        .filter(el => !el.pull_request)
+        .slice(0, 10)
+        .sort(el => (el.state === 'open' ? 1 : -1))
         .map(data => (
-          <BorisStatsGitCard data={data} key={data.commit} />
+          <BorisStatsGitCard data={data} key={data.id} />
         ))}
     </div>
   );

src/components/boris/BorisStatsGitCard/index.tsx

@@ -1,22 +1,33 @@
-import React, { FC } from 'react';
-import { IStatGitRow } from '~/redux/boris/reducer';
+import React, { FC, useMemo } from 'react';
 import styles from './styles.module.scss';
 import { getPrettyDate } from '~/utils/dom';
+import { IGithubIssue } from '~/redux/boris/types';
+import classNames from 'classnames';
 
 interface IProps {
-  data: Partial<IStatGitRow>;
+  data: IGithubIssue;
 }
 
-const BorisStatsGitCard: FC<IProps> = ({ data: { timestamp, subject } }) => {
-  if (!subject || !timestamp) return null;
+const stateLabels: Record<IGithubIssue['state'], string> = {
+  open: 'Ожидает',
+  closed: 'Сделано',
+};
+
+const BorisStatsGitCard: FC<IProps> = ({ data: { created_at, title, html_url, state } }) => {
+  if (!title || !created_at) return null;
+
+  const date = useMemo(() => getPrettyDate(created_at), [created_at]);
 
   return (
     <div className={styles.wrap}>
       <div className={styles.time}>
-        {getPrettyDate(new Date(parseInt(`${timestamp}000`)).toISOString())}
+        <span className={classNames(styles.icon, styles[state])}>{stateLabels[state]}</span>
+        {date}
       </div>
 
-      <div className={styles.subject}>{subject}</div>
+      <a className={styles.subject} href={html_url} target="_blank">
+        {title}
+      </a>
     </div>
   );
 };

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

@@ -12,10 +12,28 @@
 .time {
   font: $font_12_regular;
   line-height: 17px;
-  opacity: 0.3;
+  color: transparentize(white, 0.7)
 }
 
 .subject {
   font: $font_14_regular;
   word-break: break-word;
+  text-decoration: none;
+  color: inherit;
+}
+
+.icon {
+  font: $font_10_semibold;
+  margin-right: 5px;
+  border-radius: 2px;
+  padding: 2px 0;
+  text-transform: uppercase;
+
+  &.open {
+    color: $red;
+  }
+
+  &.closed {
+    color: $green;
+  }
 }

src/redux/boris/api.ts

@@ -1,10 +1,20 @@
 import git from '~/stats/git.json';
 import { API } from '~/constants/api';
-import { api, resultMiddleware, errorMiddleware, cleanResult } from '~/utils/api';
+import { api, cleanResult } from '~/utils/api';
 import { IBorisState, IStatBackend } from './reducer';
-import { IResultWithStatus } from '../types';
+import axios from 'axios';
+import { IGetGithubIssuesResult } from '~/redux/boris/types';
 
 export const getBorisGitStats = () => Promise.resolve<IBorisState['stats']['git']>(git);
 
 export const getBorisBackendStats = () =>
   api.get<IStatBackend>(API.BORIS.GET_BACKEND_STATS).then(cleanResult);
+
+export const getGithubIssues = () => {
+  return axios
+    .get<IGetGithubIssuesResult>('https://api.github.com/repos/muerwre/vault-frontend/issues', {
+      params: { state: 'all', sort: 'created' },
+    })
+    .then(result => result.data)
+    .catch(() => []);
+};

src/redux/boris/reducer.ts

@@ -1,5 +1,6 @@
 import { createReducer } from '~/utils/reducer';
 import { BORIS_HANDLERS } from './handlers';
+import { IGithubIssue } from '~/redux/boris/types';
 
 export type IStatGitRow = {
   commit: string;
@@ -31,6 +32,7 @@ export type IStatBackend = {
 export type IBorisState = Readonly<{
   stats: {
     git: Partial<IStatGitRow>[];
+    issues: IGithubIssue[];
     backend?: IStatBackend;
     is_loading: boolean;
   };
@@ -39,6 +41,7 @@ export type IBorisState = Readonly<{
 const BORIS_INITIAL_STATE: IBorisState = {
   stats: {
     git: [],
+    issues: [],
     backend: undefined,
     is_loading: false,
   },

src/redux/boris/sagas.ts

@@ -1,17 +1,17 @@
-import { takeLatest, put, call } from 'redux-saga/effects';
+import { call, put, takeLatest } from 'redux-saga/effects';
 import { BORIS_ACTIONS } from './constants';
 import { borisSetStats } from './actions';
-import { getBorisGitStats, getBorisBackendStats } from './api';
+import { getBorisBackendStats, getGithubIssues } from './api';
 import { Unwrap } from '../types';
 
 function* loadStats() {
   try {
     yield put(borisSetStats({ is_loading: true }));
 
-    const git: Unwrap<typeof getBorisGitStats> = yield call(getBorisGitStats);
     const backend: Unwrap<typeof getBorisBackendStats> = yield call(getBorisBackendStats);
+    const issues: Unwrap<typeof getGithubIssues> = yield call(getGithubIssues);
 
-    yield put(borisSetStats({ git, backend }));
+    yield put(borisSetStats({ issues, backend }));
   } catch (e) {
     yield put(borisSetStats({ git: [], backend: undefined }));
   } finally {

src/redux/boris/types.ts

@@ -0,0 +1,12 @@
+export interface IGithubIssue {
+  id: string;
+  url: string;
+  html_url: string;
+  body: string;
+  title: string;
+  state: 'open' | 'closed';
+  created_at: string;
+  pull_request?: unknown;
+}
+
+export type IGetGithubIssuesResult = IGithubIssue[];