From 054f3041c4782c1e823c4ede157e4f440b136f64 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 10 Mar 2021 16:11:49 +0700
Subject: [PATCH] #25 groupping issues by type

---
 src/components/boris/BorisStatsGit/index.tsx | 25 ++++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/boris/BorisStatsGit/index.tsx b/src/components/boris/BorisStatsGit/index.tsx
index b8049034..7ad88808 100644
--- a/src/components/boris/BorisStatsGit/index.tsx
+++ b/src/components/boris/BorisStatsGit/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { IBorisState } from '~/redux/boris/reducer';
 import styles from './styles.module.scss';
 import { Placeholder } from '~/components/placeholders/Placeholder';
@@ -11,6 +11,16 @@ interface IProps {
 const BorisStatsGit: FC<IProps> = ({ stats }) => {
   if (!stats.issues.length) return null;
 
+  const open = useMemo(
+    () => stats.issues.filter(el => !el.pull_request && el.state === 'open').slice(0, 5),
+    [stats.issues]
+  );
+
+  const closed = useMemo(
+    () => stats.issues.filter(el => !el.pull_request && el.state === 'closed').slice(0, 5),
+    [stats.issues]
+  );
+
   if (stats.is_loading) {
     return (
       <>
@@ -35,12 +45,13 @@ const BorisStatsGit: FC<IProps> = ({ stats }) => {
         <img src="https://jenkins.vault48.org/api/badges/muerwre/vault-golang/status.svg" />
       </div>
 
-      {stats.issues
-        .filter(el => !el.pull_request)
-        .slice(0, 10)
-        .map(data => (
-          <BorisStatsGitCard data={data} key={data.id} />
-        ))}
+      {closed.map(data => (
+        <BorisStatsGitCard data={data} key={data.id} />
+      ))}
+
+      {open.map(data => (
+        <BorisStatsGitCard data={data} key={data.id} />
+      ))}
     </div>
   );
 };