Set active Fling from URL match

Instead of a mix between URL matching and manually setting the active fling, set
the active fling from the URL.

This fixes some strange edge cases where current URL and selected fling do not
add up.

web/fling/src/App.jsx

@@ -12,7 +12,8 @@ export default () => {
     return (
         <Switch>
           <Route exact path="/admin/login" component={Login} />
-          <OwnerRoute path="/admin"><Fling /></OwnerRoute>
+          <OwnerRoute exact path="/admin"><Fling /></OwnerRoute>
+          <OwnerRoute path="/admin/:fling"><Fling /></OwnerRoute>
           <Route match="*">Not implemented</Route>
         </Switch>
     );

web/fling/src/components/admin/Fling.jsx

@@ -5,21 +5,19 @@ import Navbar from './Navbar';
 import FlingList from './FlingList';
 import FlingContent from './FlingContent';
 
-import {BrowserRouter} from 'react-router-dom';
+import {useParams, BrowserRouter} from 'react-router-dom';
 
 export default function Fling() {
-    const [activeFling, setActiveFling] = useState(undefined);
+    let { fling } = useParams();
 
     return(
         <div>
           <Navbar />
           <div className="container">
             <div className="columns mt-2">
-              <div className="column col-sm-12 col-lg-3 col-2"> <FlingList setActiveFlingFn={setActiveFling} activeFling={activeFling} /> </div>
+              <div className="column col-sm-12 col-lg-3 col-2"> <FlingList activeFling={fling} /> </div>
               <div className="column col-sm-12">
-                <BrowserRouter>
+                  <FlingContent activeFling={fling} />
-                  <FlingContent activeFling={activeFling} />
-                </BrowserRouter>
               </div>
             </div>
           </div>

web/fling/src/components/admin/FlingContent.jsx

@@ -12,7 +12,6 @@ import Settings from './Settings';
 
 export default function FlingContent(props) {
     let location = useLocation();
-    let { fling } = useParams();
 
     function path(tail) {
         return `/admin/${props.activeFling}/${tail}`;
@@ -20,6 +19,8 @@ export default function FlingContent(props) {
 
     return(
         <div className="fling-content p-2">
+          {log.info("FlingContent location ", location)}
+          {log.info("FlingContent active fling ", props.activeFling)}
           <ul className="tab tab-block mt-0">
             <li className={`tab-item ${location.pathname !== path("upload") && location.pathname !== path("settings") ? "active": ""}`}>
               <Link to={path("files")}>Files</Link>
@@ -34,7 +35,8 @@ export default function FlingContent(props) {
 
           <div className="mt-2">
             <Switch>
-              <Route exact path={["/admin/:fling/files","/admin"]}><FlingArtifacts activeFling={props.activeFling} /></Route>
+              <Route exact path="/admin/:fling"><FlingArtifacts activeFling={props.activeFling} /></Route>
+              <Route path="/admin/:fling/files"><FlingArtifacts activeFling={props.activeFling} /></Route>
               <Route path="/admin/:fling/upload"><Upload activeFling={props.activeFling} /></Route>
               <Route path="/admin/:fling/settings"><Settings activeFling={props.activeFling} /></Route>
             </Switch>

web/fling/src/components/admin/FlingList.jsx

@@ -7,10 +7,11 @@ import FlingTile from './FlingTile';
 
 export default function FlingList(props) {
     const [flings, setFlings] = useState([]);
-    useEffect(() => { refreshFlingList(); }, [props.activeFling]);
+    useEffect(() => { refreshFlingList(); }, []);
 
     return(
         <div className="panel">
+          {log.info(`Got active fling: ${props.activeFling}`)}
           <div className="panel-header p-2">
             <h5>My Flings</h5>
           </div>
@@ -27,8 +28,6 @@ export default function FlingList(props) {
         for (let fling of flings) {
             let flingTile = <FlingTile fling={fling}
                                        key={fling.id}
-                                       activeFling={props.activeFling}
-                                       setActiveFlingFn={props.setActiveFlingFn}
                                        refreshFlingListFn={refreshFlingList} />;
             newFlings.push(flingTile);
         }

web/fling/src/components/admin/FlingTile.jsx

@@ -1,6 +1,7 @@
 import log from 'loglevel';
 import React, {useRef, useState} from 'react';
 import classNames from 'classnames';
+import {Switch, Route, Redirect, BrowserRouter, useLocation, useParams, NavLink} from "react-router-dom";
 
 import {flingClient} from '../../util/flingclient';
 
@@ -70,17 +71,14 @@ export default function FlingTile(props) {
     return (
         <div>
           <div className={tileClasses}>
-            <div className="tile-content" onClick={() => activateTile(props.fling.id)}>
+            <div className="tile-content">
+              <NavLink to={`/admin/${props.fling.id}`}>
                 <div className="tile-title">{props.fling.name}</div>
                 <small className="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</small>
+              </NavLink>
             </div>
             <TileAction fling={props.fling} refreshFlingListFn={props.refreshFlingListFn} />
           </div>
         </div>
     );
-
-    function activateTile() {
-        log.debug(`Activating fling ${props.fling.id}`);
-        props.setActiveFlingFn(props.fling.id);
-    }
 }

web/fling/src/components/admin/Navbar.jsx

@@ -9,7 +9,7 @@ export default function Navbar() {
     return (
         <header className="navbar">
           <section className="navbar-section">
-            <a href="/" className="navbar-brand">
+            <a href="/admin" className="navbar-brand">
               <img src={send} alt="Fling logo"/>
               Fling
             </a>