frontend: WIP modal

src/App.js

@@ -1,21 +1,30 @@
 import React from 'react'
-import { Layout, Loading, Main, Modals } from './components'
+import { Layout, Loading, Main, Modals, Player } from './components'
 import { withRouter } from 'react-router-dom'
 import socket from './socket'
 
 const initialState = {
-  loading: true,
+  loading: false,
   blocks: [],
   timestamp: 0,
   modal: null,
+  validators: [],
   validator: null,
 }
 
 class App extends React.Component {
   initializeSocket() {
     socket.on('connect', () => {
-      if (!socket.id) console.log('no websocket connection')
-      else console.log('my socketId:', socket.id)
+      if (!socket.id) return console.log('no websocket connection')
+      console.log('my socketId:', socket.id)
+      socket.emit('get blocks', 24 * 600)
+    })
+    socket.on('blocks', (newblocks) => {
+      const blocks = this.state.blocks
+        .filter((b) => !newblocks.find((blk) => blk.id === b.id))
+        .concat(newblocks)
+        .sort((a, b) => b.id - a.id)
+      this.setState({ loading: false, blocks }) // TODO
     })
     socket.on('block', (block) => {
       const blocks = this.state.blocks
@@ -26,15 +35,14 @@ class App extends React.Component {
     })
   }
 
-  setShowModal(showModal) {
-    this.setState({ showModal })
+  setShowModal(showModal, vars = {}) {
+    this.setState({ showModal, ...vars })
   }
   showValidator(account) {
-    //const validator = this.state.validators.find((v) => v.account === account)
-    //if (!validator) return
-
-    this.setState({ validator: { account } })
-    this.setShowModal('validator')
+    const { validators } = this.state
+    const v = { account }
+    const validator = validators.find((v) => v.account === account) || v
+    this.setShowModal('validator', { validator })
   }
 
   renderError() {
@@ -43,7 +51,7 @@ class App extends React.Component {
   }
   renderApp() {
     return (
-      <div>
+      <div className="w-100 h-100 d-flex flex-column overflow-hidden bg-dark">
         <Modals
           setShowModal={this.setShowModal}
           showModal={this.state.showModal}
@@ -62,12 +70,13 @@ class App extends React.Component {
     if (this.state.loading) return <Loading />
     if (this.state.error) this.renderError()
     if (this.state.component === 'layout') return <Layout {...this.state} />
+    //return <Player />
     return this.renderApp()
   }
 
   componentDidMount() {
     this.initializeSocket()
-    setInterval(() => this.setState({}), 100)
+    //setInterval(() => this.setState({}), 100)
   }
   componentWillUnmount() {
     console.log('unmounting...')

src/components/Main/index.js

@@ -1,112 +1,41 @@
 import React from 'react'
 import moment from 'moment'
-import { CSSTransition, TransitionGroup } from 'react-transition-group'
+
+import Blocks from './Blocks'
+import Eras from './Eras'
+import Council from './Council'
+import Proposals from './Proposals'
+import Validators from './Validators'
+import Forum from './Forum'
+import Footer from './Footer'
 
 const Main = (props) => {
-  const { blocks, timestamp } = props
-  const timePassed = moment().diff(timestamp) / 1000
+  const { showValidator, blocks, timestamp } = props
 
   return (
-    <div className="w-100 h-100 d-flex flex-column overflow-hidden">
+    <div className="w-100 h-100 d-flex flex-column overflow-hidden bg-dark">
       <div className="h-100 flex-grow-1 d-flex flex-row justify-content-between">
-        <div className="col-4 p-3 text-light" style={{ background: '#000' }}>
-          <div className="float-right mt-3">
-            <b>{timePassed.toFixed(1)} s</b>
-          </div>
-          <h3>recent blocks</h3>
-          <TransitionGroup>
-            {blocks.map(({ id, author, blocktime, timestamp }) => (
-              <CSSTransition
-                in={true}
-                classNames="block"
-                timeout={100}
-                key={id}
-                appear
-              >
-                <div
-                  key={id}
-                  className="block text-center text-dark bg-light m-2 p-2"
-                >
-                  <div className="float-left">
-                    <b>{id}</b>
-                  </div>
-                  <div className="float-right">
-                    {moment(timestamp).format('HH:mm:ss')}
-                  </div>
-                  {(blocktime / 1000).toFixed(3)} s
-                  <div onClick={() => props.showValidator(author)}>
-                    <small>{author}</small>
-                  </div>
-                </div>
-              </CSSTransition>
-            ))}
-          </TransitionGroup>
-        </div>
-        <div className="col-4 text-center">
-          <h3>council</h3>
-          <div className="d-flex flex-row justify-content-between mx-3">
-            <div className="d-flex flex-column">
-              <div>1</div>
-              <div>2</div>
-              <div>3</div>
-              <div>4</div>
-              <div>5</div>
-              <div>6</div>
-            </div>
-            <div className="d-flex flex-column">
-              <div>7</div>
-              <div>8</div>
-              <div>9</div>
-              <div>10</div>
-              <div>11</div>
-              <div>12</div>
-            </div>
-          </div>
-          <h3>Proposals</h3>
-          <div>200</div>
-          <div>199</div>
-          <div>198</div>
-          <div>197</div>
-          <div>196</div>
-          <a href="/">more</a>
+        <div className="h-100 col-4 p-3 text-light overflow-hidden">
+          <Blocks
+            showValidator={showValidator}
+            blocks={blocks}
+            timestamp={timestamp}
+          />
         </div>
-        <div className="col-4 text-center">
-          <h3>forum</h3>
-          <div>post1</div>
-          <div>post2</div>
-          <div>post3</div>
-          <div>post4</div>
-          <div>post5</div>
+        <div className="col-4 d-flex flex-column text-center">
+          <Eras blocks={blocks} />
         </div>
-      </div>
-      <div
-        className="position-fixed w-100 p-3 text-light"
-        style={{ bottom: '0px', height: '140px', background: '#000' }}
-      >
-        <small className="float-right p-2 text-right">
-          734 resources
-          <br />
-          68 categories
-          <br />
-          20 channels
-          <br />
-          1231 hours
-          <br />
-          12389 GB
-        </small>
-        <div className="d-flex flex-row justify-content-between overflow-auto">
-          {[10, `schism1`, 66, `schism2`, 15].map((i) => (
-            <img
-              key={i}
-              src={`https://eu-central-1.linodeobjects.com/joystream/${i}.jpg`}
-              width="200"
-              alt={`${i}`}
-            />
-          ))}
+        <div className="col-4 d-flex flex-column text-center">
+          <Validators showValidator={showValidator} blocks={blocks} />
         </div>
       </div>
+      <Footer />
     </div>
   )
 }
 
 export default Main
+
+//<Council />
+//<Proposals />
+//<Forum />

src/components/Modals/Validator.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Button, Modal } from 'react-bootstrap'
+import { Badge, Button, Modal } from 'react-bootstrap'
+import moment from 'moment'
 
 const Validator = (props) => {
   const { account, handle = '' } = props.validator
@@ -8,6 +9,8 @@ const Validator = (props) => {
   const title = handle === '' ? account : handle
   const blocktime =
     blocks.map((b) => b.blocktime).reduce((a, b) => a + b, 0) / blocks.length
+  const time = blocks[blocks.length - 1].timestamp
+  const firstBlock = moment(time).fromNow()
 
   return (
     <Modal
@@ -22,7 +25,15 @@ const Validator = (props) => {
       </Modal.Header>
       <Modal.Body className="text-center">
         <div className="p-3 font-weight-bold">
-          Average Blocktime: {(blocktime / 1000).toFixed(3)} s
+          <div>
+            Blocks: {blocks.length} (since {firstBlock})
+          </div>
+          <div>Average Blocktime: {(blocktime / 1000).toFixed(3)} s</div>
+          {blocks.map((b) => (
+            <Badge variant={b.blocktime > 7000 ? 'warning' : 'light'}>
+              {b.id}: {b.blocktime}
+            </Badge>
+          ))}
         </div>
       </Modal.Body>
       <Modal.Footer>

src/main.css

@@ -41,13 +41,13 @@ a:active {
   text-decoration: none;
 }
 
-
 :root {
   --timeout: 500ms;
   --list-item-max-height: 30px;
 }
 
-.block-enter, .block-appear {
+.block-enter,
+.block-appear {
   top: var(--menu-starting-top);
   width: var(--toggler-width);
   max-height: var(--toggler-height);
@@ -55,7 +55,8 @@ a:active {
   background-color: var(--toggler-bg-color);
 }
 
-.block-enter-active, .block-appear-active {
+.block-enter-active,
+.block-appear-active {
   top: var(--menu-ending-top);
   width: var(--menu-width);
   max-height: var(--menu-max-height);
@@ -63,3 +64,12 @@ a:active {
   background-color: var(--menu-bg-color);
   transition: all var(--timeout);
 }
+
+.hbox {
+  flex: 0 0 100%;
+  max-height: 40%;
+  min-height: 40%;
+  max-width: 100%;
+  padding: 0.5em;
+  overflow: hidden;
+}