feat: add IPFS Stats view

packages/concordia-app/package.json

@@ -38,6 +38,7 @@
     "prop-types": "~15.7.2",
     "react": "~16.13.1",
     "react-avatar": "~3.9.7",
+    "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "~16.13.1",
     "react-i18next": "^11.7.3",
     "react-markdown": "^5.0.3",

packages/concordia-app/src/components/TopicList/TopicListRow/styles.css

@@ -26,7 +26,7 @@
 
 .topic-row-avatar {
     margin: auto;
-    padding-left: 1rem !important;
+    padding-left: 1.4rem !important;
     padding-right: 0 !important;
     font-size: 2rem;
     color: red;
@@ -37,7 +37,7 @@
 }
 
 .topic-row-content {
-    padding-left: 2rem !important;
+    padding-left: 3rem !important;
 }
 
 .topic-row-subject {

packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/index.jsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import {
+  Header, Image, List, Segment, Table, Transition,
+} from 'semantic-ui-react';
+
+import ipfsLogo from '../../../assets/images/ipfs_logo.svg';
+import './styles.css';
+
+const MainLayoutIPFSStats = () => {
+  const ipfsId = useSelector((state) => state.ipfs.id);
+  const peerIds = useSelector((state) => state.ipfs.peers);
+  const peers = useMemo(() => peerIds
+    .map((peerId) => (
+        <List.Item
+          key={peerId}
+          className="stat-value"
+        >
+            <CopyToClipboard text={peerId}>
+                <span>{peerId}</span>
+            </CopyToClipboard>
+        </List.Item>
+
+    )), [peerIds]);
+
+  return (
+      <Segment>
+          <Header textAlign="center">
+              <Image src={ipfsLogo} size="tiny" />
+              IPFS Stats
+          </Header>
+          <Table definition>
+              <Table.Body>
+                  <Table.Row>
+                      <Table.Cell className="stat-key" textAlign="center">ID</Table.Cell>
+                      <Table.Cell
+                        className="stat-value"
+                      >
+                          <CopyToClipboard text={ipfsId}>
+                              <span>{ipfsId}</span>
+                          </CopyToClipboard>
+                      </Table.Cell>
+                  </Table.Row>
+                  <Table.Row>
+                      <Table.Cell className="stat-key" textAlign="center">Peers</Table.Cell>
+                      <Table.Cell>
+                          <Transition.Group
+                            as={List}
+                            duration={1000}
+                          >
+                              {peers}
+                          </Transition.Group>
+                      </Table.Cell>
+                  </Table.Row>
+              </Table.Body>
+          </Table>
+      </Segment>
+  );
+};
+
+export default MainLayoutIPFSStats;

packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/styles.css

@@ -0,0 +1,12 @@
+.stat-key {
+    width: 13%
+}
+
+.stat-value {
+    font-size: 0.9rem;
+    cursor: pointer;
+}
+
+.stat-value:hover {
+    color: grey;
+}

packages/concordia-app/src/layouts/MainLayout/index.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Grid } from 'semantic-ui-react';
 import MainLayoutMenu from './MainLayoutMenu';
+import MainLayoutIPFSStats from './MainLayoutIPFSStats';
 import './styles.css';
 
 const MainLayout = (props) => {
@@ -9,7 +11,16 @@ const MainLayout = (props) => {
   return (
       <div id="main-layout">
           <MainLayoutMenu />
+          <Grid id="main-layout-grid">
+              <Grid.Column width={4} />
+              <Grid.Column width={8}>
                   {children}
+              </Grid.Column>
+              <Grid.Column width={4}>
+                  <MainLayoutIPFSStats />
+              </Grid.Column>
+          </Grid>
+
       </div>
   );
 };

packages/concordia-app/src/layouts/MainLayout/styles.css

@@ -4,3 +4,8 @@
     background-color: #E6E6E6;
     padding-bottom: 4rem;
 }
+
+#main-layout-grid{
+    margin-right: 0;
+    margin-left: 0;
+}

packages/concordia-app/src/views/About/index.jsx

@@ -2,7 +2,7 @@ import React, {
   memo, useEffect, useState,
 } from 'react';
 import ReactMarkdown from 'react-markdown';
-import { Container, Image } from 'semantic-ui-react';
+import { Container, Image, Segment } from 'semantic-ui-react';
 import AboutMd from '../../assets/About.md';
 import appLogo from '../../assets/images/app_logo_circle.svg';
 
@@ -26,9 +26,10 @@ const About = () => {
   }, []);
 
   return (
-      <Container id="about-container">
+      <Container>
+          <Segment id="about-segment">
               <div style={{ textAlign: 'center' }}>
-              <Image id="app-logo" src={appLogo} size="small" centered />
+                  <Image id="about-app-logo" src={appLogo} size="small" centered />
                   {`v${process.env.REACT_APP_VERSION}`}
               </div>
               <ReactMarkdown
@@ -38,6 +39,7 @@ const About = () => {
                   linkReference: targetBlank(),
                 }}
               />
+          </Segment>
       </Container>
   );
 };

packages/concordia-app/src/views/About/styles.css

@@ -1,3 +1,7 @@
-#app-logo{
+#about-segment{
+    padding: 3rem;
+}
+
+#about-app-logo{
     margin-bottom: 1rem;
 }

packages/concordia-app/src/views/Home/Board/styles.css

@@ -5,6 +5,7 @@
 
 #new-topic-button{
     float:right;
+    margin-top: 1px;
     margin-bottom: 2em;
     margin-right: 0;
 }

yarn.lock

@@ -4877,6 +4877,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.6.2, core-js-compat@^3.8.0:
   version "3.8.3"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.8.3.tgz#9123fb6b9cad30f0651332dc77deba48ef9b0b3f"
@@ -14844,7 +14851,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.7.2, prop-types@~15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@~15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -15140,6 +15147,14 @@ react-avatar@~3.9.7:
     is-retina "^1.0.3"
     md5 "^2.0.0"
 
+react-copy-to-clipboard@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz#2a0623b1115a1d8c84144e9434d3342b5af41ab4"
+  integrity sha512-9S3j+m+UxDZOM0Qb8mhnT/rMR0NGSrj9A/073yz2DSxPMYhmYFBMYIdI2X4o8AjOjyFsSNxDRnCX6s/gRxpriw==
+  dependencies:
+    copy-to-clipboard "^3"
+    prop-types "^15.5.8"
+
 react-dev-utils@^10.2.1:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"
@@ -17381,6 +17396,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"