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