feat(history): add network route with path

- adds Route `/network/:username/:name/at/ipfs/:path`
- add function `refStringFromQriRef` that takes a QriRef and returns a ref string, probably will be used most when we take a dataset and want to push to a new route
- adjusts `qriRefFromRoute` to take a path param that does not have a `/ipfs/` prefix, but returns a path with an `/ipfs/` prefix

app/components/network/LogList.tsx

@@ -1,18 +1,18 @@
 import React from 'react'
-import { Action } from 'redux'
 
-import { QriRef } from '../../models/qriRef'
+import { QriRef, refStringFromQriRef } from '../../models/qriRef'
 import { VersionInfo } from '../../models/store'
 import { FetchOptions } from '../../store/api'
 import { BACKEND_URL } from '../../constants'
 
 import HistoryListItem from '../item/HistoryListItem'
+import { RouteComponentProps, withRouter } from 'react-router-dom'
 
-export interface LogListProps {
+export interface LogListProps extends RouteComponentProps{
  qriRef: QriRef
 }
 
-const LogList: React.FC<LogListProps> = ({ qriRef }) => {
+const LogList: React.FC<LogListProps> = ({ qriRef, history }) => {
  const [data, setData] = React.useState<VersionInfo[]>([])
  const [error, setError] = React.useState('')
 
@@ -34,25 +34,29 @@ const LogList: React.FC<LogListProps> = ({ qriRef }) => {
  fetchLogs()
  }, [qriRef.username, qriRef.name])
 
+ const handleOnClick = (item: VersionInfo) => {
+ return () => {
+ history.push(`/network/${refStringFromQriRef({ location: '', username: item.username, name: item.name, path: item.path })}`)
+ }
+ }
+
  return (
  <div
  id='history_list'
  className='sidebar-content'
  >
  {
  data.map((item, i) => {
+ const selected = qriRef.path ? qriRef.path === item.path : i === 0
  return (
  <HistoryListItem
  data={item}
  key={item.path}
  id={`HEAD-${i + 1}`}
  first={i === 0}
  last={i === data.length - 1}
- selected={false}
- onClick={(s: string): Action => {
- alert(`you clicked a commit: ${s}`)
- return { type: '' }
- }}
+ selected={selected}
+ onClick={handleOnClick(item)}
  />
  )
  })
@@ -61,4 +65,4 @@ const LogList: React.FC<LogListProps> = ({ qriRef }) => {
  )
 }
 
-export default LogList
+export default withRouter(LogList)

app/models/qriRef.ts

@@ -57,7 +57,14 @@ export function qriRefFromRoute (p: RouteComponentProps<QriRef>): QriRef {
 
  username: p.match.params.username,
  name: p.match.params.name,
- path: p.match.params.path,
+ path: p.match.params.path ? '/ipfs/' + p.match.params.path : undefined,
  selector: p.match.params.selector
  }
 }
+
+// refStringFromQriRef takes a qriRef and turns it into a ref string
+export function refStringFromQriRef (qriRef: QriRef): string {
+ let route = `${qriRef.username}/${qriRef.name}`
+ if (qriRef.path) route += `/at${qriRef.path}`
+ return route
+}

app/routes.tsx

@@ -54,6 +54,11 @@ export default function Routes (props: any) {
  }} />
 
  {/* App Sections */}
+ { __BUILD__.ENABLE_NETWORK_SECTION &&
+ <Route path='/network/:username/:name/at/ipfs/:path' render={(props) => {
+ return sectionElement('network', <NetworkContainer {...props} />)
+ }} />
+ }
  { __BUILD__.ENABLE_NETWORK_SECTION &&
  <Route path='/network/:username/:name' render={(props) => {
  return sectionElement('network', <NetworkContainer {...props} />)