[WIP] Manage Page

package.json

@@ -13,8 +13,9 @@
     "react-router-dom": "^5.0.0",
     "react-scripts": "3.0.1",
     "react-select": "^3.0.4",
-    "react-table": "^6.10.0",
-    "recompose": "^0.30.0"
+    "react-table": "^7.0.0-beta.12",
+    "recompose": "^0.30.0",
+    "styled-components": "^4.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/common/SimpleTable.js

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import { useTable } from 'react-table'
+import styled from 'styled-components'
+
+const Styles = styled.div`
+  padding: 1rem;
+  table {
+    border-spacing: 0;
+    border: 1px solid black;
+    tr {
+      :last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+    th,
+    td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid black;
+      border-right: 1px solid black;
+      :last-child {
+        border-right: 0;
+      }
+    }
+  }
+`
+
+function SimpleTable({ columns, data }) {
+  // Use the state and functions returned from useTable to build your UI
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable({
+    columns,
+    data,
+  })
+
+  // Render the UI for your table
+  return (
+    <table {...getTableProps()}>
+      <thead>
+        {headerGroups.map(headerGroup => (
+          <tr {...headerGroup.getHeaderGroupProps()}>
+            {headerGroup.headers.map(column => (
+              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody {...getTableBodyProps()}>
+        {rows.map(
+          (row, i) =>
+            prepareRow(row) || (
+              <tr {...row.getRowProps()}>
+                {row.cells.map(cell => {
+                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                })}
+              </tr>
+            )
+        )}
+      </tbody>
+    </table>
+  )
+}
+
+export {SimpleTable, Styles}

src/components/Feedback/FeedbackTable.js

@@ -1,7 +1,6 @@
 import React, {Component} from 'react';
-import ReactTable from 'react-table';
+import {SimpleTable, Styles} from '../../common/SimpleTable'
 import ModalBox from './ModalBox';
-import 'react-table/react-table.css';
 import './styles.css';
 
 class FeedbackTable extends Component {
@@ -35,17 +34,18 @@ class FeedbackTable extends Component {
                 feedback: f['feedback'] ? f['feedback'][0]['comments'] : '',
             };
         });
-    
-        return <div>
-            {this.state.displayModal && this.state.feedbackData ? 
-                <ModalBox 
+
+        return (<div>
+            {this.state.displayModal && this.state.feedbackData ?
+                <ModalBox
                     feedback={this.state.feedbackData}
                     onClose={this.hideModalBox}
-                /> 
+                />
                 : null
             }
-            <ReactTable 
-                columns={columns} 
+            <Styles>
+            <SimpleTable
+                columns={columns}
                 data={tableData}
                 getTdProps={(state, rowInfo, column, instance) => {
                     return {
@@ -58,10 +58,10 @@ class FeedbackTable extends Component {
                                 }
                                 const feedbackData = filteredFeedback[0];
                                 console.log(feedbackData);
-                
+
                                 this.setState({feedbackData: feedbackData});
                                 this.displayModalBox();
-        
+
                                 if (handleOriginal) {
                                     handleOriginal()
                                 }
@@ -72,9 +72,10 @@ class FeedbackTable extends Component {
                     }
                 }}
             />
-        </div>
+            </Styles>
+        </div>)
     }
 }
 
 
-export default FeedbackTable;
+export default FeedbackTable;

src/components/Post/NewMotions.js

@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import styled from 'styled-components'
+import {SpeakingTimes, Times} from "../../constants/times";
+
+const Styles = styled.div`
+  padding: 1rem;
+  margin-bottom: 200px;
+  table {
+    border-spacing: 0;
+    border: 1px solid black;
+    tr {
+      :last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+    th,
+    td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid black;
+      border-right: 1px solid black;
+      :last-child {
+        border-right: 0;
+      }
+    }
+  }
+`
+
+class NewMotions extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            type: "Moderated",
+            topic: "",
+            del: "",
+            time: "5m",
+            sp_time: "1m",
+        }
+
+    }
+
+    onChange = event => {
+      this.setState({ [event.target.name]: event.target.value });
+    }
+
+    render () {
+      const {type, topic, del, time, sp_time} = this.state
+      const isInvalid = topic === '' || del === '' || time === '' || sp_time === '' || Times[time] % SpeakingTimes[sp_time] !== 0;
+        return (
+          <Styles>
+              <div className="box">
+                  <h3>New Motion</h3>
+                  <form onSubmit={event => this.props.broadcast(event, type, topic, del, time, sp_time)}>
+                  <div className="form-group">
+                      <select name="type" value={type} onChange={this.onChange}>
+                          <option value="Moderated">Mod</option>
+                          <option value="Unmoderated">Unmod</option>
+                          <option value="Formal">Formal</option>
+                      </select>
+                      <input
+                          name="topic"
+                          value={topic}
+                          onChange={this.onChange}
+                          type="text"
+                          placeholder="Topic"/>
+
+                      <input
+                          name="del"
+                          value={del}
+                          onChange={this.onChange}
+                          type="text"
+                          placeholder="Delegate"/>
+
+                      <select
+                          name="time"
+                          value={time}
+                          onChange={this.onChange}>
+
+                          {Object.keys(Times).map((key, index) => (<option value={key} key={key}>{key}</option>))}
+                      </select>
+
+                      <select
+                          name="sp_time"
+                          value={sp_time}
+                          onChange={this.onChange}>
+                          {Object.keys(SpeakingTimes).map((key, index) => (<option value={key} key={key}>{key}</option>))}
+                      </select>
+
+                      <button disabled={isInvalid} type="submit"> Broadcast </button>
+                      </div>
+                  </form>
+              </div>
+            </Styles>
+        );
+    }
+}
+
+export default NewMotions

src/components/Post/NewSpeaker.js

@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import styled from 'styled-components'
+import {SpeakingTimes, Times} from "../../constants/times";
+
+const Styles = styled.div`
+  padding: 1rem;
+  margin-bottom: 200px;
+  table {
+    border-spacing: 0;
+    border: 1px solid black;
+    tr {
+      :last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+    th,
+    td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid black;
+      border-right: 1px solid black;
+      :last-child {
+        border-right: 0;
+      }
+    }
+  }
+`
+
+class NewSpeaker extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            speaker: ""
+        }
+
+    }
+
+    onChange = event => {
+      this.setState({ [event.target.name]: event.target.value });
+    }
+
+    render () {
+      const {speaker} = this.state
+      const isInvalid = speaker === '';
+        return (
+          <Styles>
+              <div className="box">
+                  <h3>New Speaker</h3>
+                  <form onSubmit={event => this.props.addSpeaker(event, speaker)}>
+                  <div className="form-group">
+                      <input
+                          name="speaker"
+                          value={speaker}
+                          onChange={this.onChange}
+                          type="text"
+                          placeholder="New Speaker"/>
+                      </div>
+                      <button disabled={isInvalid} type="submit"> Add </button>
+                  </form>
+              </div>
+            </Styles>
+        );
+    }
+}
+
+export default NewSpeaker