Add clean up and view stream page

components/Stream.js

@@ -0,0 +1,26 @@
+import { Row, Col, Card } from 'react-bootstrap'
+import React, { Fragment } from 'react'
+
+const Stream = ({ stream }) => {
+  return (
+    <Fragment>
+      <Row>
+        <Col lg={12}>
+          <Card>
+            <div>{stream[id].name}</div>
+          </Card>
+          {!!stream.blocks &&
+            Object.keys(stream.blocks).map((id, _) => {
+              return (
+                <Card key={id}>
+                  <div>block {id}</div>
+                </Card>
+              )
+            })}
+        </Col>
+      </Row>
+    </Fragment>
+  )
+}
+
+export default Stream

components/StreamForm.js

@@ -1,8 +1,6 @@
 import React from 'react'
 import { Col, Row, Button } from 'react-bootstrap'
 import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { changedStreamInput } from '../store/actions'
 import '../styles/index.scss'
 import { Input } from '../components/'
 
@@ -107,15 +105,4 @@ StreamForm.defaultProps = {
   buttonText: 'Submit',
 }
 
-const mapStateToProps = ({ peers, profile, forms }) => ({
-  peers,
-  profile,
-  forms,
-})
-
-export default connect(
-  mapStateToProps,
-  {
-    changedStreamInput,
-  }
-)(StreamForm)
+export default StreamForm

components/input.js

@@ -1,22 +1,20 @@
 import React from 'react'
-import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'
+import { FormControl, FormLabel } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { changedInput } from '../store/actions'
 
 const Input = ({ onChange, type, name, controlLabel, value, checked }) => {
   return (
     <div>
-      <FormGroup controlId="formBasicText">
-        <FormLabel>{controlLabel}</FormLabel>
-        <FormControl
-          type={type || 'Text'}
-          value={value}
-          name={name}
-          onChange={onChange}
-          checked={checked}
-        />
-      </FormGroup>
+      <FormLabel>{controlLabel}</FormLabel>
+      <FormControl
+        type={type || 'Text'}
+        value={value}
+        name={name}
+        onChange={onChange}
+        checked={checked}
+      />
     </div>
   )
 }

components/streamList.js

@@ -1,5 +1,6 @@
 import { Row, Col, Card } from 'react-bootstrap'
 import React, { Fragment } from 'react'
+import Link from 'next/link'
 
 const StreamList = ({ streams }) => {
   return (
@@ -9,9 +10,11 @@ const StreamList = ({ streams }) => {
           {!!streams &&
             Object.keys(streams).map((id, index) => {
               return (
-                <Card key={id}>
-                  <div>{streams[id].name}</div>
-                </Card>
+                <Link href={'/streams/' + id} key={id}>
+                  <Card>
+                    <div>{streams[id].name}</div>
+                  </Card>
+                </Link>
               )
             })}
         </Col>

lib/streamService.js

@@ -2,5 +2,12 @@ import { textile } from '../textile'
 
 export const streamService = {
   create: async stream =>
-    textile.threads.add(stream.name, null, null, stream.type, stream.sharing),
+    textile.threads.add(
+      stream.name,
+      'QmPjLKunL9LDECrxyrz3x9JyzcwQvychYxn7hc7Mf69KVd',
+      null,
+      stream.type,
+      stream.sharing
+    ),
+  get: async id => textile.threads.get(id),
 }

pages/streams/view.js

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react'
+import Link from 'next/link'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import {
+  changedStreamInput,
+  requestedStream,
+  requestedStreamSuccess,
+  requestedStreamError,
+} from '../../store/actions'
+import { streamService } from '../../lib/streamService.js'
+
+const View = ({
+  requestedStream,
+  requestedStreamSuccess,
+  requestedStreamError,
+  id,
+  streams,
+}) => {
+  useEffect(() => {
+    const getStreams = async () => {
+      requestedStream()
+      try {
+        const stream = await streamService.get(id)
+        requestedStreamSuccess(stream)
+      } catch (error) {
+        requestedStreamError(error)
+      }
+    }
+    getStreams()
+  }, [id, requestedStream, requestedStreamError, requestedStreamSuccess])
+  return (
+    <div>
+      <Link href="/">home</Link>
+      stream {streams.items[id] ? streams.items[id].name : '...'}
+    </div>
+  )
+}
+
+View.getInitialProps = ({ query: { id } }) => {
+  return { id: id }
+}
+
+View.propTypes = {
+  requestedStream: PropTypes.func.isRequired,
+  requestedStreamSuccess: PropTypes.func.isRequired,
+  requestedStreamError: PropTypes.func.isRequired,
+}
+
+View.defaultProps = {
+  profile: {},
+}
+
+const mapStateToProps = ({ peers, forms, streams }) => ({
+  peers,
+  forms,
+  streams,
+})
+
+export default connect(
+  mapStateToProps,
+  {
+    changedStreamInput,
+    requestedStream,
+    requestedStreamSuccess,
+    requestedStreamError,
+  }
+)(View)

server.js

@@ -13,6 +13,10 @@ app.prepare().then(() => {
     return app.render(req, res, '/a', req.query)
   })
 
+  server.get('/streams/:id', (req, res) => {
+    return app.render(req, res, '/streams/view', { id: req.params.id })
+  })
+
   server.get('*', (req, res) => {
     return handle(req, res)
   })

store/actionTypes.js

@@ -6,6 +6,10 @@ export const REQUESTED_NEW_STREAM = 'REQUESTED_NEW_STREAM'
 export const REQUESTED_NEW_STREAM_SUCCESS = 'REQUESTED_NEW_STREAM_SUCCESS'
 export const REQUESTED_NEW_STREAM_ERROR = 'REQUESTED_NEW_STREAM_ERROR'
 
+export const REQUESTED_STREAM = 'REQUESTED_STREAM'
+export const REQUESTED_STREAM_SUCCESS = 'REQUESTED_STREAM_SUCCESS'
+export const REQUESTED_STREAM_ERROR = 'REQUESTED_STREAM_ERROR'
+
 export const REQUESTED_STREAMS = 'REQUESTED_STREAMS'
 export const REQUESTED_STREAMS_SUCCESS = 'REQUESTED_STREAMS_SUCCESS'
 export const REQUESTED_STREAMS_ERROR = 'REQUESTED_STREAMS_ERROR'

store/actions.js

@@ -2,6 +2,9 @@ import {
   REQUESTED_PROFILE,
   REQUESTED_PROFILE_SUCCESS,
   REQUESTED_PROFILE_ERROR,
+  REQUESTED_STREAM,
+  REQUESTED_STREAM_SUCCESS,
+  REQUESTED_STREAM_ERROR,
   REQUESTED_STREAMS,
   REQUESTED_STREAMS_SUCCESS,
   REQUESTED_STREAMS_ERROR,
@@ -43,6 +46,20 @@ export const requestedNewStreamError = (address, error) => ({
   error,
 })
 
+export const requestedStream = () => ({
+  type: REQUESTED_STREAM,
+})
+
+export const requestedStreamSuccess = stream => ({
+  type: REQUESTED_STREAM_SUCCESS,
+  payload: { stream },
+})
+
+export const requestedStreamError = error => ({
+  type: REQUESTED_STREAM_ERROR,
+  error,
+})
+
 export const requestedStreams = () => ({
   type: REQUESTED_STREAMS,
 })

store/reducer.js

@@ -7,6 +7,9 @@ import initialState, {
   requestedNewStream,
   requestedNewStreamSuccess,
   requestedNewStreamError,
+  requestedStream,
+  requestedStreamSuccess,
+  requestedStreamError,
   requestedStreams,
   requestedStreamsSuccess,
   requestedStreamsError,
@@ -17,6 +20,9 @@ import {
   REQUESTED_PROFILE,
   REQUESTED_PROFILE_SUCCESS,
   REQUESTED_PROFILE_ERROR,
+  REQUESTED_STREAM,
+  REQUESTED_STREAM_SUCCESS,
+  REQUESTED_STREAM_ERROR,
   REQUESTED_NEW_STREAM,
   REQUESTED_NEW_STREAM_SUCCESS,
   REQUESTED_NEW_STREAM_ERROR,
@@ -55,6 +61,15 @@ export const reducer = (state = initialState, action) => {
         action.error
       )
     }
+    case REQUESTED_STREAM: {
+      return requestedStream(_.cloneDeep(state))
+    }
+    case REQUESTED_STREAM_SUCCESS: {
+      return requestedStreamSuccess(_.cloneDeep(state), action.payload.stream)
+    }
+    case REQUESTED_STREAM_ERROR: {
+      return requestedStreamError(_.cloneDeep(state), action.error)
+    }
     case REQUESTED_STREAMS: {
       return requestedStreams(_.cloneDeep(state))
     }