From b7496d48843deccf66af09166491f553d8f9e75a Mon Sep 17 00:00:00 2001
From: Rich Wareham <rjw57@cam.ac.uk>
Date: Thu, 31 Jan 2019 15:22:09 +0000
Subject: [PATCH] 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                    |  2 ++
 ui/frontend/src/pages/IndexPage.tsx          | 30 ++++++++++++++++++--
 ui/frontend/src/pages/UserPreferencePage.tsx | 26 +++++++++++++++++
 ui/urls.py                                   |  5 ++++
 4 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 ui/frontend/src/pages/UserPreferencePage.tsx

diff --git a/ui/frontend/src/index.tsx b/ui/frontend/src/index.tsx
index 2e23158..be456ea 100644
--- a/ui/frontend/src/index.tsx
+++ b/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>,
diff --git a/ui/frontend/src/pages/IndexPage.tsx b/ui/frontend/src/pages/IndexPage.tsx
index 6d6cc9e..de4b071 100644
--- a/ui/frontend/src/pages/IndexPage.tsx
+++ b/ui/frontend/src/pages/IndexPage.tsx
@@ -1,13 +1,37 @@
-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;
diff --git a/ui/frontend/src/pages/UserPreferencePage.tsx b/ui/frontend/src/pages/UserPreferencePage.tsx
new file mode 100644
index 0000000..8e7c253
--- /dev/null
+++ b/ui/frontend/src/pages/UserPreferencePage.tsx
@@ -0,0 +1,26 @@
+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;
diff --git a/ui/urls.py b/ui/urls.py
index 34b1cea..a8625cb 100644
--- a/ui/urls.py
+++ b/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'
+    ),
 ]
-- 
GitLab