Merge pull request #88 from ohtuprojekti-ilmo/participants-list

Initial version of participants list

src/App.js

@@ -10,6 +10,7 @@ import TopicFormPage from './components/TopicFormPage'
 import TopicListPage from './components/TopicListPage'
 import ViewTopicPage from './components/ViewTopicPage'
 import RegistrationPage from './components/RegistrationPage'
+import ParticipantsPage from './components/ParticipantsPage'
 import NavigationBar from './components/common/NavigationBar'
 import Notification from './components/common/Notification'
 import LoadingSpinner from './components/common/LoadingSpinner'
@@ -82,6 +83,7 @@ class App extends Component {
               <Route exact path={process.env.PUBLIC_URL + '/topics/create'} render={() => <TopicFormPage />} />
               <Route exact path={process.env.PUBLIC_URL + '/topics/:id'} render={(props) => <ViewTopicPage {...props} />} />
               <Route exact path={process.env.PUBLIC_URL + '/administration'} render={() => <AdminPage />} />
+              <Route exact path={process.env.PUBLIC_URL + '/administration/participants'} render={() => <ParticipantsPage />} />
               <AuthRoute path={process.env.PUBLIC_URL + '/register'} user={this.props.user} component={RegistrationPage} />
             </Switch>
           </div>

src/components/ParticipantsPage.js

@@ -0,0 +1,198 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { withStyles } from '@material-ui/core/styles'
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import TableCell from '@material-ui/core/TableCell'
+import TableHead from '@material-ui/core/TableHead'
+import TableRow from '@material-ui/core/TableRow'
+import Paper from '@material-ui/core/Paper'
+import Button from '@material-ui/core/Button'
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing.unit * 3,
+    overflowX: 'auto',
+  },
+  table: {
+    minWidth: 700,
+  },
+})
+
+const testRows = [
+  {
+    id: 1,
+    preferredTopics: [
+      {
+        topic: 'HTML #1'
+      },
+      {
+        topic: 'JAVA #2'
+      },
+      {
+        topic: 'PYTHON #1'
+      },
+      {
+        topic: 'JS-PRO #99'
+      },
+      {
+        topic: 'C #22'
+      }
+    ],
+    questions: 'questions',
+    semester: '2019'
+  },
+  {
+    id: 2,
+    preferredTopics: [
+      {
+        topic: 'JAVA #1'
+      },
+      {
+        topic: 'JAVA #2'
+      },
+      {
+        topic: 'PYTHON #1'
+      },
+      {
+        topic: 'HTML #2'
+      },
+      {
+        topic: 'DOCUMENTATION PRO'
+      }
+    ],
+    questions: 'questions',
+    semester: '2019'
+  },
+  {
+    id: 3,
+    preferredTopics: [
+      {
+        topic: 'HTML #1'
+      },
+      {
+        topic: 'JAVA #2'
+      },
+      {
+        topic: 'JAVA #1'
+      },
+      {
+        topic: 'JS-PRO #99'
+      },
+      {
+        topic: 'C #22'
+      }
+    ],
+    questions: 'questions',
+    semester: '2019'
+  },
+  {
+    id: 4,
+    preferredTopics: [
+      {
+        topic: 'HTML #1'
+      },
+      {
+        topic: 'HTML #2'
+      },
+      {
+        topic: 'HTML #3'
+      },
+      {
+        topic: 'HTML #99'
+      },
+      {
+        topic: 'HTML #22'
+      }
+    ],
+    questions: 'questions',
+    semester: '2019'
+  }
+]
+
+class ParticipantsPage extends React.Component {
+
+  async componentWillMount() {
+    try {
+      if (window.localStorage.getItem('loggedInUser') === null) {
+        window.location.replace(process.env.PUBLIC_URL + '/')
+      } else {
+        const token = JSON.parse(window.localStorage.getItem('loggedInUser'))
+        if(!token.user.admin || token === undefined || token === null) {
+          window.location.replace(process.env.PUBLIC_URL + '/')
+        }
+      }
+    } catch (e) {
+      console.log('error happened', e.response)
+      this.props.setError('Some error happened')
+      setTimeout(() => {
+        this.props.clearNotifications()
+      }, 3000)
+    }
+  }
+
+  render() {
+    return (
+      <div className="participants-container">
+        <div>
+          <Paper className="participants-paper">
+            <Table className="participants-table">
+              <TableHead>
+                <TableRow>
+                  <TableCell numeric>id</TableCell>
+                  <TableCell>Preferred Topic #1</TableCell>
+                  <TableCell>Preferred Topic #2</TableCell>
+                  <TableCell>Preferred Topic #3</TableCell>
+                  <TableCell>Preferred Topic #4</TableCell>
+                  <TableCell>Preferred Topic #5</TableCell>
+                  <TableCell>Questions</TableCell>
+                  <TableCell>Semester</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {testRows.map(row => {
+                  return (
+                    <TableRow key={row.id}>
+                      <TableCell numeric component="th" scope="row">
+                        {row.id}
+                      </TableCell>
+                      <TableCell>{row.preferredTopics[0].topic}</TableCell>
+                      <TableCell>{row.preferredTopics[1].topic}</TableCell>
+                      <TableCell>{row.preferredTopics[2].topic}</TableCell>
+                      <TableCell>{row.preferredTopics[3].topic}</TableCell>
+                      <TableCell>{row.preferredTopics[4].topic}</TableCell>
+                      <TableCell>{row.questions}</TableCell>
+                      <TableCell>{row.semester}</TableCell>
+                    </TableRow>
+                  )
+                })}
+              </TableBody>
+            </Table>
+          </Paper>
+        </div>
+        <div className="export-cvs-button">
+          <Button variant="outlined">
+            Export CVS-file
+          </Button>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    state: state
+  }
+}
+
+const mapDispatchToProps = {
+}
+
+const ConnectedParticipantsPage = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ParticipantsPage)
+
+export default withStyles(styles)(ConnectedParticipantsPage)