How do I make a responsive master-detail layout with react-router v4 as described in 'philosophy' - react-router-v4

Question

I am trying to make a responsive Master/Detail layout using react-router v4 as described here. The code it suggests is
const App = () => (
<AppLayout>
<Route path="/invoices" component={Invoices}/>
</AppLayout>
)
const Invoices = () => (
<Layout>
{/* always show the nav */}
<InvoicesNav/>
<Media query={PRETTY_SMALL}>
{screenIsSmall => screenIsSmall
// small screen has no redirect
? <Switch>
<Route exact path="/invoices/dashboard" component={Dashboard}/>
<Route path="/invoices/:id" component={Invoice}/>
</Switch>
// large screen does!
: <Switch>
<Route exact path="/invoices/dashboard" component={Dashboard}/>
<Route path="/invoices/:id" component={Invoice}/>
<Redirect from="/invoices" to="/invoices/dashboard"/>
</Switch>
}
</Media>
</Layout>
)
However I am unable to get something working based on this. There are a few things that I am not sure about:
1) What is this AppLayout component?
2) Which Layout component is it referring to and is this important?
3) I am assuming the Media tag refers to react-media?
4) Media query={PRETTY_SMALL} means something along the lines of Media query={{ maxWidth: 599 }}
5) There is no Router component anywhere, which I though was needed
6) There are no Link objects anywhere
The best I have come up with so far (on a project started with create-react-app) is
import Media from "react-media";
import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
const data = [
{
id: 1,
to: 'Mr. Smith',
amount: 10
},
{
id: 2,
to: 'Mrs. Jones',
amount: 100
}
]
const InvoicesNav = () => (
<div>
Nav Bar
</div>
)
const Dashboard = () => (
<div>
Dashboard
</div>
)
const Invoice = () => (
<div>
Invoice
</div>
)
const App = () => (
// <AppLayout>
<Route path="/invoices" component={Invoices} />
// </AppLayout>
)
const Invoices = () => (
// <Layout>
<div>
{/* always show the nav */}
<InvoicesNav />
<Media query={{ maxWidth: 599 }}>
{screenIsSmall => screenIsSmall
// small screen has no redirect
? <Switch>
<Route exact path="/invoices/dashboard" component={Dashboard} />
<Route path="/invoices/:id" component={Invoice} />
</Switch>
// large screen does!
: <Switch>
<Route exact path="/invoices/dashboard" component={Dashboard} />
<Route path="/invoices/:id" component={Invoice} />
<Redirect from="/invoices" to="/invoices/dashboard" />
</Switch>
}
</Media>
{/* </Layout> */}
</div>
)
export default App;
But this still doesn't really do anything that resembles a responsive Master/Detail layout and neither does anything in the samples for react-router as far as I can see. :(

Answer 1

That layout is just an idea of your app structure. They don't give much details about it hence you are free to use any content you want for unknown tags, vars, etc.
I couldn't exactly reproduce it because IMO <InvoicesNav /> shouldn't be always displayed because in the mobile view there is no place for it when you view Dashboard or an exact invoice. I assumed that <InvoicesNav /> is the left sidebar of invoices with their IDs.
I hope that you can find answers to your questions in this basic implementation of that philosophy github.com/vogdb/react-router-mediaquery-example. Also there is another very detailed example https://github.com/AWebOfBrown/React-MQL-Manager.
import Media from "react-media";
import React, {Component} from 'react';
import {Route, Switch, Link} from 'react-router-dom';
const InvoiceList = (props) => {
return <ul>
<li key="dashboard">
<Link to="/invoices/dashboard"><span>Dashboard</span></Link>
</li>
{props.invoices.map((invoice) =>
<li key={invoice.id}>
<p><Link to={`/invoices/${invoice.id}`}><span>To:</span>{invoice.to}</Link></p>
<p><span>Amount:</span>{invoice.amount}</p>
<p><span>Paid:</span>{invoice.paid ? 'Yes' : 'No'}</p>
<p><span>Due:</span>{invoice.due.toDateString()}</p>
</li>
)}
</ul>
};
const Dashboard = (props) => {
const balance = props.invoices.reduce((sum, invoice) => sum + invoice.amount, 0);
const unpaidNum = props.invoices.reduce((num, invoice) => num + !invoice.paid, 0);
return <div>
Dashboard:
<div>Unpaid: {unpaidNum}</div>
<div>Balance: {balance}</div>
</div>
};
const Invoice = (props) => {
const id = parseInt(props.match.params.id);
const invoice = props.invoices.find(invoice => invoice.id === id);
return <div>
Invoice #{id}, to: {invoice.to}
</div>
};
const Layout = (props) => (
<div className="invoicesLayout">
{props.children}
</div>
);
const InvoicesSmallScreen = (props) => {
const {invoices} = props;
return (<div>
<Link to="/invoices">Show Invoices</Link>
<Switch>
<Route exact path="/invoices" render={props => <InvoiceList invoices={invoices} {...props}/>}/>
<Route exact path="/invoices/dashboard" render={props => <Dashboard invoices={invoices} {...props}/>}/>
<Route path="/invoices/:id" render={props => <Invoice invoices={invoices} {...props}/>}/>
</Switch>
</div>)
};
const InvoicesBigScreen = (props) => {
const {invoices} = props;
return (<div>
<InvoiceList invoices={invoices}/>
<Switch>
<Route exact path="/invoices/dashboard" render={props => <Dashboard invoices={invoices} {...props}/>}/>
<Route path="/invoices/:id" render={props => <Invoice invoices={invoices} {...props}/>}/>
</Switch>
</div>)
};
class Invoices extends Component {
constructor(props) {
super(props);
this.state = {
invoices: []
}
}
componentDidMount() {
// generate some dummy data here
const data = [];
this.setState({invoices: data})
}
render() {
const {invoices} = this.state;
return (
<Layout>
<Media query={{maxWidth: 599}}>
{screenIsSmall => screenIsSmall ?
<InvoicesSmallScreen invoices={invoices}/>
: <InvoicesBigScreen invoices={invoices}/>
}
</Media>
</Layout>
)
}
}
export default Invoices;

Answer 2

I recently tried a similar thing, and ended up with the following higher order component, where you pass in a master and a detail component:
import React from 'react';
import { Route, Switch, useRouteMatch } from 'react-router-dom';
import Media from 'react-media';
import { mediaQueries } from 'model';
import './MasterDetail.scss';
export const masterDetailHOC = <X,Y>(
MasterComponent: any,
DetailComponent: any,
masterProps?: X, detailProps?: Y) => {
return function(props: any) {
let { path } = useRouteMatch() as any;
return (
<Media query={mediaQueries.md}>
{matches =>
matches ? (
<Switch>
<Route exact path={`${path}`}>
<MasterComponent {...props} {...masterProps}
data-test="Master" />
</Route>
<Route path={`${path}/detail/:id`}>
<DetailComponent {...props} {...detailProps}
data-test="Detail" />
</Route>
</Switch>
) : (
<section className="master-detail">
<section className="master-detail__master">
<Route path={`${path}`}>
<MasterComponent {...props} {...masterProps}
data-test="Master" />
</Route>
</section>
<section className="master-detail__detail">
<Switch>
<Route exact path={`${path}`}>
<DetailComponent {...detailProps}
data-test="Detail" />
</Route>
<Route path={`${path}/detail/:id`}>
<DetailComponent {...props} {...detailProps}
data-test="Detail" />
</Route>
</Switch>
</section>
</section>
)
}
</Media>
);
}
};
If you like, I wrote an accompanying blog post with more detail here + the code can be found on github.