From c4d6704b2d8411f8fd7bc78b44e2e4e3cc2a6b15 Mon Sep 17 00:00:00 2001 From: Susie Date: Sat, 23 Mar 2019 13:28:11 -0700 Subject: [PATCH 1/8] added routing --- frontend/src/components/App.js | 2 + frontend/src/scenes/Event/create.js | 89 +++++++++++++++++++++++++++++ 2 files changed, 91 insertions(+) create mode 100644 frontend/src/scenes/Event/create.js diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js index 80973b8..4d35d08 100644 --- a/frontend/src/components/App.js +++ b/frontend/src/components/App.js @@ -10,6 +10,7 @@ import Reset from './Reset'; import Signup from './Signup'; import Navbar from './Navbar'; import CreateApplicationPeriod from '../scenes/ApplicationPeriod/create'; +import CreateEvent from '../scenes/Event/create'; // eslint-disable-next-line react/prefer-stateless-function @@ -80,6 +81,7 @@ class App extends Component { } /> + diff --git a/frontend/src/scenes/Event/create.js b/frontend/src/scenes/Event/create.js new file mode 100644 index 0000000..47a10be --- /dev/null +++ b/frontend/src/scenes/Event/create.js @@ -0,0 +1,89 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import Pinpoint from 'pinpoint-client'; +import Notification from '../../components/Notification'; + +class CreateEvent extends Component { + static contextTypes = { + router: PropTypes.func.isRequired, + } + + constructor(props, context) { + super(props, context); + this.state = { + email: '', + password: '', + notification: null, + }; + this.updateTextField = this.updateTextField.bind(this); + this.attemptLogin = this.attemptLogin.bind(this); + } + + updateTextField(e) { + const loginField = e.target.getAttribute('name'); + this.setState({ + notification: null, + [loginField]: e.target.value, + }); + } + + // Checks user log in credentials + async attemptLogin() { + const { email, password } = this.state; + const { client, setLoginState } = this.props; + if (!email || !password) { + this.setState({ + notification: { + type: 'error', + message: 'Please fill in all fields.', + }, + }); + } else { + try { + setLoginState(await client.login({ email, password })); + const { router: { history } } = this.context; + history.push('/'); + } catch { + this.setState({ + notification: { + type: 'error', + message: 'Incorrect Credentials', + }, + }); + } + } + } + + render() { + const { notification } = this.state; + return ( +
+
Sign In
+ +
+ + +
+ +
+ + Remember me +
+ + +
+ Don’t have an account?   + Sign up +
+
+ ); + } +} + +CreateEvent.propTypes = { + client: PropTypes.instanceOf(Pinpoint.API).isRequired, +}; + +export default CreateEvent; From 721e1d45dbec1dd10ed7248ae93242e87569da50 Mon Sep 17 00:00:00 2001 From: Susie Date: Sat, 23 Mar 2019 14:52:33 -0700 Subject: [PATCH 2/8] front --- frontend/src/scenes/Event/create.css | 15 +++++++++++++++ frontend/src/scenes/Event/create.js | 8 +++----- 2 files changed, 18 insertions(+), 5 deletions(-) create mode 100644 frontend/src/scenes/Event/create.css diff --git a/frontend/src/scenes/Event/create.css b/frontend/src/scenes/Event/create.css new file mode 100644 index 0000000..cc80c31 --- /dev/null +++ b/frontend/src/scenes/Event/create.css @@ -0,0 +1,15 @@ + +.Create-Window { + position: absolute; + left: 0%; + right: 0%; + top: 0%; + bottom: 0%; + + background: #FFFFFF; + /* Gray 4 */ + border: 1px solid #BDBDBD; + box-sizing: border-box; + border-radius: 8px; +} + diff --git a/frontend/src/scenes/Event/create.js b/frontend/src/scenes/Event/create.js index 47a10be..632a42d 100644 --- a/frontend/src/scenes/Event/create.js +++ b/frontend/src/scenes/Event/create.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Pinpoint from 'pinpoint-client'; import Notification from '../../components/Notification'; +import './create.css'; class CreateEvent extends Component { static contextTypes = { @@ -58,17 +59,14 @@ class CreateEvent extends Component { const { notification } = this.state; return (
-
Sign In
+
Create an Event
+

Add a point of data entry to your application period.

-
- - Remember me -
Forgot Password? From eebe4119a97573fb12f41168e01f3914b8b81b58 Mon Sep 17 00:00:00 2001 From: Susie Date: Sat, 30 Mar 2019 00:31:06 -0700 Subject: [PATCH 3/8] basic create event page --- frontend/src/components/App.js | 2 +- frontend/src/scenes/Event/create.css | 15 ---- frontend/src/scenes/Event/create.js | 106 +++++++++++---------------- 3 files changed, 42 insertions(+), 81 deletions(-) delete mode 100644 frontend/src/scenes/Event/create.css diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js index 0c61527..08c5f23 100644 --- a/frontend/src/components/App.js +++ b/frontend/src/components/App.js @@ -75,7 +75,7 @@ class App extends Component { } /> - +
diff --git a/frontend/src/scenes/Event/create.css b/frontend/src/scenes/Event/create.css deleted file mode 100644 index cc80c31..0000000 --- a/frontend/src/scenes/Event/create.css +++ /dev/null @@ -1,15 +0,0 @@ - -.Create-Window { - position: absolute; - left: 0%; - right: 0%; - top: 0%; - bottom: 0%; - - background: #FFFFFF; - /* Gray 4 */ - border: 1px solid #BDBDBD; - box-sizing: border-box; - border-radius: 8px; -} - diff --git a/frontend/src/scenes/Event/create.js b/frontend/src/scenes/Event/create.js index 632a42d..2729e7e 100644 --- a/frontend/src/scenes/Event/create.js +++ b/frontend/src/scenes/Event/create.js @@ -1,87 +1,63 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import Pinpoint from 'pinpoint-client'; -import Notification from '../../components/Notification'; -import './create.css'; +import DatePicker from 'react-datepicker'; +import 'react-datepicker/dist/react-datepicker.css'; class CreateEvent extends Component { - static contextTypes = { - router: PropTypes.func.isRequired, - } - - constructor(props, context) { - super(props, context); + constructor(props) { + super(props); this.state = { - email: '', - password: '', - notification: null, + startDate: new Date(), + endDate: new Date(), + hasError: false, }; - this.updateTextField = this.updateTextField.bind(this); - this.attemptLogin = this.attemptLogin.bind(this); - } - - updateTextField(e) { - const loginField = e.target.getAttribute('name'); - this.setState({ - notification: null, - [loginField]: e.target.value, - }); + this.updateTextFields = this.updateTextFields.bind(this); + this.handleChangeStart = this.handleChangeStart.bind(this); + this.handleChangeEnd = this.handleChangeEnd.bind(this); } - // Checks user log in credentials - async attemptLogin() { - const { email, password } = this.state; - const { client, setLoginState } = this.props; - if (!email || !password) { + handleChangeStart(date) { + const { endDate } = this.state; + if (endDate < date) { + this.setState({ hasError: true }); + const { hasError } = this.state; + console.log('Start date cannot be greater than end date!', hasError); + } else { this.setState({ - notification: { - type: 'error', - message: 'Please fill in all fields.', - }, + startDate: date, }); + } + } + + handleChangeEnd(date) { + const { startDate } = this.state; + if (startDate > date) { + this.setState({ hasError: true }); + const { hasError } = this.state; + console.log('Start date cannot be greater than end date!', hasError); } else { - try { - setLoginState(await client.login({ email, password })); - const { router: { history } } = this.context; - history.push('/'); - } catch { - this.setState({ - notification: { - type: 'error', - message: 'Incorrect Credentials', - }, - }); - } + this.setState({ endDate: date }); } } + updateTextFields(e) { + const infoField = e.target.getAttribute('id'); + this.setState({ [infoField]: e.target.value }); + } + render() { - const { notification } = this.state; return ( -
-
Create an Event
-

Add a point of data entry to your application period.

- -
- - -
- - - -
- Don’t have an account?   - Sign up +
+
+
Create Event
+

Add a point of data entry to your application period

+

Event Name

+
+ +
); } } -CreateEvent.propTypes = { - client: PropTypes.instanceOf(Pinpoint.API).isRequired, -}; - export default CreateEvent; From 2d9b1a6496730455b44b43e3477e4ac4bf0e00e9 Mon Sep 17 00:00:00 2001 From: Susie Date: Sat, 30 Mar 2019 00:36:43 -0700 Subject: [PATCH 4/8] remove unnecessary functions: --- frontend/src/scenes/Event/create.js | 33 ----------------------------- 1 file changed, 33 deletions(-) diff --git a/frontend/src/scenes/Event/create.js b/frontend/src/scenes/Event/create.js index 2729e7e..949f032 100644 --- a/frontend/src/scenes/Event/create.js +++ b/frontend/src/scenes/Event/create.js @@ -1,42 +1,9 @@ import React, { Component } from 'react'; -import DatePicker from 'react-datepicker'; -import 'react-datepicker/dist/react-datepicker.css'; class CreateEvent extends Component { constructor(props) { super(props); - this.state = { - startDate: new Date(), - endDate: new Date(), - hasError: false, - }; this.updateTextFields = this.updateTextFields.bind(this); - this.handleChangeStart = this.handleChangeStart.bind(this); - this.handleChangeEnd = this.handleChangeEnd.bind(this); - } - - handleChangeStart(date) { - const { endDate } = this.state; - if (endDate < date) { - this.setState({ hasError: true }); - const { hasError } = this.state; - console.log('Start date cannot be greater than end date!', hasError); - } else { - this.setState({ - startDate: date, - }); - } - } - - handleChangeEnd(date) { - const { startDate } = this.state; - if (startDate > date) { - this.setState({ hasError: true }); - const { hasError } = this.state; - console.log('Start date cannot be greater than end date!', hasError); - } else { - this.setState({ endDate: date }); - } } updateTextFields(e) { From 194e6edcc9b358ab654f5bd90d78dc48a3fc70f7 Mon Sep 17 00:00:00 2001 From: Susie Date: Sat, 30 Mar 2019 22:32:23 -0700 Subject: [PATCH 5/8] more like a card evet frontend page --- frontend/src/scenes/Event/create.js | 10 ++++++---- frontend/src/styles/components/card.scss | 16 ++++++++++++++++ .../src/styles/utils/heights-and-widths.scss | 1 + 3 files changed, 23 insertions(+), 4 deletions(-) diff --git a/frontend/src/scenes/Event/create.js b/frontend/src/scenes/Event/create.js index 949f032..54c5870 100644 --- a/frontend/src/scenes/Event/create.js +++ b/frontend/src/scenes/Event/create.js @@ -14,13 +14,15 @@ class CreateEvent extends Component { render() { return (
-
-
Create Event
-

Add a point of data entry to your application period

-

Event Name

+
+
Create Event
+

Add a point of data entry to your application period

+

Event Name

+
Next
+

Cancel

); diff --git a/frontend/src/styles/components/card.scss b/frontend/src/styles/components/card.scss index 7a09421..c187ff4 100644 --- a/frontend/src/styles/components/card.scss +++ b/frontend/src/styles/components/card.scss @@ -6,5 +6,21 @@ .card { &-title { color: $gray-2; } &-text { color: $gray-3; } + &-description { font-size: 16px; color: $gray-3; } + } + &-button { + background-color: rgb(243, 62, 62); + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + border-radius: 12px; + + .button { + &-small { font-size: 14px; } + &-large { font-size: 16px; } + } } } diff --git a/frontend/src/styles/utils/heights-and-widths.scss b/frontend/src/styles/utils/heights-and-widths.scss index 36eeb4f..b897299 100644 --- a/frontend/src/styles/utils/heights-and-widths.scss +++ b/frontend/src/styles/utils/heights-and-widths.scss @@ -2,6 +2,7 @@ &-100p { height: 100%; } } .w { + &-800 { width: 800px; } &-400 { width: 400px; } &-500 { width: 500px; } &-100p { width: 100%; } From d28b8e01eab2eb6716354fd8e02717297254257e Mon Sep 17 00:00:00 2001 From: Susie Date: Sat, 6 Apr 2019 13:21:10 -0700 Subject: [PATCH 6/8] less ugly event page --- frontend/src/scenes/Event/create.js | 48 +++++++++++++++++++++++++---- frontend/src/scenes/Event/type.js | 32 +++++++++++++++++++ 2 files changed, 74 insertions(+), 6 deletions(-) create mode 100644 frontend/src/scenes/Event/type.js diff --git a/frontend/src/scenes/Event/create.js b/frontend/src/scenes/Event/create.js index 54c5870..9059980 100644 --- a/frontend/src/scenes/Event/create.js +++ b/frontend/src/scenes/Event/create.js @@ -1,8 +1,12 @@ import React, { Component } from 'react'; - +import Notification from '../../components/Notification'; class CreateEvent extends Component { - constructor(props) { - super(props); + constructor(props, context) { + super(props, context); + this.state = { + eventname: '', + notification: null, + }; this.updateTextFields = this.updateTextFields.bind(this); } @@ -11,18 +15,50 @@ class CreateEvent extends Component { this.setState({ [infoField]: e.target.value }); } + // TODO once endpoint is set up, currently does nothing + async attemptCreateEvent() { + const { + eventname, + } = this.state; + + const { client } = this.props; + + if (!eventname) { + this.setState({ + notification: { + type: 'error', + message: 'Event name cannot be empty', + }, + }); + } else { + try { + await client.createEvent({ eventname }); + } catch (e) { + this.setState({ + notification: { + type: 'error', + message: 'Failed to create a new event.', + }, + }); + } + } + } + render() { + const { notification } = this.state; return (
+
Create Event
+

Add a point of data entry to your application period

Event Name

- +
-
Next
-

Cancel

+ + Cancel
); diff --git a/frontend/src/scenes/Event/type.js b/frontend/src/scenes/Event/type.js new file mode 100644 index 0000000..f0d7567 --- /dev/null +++ b/frontend/src/scenes/Event/type.js @@ -0,0 +1,32 @@ +import React, { Component } from 'react'; + +class CreateEvent extends Component { + constructor(props) { + super(props); + this.updateTextFields = this.updateTextFields.bind(this); + } + + updateTextFields(e) { + const infoField = e.target.getAttribute('id'); + this.setState({ [infoField]: e.target.value }); + } + + render() { + return ( +
+
+
Create Event
+

Add a point of data entry to your application period

+

Event Name

+
+ +
+ +

Cancel

+
+
+ ); + } +} + +export default CreateEvent; From 426a195fc468b64fd47a9f8695821be0694d7388 Mon Sep 17 00:00:00 2001 From: Susie Date: Fri, 19 Apr 2019 22:25:29 -0700 Subject: [PATCH 7/8] add event and select type pages --- frontend/src/components/App.js | 3 +- frontend/src/scenes/Event/create.js | 45 +++++-------- frontend/src/scenes/Event/type.js | 63 +++++++++++++++---- frontend/src/styles/components/card.scss | 21 ++++++- .../src/styles/utils/heights-and-widths.scss | 1 + frontend/src/styles/utils/spacing.scss | 3 + 6 files changed, 94 insertions(+), 42 deletions(-) diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js index 08c5f23..831f859 100644 --- a/frontend/src/components/App.js +++ b/frontend/src/components/App.js @@ -10,7 +10,7 @@ import Signup from './Signup'; import Navbar from './Navbar'; import CreateApplicationPeriod from '../scenes/ApplicationPeriod/create'; import CreateEvent from '../scenes/Event/create'; - +import EventType from '../scenes/Event/type'; // eslint-disable-next-line react/prefer-stateless-function class App extends Component { @@ -76,6 +76,7 @@ class App extends Component { } /> +
diff --git a/frontend/src/scenes/Event/create.js b/frontend/src/scenes/Event/create.js index 9059980..5b2273f 100644 --- a/frontend/src/scenes/Event/create.js +++ b/frontend/src/scenes/Event/create.js @@ -11,17 +11,12 @@ class CreateEvent extends Component { } updateTextFields(e) { - const infoField = e.target.getAttribute('id'); + const infoField = e.target.getAttribute('name'); this.setState({ [infoField]: e.target.value }); } - // TODO once endpoint is set up, currently does nothing - async attemptCreateEvent() { - const { - eventname, - } = this.state; - - const { client } = this.props; + async checkEventName() { + const { eventname } = this.state; if (!eventname) { this.setState({ @@ -30,17 +25,6 @@ class CreateEvent extends Component { message: 'Event name cannot be empty', }, }); - } else { - try { - await client.createEvent({ eventname }); - } catch (e) { - this.setState({ - notification: { - type: 'error', - message: 'Failed to create a new event.', - }, - }); - } } } @@ -48,17 +32,22 @@ class CreateEvent extends Component { const { notification } = this.state; return (
-
- -
Create Event
+
+
+ Go Back + +
+
Create Event
-

Add a point of data entry to your application period

-

Event Name

-
- +

Add a point of data entry to your application period

+

Event Name

+
+ +
+
+ + Cancel
- - Cancel
); diff --git a/frontend/src/scenes/Event/type.js b/frontend/src/scenes/Event/type.js index f0d7567..6beb806 100644 --- a/frontend/src/scenes/Event/type.js +++ b/frontend/src/scenes/Event/type.js @@ -1,28 +1,67 @@ import React, { Component } from 'react'; - +import Notification from '../../components/Notification'; class CreateEvent extends Component { - constructor(props) { - super(props); + constructor(props, context) { + super(props, context); + this.state = { + eventtype: '', + notification: null, + }; this.updateTextFields = this.updateTextFields.bind(this); } updateTextFields(e) { - const infoField = e.target.getAttribute('id'); + const infoField = e.target.getAttribute('name'); this.setState({ [infoField]: e.target.value }); + this.attemptCreateEvent(); + } + + // TODO once endpoint is set up, currently does nothing + async attemptCreateEvent() { + const { + eventtype, + } = this.state; + const { client, eventname } = this.props; + + if (!eventtype) { + this.setState({ + notification: { + type: 'error', + message: 'Event type cannot be empty', + }, + }); + } else { + try { + await client.createEvent({ eventname, eventtype }); + } catch (e) { + this.setState({ + notification: { + type: 'error', + message: 'Failed to create a new event.', + }, + }); + } + } } render() { + const { notification } = this.state; return (
-
-
Create Event
-

Add a point of data entry to your application period

-

Event Name

-
- +
+
+ Go Back + +
+
Event type
+ +

Pick an event type

+ - -

Cancel

); diff --git a/frontend/src/styles/components/card.scss b/frontend/src/styles/components/card.scss index c187ff4..d70762c 100644 --- a/frontend/src/styles/components/card.scss +++ b/frontend/src/styles/components/card.scss @@ -1,13 +1,28 @@ // Default Card (without fixed weight and height) .card { background: white; + padding: 25px 50px; + &-smallpad { padding: 10px 15px; } + border-radius: 50px; - padding: 25px 50px; + &-box { border-radius: 10px; } + .card { &-title { color: $gray-2; } &-text { color: $gray-3; } + &-underline { + &:hover { + text-decoration: underline; + transition: all $transition-time ease-in-out; + } + } &-description { font-size: 16px; color: $gray-3; } } + &-align-right { + right: 15px; + top: 5px; + float: right; + } &-button { background-color: rgb(243, 62, 62); border: none; @@ -23,4 +38,8 @@ &-large { font-size: 16px; } } } + &-row { + display: flex; + flex-direction: row; + } } diff --git a/frontend/src/styles/utils/heights-and-widths.scss b/frontend/src/styles/utils/heights-and-widths.scss index b897299..ed51d48 100644 --- a/frontend/src/styles/utils/heights-and-widths.scss +++ b/frontend/src/styles/utils/heights-and-widths.scss @@ -5,5 +5,6 @@ &-800 { width: 800px; } &-400 { width: 400px; } &-500 { width: 500px; } + &-600 { width: 600px; } &-100p { width: 100%; } } diff --git a/frontend/src/styles/utils/spacing.scss b/frontend/src/styles/utils/spacing.scss index e48f60e..3f98ba0 100644 --- a/frontend/src/styles/utils/spacing.scss +++ b/frontend/src/styles/utils/spacing.scss @@ -12,6 +12,7 @@ $spacing-xxl: 48px; $spacing-nav: 60px; $spacing-25: 25px; $spacing-50: 50px; +$spacing-80: 80px; $spacing-100: 100px; $spacing-200: 200px; $spacing-300: 300px; @@ -28,6 +29,8 @@ $spacing-300: 300px; // left padding &-left, &-sides { &-m { padding-left: $spacing-m; } + &-50 { padding-left: $spacing-50; } + &-100 { padding-left: $spacing-100; } &-300 { padding-left: $spacing-300; } } From b5593c16e359e1e3748c09a838f2f9301aa333f1 Mon Sep 17 00:00:00 2001 From: Susie Date: Wed, 24 Apr 2019 09:08:13 -0700 Subject: [PATCH 8/8] destructure variable: --- frontend/src/scenes/Event/create.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/scenes/Event/create.js b/frontend/src/scenes/Event/create.js index 5b2273f..5277cf6 100644 --- a/frontend/src/scenes/Event/create.js +++ b/frontend/src/scenes/Event/create.js @@ -29,7 +29,7 @@ class CreateEvent extends Component { } render() { - const { notification } = this.state; + const { notification, eventname } = this.state; return (
@@ -45,7 +45,7 @@ class CreateEvent extends Component {