Implement URL based ticket loading

[campb303]

webqueue2 currently have no way to go straight to an item from a URL. This must be done by loading the page, finding the item and selecting it. This has several drawbacks:

• The very common workflow of referring to an item becomes very tedious
• Items cannot be linked to
• Items cannot be referenced by ecnslackbot

Using react-router all of this functionality can be achieved allowing for getting an item by something like:

webqueue2.com/me/22 --> the ME 22 ItemView

[celfreic]

Found that react-router may result in semi-major application architecture changes needing to be made. Route path="/sample/:var" will allow for a route parameter named var to referenced in the component or JSX render block. See react router documentation for more details.

Since the rendering of blocks of JSX is dependent upon routes, it may make sense to move forward with the selection of queue table items to redirect the app to an appropriate route. That route would then trigger any necessary API calls or backpropagation of information to the app. The resulting architecture change would mean that many of the current component props may need to change. <ItemTable setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/> would no longer need to hold reference to a state for setting the active item. Side bar opening can also be simplified or removed altogether. Instead the active item and current queue would both need to become app-level references that passed into the route block that will control ItemView. Thus the architecture for rendering becomes more so dependent on the route parameters than changing functionality itself, and its modifications are made to the route parameters.

For a simple start that utilizes a global list of items see this video.

[celfreic]

Documenting the various React-Routers:

• BrowserRouter: Standard router that keeps UI in sync with URL via / navigation
  localhost:3000 => localhost:3000/first

import {BrowserRouter as Router, Route} from "react-router-dom";

<Router>
     <Route path="/" render={() => (
          <p>Root content</p>
     )}/>
    <Route path="/first" render={() => (
          <p>First item (Root should be above me, url should be /first)</p>
     )}/>
</Router>

• HashRouter: Same as Browser Router but has configured to use # navigation to support legacy browsers
  localhost:3000/# => localhost:3000/#/first

import {HashRouter as Router, Route} from "react-router-dom";

<Router>
     <Route path="/" render={() => (
          <p>Root content</p>
     )}/>
    <Route path="/first" render={() => (
          <p>First item (Root should be above me, url should be #/first)</p>
     )}/>
</Router>

• MemoryRouter: Router that persists the URL in memory so that navigation can be done without changing the address in the address bar. Useful for testing.
  localhost:3000 => localhost:3000

import {MemoryRouter as Router, Route, Link} from "react-router-dom";

<Router>
     <Route path="/" render={() => (
          <p>Root content</p>
     )}/>
    <Link to="/first">First</Link>
    <Route path="/first" render={() => (
          <p>First item (Root should be above me, url should be unchanged)</p>
     )}/>
</Router>

• StaticRouter: Router that never changes location. Most useful in server-side rendering scenarios where the user is not clicking. Sample not provided because server side rendering via http is outside the scope of this project currently.

[celfreic]

Moving forward architecture changes should ensure that the content within the box surrounding Items is the only area affected by the Router so that it will still mount the surrounding box initially. Also Ensure that any changes made to the URL via clicking rows in the item table are made to the browser history and are compatible with the back button.

[campb303]

Resolved here