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.
This commit is contained in:
Armin Friedl 2020-05-17 20:13:37 +02:00
parent 857535bb93
commit b8471deecc
6 changed files with 20 additions and 22 deletions

View file

@ -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>
);

View file

@ -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={activeFling} />
</BrowserRouter>
<FlingContent activeFling={fling} />
</div>
</div>
</div>

View file

@ -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,9 +35,10 @@ 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>
<Route path="/admin/:fling/settings"><Settings activeFling={props.activeFling} /></Route>
</Switch>
</div>
</div>

View file

@ -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);
}

View file

@ -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);
}
}

View file

@ -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>