pass-props-to-route-components.diff

diff --git a/externals/metaphysics b/externals/metaphysics
index b5348560..5ee19918 160000
--- a/externals/metaphysics
+++ b/externals/metaphysics
@@ -1 +1 @@
-Subproject commit b53485601fe5f51c244d8945c71786adee46dbb3
+Subproject commit 5ee199189df929de215de913cd4cc812ee5dc990
diff --git a/src/Apps/Artist/ArtistApp.tsx b/src/Apps/Artist/ArtistApp.tsx
index 436282fd..83c669d7 100644
--- a/src/Apps/Artist/ArtistApp.tsx
+++ b/src/Apps/Artist/ArtistApp.tsx
@@ -11,7 +11,14 @@ import { Subscribe } from "unstated"
 import { ArtistHeaderFragmentContainer as ArtistHeader } from "./Components/ArtistHeader"
 import { LoadingArea } from "./Components/LoadingArea"
 
+/**
+ * These need to be provided by the host application.
+ */
 export interface ArtistAppProps {
+  onArtworksFilterStateChange: (filters: {}) => void
+}
+
+export interface InternalArtistAppProps extends ArtistAppProps {
   artist: any // FIXME: ArtistHeader_artist | NavigationTabs_artist
   me: RecentlyViewed_me
   params: {
@@ -19,7 +26,7 @@ export interface ArtistAppProps {
   }
 }
 
-export const ArtistApp: React.SFC<ArtistAppProps> = props => {
+export const ArtistApp: React.SFC<InternalArtistAppProps> = props => {
   const { artist, children, me } = props
 
   return (
diff --git a/src/Apps/Artist/Routes/Overview/Components/ArtworkFilter/index.tsx b/src/Apps/Artist/Routes/Overview/Components/ArtworkFilter/index.tsx
index 36d75959..ceb9c89e 100644
--- a/src/Apps/Artist/Routes/Overview/Components/ArtworkFilter/index.tsx
+++ b/src/Apps/Artist/Routes/Overview/Components/ArtworkFilter/index.tsx
@@ -14,9 +14,13 @@ import { Subscribe } from "unstated"
 import { Responsive } from "Utils/Responsive"
 import { ArtworkFilterRefetchContainer } from "./ArtworkFilterRefetch"
 
+// TODO: Type the `filters` param.
+export type ArtworkFilterChangeHandler = (filters: any) => void
+
 interface Props {
   artist: ArtworkFilter_artist
   filters?: any // FIXME
+  onFilterChange: ArtworkFilterChangeHandler
 }
 
 class Filter extends Component<Props> {
diff --git a/src/Apps/Artist/routes.tsx b/src/Apps/Artist/routes.tsx
index ee2dbc01..4dfd228b 100644
--- a/src/Apps/Artist/routes.tsx
+++ b/src/Apps/Artist/routes.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import { graphql } from "react-relay"
-import { ArtistApp } from "./ArtistApp"
+import { AppProps } from "Router/types"
+import { ArtistApp, ArtistAppProps } from "./ArtistApp"
 import { ArticlesRouteFragmentContainer as ArticlesRoute } from "./Routes/Articles"
 import { AuctionResultsRouteFragmentContainer as AuctionResultsRoute } from "./Routes/AuctionResults"
 import { CVRouteFragmentContainer as CVRoute } from "./Routes/CV"
@@ -11,8 +12,6 @@ import { ShowsRouteFragmentContainer as ShowsRoute } from "./Routes/Shows"
 // @ts-ignore
 import { ComponentClass, StatelessComponent } from "react"
 // @ts-ignore
-import { ArtistAppProps } from "./ArtistApp"
-// @ts-ignore
 import { ArticlesRouteProps } from "./Routes/Articles"
 // @ts-ignore
 import { AuctionResultRouteProps } from "./Routes/AuctionResults"
@@ -28,10 +27,14 @@ import { ShowProps } from "./Routes/Shows"
 //
 // ---------
 
-export const routes = [
+export interface RoutesProps extends ArtistAppProps {}
+
+export const routes: AppProps<RoutesProps> = routesProps => [
   {
     path: "/artist2/:artistID",
     Component: ArtistApp,
+    render: ({ Component, props }) =>
+      props ? { ...routesProps, ...props } : null,
     query: graphql`
       query routes_ArtistTopLevelQuery($artistID: String!) {
         artist(id: $artistID) {
diff --git a/src/Apps/Artwork/routes.tsx b/src/Apps/Artwork/routes.tsx
index 69d378c3..70961e28 100644
--- a/src/Apps/Artwork/routes.tsx
+++ b/src/Apps/Artwork/routes.tsx
@@ -3,8 +3,9 @@ import { ArtworkAppFragmentContainer as ArtworkApp } from "./ArtworkApp"
 
 // @ts-ignore
 import { ComponentClass, StatelessComponent } from "react"
+import { AppProps } from "Router/types"
 
-export const routes = [
+export const routes: AppProps<never> = () => [
   {
     path: "/artwork2/:artworkID",
     Component: ArtworkApp,
diff --git a/src/Apps/__stories__/Apps.story.tsx b/src/Apps/__stories__/Apps.story.tsx
index f16a638a..04da859d 100644
--- a/src/Apps/__stories__/Apps.story.tsx
+++ b/src/Apps/__stories__/Apps.story.tsx
@@ -16,7 +16,9 @@ storiesOf("Apps", module)
   .add("Artist Page", () => {
     return (
       <StorybooksRouter
-        routes={artistRoutes}
+        routes={artistRoutes({
+          onArtworksFilterStateChange: filters => console.log(filters),
+        })}
         initialRoute="/artist2/andy-warhol"
         initialState={{ mediator: { trigger: x => x } }}
       />
diff --git a/src/Router/StorybooksRouter.tsx b/src/Router/StorybooksRouter.tsx
index 0a53acd8..631a3b66 100644
--- a/src/Router/StorybooksRouter.tsx
+++ b/src/Router/StorybooksRouter.tsx
@@ -1,8 +1,9 @@
+import { RouteConfig } from "found"
 import React from "react"
 import { buildClientApp } from "Router"
 
 interface Props {
-  routes: Array<object>
+  routes: RouteConfig
   initialRoute?: string
   initialState?: object
 }
@@ -19,7 +20,7 @@ export class StorybooksRouter extends React.Component<Props> {
   async componentDidMount() {
     try {
       const { ClientApp } = await buildClientApp({
-        routes: this.props.routes,
+        routes: () => this.props.routes,
         historyProtocol: "memory",
         initialRoute: this.props.initialRoute,
       })
diff --git a/src/Router/__test__/buildClientApp.test.tsx b/src/Router/__test__/buildClientApp.test.tsx
index 814d474e..5e27e723 100644
--- a/src/Router/__test__/buildClientApp.test.tsx
+++ b/src/Router/__test__/buildClientApp.test.tsx
@@ -7,7 +7,7 @@ describe("buildClientApp", () => {
     const { ClientApp } = await buildClientApp({
       historyProtocol: "memory",
       initialRoute: initialRoute || "/",
-      routes: [
+      routes: () => [
         {
           path: "/",
           Component: () => <div>Hello Router</div>,
diff --git a/src/Router/__test__/buildServerApp.test.tsx b/src/Router/__test__/buildServerApp.test.tsx
index 440d9ddf..0f6c0526 100644
--- a/src/Router/__test__/buildServerApp.test.tsx
+++ b/src/Router/__test__/buildServerApp.test.tsx
@@ -16,7 +16,7 @@ jest.mock("loadable-components/server", () => ({
 describe("buildServerApp", () => {
   const getWrapper = async (url = "/") => {
     const { ServerApp, status } = await buildServerApp({
-      routes: [
+      routes: () => [
         {
           path: "/",
           Component: () => <div>hi!</div>,
diff --git a/src/Router/types.ts b/src/Router/types.ts
index 0a897048..347eeef5 100644
--- a/src/Router/types.ts
+++ b/src/Router/types.ts
@@ -7,11 +7,13 @@ import { ContextProps } from "../Components/Artsy"
 type ReactComponent = ComponentType<any>
 type HistoryProtocol = "browser" | "hash" | "memory"
 
-export interface AppConfig {
+export type AppProps<P> = (props: P) => RouteConfig
+
+export interface AppConfig<P = {}> {
   historyProtocol?: HistoryProtocol
   initialBreakpoint?: Breakpoint
   initialRoute?: string
-  routes: RouteConfig
+  routes: AppProps<P>
   url?: string
   user?: User
 }