From 9a0bcfacb29321e011a7d194da946baf65d4b3b8 Mon Sep 17 00:00:00 2001
From: ramfox <kasey@qri.io>
Date: Tue, 11 Feb 2020 23:28:16 -0500
Subject: [PATCH] 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 | 24 ++++++++++++++----------
 app/models/qriRef.ts               |  9 ++++++++-
 app/routes.tsx                     |  5 +++++
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/app/components/network/LogList.tsx b/app/components/network/LogList.tsx
index 642d7d6c..82ab6c36 100644
--- a/app/components/network/LogList.tsx
+++ b/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,6 +34,12 @@ 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'
@@ -41,6 +47,7 @@ const LogList: React.FC<LogListProps> = ({ qriRef }) => {
     >
       {
         data.map((item, i) => {
+          const selected = qriRef.path ? qriRef.path === item.path : i === 0
           return (
             <HistoryListItem
               data={item}
@@ -48,11 +55,8 @@ const LogList: React.FC<LogListProps> = ({ qriRef }) => {
               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)
diff --git a/app/models/qriRef.ts b/app/models/qriRef.ts
index d4c90d9c..b46d7620 100644
--- a/app/models/qriRef.ts
+++ b/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
+}
diff --git a/app/routes.tsx b/app/routes.tsx
index f53640e8..5560e64b 100644
--- a/app/routes.tsx
+++ b/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} />)