Merge branch 'beta'

Author: l0drex

package-lock.json

@@ -32,6 +32,7 @@
     "gedcomx-js": "^2.8.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4",

package.json

@@ -9,6 +9,7 @@ import Uploader from "./components/Uploader";
 import View from "./components/View";
 import {graphModel, loadData} from "./backend/ModelGraph";
 import {ReactNode} from "react";
+import {BrowserRouter, Route, Routes} from "react-router-dom";
 
 interface State {
   notifications: ReactNode[]
@@ -31,35 +32,29 @@ class App extends React.Component<any, State> {
   }
 
   render() {
-    if (!this.state.dataAvailable) {
-      // show upload form
-      return (
-        <>
-          <Header/>
-          <main>
-            {this.state.notifications}
-            <Uploader onFileSelected={this.onFileSelected.bind(this)}/>
-            <NavigationTutorial/>
-          </main>
-        </>
-      );
-    }
-
-    return (
-      <>
-        <Header/>
+    return <BrowserRouter basename={"family-tree"}>
+      <Header/>
         {this.state.notifications}
-        <View/>
-      </>
-    );
+        <Routes>
+          <Route path="/" element={
+            <main>
+              <Uploader onFileSelected={this.onFileSelected.bind(this)}/>
+              <NavigationTutorial/>
+            </main>
+          }/>
+          <Route path="/view" element={<View/>}/>
+        </Routes>
+    </BrowserRouter>
   }
 
   onFileSelected(fileContent) {
     sessionStorage.setItem("familyData", fileContent);
     loadData(JSON.parse(fileContent));
-    this.setState({
-      dataAvailable: true
-    });
+    if (window.location.href.endsWith("/")) {
+      window.location.href += "view";
+    } else {
+      window.location.href += "/view";
+    }
   }
 
   componentDidMount() {

src/App.tsx

@@ -58,7 +58,7 @@ class ModelGraph extends GedcomX.Root {
     }
 
     let startPerson: GedcomX.Person;
-    if (startId !== null) {
+    if (startId !== null && startId.length > 0) {
       startPerson = this.getPersonById(startId);
     } else {
       startPerson = this.persons[0];

src/backend/ModelGraph.ts

@@ -1,15 +1,16 @@
 import './Header.css';
+import {Link} from 'react-router-dom';
 import {translationToString} from "../main";
 
 function Header() {
   return (
     <header>
-      <a href="/" onClick={removeData}>
+      <Link to="/" onClick={removeData}>
         <img src={process.env.PUBLIC_URL + "/logo.svg"} width="40" height="100%" alt={translationToString({
           en: "A smiling tree.",
           de: "Ein lächelnder Baum."
         }) + " 🌳"}/>
-      </a>
+      </Link>
       <span id="title">{translationToString({
         en: "Family tree",
         de: "Stammbaum"

src/components/Header.tsx

@@ -3,6 +3,7 @@ import {Component} from "react";
 import SearchField from "./SearchField";
 import {Person} from "gedcomx-js";
 import {PersonFactTypes} from "../backend/gedcomx-enums";
+import {Link} from "react-router-dom";
 
 interface Props {
   onRefocus: (newFocus: Person) => void,
@@ -14,9 +15,9 @@ class InfoPanel extends Component<Props, null> {
     let person = this.props.person;
     return (
       <aside id="info-panel">
-        <a href={"?id=" + person.getId()}>
+        <Link to={`#${person.getId()}`}>
           <pre className="id">{person.getId()}</pre>
-        </a>
+        </Link>
         <SearchField onRefocus={this.props.onRefocus} person={person}/>
         {person.getMarriedName() && <h2 className="birth-name">{person.getBirthName()}</h2>}
         {person.getAlsoKnownAs() && <h2 className="alsoKnownAs">{person.getAlsoKnownAs()}</h2>}

src/components/InfoPanel.tsx

@@ -76,12 +76,12 @@ class View extends Component<any, State> {
     let view: string = url.searchParams.get("view-all") || ViewMode.DEFAULT;
     console.debug(`View: ${view}`);
 
-    let focusId = url.searchParams.get("id");
+    let focusId = url.hash.substring(1);
     let viewGraph = graphModel.buildViewGraph(focusId, ViewMode[view]);
     console.assert(viewGraph.nodes.length > 0,
-      "Viewgraph has no nodes!");
+      "View graph has no nodes!");
     console.assert(viewGraph.links.length > 0,
-      "Viewgraph has no links!");
+      "View graph has no links!");
     this.state = {
       activeView: view,
       viewGraph: viewGraph,