From 3d33b0f8bc31a848027f5a134ee65ac557e6e214 Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 05:24:27 +0100 Subject: [PATCH 01/19] Adding missing dependency and contracting topbar import --- client/package-lock.json | 105 ++++++++++++++++++++++++-- client/package.json | 3 + client/src/Components/TopBar/index.js | 5 +- 3 files changed, 104 insertions(+), 9 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 76ab3adfe..01e8e63e4 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -184,6 +184,12 @@ } } }, + "@types/async": { + "version": "2.0.50", + "resolved": "https://registry.npmjs.org/@types/async/-/async-2.0.50.tgz", + "integrity": "sha512-VMhZMMQgV1zsR+lX/0IBfAk+8Eb7dPVMWiQGFAt3qjo5x7Ml6b77jUo0e1C3ToD+XRDXqtrfw+6AB0uUsPEr3Q==", + "optional": true + }, "@types/jss": { "version": "9.5.7", "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.7.tgz", @@ -215,6 +221,11 @@ "@types/react": "*" } }, + "@types/zen-observable": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.0.tgz", + "integrity": "sha512-te5lMAWii1uEJ4FwLjzdlbw3+n0FZNOvFXHxQDKeT0dilh7HOzdMzV2TrJVUzq8ep7J4Na8OUYPRLSQkJHAlrg==" + }, "acorn": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.0.2.tgz", @@ -266,6 +277,54 @@ "color-convert": "^1.9.0" } }, + "apollo-cache": { + "version": "1.1.19", + "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.1.19.tgz", + "integrity": "sha512-p163+GVne1Gyw2v9L5kHEQhUhih7btWvyUFOl4uKf7brieqd4tHZt8ZA3vT1SaXbCeQZNSp/tFI3yFyi8RPKzw==", + "requires": { + "apollo-utilities": "^1.0.24" + } + }, + "apollo-client": { + "version": "2.4.4", + "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.4.4.tgz", + "integrity": "sha512-i29w/+aa9O4fe8NxzJNOViHdsjpN2723Q2mNl0HiOJFwG+VjA4RXdTpyZHPZqcO8FwgK1k43l8nULD4Cdlx/Ww==", + "requires": { + "@types/async": "2.0.50", + "@types/zen-observable": "^0.8.0", + "apollo-cache": "1.1.19", + "apollo-link": "^1.0.0", + "apollo-link-dedup": "^1.0.0", + "apollo-utilities": "1.0.24", + "symbol-observable": "^1.0.2", + "zen-observable": "^0.8.0" + } + }, + "apollo-link": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.3.tgz", + "integrity": "sha512-iL9yS2OfxYhigme5bpTbmRyC+Htt6tyo2fRMHT3K1XRL/C5IQDDz37OjpPy4ndx7WInSvfSZaaOTKFja9VWqSw==", + "requires": { + "apollo-utilities": "^1.0.0", + "zen-observable-ts": "^0.8.10" + } + }, + "apollo-link-dedup": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/apollo-link-dedup/-/apollo-link-dedup-1.0.10.tgz", + "integrity": "sha512-tpUI9lMZsidxdNygSY1FxflXEkUZnvKRkMUsXXuQUNoSLeNtEvUX7QtKRAl4k9ubLl8JKKc9X3L3onAFeGTK8w==", + "requires": { + "apollo-link": "^1.2.3" + } + }, + "apollo-utilities": { + "version": "1.0.24", + "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.0.24.tgz", + "integrity": "sha512-cOXtrkio3wKfggp/zKCzQYxSZZRND/njNVmUksM1cckoJF3g/2o3bhh6z0HPhNhee8qzJzVXtl+3vmwXYGh0Gg==", + "requires": { + "fast-json-stable-stringify": "^2.0.0" + } + }, "argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", @@ -983,8 +1042,7 @@ "fast-json-stable-stringify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz", - "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=", - "dev": true + "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=" }, "fast-levenshtein": { "version": "2.0.6", @@ -1132,6 +1190,14 @@ "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", "dev": true }, + "graphql": { + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.0.2.tgz", + "integrity": "sha512-gUC4YYsaiSJT1h40krG3J+USGlwhzNTXSb4IOZljn9ag5Tj+RkoXrWp+Kh7WyE3t1NCfab5kzCuxBIvOMERMXw==", + "requires": { + "iterall": "^1.2.2" + } + }, "graphql-tag": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.10.0.tgz", @@ -1408,6 +1474,11 @@ "whatwg-fetch": ">=0.10.0" } }, + "iterall": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.2.2.tgz", + "integrity": "sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==" + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -2025,15 +2096,26 @@ } }, "hoist-non-react-statics": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.0.1.tgz", - "integrity": "sha512-1kXwPsOi0OGQIZNVMPvgWJ9tSnGMiMfJdihqEzrPEXlHOBh9AAHXX/QYmAJTXztnz/K+PQ8ryCb4eGaN6HlGbQ==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.1.0.tgz", + "integrity": "sha512-MYcYuROh7SBM69xHGqXEwQqDux34s9tz+sCnxJmN18kgWh6JFdTw/5YdZtqsOdZJXddE/wUpCzfEdDrJj8p0Iw==", "requires": { "react-is": "^16.3.2" } } } }, + "react-dom": { + "version": "16.6.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.0.tgz", + "integrity": "sha512-Stm2D9dXEUUAQdvpvhvFj/DEXwC2PAL/RwEMhoN4dvvD2ikTlJegEXf97xryg88VIAU22ZAP7n842l+9BTz6+w==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.10.0" + } + }, "react-event-listener": { "version": "0.6.4", "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.4.tgz", @@ -2600,6 +2682,19 @@ "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz", "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=", "dev": true + }, + "zen-observable": { + "version": "0.8.10", + "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.10.tgz", + "integrity": "sha512-UXEh0ekA/QWYI2NkLHc5IH0V1FstIN4qGVlVvq0DQAS3oR72mofYHkjJ2f4ysMKRAziwnACzg3c0ZuG+SMDu8w==" + }, + "zen-observable-ts": { + "version": "0.8.10", + "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.10.tgz", + "integrity": "sha512-5vqMtRggU/2GhePC9OU4sYEWOdvmayp2k3gjPf4F0mXwB3CSbbNznfDUvDJx9O2ZTa1EIXdJhPchQveFKwNXPQ==", + "requires": { + "zen-observable": "^0.8.0" + } } } } diff --git a/client/package.json b/client/package.json index 44309081a..9d800caa2 100644 --- a/client/package.json +++ b/client/package.json @@ -19,12 +19,15 @@ "dependencies": { "@material-ui/core": "^3.2.0", "@material-ui/icons": "^3.0.1", + "apollo-client": "^2.4.4", "classnames": "^2.2.6", + "graphql": "^14.0.2", "graphql-tag": "^2.10.0", "luxon": "^1.4.4", "material-ui-pickers": "^1.0.1", "react": "^16.5.2", "react-apollo": "^2.2.4", + "react-dom": "^16.6.0", "react-router-dom": "^4.3.1" } } diff --git a/client/src/Components/TopBar/index.js b/client/src/Components/TopBar/index.js index 768485f37..06fe761f6 100644 --- a/client/src/Components/TopBar/index.js +++ b/client/src/Components/TopBar/index.js @@ -2,10 +2,7 @@ import React from 'react' import { Link } from 'react-router-dom' import classNames from 'classnames' -import AppBar from '@material-ui/core/AppBar' -import Toolbar from '@material-ui/core/Toolbar' -import Typography from '@material-ui/core/Typography' -import Button from '@material-ui/core/Button' +import { AppBar, Toolbar, Typography, Button } from '@material-ui/core' import { withStyles } from '@material-ui/core/styles' import datas from './data' From dc10e4d629bcc47cd3ab158835b43f179fd267a4 Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 05:47:12 +0100 Subject: [PATCH 02/19] Auto redirect to edit page after event creation --- client/src/Components/HostedEvent/New.js | 2 +- client/src/Components/HostedEvent/index.js | 14 +++++--------- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/client/src/Components/HostedEvent/New.js b/client/src/Components/HostedEvent/New.js index 1080dbbf1..9c8ceec45 100644 --- a/client/src/Components/HostedEvent/New.js +++ b/client/src/Components/HostedEvent/New.js @@ -31,6 +31,7 @@ class New extends React.Component { query: HOSTS_EVENTSBYHOST, data: { hosts_EventsByHost: hostedEvents.concat([data.hosts_HostEvent]) } }) + this.props.handleNewEvent(data.hosts_HostEvent) } } > @@ -45,7 +46,6 @@ class New extends React.Component { startDatetime: startDatetime.valueOf() / 1000, finishDatetime: startDatetime.valueOf() / 1000 } }) - this.props.handleNewEventClose() }} > { - this.setState({ isNewEventOpen: true }) - }; - - handleNewEventClose = () => { - this.setState({ isNewEventOpen: false }) + handleNewEvent = (event) => { + this.props.history.push(`/${event.designator}`) }; render () { @@ -58,12 +54,12 @@ class HostedEvent extends React.Component { { this.setState({ isNewEventOpen: false }) }} aria-labelledby='addEvent-dialog-title' > @@ -73,7 +69,7 @@ class HostedEvent extends React.Component { Here you will add just the minimal information, will be settable in the edit page of your event. - + From 2387af92762aa0abd55d1d7fd86a0d66ec8e4349 Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 05:55:50 +0100 Subject: [PATCH 03/19] Adding a query to get a single Event using a designator --- server/src/schema/queries/Event.js | 35 ++++++++++++++++++++++++++++++ server/src/schema/queries/index.js | 2 ++ 2 files changed, 37 insertions(+) create mode 100644 server/src/schema/queries/Event.js diff --git a/server/src/schema/queries/Event.js b/server/src/schema/queries/Event.js new file mode 100644 index 000000000..64eee0855 --- /dev/null +++ b/server/src/schema/queries/Event.js @@ -0,0 +1,35 @@ +import { + GraphQLNonNull, + GraphQLID +} from 'graphql' +import { DatabaseError } from '../../errors' +import { EventType } from '../types' +import { Event } from '../../models' + +const args = { + designator: { type: new GraphQLNonNull(GraphQLID) } +} + +const resolve = (parent, { designator }, context) => { + return new Promise((resolve, reject) => { + Event.findOne({ designator }).exec((err, event) => { + if (err) { + reject(err) + } else if (!event) { + reject(new DatabaseError('None of the events respond to that designator')) + } else { + resolve(event) + } + }) + }) +} + +const query = { + event: { + type: EventType, + args, + resolve + } +} + +export default query diff --git a/server/src/schema/queries/index.js b/server/src/schema/queries/index.js index 71aef39df..5d67c43bb 100644 --- a/server/src/schema/queries/index.js +++ b/server/src/schema/queries/index.js @@ -2,6 +2,7 @@ import { GraphQLObjectType } from 'graphql' +import EventQuery from './Event' import EventsQuery from './Events' import EventsByHostQuery from './EventsByHost' import EventsByTeamQuery from './EventsByTeam' @@ -11,6 +12,7 @@ import PlottersQuery from './Plotters' const RootQuery = new GraphQLObjectType({ name: 'RootQueryType', fields: Object.assign( + EventQuery, EventsQuery, EventsByHostQuery, EventsByTeamQuery, From 4420b63db00480007ba9bb624046197ac1860efb Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 06:16:33 +0100 Subject: [PATCH 04/19] a bit of renaming for better paths --- client/src/Components/{HostedEvent => HostedEvents}/Event.js | 2 +- client/src/Components/{HostedEvent => HostedEvents}/New.js | 0 .../src/Components/{HostedEvent => HostedEvents}/graphql.js | 0 client/src/Components/{HostedEvent => HostedEvents}/index.js | 2 +- client/src/Components/{HostedEvent => HostedEvents}/styles.js | 0 client/src/index.js | 4 ++-- 6 files changed, 4 insertions(+), 4 deletions(-) rename client/src/Components/{HostedEvent => HostedEvents}/Event.js (97%) rename client/src/Components/{HostedEvent => HostedEvents}/New.js (100%) rename client/src/Components/{HostedEvent => HostedEvents}/graphql.js (100%) rename client/src/Components/{HostedEvent => HostedEvents}/index.js (97%) rename client/src/Components/{HostedEvent => HostedEvents}/styles.js (100%) diff --git a/client/src/Components/HostedEvent/Event.js b/client/src/Components/HostedEvents/Event.js similarity index 97% rename from client/src/Components/HostedEvent/Event.js rename to client/src/Components/HostedEvents/Event.js index 2119f2075..383efc3c5 100644 --- a/client/src/Components/HostedEvent/Event.js +++ b/client/src/Components/HostedEvents/Event.js @@ -73,7 +73,7 @@ class Event extends React.Component { color='primary' size='small' component={Link} - to={'/hosted-events/' + designator} + to={`/event/${designator}/edit`} > Edit diff --git a/client/src/Components/HostedEvent/New.js b/client/src/Components/HostedEvents/New.js similarity index 100% rename from client/src/Components/HostedEvent/New.js rename to client/src/Components/HostedEvents/New.js diff --git a/client/src/Components/HostedEvent/graphql.js b/client/src/Components/HostedEvents/graphql.js similarity index 100% rename from client/src/Components/HostedEvent/graphql.js rename to client/src/Components/HostedEvents/graphql.js diff --git a/client/src/Components/HostedEvent/index.js b/client/src/Components/HostedEvents/index.js similarity index 97% rename from client/src/Components/HostedEvent/index.js rename to client/src/Components/HostedEvents/index.js index dcc1c3ae4..08ef6829f 100644 --- a/client/src/Components/HostedEvent/index.js +++ b/client/src/Components/HostedEvents/index.js @@ -25,7 +25,7 @@ class HostedEvent extends React.Component { } handleNewEvent = (event) => { - this.props.history.push(`/${event.designator}`) + this.props.history.push(`/event/${event.designator}/edit`) }; render () { diff --git a/client/src/Components/HostedEvent/styles.js b/client/src/Components/HostedEvents/styles.js similarity index 100% rename from client/src/Components/HostedEvent/styles.js rename to client/src/Components/HostedEvents/styles.js diff --git a/client/src/index.js b/client/src/index.js index a0212d5fd..c8ab94cbd 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -8,7 +8,7 @@ import { getItem } from './utils/local-storage' import TopBar from './Components/TopBar' import Search from './Components/Search' -import HostedEvent from './Components/HostedEvent' +import HostedEvents from './Components/HostedEvents' class App extends Component { constructor (props) { @@ -41,7 +41,7 @@ class App extends Component { {loggedIn} - + From 3189e5b27f5b4641a0adaa1c81d4f4418bdb5e18 Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 06:25:29 +0100 Subject: [PATCH 05/19] Setting up a query to get information for edit page --- client/src/Components/Event/Edit/index.js | 58 ++++++++++++++++++++++ client/src/Components/Event/Edit/styles.js | 4 ++ client/src/index.js | 2 + 3 files changed, 64 insertions(+) create mode 100644 client/src/Components/Event/Edit/index.js create mode 100644 client/src/Components/Event/Edit/styles.js diff --git a/client/src/Components/Event/Edit/index.js b/client/src/Components/Event/Edit/index.js new file mode 100644 index 000000000..0bc8a1cf6 --- /dev/null +++ b/client/src/Components/Event/Edit/index.js @@ -0,0 +1,58 @@ +import React from 'react' +import gql from 'graphql-tag' +import { Query } from 'react-apollo' + +import Typography from '@material-ui/core/Typography' +import { withStyles } from '@material-ui/core/styles' + +import styles from './styles' + +const HOSTS_EVENT = gql` + query Hosts_Event($designator: ID!){ + hosts_Event(designator: $designator) { + name + designator + startDatetime + finishDatetime + host { + alias + firstName + lastName + } + description + } + } +` + +class Edit extends React.Component { + render () { + return ( + + + Enroll in an competition {this.props.match.params.slug} + + + {({ loading, error, data }) => { + if (loading) return 'Loading...' + if (error) return `Error! ${error.message}` + return ( +

+ {data.hosts_Event.description} +

+ ) + }} + + + ) + } +} + +export default withStyles(styles)(Edit) diff --git a/client/src/Components/Event/Edit/styles.js b/client/src/Components/Event/Edit/styles.js new file mode 100644 index 000000000..175dc52e5 --- /dev/null +++ b/client/src/Components/Event/Edit/styles.js @@ -0,0 +1,4 @@ +const styles = theme => ({ +}) + +export default styles diff --git a/client/src/index.js b/client/src/index.js index c8ab94cbd..a03f99fe7 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -9,6 +9,7 @@ import { getItem } from './utils/local-storage' import TopBar from './Components/TopBar' import Search from './Components/Search' import HostedEvents from './Components/HostedEvents' +import EditEvent from './Components/Event/Edit' class App extends Component { constructor (props) { @@ -41,6 +42,7 @@ class App extends Component { {loggedIn} + From 70d1f20eced11f52fda85f8fcbc10f7c70af071c Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 07:54:20 +0100 Subject: [PATCH 06/19] Refactoring graphQL with fragments --- client/src/Components/Event/Edit/index.js | 20 +----- .../Calls/hostedEvents.js} | 28 ++++----- client/src/Components/GraphQL/Calls/index.js | 7 +++ .../src/Components/GraphQL/Calls/showEvent.js | 15 +++++ .../src/Components/GraphQL/Fragments/event.js | 61 +++++++++++++++++++ .../src/Components/GraphQL/Fragments/index.js | 9 +++ client/src/Components/HostedEvents/New.js | 8 +-- client/src/Components/HostedEvents/index.js | 5 +- 8 files changed, 112 insertions(+), 41 deletions(-) rename client/src/Components/{HostedEvents/graphql.js => GraphQL/Calls/hostedEvents.js} (56%) create mode 100644 client/src/Components/GraphQL/Calls/index.js create mode 100644 client/src/Components/GraphQL/Calls/showEvent.js create mode 100644 client/src/Components/GraphQL/Fragments/event.js create mode 100644 client/src/Components/GraphQL/Fragments/index.js diff --git a/client/src/Components/Event/Edit/index.js b/client/src/Components/Event/Edit/index.js index 0bc8a1cf6..d705b7e60 100644 --- a/client/src/Components/Event/Edit/index.js +++ b/client/src/Components/Event/Edit/index.js @@ -1,5 +1,4 @@ import React from 'react' -import gql from 'graphql-tag' import { Query } from 'react-apollo' import Typography from '@material-ui/core/Typography' @@ -7,22 +6,7 @@ import { withStyles } from '@material-ui/core/styles' import styles from './styles' -const HOSTS_EVENT = gql` - query Hosts_Event($designator: ID!){ - hosts_Event(designator: $designator) { - name - designator - startDatetime - finishDatetime - host { - alias - firstName - lastName - } - description - } - } -` +import { showEventCalls } from '../../GraphQL/Calls/index' class Edit extends React.Component { render () { @@ -37,7 +21,7 @@ class Edit extends React.Component { Enroll in an competition {this.props.match.params.slug} {({ loading, error, data }) => { diff --git a/client/src/Components/HostedEvents/graphql.js b/client/src/Components/GraphQL/Calls/hostedEvents.js similarity index 56% rename from client/src/Components/HostedEvents/graphql.js rename to client/src/Components/GraphQL/Calls/hostedEvents.js index ac617d6a3..850290690 100644 --- a/client/src/Components/HostedEvents/graphql.js +++ b/client/src/Components/GraphQL/Calls/hostedEvents.js @@ -1,29 +1,23 @@ import gql from 'graphql-tag' +import { eventMinimalInfo } from '../Fragments' -const fragments = ` - name - designator - startDatetime - finishDatetime - host { - alias - firstName - lastName - } - description -` - -export const HOSTS_HOSTEVENT = gql` +const HOSTS_HOSTEVENT = gql` mutation Hosts_HostEvent($name: String!, $description: String!, $startDatetime: Int!, $finishDatetime: Int!) { hosts_HostEvent(name: $name, description: $description, startDatetime: $startDatetime, finishDatetime: $finishDatetime) { - ${fragments} + ...EventMinimalInfo } } + ${eventMinimalInfo} ` -export const HOSTS_EVENTSBYHOST = gql` +const HOSTS_EVENTSBYHOST = gql` query Hosts_EventsByHost{ hosts_EventsByHost { - ${fragments} + ...EventMinimalInfo } } + ${eventMinimalInfo} ` +export default { + HOSTS_HOSTEVENT, + HOSTS_EVENTSBYHOST +} diff --git a/client/src/Components/GraphQL/Calls/index.js b/client/src/Components/GraphQL/Calls/index.js new file mode 100644 index 000000000..953d0edfb --- /dev/null +++ b/client/src/Components/GraphQL/Calls/index.js @@ -0,0 +1,7 @@ +import hostedEventsCalls from './hostedEvents' +import showEventCalls from './showEvent' + +export { + hostedEventsCalls, + showEventCalls +} diff --git a/client/src/Components/GraphQL/Calls/showEvent.js b/client/src/Components/GraphQL/Calls/showEvent.js new file mode 100644 index 000000000..1f06bf226 --- /dev/null +++ b/client/src/Components/GraphQL/Calls/showEvent.js @@ -0,0 +1,15 @@ +import gql from 'graphql-tag' +import { eventFullInfo } from '../Fragments' + +const HOSTS_EVENT = gql` + query Hosts_Event($designator: ID!) { + hosts_Event(designator: $designator) { + ...EventFullInfo + } + } + ${eventFullInfo} +` + +export default { + HOSTS_EVENT +} diff --git a/client/src/Components/GraphQL/Fragments/event.js b/client/src/Components/GraphQL/Fragments/event.js new file mode 100644 index 000000000..3b5f3c3ac --- /dev/null +++ b/client/src/Components/GraphQL/Fragments/event.js @@ -0,0 +1,61 @@ +import gql from 'graphql-tag' + +export const eventMinimalInfo = gql` + fragment EventMinimalInfo on hosts_Event { + name + designator + startDatetime + finishDatetime + host { + alias + firstName + lastName + } + description + } +` + +export const eventFullInfo = gql` + fragment EventFullInfo on hosts_Event { + designator + name + host{ + alias + firstName + lastName + } + description + startDatetime + finishDatetime + formula{ + name + } + plotter{ + name + host + repo + moduleName + } + rules{ + position + title + description + } + participants{ + team{ + name + } + botId + releaseId + } + prizes{ + rank + amount + additional{ + condition + amount + asset + } + } + } +` diff --git a/client/src/Components/GraphQL/Fragments/index.js b/client/src/Components/GraphQL/Fragments/index.js new file mode 100644 index 000000000..93d8f9971 --- /dev/null +++ b/client/src/Components/GraphQL/Fragments/index.js @@ -0,0 +1,9 @@ +import { + eventMinimalInfo, + eventFullInfo +} from './event' + +export { + eventMinimalInfo, + eventFullInfo +} diff --git a/client/src/Components/HostedEvents/New.js b/client/src/Components/HostedEvents/New.js index 9c8ceec45..1a574aa50 100644 --- a/client/src/Components/HostedEvents/New.js +++ b/client/src/Components/HostedEvents/New.js @@ -1,6 +1,6 @@ import React from 'react' import { Mutation } from 'react-apollo' -import { HOSTS_HOSTEVENT, HOSTS_EVENTSBYHOST } from './graphql' +import { hostedEventsCalls } from '../GraphQL/Calls/index' import { DateTime } from 'luxon' import { @@ -24,11 +24,11 @@ class New extends React.Component { render () { const { name, description, startDatetime, finishDatetime } = this.state return ( - { - const { hosts_EventsByHost: hostedEvents } = store.readQuery({ query: HOSTS_EVENTSBYHOST }) + const { hosts_EventsByHost: hostedEvents } = store.readQuery({ query: hostedEventsCalls.HOSTS_EVENTSBYHOST }) store.writeQuery({ - query: HOSTS_EVENTSBYHOST, + query: hostedEventsCalls.HOSTS_EVENTSBYHOST, data: { hosts_EventsByHost: hostedEvents.concat([data.hosts_HostEvent]) } }) this.props.handleNewEvent(data.hosts_HostEvent) diff --git a/client/src/Components/HostedEvents/index.js b/client/src/Components/HostedEvents/index.js index 08ef6829f..acb777684 100644 --- a/client/src/Components/HostedEvents/index.js +++ b/client/src/Components/HostedEvents/index.js @@ -1,6 +1,5 @@ import React from 'react' import { Query } from 'react-apollo' -import { HOSTS_EVENTSBYHOST } from './graphql' import { Button, @@ -13,6 +12,8 @@ import { import { withStyles } from '@material-ui/core/styles' import styles from './styles' +import { hostedEventsCalls } from '../GraphQL/Calls/index' + import New from './New' import Event from './Event' @@ -33,7 +34,7 @@ class HostedEvent extends React.Component { return ( {({ loading, error, data }) => { if (loading) return 'Loading...' From 2e4f3c253a2ae5404f02379624520902ff64e396 Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 07:55:54 +0100 Subject: [PATCH 07/19] Moving the GraphQL folder one directory higher --- client/src/Components/Event/Edit/index.js | 2 +- client/src/Components/HostedEvents/New.js | 2 +- client/src/Components/HostedEvents/index.js | 2 +- client/src/{Components => }/GraphQL/Calls/hostedEvents.js | 0 client/src/{Components => }/GraphQL/Calls/index.js | 0 client/src/{Components => }/GraphQL/Calls/showEvent.js | 0 client/src/{Components => }/GraphQL/Fragments/event.js | 0 client/src/{Components => }/GraphQL/Fragments/index.js | 0 8 files changed, 3 insertions(+), 3 deletions(-) rename client/src/{Components => }/GraphQL/Calls/hostedEvents.js (100%) rename client/src/{Components => }/GraphQL/Calls/index.js (100%) rename client/src/{Components => }/GraphQL/Calls/showEvent.js (100%) rename client/src/{Components => }/GraphQL/Fragments/event.js (100%) rename client/src/{Components => }/GraphQL/Fragments/index.js (100%) diff --git a/client/src/Components/Event/Edit/index.js b/client/src/Components/Event/Edit/index.js index d705b7e60..803c9e2cc 100644 --- a/client/src/Components/Event/Edit/index.js +++ b/client/src/Components/Event/Edit/index.js @@ -6,7 +6,7 @@ import { withStyles } from '@material-ui/core/styles' import styles from './styles' -import { showEventCalls } from '../../GraphQL/Calls/index' +import { showEventCalls } from '../../../GraphQL/Calls/index' class Edit extends React.Component { render () { diff --git a/client/src/Components/HostedEvents/New.js b/client/src/Components/HostedEvents/New.js index 1a574aa50..f5567122d 100644 --- a/client/src/Components/HostedEvents/New.js +++ b/client/src/Components/HostedEvents/New.js @@ -1,6 +1,6 @@ import React from 'react' import { Mutation } from 'react-apollo' -import { hostedEventsCalls } from '../GraphQL/Calls/index' +import { hostedEventsCalls } from '../../GraphQL/Calls/index' import { DateTime } from 'luxon' import { diff --git a/client/src/Components/HostedEvents/index.js b/client/src/Components/HostedEvents/index.js index acb777684..ad9a37244 100644 --- a/client/src/Components/HostedEvents/index.js +++ b/client/src/Components/HostedEvents/index.js @@ -12,7 +12,7 @@ import { import { withStyles } from '@material-ui/core/styles' import styles from './styles' -import { hostedEventsCalls } from '../GraphQL/Calls/index' +import { hostedEventsCalls } from '../../GraphQL/Calls/index' import New from './New' import Event from './Event' diff --git a/client/src/Components/GraphQL/Calls/hostedEvents.js b/client/src/GraphQL/Calls/hostedEvents.js similarity index 100% rename from client/src/Components/GraphQL/Calls/hostedEvents.js rename to client/src/GraphQL/Calls/hostedEvents.js diff --git a/client/src/Components/GraphQL/Calls/index.js b/client/src/GraphQL/Calls/index.js similarity index 100% rename from client/src/Components/GraphQL/Calls/index.js rename to client/src/GraphQL/Calls/index.js diff --git a/client/src/Components/GraphQL/Calls/showEvent.js b/client/src/GraphQL/Calls/showEvent.js similarity index 100% rename from client/src/Components/GraphQL/Calls/showEvent.js rename to client/src/GraphQL/Calls/showEvent.js diff --git a/client/src/Components/GraphQL/Fragments/event.js b/client/src/GraphQL/Fragments/event.js similarity index 100% rename from client/src/Components/GraphQL/Fragments/event.js rename to client/src/GraphQL/Fragments/event.js diff --git a/client/src/Components/GraphQL/Fragments/index.js b/client/src/GraphQL/Fragments/index.js similarity index 100% rename from client/src/Components/GraphQL/Fragments/index.js rename to client/src/GraphQL/Fragments/index.js From 323835834c93245e326f4158ec0183a37a6ecce9 Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 08:14:05 +0100 Subject: [PATCH 08/19] Adding a path and components for a show page --- client/src/Components/Event/Show/index.js | 42 ++++++++++++++++++++++ client/src/Components/Event/Show/styles.js | 4 +++ client/src/index.js | 1 + 3 files changed, 47 insertions(+) create mode 100644 client/src/Components/Event/Show/index.js create mode 100644 client/src/Components/Event/Show/styles.js diff --git a/client/src/Components/Event/Show/index.js b/client/src/Components/Event/Show/index.js new file mode 100644 index 000000000..d0e89c9d6 --- /dev/null +++ b/client/src/Components/Event/Show/index.js @@ -0,0 +1,42 @@ +import React from 'react' +import { Query } from 'react-apollo' + +import Typography from '@material-ui/core/Typography' +import { withStyles } from '@material-ui/core/styles' + +import styles from './styles' + +import { showEventCalls } from '../../../GraphQL/Calls/index' + +class Show extends React.Component { + render () { + return ( + + + Enroll in an competition {this.props.match.params.slug} + + + {({ loading, error, data }) => { + if (loading) return 'Loading...' + if (error) return `Error! ${error.message}` + return ( +

+ {data.hosts_Event.description} +

+ ) + }} + + + ) + } +} + +export default withStyles(styles)(Show) diff --git a/client/src/Components/Event/Show/styles.js b/client/src/Components/Event/Show/styles.js new file mode 100644 index 000000000..175dc52e5 --- /dev/null +++ b/client/src/Components/Event/Show/styles.js @@ -0,0 +1,4 @@ +const styles = theme => ({ +}) + +export default styles diff --git a/client/src/index.js b/client/src/index.js index a03f99fe7..dcaad35f6 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -43,6 +43,7 @@ class App extends Component { + From 7c43c402e2294d042a22349ad40c9ace7d9f234c Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 08:19:44 +0100 Subject: [PATCH 09/19] Adding a route and component to list your competitions --- client/src/Components/Events/index.js | 9 +++++++++ client/src/index.js | 2 ++ 2 files changed, 11 insertions(+) create mode 100644 client/src/Components/Events/index.js diff --git a/client/src/Components/Events/index.js b/client/src/Components/Events/index.js new file mode 100644 index 000000000..96d83a55d --- /dev/null +++ b/client/src/Components/Events/index.js @@ -0,0 +1,9 @@ +import React from 'react' + +class Index extends React.Component { + render () { + return

Here will come a list the competitions you applied for

+ } +} + +export default Index diff --git a/client/src/index.js b/client/src/index.js index dcaad35f6..245f4fa01 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -8,6 +8,7 @@ import { getItem } from './utils/local-storage' import TopBar from './Components/TopBar' import Search from './Components/Search' +import Events from './Components/Events' import HostedEvents from './Components/HostedEvents' import EditEvent from './Components/Event/Edit' @@ -42,6 +43,7 @@ class App extends Component { {loggedIn} + From b3944f5e22ea291de4bdab37d42f1fffc9cabab8 Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 12:54:16 +0100 Subject: [PATCH 10/19] Making a minimal list page --- client/src/Components/HostedEvents/Event.js | 2 +- client/src/Components/Search/Competition.js | 124 -------------------- client/src/Components/Search/Event.js | 89 ++++++++++++++ client/src/Components/Search/index.js | 35 ++---- client/src/GraphQL/Calls/index.js | 2 + client/src/GraphQL/Calls/listEvents.js | 14 +++ 6 files changed, 114 insertions(+), 152 deletions(-) delete mode 100644 client/src/Components/Search/Competition.js create mode 100644 client/src/Components/Search/Event.js create mode 100644 client/src/GraphQL/Calls/listEvents.js diff --git a/client/src/Components/HostedEvents/Event.js b/client/src/Components/HostedEvents/Event.js index 383efc3c5..e222c7731 100644 --- a/client/src/Components/HostedEvents/Event.js +++ b/client/src/Components/HostedEvents/Event.js @@ -83,7 +83,7 @@ class Event extends React.Component { color='primary' size='small' component={Link} - to={'/events/' + designator} + to={'/event/' + designator} > Show diff --git a/client/src/Components/Search/Competition.js b/client/src/Components/Search/Competition.js deleted file mode 100644 index bccb5df88..000000000 --- a/client/src/Components/Search/Competition.js +++ /dev/null @@ -1,124 +0,0 @@ -import React from 'react' - -import { toLocalTime } from '../../utils' - -import { - Grid, Paper, Typography, Button, - Dialog, DialogContent, DialogContentText, DialogTitle -} from '@material-ui/core' -import { withStyles } from '@material-ui/core/styles' - -const styles = theme => ({ - root: { - flexGrow: 1, - padding: 20, - margin: 10 - }, - image: { - width: 128, - height: '100%', - cursor: 'default' - }, - img: { - margin: 'auto', - display: 'block', - maxWidth: '100%', - maxHeight: '100%' - - }, - buttonList: { - margin: theme.spacing.unit, - float: 'right' - }, - buttonGrid: { - marginTop: -20 - } - -}) - -class Competition extends React.Component { - render () { - const classes = this.props.classes - const { displayName, - startDatetime, - finishDatetime, - host, - description, - formula, - prizes - } = this.props.competition - const firstPrice = prizes.find(prize => { - return prize.position === 1 - }) - return ( - - - - { displayName } - From : {toLocalTime(startDatetime)} - To : {toLocalTime(finishDatetime)} - - - Hosted by: { host } - Formula: { formula } - First prize: { firstPrice ? firstPrice.algoPrize + ' ALGOS' : 'none' } - - - - - Description : - { description } - - - - - - - - - Edit Key - - - - You will need to complete this form with the information from - the exchange. - - -

some stuff

- - - - - - - Audit Log History - - -

some stuff

- - - - - - - - ) - } -} -export default withStyles(styles)(Competition) diff --git a/client/src/Components/Search/Event.js b/client/src/Components/Search/Event.js new file mode 100644 index 000000000..756bac3d8 --- /dev/null +++ b/client/src/Components/Search/Event.js @@ -0,0 +1,89 @@ +import React from 'react' +import { Link } from 'react-router-dom' + +import { + Grid, Paper, + Typography, + Button +} from '@material-ui/core' +import { withStyles } from '@material-ui/core/styles' + +const styles = theme => ({ + root: { + flexGrow: 1, + padding: 20, + margin: 10 + }, + image: { + width: 128, + height: '100%', + cursor: 'default' + }, + img: { + margin: 'auto', + display: 'block', + maxWidth: '100%', + maxHeight: '100%' + + }, + buttonList: { + margin: theme.spacing.unit, + float: 'right' + }, + buttonGrid: { + marginTop: -20 + } + +}) + +class Event extends React.Component { + render () { + const classes = this.props.classes + const { + name, + designator, + startDatetime, + finishDatetime, + host, + description + } = this.props.event + return ( + + + + {name} + From : {startDatetime} + To : {finishDatetime} + + + Hosted by: {host.alias} ({host.lastName} {host.firstName}) + Formula: + First prize: + + + + + Description : + {description} + + + + + + + + + ) + } +} + +export default withStyles(styles)(Event) diff --git a/client/src/Components/Search/index.js b/client/src/Components/Search/index.js index 7c46f096e..a459ca9d4 100644 --- a/client/src/Components/Search/index.js +++ b/client/src/Components/Search/index.js @@ -1,33 +1,14 @@ import React from 'react' -import gql from 'graphql-tag' import { Query } from 'react-apollo' -import Typography from '@material-ui/core/Typography' +import { Typography } from '@material-ui/core' + import { withStyles } from '@material-ui/core/styles' - -import Competition from './Competition' - import styles from './styles' -const HOST_COMPETITIONS = gql` - query Hosts_Competitions{ - hosts_Competitions { - displayName - host - startDatetime - finishDatetime - description - formula - participants { - devTeam - } - prizes { - position - algoPrize - } - } - } -` +import { listEventsCalls } from '../../GraphQL/Calls/index' + +import Event from './Event' class Search extends React.Component { render () { @@ -42,14 +23,14 @@ class Search extends React.Component { Enroll in an competition {({ loading, error, data }) => { if (loading) return 'Loading...' if (error) return `Error! ${error.message}` - const list = data.hosts_Competitions.map((competition, index) => { + const list = data.hosts_Events.map((event, index) => { return ( - + ) }) return ( diff --git a/client/src/GraphQL/Calls/index.js b/client/src/GraphQL/Calls/index.js index 953d0edfb..d3fe57c6d 100644 --- a/client/src/GraphQL/Calls/index.js +++ b/client/src/GraphQL/Calls/index.js @@ -1,7 +1,9 @@ import hostedEventsCalls from './hostedEvents' +import listEventsCalls from './listEvents' import showEventCalls from './showEvent' export { hostedEventsCalls, + listEventsCalls, showEventCalls } diff --git a/client/src/GraphQL/Calls/listEvents.js b/client/src/GraphQL/Calls/listEvents.js new file mode 100644 index 000000000..39084f491 --- /dev/null +++ b/client/src/GraphQL/Calls/listEvents.js @@ -0,0 +1,14 @@ +import gql from 'graphql-tag' +import { eventMinimalInfo } from '../Fragments' + +const HOSTS_EVENTS = gql` + query Hosts_Events{ + hosts_Events { + ...EventMinimalInfo + } + } + ${eventMinimalInfo} +` +export default { + HOSTS_EVENTS +} From 9c39f278f5244603b588c2afcf2158e8ac913dd1 Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 12:55:05 +0100 Subject: [PATCH 11/19] Removing useless style --- client/src/Components/HostedEvents/styles.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/client/src/Components/HostedEvents/styles.js b/client/src/Components/HostedEvents/styles.js index 382437a4b..175dc52e5 100644 --- a/client/src/Components/HostedEvents/styles.js +++ b/client/src/Components/HostedEvents/styles.js @@ -1,10 +1,4 @@ - const styles = theme => ({ - centered: { - display: 'block', - marginLeft: 'auto', - marginRight: 'auto' - } }) export default styles From 943b67a4f95974ab5bb59d667c98270dfcfdfb40 Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 13:03:29 +0100 Subject: [PATCH 12/19] Adding margins to card styles --- client/src/Components/HostedEvents/Event.js | 31 ++------------------ client/src/Components/HostedEvents/styles.js | 15 ++++++++++ client/src/Components/Search/Event.js | 31 ++------------------ client/src/Components/Search/styles.js | 15 ++++++++++ 4 files changed, 34 insertions(+), 58 deletions(-) diff --git a/client/src/Components/HostedEvents/Event.js b/client/src/Components/HostedEvents/Event.js index e222c7731..24833190c 100644 --- a/client/src/Components/HostedEvents/Event.js +++ b/client/src/Components/HostedEvents/Event.js @@ -7,34 +7,7 @@ import { Button } from '@material-ui/core' import { withStyles } from '@material-ui/core/styles' - -const styles = theme => ({ - root: { - flexGrow: 1, - padding: 20, - margin: 10 - }, - image: { - width: 128, - height: '100%', - cursor: 'default' - }, - img: { - margin: 'auto', - display: 'block', - maxWidth: '100%', - maxHeight: '100%' - - }, - buttonList: { - margin: theme.spacing.unit, - float: 'right' - }, - buttonGrid: { - marginTop: -20 - } - -}) +import styles from './styles' class Event extends React.Component { render () { @@ -48,7 +21,7 @@ class Event extends React.Component { description } = this.props.event return ( - + {name} diff --git a/client/src/Components/HostedEvents/styles.js b/client/src/Components/HostedEvents/styles.js index 175dc52e5..90baf7f60 100644 --- a/client/src/Components/HostedEvents/styles.js +++ b/client/src/Components/HostedEvents/styles.js @@ -1,4 +1,19 @@ const styles = theme => ({ + card: { + flexGrow: 1, + padding: 20, + marginTop: 20, + marginBottom: 20, + marginLeft: 400, + marginRight: 400 + }, + buttonList: { + margin: theme.spacing.unit, + float: 'right' + }, + buttonGrid: { + marginTop: -20 + } }) export default styles diff --git a/client/src/Components/Search/Event.js b/client/src/Components/Search/Event.js index 756bac3d8..5b88cf195 100644 --- a/client/src/Components/Search/Event.js +++ b/client/src/Components/Search/Event.js @@ -7,34 +7,7 @@ import { Button } from '@material-ui/core' import { withStyles } from '@material-ui/core/styles' - -const styles = theme => ({ - root: { - flexGrow: 1, - padding: 20, - margin: 10 - }, - image: { - width: 128, - height: '100%', - cursor: 'default' - }, - img: { - margin: 'auto', - display: 'block', - maxWidth: '100%', - maxHeight: '100%' - - }, - buttonList: { - margin: theme.spacing.unit, - float: 'right' - }, - buttonGrid: { - marginTop: -20 - } - -}) +import styles from './styles' class Event extends React.Component { render () { @@ -48,7 +21,7 @@ class Event extends React.Component { description } = this.props.event return ( - + {name} diff --git a/client/src/Components/Search/styles.js b/client/src/Components/Search/styles.js index 175dc52e5..90baf7f60 100644 --- a/client/src/Components/Search/styles.js +++ b/client/src/Components/Search/styles.js @@ -1,4 +1,19 @@ const styles = theme => ({ + card: { + flexGrow: 1, + padding: 20, + marginTop: 20, + marginBottom: 20, + marginLeft: 400, + marginRight: 400 + }, + buttonList: { + margin: theme.spacing.unit, + float: 'right' + }, + buttonGrid: { + marginTop: -20 + } }) export default styles From 520a68ad49059fd9717f47368f396340ce065a10 Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 13:09:03 +0100 Subject: [PATCH 13/19] Styling the "host new event" button --- client/src/Components/HostedEvents/index.js | 43 ++++++++++---------- client/src/Components/HostedEvents/styles.js | 7 ++++ 2 files changed, 28 insertions(+), 22 deletions(-) diff --git a/client/src/Components/HostedEvents/index.js b/client/src/Components/HostedEvents/index.js index ad9a37244..ff6b6e600 100644 --- a/client/src/Components/HostedEvents/index.js +++ b/client/src/Components/HostedEvents/index.js @@ -33,6 +33,12 @@ class HostedEvent extends React.Component { const { classes } = this.props return ( + + @@ -52,28 +58,21 @@ class HostedEvent extends React.Component { }} - - - { this.setState({ isNewEventOpen: false }) }} - aria-labelledby='addEvent-dialog-title' - > - - Host an event - - - - Here you will add just the minimal information, will be settable in the edit page of your event. - - - - - + { this.setState({ isNewEventOpen: false }) }} + aria-labelledby='addEvent-dialog-title' + > + + Host an event + + + + Here you will add just the minimal information, will be settable in the edit page of your event. + + + + ) } diff --git a/client/src/Components/HostedEvents/styles.js b/client/src/Components/HostedEvents/styles.js index 90baf7f60..e867e8174 100644 --- a/client/src/Components/HostedEvents/styles.js +++ b/client/src/Components/HostedEvents/styles.js @@ -13,6 +13,13 @@ const styles = theme => ({ }, buttonGrid: { marginTop: -20 + }, + addButton: { + display: 'block', + padding: 20, + marginTop: 20, + marginRight: 20, + marginLeft: 'auto' } }) From 50c2a47034fe74b262ad3b5ebaf4d83449ed54cc Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 13:15:38 +0100 Subject: [PATCH 14/19] correcting date format --- client/src/Components/HostedEvents/Event.js | 6 ++++-- client/src/Components/Search/Event.js | 6 ++++-- client/src/utils/index.js | 6 +++++- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/client/src/Components/HostedEvents/Event.js b/client/src/Components/HostedEvents/Event.js index 24833190c..37599da1b 100644 --- a/client/src/Components/HostedEvents/Event.js +++ b/client/src/Components/HostedEvents/Event.js @@ -9,6 +9,8 @@ import { import { withStyles } from '@material-ui/core/styles' import styles from './styles' +import { toLocalTime } from '../../utils' + class Event extends React.Component { render () { const classes = this.props.classes @@ -25,8 +27,8 @@ class Event extends React.Component { {name} - From : {startDatetime} - To : {finishDatetime} + From : {toLocalTime(startDatetime)} + To : {toLocalTime(finishDatetime)} Hosted by: {host.alias} ({host.lastName} {host.firstName}) diff --git a/client/src/Components/Search/Event.js b/client/src/Components/Search/Event.js index 5b88cf195..bce6d2433 100644 --- a/client/src/Components/Search/Event.js +++ b/client/src/Components/Search/Event.js @@ -9,6 +9,8 @@ import { import { withStyles } from '@material-ui/core/styles' import styles from './styles' +import { toLocalTime } from '../../utils' + class Event extends React.Component { render () { const classes = this.props.classes @@ -25,8 +27,8 @@ class Event extends React.Component { {name} - From : {startDatetime} - To : {finishDatetime} + From : {toLocalTime(startDatetime)} + To : {toLocalTime(finishDatetime)} Hosted by: {host.alias} ({host.lastName} {host.firstName}) diff --git a/client/src/utils/index.js b/client/src/utils/index.js index 4aee66165..36ed3a467 100644 --- a/client/src/utils/index.js +++ b/client/src/utils/index.js @@ -2,5 +2,9 @@ export const toLocalTime = (epoch) => { let localDate = new Date(0) localDate.setUTCSeconds(epoch) var options = { year: 'numeric', month: 'long', day: '2-digit' } - return localDate.toLocaleDateString(options) + ' ' + localDate.toLocaleTimeString('en-US') + return ( + localDate.toLocaleDateString(options) + + ' at ' + + localDate.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) + ) } From 85415c45c20f44a7155ae6b2df8666ff094628d6 Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 13:25:25 +0100 Subject: [PATCH 15/19] Adding a bit of margin before the title --- client/src/Components/Search/index.js | 2 ++ client/src/Components/Search/styles.js | 3 +++ 2 files changed, 5 insertions(+) diff --git a/client/src/Components/Search/index.js b/client/src/Components/Search/index.js index a459ca9d4..109fb75a6 100644 --- a/client/src/Components/Search/index.js +++ b/client/src/Components/Search/index.js @@ -12,9 +12,11 @@ import Event from './Event' class Search extends React.Component { render () { + const classes = this.props.classes return ( ({ }, buttonGrid: { marginTop: -20 + }, + title: { + marginTop: 20 } }) From e54ffaa87aae29003d321b255641469b62c0f4f1 Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 14:34:00 +0100 Subject: [PATCH 16/19] Adding a minimal tab system (dirty, we have to centralize it) --- client/src/Components/Search/index.js | 62 ++++++++++++++++++++++++++ client/src/Components/Search/styles.js | 11 +++++ 2 files changed, 73 insertions(+) diff --git a/client/src/Components/Search/index.js b/client/src/Components/Search/index.js index 109fb75a6..b4fcffc86 100644 --- a/client/src/Components/Search/index.js +++ b/client/src/Components/Search/index.js @@ -3,6 +3,14 @@ import { Query } from 'react-apollo' import { Typography } from '@material-ui/core' +import AppBar from '@material-ui/core/AppBar' +import Tabs from '@material-ui/core/Tabs' +import Tab from '@material-ui/core/Tab' +import ProfileSheetIcon from '@material-ui/icons/Create' +import ProfileImagesIcon from '@material-ui/icons/Wallpaper' +import YourReferrerIcon from '@material-ui/icons/AccessibilityNew' +import DescendentsIcon from '@material-ui/icons/DeviceHub' + import { withStyles } from '@material-ui/core/styles' import styles from './styles' @@ -10,11 +18,65 @@ import { listEventsCalls } from '../../GraphQL/Calls/index' import Event from './Event' +function TabContainer (props) { + return ( + + {props.children} + + ) +} + class Search extends React.Component { + state = { + value: 0 + } + + handleChange = (event, value) => { + this.setState({ value }) + } + render () { const classes = this.props.classes + const { value } = this.state return ( +
+ + + } + /> + } + /> + } + /> + } + /> + + + {value === 0 &&

hahah

} + {value === 1 &&

hoho

} + {value === 2 &&

hihi

} + {value === 3 &&

hehe

} +
({ + root: { + flexGrow: 1, + width: '100%', + backgroundColor: theme.palette.background.paper, + padding: 0, + margin: 0 + }, + tabTitle: { + width: '25%', + maxWidth: 'none' + }, card: { flexGrow: 1, padding: 20, From 4e9152ade5c50e17331fe453b48e5405db36e08a Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 14:55:53 +0100 Subject: [PATCH 17/19] Cleaning the tab system a bit --- client/src/Components/Search/Tabs/Future.js | 24 ++++ client/src/Components/Search/Tabs/History.js | 24 ++++ client/src/Components/Search/Tabs/Incoming.js | 24 ++++ client/src/Components/Search/Tabs/Past.js | 24 ++++ client/src/Components/Search/Tabs/index.js | 11 ++ client/src/Components/Search/index.js | 130 +++++++++--------- 6 files changed, 171 insertions(+), 66 deletions(-) create mode 100644 client/src/Components/Search/Tabs/Future.js create mode 100644 client/src/Components/Search/Tabs/History.js create mode 100644 client/src/Components/Search/Tabs/Incoming.js create mode 100644 client/src/Components/Search/Tabs/Past.js create mode 100644 client/src/Components/Search/Tabs/index.js diff --git a/client/src/Components/Search/Tabs/Future.js b/client/src/Components/Search/Tabs/Future.js new file mode 100644 index 000000000..1cedbe9af --- /dev/null +++ b/client/src/Components/Search/Tabs/Future.js @@ -0,0 +1,24 @@ +import React from 'react' +import { Typography } from '@material-ui/core' + +import { withStyles } from '@material-ui/core/styles' +import styles from '../styles' + +class Future extends React.Component { + render () { + const classes = this.props.classes + return ( + + Future competitions + + ) + } +} + +export default withStyles(styles)(Future) diff --git a/client/src/Components/Search/Tabs/History.js b/client/src/Components/Search/Tabs/History.js new file mode 100644 index 000000000..b457947fb --- /dev/null +++ b/client/src/Components/Search/Tabs/History.js @@ -0,0 +1,24 @@ +import React from 'react' +import { Typography } from '@material-ui/core' + +import { withStyles } from '@material-ui/core/styles' +import styles from '../styles' + +class History extends React.Component { + render () { + const classes = this.props.classes + return ( + + Your old competitions (maybe here, maybe not, who knows) + + ) + } +} + +export default withStyles(styles)(History) diff --git a/client/src/Components/Search/Tabs/Incoming.js b/client/src/Components/Search/Tabs/Incoming.js new file mode 100644 index 000000000..fa3dfc3b7 --- /dev/null +++ b/client/src/Components/Search/Tabs/Incoming.js @@ -0,0 +1,24 @@ +import React from 'react' +import { Typography } from '@material-ui/core' + +import { withStyles } from '@material-ui/core/styles' +import styles from '../styles' + +class Incoming extends React.Component { + render () { + const classes = this.props.classes + return ( + + Ongoing and incoming competitions + + ) + } +} + +export default withStyles(styles)(Incoming) diff --git a/client/src/Components/Search/Tabs/Past.js b/client/src/Components/Search/Tabs/Past.js new file mode 100644 index 000000000..4c953f7cb --- /dev/null +++ b/client/src/Components/Search/Tabs/Past.js @@ -0,0 +1,24 @@ +import React from 'react' +import { Typography } from '@material-ui/core' + +import { withStyles } from '@material-ui/core/styles' +import styles from '../styles' + +class Past extends React.Component { + render () { + const classes = this.props.classes + return ( + + This will come later + + ) + } +} + +export default withStyles(styles)(Past) diff --git a/client/src/Components/Search/Tabs/index.js b/client/src/Components/Search/Tabs/index.js new file mode 100644 index 000000000..a4077c1ac --- /dev/null +++ b/client/src/Components/Search/Tabs/index.js @@ -0,0 +1,11 @@ +import Future from './Future' +import History from './History' +import Incoming from './Incoming' +import Past from './Past' + +export { + Future, + History, + Incoming, + Past +} diff --git a/client/src/Components/Search/index.js b/client/src/Components/Search/index.js index b4fcffc86..0bc4c4e19 100644 --- a/client/src/Components/Search/index.js +++ b/client/src/Components/Search/index.js @@ -16,6 +16,12 @@ import styles from './styles' import { listEventsCalls } from '../../GraphQL/Calls/index' +import { + Future, + History, + Incoming, + Past +} from './Tabs' import Event from './Event' function TabContainer (props) { @@ -27,8 +33,11 @@ function TabContainer (props) { } class Search extends React.Component { - state = { - value: 0 + constructor (props) { + super(props) + this.state = { + value: 0 + } } handleChange = (event, value) => { @@ -39,72 +48,61 @@ class Search extends React.Component { const classes = this.props.classes const { value } = this.state return ( - -
- - - } - /> - } - /> - } - /> - } - /> - - - {value === 0 &&

hahah

} - {value === 1 &&

hoho

} - {value === 2 &&

hihi

} - {value === 3 &&

hehe

} -
- - Enroll in an competition - - - {({ loading, error, data }) => { - if (loading) return 'Loading...' - if (error) return `Error! ${error.message}` - const list = data.hosts_Events.map((event, index) => { - return ( - - ) - }) + + {({ loading, error, data }) => { + if (loading) return 'Loading...' + if (error) return `Error! ${error.message}` + const list = data.hosts_Events.map((event, index) => { return ( - - { list } - + ) - }} - - + }) + return ( + +
+ + + } + /> + } + /> + } + /> + } + /> + + + {value === 0 && } + {value === 1 && } + {value === 2 && } + {value === 3 && } +
+ { list } + + ) + }} + ) } } From aa820be4f660cb5a163fa1ceb772f43e8942607a Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 15:18:38 +0100 Subject: [PATCH 18/19] Adapting icons --- client/src/Components/Search/index.js | 28 ++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/client/src/Components/Search/index.js b/client/src/Components/Search/index.js index 0bc4c4e19..26c090760 100644 --- a/client/src/Components/Search/index.js +++ b/client/src/Components/Search/index.js @@ -1,15 +1,17 @@ import React from 'react' import { Query } from 'react-apollo' -import { Typography } from '@material-ui/core' - -import AppBar from '@material-ui/core/AppBar' -import Tabs from '@material-ui/core/Tabs' -import Tab from '@material-ui/core/Tab' -import ProfileSheetIcon from '@material-ui/icons/Create' -import ProfileImagesIcon from '@material-ui/icons/Wallpaper' -import YourReferrerIcon from '@material-ui/icons/AccessibilityNew' -import DescendentsIcon from '@material-ui/icons/DeviceHub' +import { + Typography, + AppBar, + Tabs, + Tab +} from '@material-ui/core' +import { + GetApp as IncomingIcon, + AlarmAdd as FutureIcon, + History as HistoryIcon +} from '@material-ui/icons' import { withStyles } from '@material-ui/core/styles' import styles from './styles' @@ -74,22 +76,22 @@ class Search extends React.Component { } + icon={} /> } + icon={} /> } + icon={} /> } + icon={} /> From 2a90b9aa8c9f8bbf2da03808d9263725fc9be4db Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 30 Oct 2018 16:01:48 +0100 Subject: [PATCH 19/19] Filtering and arranging evens into tabs --- client/src/Components/Search/Tabs/Future.js | 30 +++++++---- client/src/Components/Search/Tabs/History.js | 4 +- client/src/Components/Search/Tabs/Incoming.js | 50 +++++++++++++++---- client/src/Components/Search/Tabs/Past.js | 30 +++++++---- client/src/Components/Search/index.js | 22 ++++---- 5 files changed, 97 insertions(+), 39 deletions(-) diff --git a/client/src/Components/Search/Tabs/Future.js b/client/src/Components/Search/Tabs/Future.js index 1cedbe9af..2a46f4995 100644 --- a/client/src/Components/Search/Tabs/Future.js +++ b/client/src/Components/Search/Tabs/Future.js @@ -4,19 +4,31 @@ import { Typography } from '@material-ui/core' import { withStyles } from '@material-ui/core/styles' import styles from '../styles' +import Event from '../Event' + class Future extends React.Component { render () { const classes = this.props.classes + const { FutureEvents } = this.props + + const futureEvents = FutureEvents.map((event, index) => { + return ( + + ) + }) return ( - - Future competitions - + + + Future events + + {futureEvents} + ) } } diff --git a/client/src/Components/Search/Tabs/History.js b/client/src/Components/Search/Tabs/History.js index b457947fb..0db046e5c 100644 --- a/client/src/Components/Search/Tabs/History.js +++ b/client/src/Components/Search/Tabs/History.js @@ -10,12 +10,12 @@ class History extends React.Component { return ( - Your old competitions (maybe here, maybe not, who knows) + Your old events (maybe here, maybe not, who knows) ) } diff --git a/client/src/Components/Search/Tabs/Incoming.js b/client/src/Components/Search/Tabs/Incoming.js index fa3dfc3b7..3956aa6d7 100644 --- a/client/src/Components/Search/Tabs/Incoming.js +++ b/client/src/Components/Search/Tabs/Incoming.js @@ -4,19 +4,51 @@ import { Typography } from '@material-ui/core' import { withStyles } from '@material-ui/core/styles' import styles from '../styles' +import Event from '../Event' + class Incoming extends React.Component { render () { const classes = this.props.classes + const { IncomingEvents, OngoingEvents } = this.props + + const incomingEvents = IncomingEvents.map((event, index) => { + return ( + + ) + }) + const ongoingEvents = OngoingEvents.map((event, index) => { + return ( + + ) + }) return ( - - Ongoing and incoming competitions - + + + Ongoing and incoming competitions + + + Ongoing events: + + {ongoingEvents} + + Incoming events: + + {incomingEvents} + ) } } diff --git a/client/src/Components/Search/Tabs/Past.js b/client/src/Components/Search/Tabs/Past.js index 4c953f7cb..60a6bc5aa 100644 --- a/client/src/Components/Search/Tabs/Past.js +++ b/client/src/Components/Search/Tabs/Past.js @@ -4,19 +4,31 @@ import { Typography } from '@material-ui/core' import { withStyles } from '@material-ui/core/styles' import styles from '../styles' +import Event from '../Event' + class Past extends React.Component { render () { const classes = this.props.classes + const { PastEvents } = this.props + + const pastEvents = PastEvents.map((event, index) => { + return ( + + ) + }) return ( - - This will come later - + + + A list of passed events + + {pastEvents} + ) } } diff --git a/client/src/Components/Search/index.js b/client/src/Components/Search/index.js index 26c090760..e432c8a8c 100644 --- a/client/src/Components/Search/index.js +++ b/client/src/Components/Search/index.js @@ -1,5 +1,6 @@ import React from 'react' import { Query } from 'react-apollo' +import { DateTime } from 'luxon' import { Typography, @@ -24,7 +25,6 @@ import { Incoming, Past } from './Tabs' -import Event from './Event' function TabContainer (props) { return ( @@ -56,11 +56,14 @@ class Search extends React.Component { {({ loading, error, data }) => { if (loading) return 'Loading...' if (error) return `Error! ${error.message}` - const list = data.hosts_Events.map((event, index) => { - return ( - - ) - }) + const now = ~~(DateTime.local().valueOf() / 1000) + const inTwoWeeks = ~~(DateTime.local().plus({ weeks: 2 }).valueOf() / 1000) + + const IncomingEvents = data.hosts_Events.filter(event => event.startDatetime > now && event.startDatetime < inTwoWeeks) + const OngoingEvents = data.hosts_Events.filter(event => event.finishDatetime > now && event.startDatetime < now) + const FutureEvents = data.hosts_Events.filter(event => event.startDatetime > now) + const PastEvents = data.hosts_Events.filter(event => event.finishDatetime < now) + return (
@@ -95,12 +98,11 @@ class Search extends React.Component { /> - {value === 0 && } - {value === 1 && } + {value === 0 && } + {value === 1 && } {value === 2 && } - {value === 3 && } + {value === 3 && }
- { list } ) }}