feat(ReadmeHistory): create component that shows versioned Readmes

As our first step, let's just have a component that talks right to the `/render/` endpoint and injects the resulting html into the page.

Later, we can add in viewing the raw underlying file. We will need to go through this process when we add transform scripts into the Desktop, but we can punt on this until then.

app/components/DatasetComponent.tsx

@@ -7,6 +7,7 @@ import BodyContainer from '../containers/BodyContainer'
 import StructureContainer from '../containers/StructureContainer'
 import ParseError from './ParseError'
 import ReadmeContainer from '../containers/ReadmeContainer'
+import ReadmeHistoryContainer from '../containers/ReadmeHistoryContainer'
 import { CSSTransition } from 'react-transition-group'
 import SpinnerWithIcon from './chrome/SpinnerWithIcon'
 
@@ -65,7 +66,9 @@ const DatasetComponent: React.FunctionComponent<DatasetComponentProps> = (props:
  appear={true}
  >
  <div className='transition-wrap'>
- <ReadmeContainer />
+ {history
+ ? <ReadmeHistoryContainer />
+ : <ReadmeContainer />}
  </div>
  </CSSTransition>
  <CSSTransition

app/components/ReadmeHistory.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+interface ReadmeHistoryProps {
+ peername: string
+ name: string
+ path: string
+}
+
+const ReadmeHistory: React.FunctionComponent<ReadmeHistoryProps> = (props) => {
+ const { peername, name, path } = props
+ const divElem = React.useRef<HTMLDivElement>(null)
+ React.useEffect(() => {
+ fetch(`http://localhost:2503/render/${peername}/${name}/at/${path}`)
+ .then(async (res) => res.text())
+ .then((render) => {
+ if (divElem && divElem.current) {
+ divElem.current.innerHTML = render
+ }
+ })
+ }, [peername, name, path])
+ return (
+ <div
+ // use "editor-preview" class to piggie-back off the simplemde styling
+ className="editor-preview"
+ ref={divElem}
+ >loading...
+ </div>
+ )
+}
+
+export default ReadmeHistory

app/containers/ReadmeContainer.tsx

@@ -20,7 +20,7 @@ const mapStateToProps = (state: Store) => {
  }
 }
 
-const mergeProps = (props: any, actions: any): ReadmeProps => {
+const mergeProps = (props: any, actions: any): ReadmeProps => { //eslint-disable-line
  return { ...props, ...actions }
 }
 

app/containers/ReadmeHistoryContainer.tsx

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux'
+import ReadmeHistory from '../components/ReadmeHistory'
+import Store from '../models/store'
+
+const mapStateToProps = (state: Store) => {
+ const { selections } = state
+
+ const { peername, name, commit } = selections
+
+ // get data for the currently selected component
+ return {
+ peername,
+ path: commit,
+ name
+ }
+}
+
+export default connect(mapStateToProps)(ReadmeHistory)

app/reducers/commitDetail.ts

@@ -15,9 +15,6 @@ const initialState: CommitDetails = {
  status: {},
  isLoading: true,
  components: {
- readme: {
- value: ''
- },
  body: {
  value: [],
  pageInfo: initialPageInfo
@@ -54,9 +51,6 @@ const commitDetailsReducer: Reducer = (state = initialState, action: AnyAction):
  published,
  isLoading: false,
  components: {
- readme: {
- value: dataset && dataset.readme ? atob(dataset.readme.scriptBytes) : ''
- },
  body: initialState.components.body,
  meta: {
  value: dataset.meta