navigate selected users with browser history

+ add a todo
+ fix potential undefined with conditional

README.md

@@ -4,9 +4,10 @@
 
 ## TODO
 
-- add people to history of browser (will allow browsing)
-- make people a variable size based on how many people know them
-- show clearly what are the directions of :knows
-- show also who knows this person
-- login for different pod providers
-- faster (parallel) crawling
+- [x] add people to history of browser (will allow browsing)
+- [ ] make people a variable size based on how many people know them
+- [ ] show clearly what are the directions of :knows
+- [ ] show also who knows this person
+- [ ] login for different pod providers
+- [ ] faster (parallel) crawling
+- [ ] search people

package.json

@@ -17,7 +17,9 @@
     "@types/numeric": "^1.2.2",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-helmet": "^6.1.2",
     "@types/react-modal": "^3.12.1",
+    "@types/react-router-dom": "^5.1.8",
     "@types/styled-components": "^5.1.11",
     "bulma": "^0.9.3",
     "classnames": "^2.3.1",
@@ -31,7 +33,9 @@
     "rdf-namespaces": "^1.9.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
     "react-modal": "^3.14.3",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "source-map-explorer": "^2.5.2",
     "styled-components": "^5.3.0",

src/App.tsx

@@ -1,11 +1,14 @@
 import React from 'react'
 import Layout from './components/Layout'
 import DataContainer from './components/DataContainer'
+import { BrowserRouter as Router } from 'react-router-dom'
 
 const App: React.FC = () => (
-  <DataContainer>
-    <Layout />
-  </DataContainer>
+  <Router>
+    <DataContainer>
+      <Layout />
+    </DataContainer>
+  </Router>
 )
 
 export default App

src/components/VisualizationContainer.tsx

@@ -6,8 +6,10 @@ import { Vector } from '../helpers/draw'
 import { Grid } from '../helpers/draw'
 import numeric from 'numeric'
 import PersonCard from './PersonCard'
-// import useSimulation from '../hooks/simulation'
+import { withRouter, RouteComponentProps } from 'react-router-dom'
 import { PeopleContext, Person } from './DataContainer'
+import { IriString } from '@inrupt/solid-client'
+import { Helmet } from 'react-helmet'
 
 type PeopleGraph = {
   [uri: string]: Person
@@ -91,15 +93,15 @@ const transformLayout = (
     }),
   )
 
-  if (highlighted) {
+  if (highlighted && transformedNodesDict[highlighted]) {
     transformedNodesDict[highlighted].style = 'accent'
   }
 
-  selectedDependencies.forEach(
-    uri => (transformedNodesDict[uri].style = 'accent'),
-  )
+  selectedDependencies.forEach(uri => {
+    if (transformedNodesDict[uri]) transformedNodesDict[uri].style = 'accent'
+  })
 
-  if (selected) {
+  if (selected && transformedNodesDict[selected]) {
     transformedNodesDict[selected].style = 'focus'
   }
 
@@ -129,10 +131,14 @@ const selectNodeDependencies = (
   graph: PeopleGraph,
 ): string[] => {
   if (!selectedNodeUri) return []
-  return Array.from(graph?.[selectedNodeUri].knows ?? new Set())
+  return Array.from(graph?.[selectedNodeUri]?.knows ?? new Set())
 }
 
-const VisualizationContainer: React.FC = props => {
+const VisualizationContainer: React.FC<RouteComponentProps> = ({
+  location,
+  history,
+  ...props
+}: RouteComponentProps) => {
   const [simulation] = useState(new Simulation())
 
   const [layout, setLayout] = useState<SimulationGraph>({
@@ -141,7 +147,6 @@ const VisualizationContainer: React.FC = props => {
   })
 
   const [highlightedNode, setHighlightedNode] = useState<string | undefined>()
-  const [selectedNode, setSelectedNode] = useState<string | undefined>()
 
   const people = useContext(PeopleContext)
 
@@ -207,7 +212,13 @@ const VisualizationContainer: React.FC = props => {
   }
 
   const handleHover = withNode(setHighlightedNode)
-  const handleSelect = withNode(setSelectedNode)
+  const selectNode = (node: IriString) => {
+    const uri = node ? `/${encodeURIComponent(node)}` : '/'
+    if (uri !== history.location.pathname) history.push(uri)
+  }
+  const handleSelect = withNode(selectNode)
+
+  const selectedNode = decodeURIComponent(location.pathname.slice(1))
 
   const selectedNodeDependencies = selectNodeDependencies(selectedNode, people)
   // transform layout to TransformedLayout
@@ -242,15 +253,18 @@ const VisualizationContainer: React.FC = props => {
         {...props}
       />
 
+      <Helmet>
+        <title>
+          {selectedNode && `${people[selectedNode]?.name || selectedNode} - `}
+          Friend Crawler
+        </title>
+      </Helmet>
+
       {person && knows && (
-        <PersonCard
-          person={person}
-          knows={knows}
-          onSelectPerson={uri => setSelectedNode(uri)}
-        />
+        <PersonCard person={person} knows={knows} onSelectPerson={selectNode} />
       )}
     </>
   )
 }
 
-export default VisualizationContainer
+export default withRouter(VisualizationContainer)