ui: wire in index and user preference pages

Use the various dialog components to provide implementations for the
index page and a page listing user preferences.

ui/frontend/src/index.tsx

@@ -9,6 +9,7 @@ import { BrowserRouter, Route } from 'react-router-dom'
 import { ProfileProvider } from './providers/ProfileProvider';
 
 import IndexPage from './pages/IndexPage';
+import UserPreferencePage from './pages/UserPreferencePage';
 
 import theme from './theme';
 
@@ -20,6 +21,7 @@ ReactDOM.render(
         <Helmet><title>Lecture Capture Preferences</title></Helmet>
         <CssBaseline />
         <Route exact={true} path="/" component={IndexPage} />
+        <Route exact={true} path="/preferences/user/:user" component={UserPreferencePage} />
       </MuiThemeProvider>
     </BrowserRouter>
   </ProfileProvider>,

ui/frontend/src/pages/IndexPage.tsx

-import React from 'react';
+import * as React from 'react';
 
-import Typography from '@material-ui/core/Typography';
+import AnonymousPreferenceDialog from '../components/AnonymousPreferenceDialog';
+import LoadingIndicator from '../components/LoadingIndicator';
+import NewPreferenceDialog from '../components/NewPreferenceDialog';
+import PagePaper from '../components/PagePaper';
+
+import { ProfileConsumer } from '../providers/ProfileProvider';
+
+import QueryPreferences from '../containers/QueryPreferences';
+
+import Page from './Page';
 
 /**
  * The index page for the web application. Upon mount, it fetches a list of the latest media items
  * and shows them to the user.
  */
 const IndexPage = () => (
-  <Typography variant='body'>Placeholder</Typography>
+  <Page>
+    <ProfileConsumer>{ profile =>
+      <PagePaper>
+        { !profile ? <LoadingIndicator /> : null }
+        { profile && profile.is_anonymous ? <AnonymousPreferenceDialog /> : null }
+        { profile && !profile.is_anonymous ?
+          <QueryPreferences query={{ user: profile.username }}>{
+            ({ results, isLoading }) => isLoading ? <LoadingIndicator /> : <NewPreferenceDialog
+              profile={ profile }
+              existingPreference={ (results && (results.length === 1)) ? results[0] : undefined }
+            />
+          }</QueryPreferences> : null
+        }
+      </PagePaper>
+    }</ProfileConsumer>
+  </Page>
 );
 
 export default IndexPage;

ui/frontend/src/pages/UserPreferencePage.tsx

+import * as React from 'react';
+
+import { RouteComponentProps } from 'react-router-dom'
+
+import LoadingIndicator from '../components/LoadingIndicator';
+import PagePaper from '../components/PagePaper';
+import UserPreference from '../components/UserPreference';
+
+import QueryPreferences from '../containers/QueryPreferences';
+
+import Page from './Page';
+
+const UserPreferencePage = ({ match }: RouteComponentProps<{ user: string; }>) => (
+  <Page>
+    <PagePaper>
+      <QueryPreferences query={{ user: match.params.user }}>{
+        ({ results, isLoading }) => isLoading ? <LoadingIndicator /> : <UserPreference
+          preference={ (results && (results.length === 1)) ? results[0] : undefined }
+          username={ match.params.user }
+        />
+      }</QueryPreferences>
+    </PagePaper>
+  </Page>
+);
+
+export default UserPreferencePage;

ui/urls.py

@@ -20,4 +20,9 @@ app_name = 'ui'
 
 urlpatterns = [
     path('', TemplateView.as_view(template_name="index.html"), name='index'),
+    path(
+        'preferences/user/<slug:username>/',
+        TemplateView.as_view(template_name="index.html"),
+        name='preferences_user'
+    ),
 ]