centralize and type route definitions

[AlexCLeduc]

blocked until #1029 is merged

I’ve been looking for a way to centralize the routes in react-router apps to emulate django’s reverse()

I found nothing better than this tip, which is working pretty well in a diff project. The idea is that we'd have a central routes.ts file that export a bunch of route objects, each with their own statically typed generate() methods. If anyone wants to create a link to another section of the app, e.g. the tag explorer, they'd have to import the TagExplorerRoute and call TagExplorerRoute.generate().

routes.ts would look something like:

import { generatePath } from 'react-router-dom';

export const LandingRoute = {
  route: "/",
  generate() {
    return generatePath(this.route);
  },
};

export enum TagExplorerHierarchyChoice {
    HowWeHelp="HWH"
    WhoWeHelp="WWH"
    //...
}
export enum TagExplorerDocumentChoice {
    DP="planned"
    DRR="actual"
}
export const TagExplorerRoute = {
    route: "/tag-explorer",
    generate(hierarchy_scheme?:TagExplorerHierarchyChoice, period?:TagExplorerDocumentChoice){
        return generatePath(this.route,{hierarchy_scheme,period})
    }
}

We could potentially make this a little cleaner if we make them classes that inherit the generate method shared by every arg-less route, but I'm not sure if our babel/TS setup supports static variables.

This should also cover all the many options covered by the infographic. Ideally it could also cover the report builder, but we can tackle its crazy options separately if it's difficult.