diff --git a/src/Dispatcher.js b/src/Dispatcher.js new file mode 100644 index 0000000..6860c63 --- /dev/null +++ b/src/Dispatcher.js @@ -0,0 +1,3 @@ +import { Dispatcher } from 'flux'; + +export default new Dispatcher; diff --git a/src/actions/CreateEventAction.js b/src/actions/CreateEventAction.js new file mode 100644 index 0000000..27b8cd2 --- /dev/null +++ b/src/actions/CreateEventAction.js @@ -0,0 +1,43 @@ +import dispatcher from '../Dispatcher'; +import axios from 'axios'; + + +const axiosConfig = () => { + return axios.create({ + headers: {'Content-Type': "application/json; charset=utf-8"} + }); +} + + +const createFormData = (form) => { + + let body = form.filter(el => el.name) + .reduce((a, b) => ({...a, [b.name]: b.value}), {}); + + body["timestamp"] = new Date().toISOString(); + body["event_time"] = new Date().toISOString(); + body["address"] = body["address"] + " - " + body["addressNumber"]; + return JSON.stringify(body); +} + + +export function createEventAction(event) { + var url = "https://solidarize-dev.herokuapp.com/event"; + let data = createFormData(event); + dispatcher.dispatch({ + type: 'CREATE_EVENT' + }); + console.log(data); + axiosConfig().post(url, data) + .then(res => { + dispatcher.dispatch({ + type: 'CREATE_EVENT_SUCCESS' + }) + }); +} + +export function successConfirm() { + dispatcher.dispatch({ + type: 'CREATE_EVENT_SUCCESS_CONFIRM' + }); +} diff --git a/src/actions/EventDetailsAction.js b/src/actions/EventDetailsAction.js new file mode 100644 index 0000000..a435aa5 --- /dev/null +++ b/src/actions/EventDetailsAction.js @@ -0,0 +1,15 @@ +import dispatcher from '../Dispatcher'; +import axios from 'axios'; + +export function eventDetailListAction(eventId) { + dispatcher.dispatch({ + type: 'EVENT_DETAIL_COMPONENT_VISIBLE' + }); + axios.get('https://solidarize-dev.herokuapp.com/event/' + eventId) + .then(res => { + dispatcher.dispatch({ + type: 'EVENT_DETAIL_DATA', + events: [res.data] + }) + }); +} diff --git a/src/actions/HeaderActions.js b/src/actions/HeaderActions.js new file mode 100644 index 0000000..6c5e01f --- /dev/null +++ b/src/actions/HeaderActions.js @@ -0,0 +1,54 @@ +import dispatcher from '../Dispatcher'; +import axios from 'axios'; + +export function aboutAction() { + dispatcher.dispatch({ + type: 'ABOUT_COMPONENT_VISIBLE' + }) +} + +export function createEventAction() { + dispatcher.dispatch({ + type: 'CREATE_EVENT_COMPONENT_VISIBLE' + }) +} + +export function createInstitutionAction() { + dispatcher.dispatch({ + type: 'CREATE_INSTITUTION_COMPONENT_VISIBLE' + }) +} + +export function eventListAction() { + dispatcher.dispatch({ + type: 'EVENT_LIST_COMPONENT_VISIBLE' + }); + axios.get(`https://solidarize-dev.herokuapp.com/events?offset=10&order=desc`) + .then(res => { + dispatcher.dispatch({ + type: 'EVENT_LIST_DATA', + events: res.data + }) + }); +} + +export function homeAction() { + dispatcher.dispatch({ + type: 'HOME_COMPONENT_VISIBLE' + }); + axios.get(`https://solidarize-dev.herokuapp.com/events/rank?offset=3&order=desc`) + .then(res => { + dispatcher.dispatch({ + type: 'EVENT_LIST_DATA', + events: res.data + }) + }); +} + +export function authAction(data) { + dispatcher.dispatch({ + type: 'IS_AUTH', + facebookData: data + }); + homeAction(); +} \ No newline at end of file diff --git a/src/image/facebook.png b/src/image/facebook.png new file mode 100644 index 0000000..e8cbcec Binary files /dev/null and b/src/image/facebook.png differ diff --git a/src/image/twitter.png b/src/image/twitter.png new file mode 100644 index 0000000..a7c40e1 Binary files /dev/null and b/src/image/twitter.png differ diff --git a/src/index.js b/src/index.js index d0e9d67..40a4d36 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import axios from 'axios'; import registerServiceWorker from './registerServiceWorker'; import DefaultLayout from './views/layout/master' import FooterLayout from './views/layout/footer' @@ -11,9 +10,11 @@ import EventList from './views/eventList' import IndexBody from './views/indexBody' import EventDetailComponent from './views/eventDetail' import CreateInstitutionComponent from './views/createInstituction' -import './views/layout/solidarize.css' import './style/background.png' +import HeaderStore from './stores/HeaderStore' +import EventDetailsStore from './stores/EventDetailsStore' +import * as HeaderActions from './actions/HeaderActions' const refreshReact = () => { ReactDOM.render(, document.getElementById('root')); registerServiceWorker(); @@ -25,142 +26,47 @@ class IndexComponent extends React.Component { constructor(props) { super(props); this.state = { - indexBodyVisible: true, - sobreComponentVisible: false, - eventListComponentVisible: true, - createEventVisible: false, - eventDetailVisible: false, - institutionComponentVisible: true, - active: 'home', - events: [] + header: HeaderStore.getAll(), + eventDetails: EventDetailsStore.getAll() } } componentDidMount() { - this.fetchEventListByRank(); + HeaderActions.homeAction(); } - fetchEventList() { - axios.get(`https://solidarize-dev.herokuapp.com/events?offset=10&order=desc`) - .then(res => { - this.setState({events: res.data}); - refreshReact(); - }); + componentWillMount() { + HeaderStore.on('change', () => { + this.setState({ + header: HeaderStore.getAll(), + eventDetails: EventDetailsStore.setDefaultEventDetails() + }) + }) + + EventDetailsStore.on('change', () => { + this.setState({ + header: HeaderStore.setHeaderToDefault(), + eventDetails: EventDetailsStore.getAll() + }) + }) } - fetchEventListByRank() { - axios.get(`https://solidarize-dev.herokuapp.com/events/rank?offset=3&order=desc`) - .then(res => { - this.setState({events: res.data}); - refreshReact(); - }); - } - - fetchEventById(eventId) { - axios.get('https://solidarize-dev.herokuapp.com/event/' + eventId) - .then(res => { - this.setState({events: [res.data]}); - refreshReact(); - }); - } - - onClickEvenListHeader() { - this.setState({ - indexBodyVisible: false, - sobreComponentVisible: false, - eventListComponentVisible: true, - createEventVisible: false, - eventDetailVisible: false, - institutionComponentVisible: true, - active: 'event' - }); - this.fetchEventList(); - } - - onClickHomeHeader() { - this.setState({ - indexBodyVisible: true, - sobreComponentVisible: false, - eventListComponentVisible: true, - createEventVisible: false, - eventDetailVisible: false, - institutionComponentVisible: true, - active: 'home' - }); - this.fetchEventListByRank(); - } - - onClickSobreHeader() { - this.setState({ - indexBodyVisible: false, - sobreComponentVisible: true, - eventListComponentVisible: false, - createEventVisible: false, - eventDetailVisible: false, - institutionComponentVisible: true, - active: 'sobre' - }); - refreshReact(); - } - - onClickCreateEventHeader() { - this.setState({ - indexBodyVisible: false, - sobreComponentVisible: false, - eventListComponentVisible: false, - createEventVisible: true, - eventDetailVisible: false, - institutionComponentVisible: true, - active: 'createEvent' - }); - refreshReact(); - } - - onClickCreateInstitutionHeader() { - this.setState({ - indexBodyVisible: false, - sobreComponentVisible: false, - eventListComponentVisible: false, - createEventVisible: false, - eventDetailVisible: false, - institutionComponentVisible: true, - active: 'createInstitution' - }); - refreshReact(); - } - - - onClickLeiaMais(eventId) { - this.setState({ - indexBodyVisible: false, - sobreComponentVisible: false, - eventListComponentVisible: false, - createEventVisible: false, - eventDetailVisible: true, - institutionComponentVisible: true, - active: 'eventDetail' - }); - - this.fetchEventById(eventId); - } render() { return ( - {this.state.indexBodyVisible ? : null} - {this.state.eventListComponentVisible ? - : null} - {this.state.sobreComponentVisible ? : null} - {this.state.createEventVisible ? : null} - {this.state.eventDetailVisible ? : null} - {this.state.institutionComponentVisible ? : null} + name={this.state.header.user.name} + auth={this.state.header.auth} + active={this.state.header.active}/> + {this.state.header.indexBodyVisible ? : null} + {this.state.header.eventListComponentVisible ? + : null} + {this.state.header.sobreComponentVisible ? : null} + {this.state.header.createEventVisible ? : null} + {this.state.eventDetails.eventDetailVisible ? + : null} + {this.state.header.institutionComponentVisible ? : null} ) diff --git a/src/stores/CreateEventStore.js b/src/stores/CreateEventStore.js new file mode 100644 index 0000000..e0d7def --- /dev/null +++ b/src/stores/CreateEventStore.js @@ -0,0 +1,50 @@ +import {EventEmitter} from 'events'; +import dispatcher from '../Dispatcher'; + +class CreateEventStore extends EventEmitter { + + constructor() { + super() + this.event = { + loading: false, + success: false + }; + } + + getAll() { + return this.event; + } + + setDefaultState() { + this.event.success = false; + this.event.loading = false; + + return this.event; + } + + handleAction(action) { + switch (action.type) { + case 'CREATE_EVENT' : { + this.event.loading = true; + this.emit('change'); + break; + } + case 'CREATE_EVENT_SUCCESS' : { + this.event.loading = false; + this.event.success = true; + this.emit('change'); + break; + } + case 'CREATE_EVENT_SUCCESS_CONFIRM' : { + this.setDefaultState(); + this.emit('change'); + break; + } + } + } +} + +const createEventStore = new CreateEventStore(); +dispatcher.register(createEventStore.handleAction.bind(createEventStore)); + +export default createEventStore; diff --git a/src/stores/EventDetailsStore.js b/src/stores/EventDetailsStore.js new file mode 100644 index 0000000..83714ac --- /dev/null +++ b/src/stores/EventDetailsStore.js @@ -0,0 +1,52 @@ +import {EventEmitter} from 'events'; +import dispatcher from '../Dispatcher'; + +class EventDetailsStore extends EventEmitter { + + constructor() { + super() + this.eventDetail = { + eventDetailVisible: false, + events: [] + }; + } + + handleAction(action) { + switch (action.type) { + case 'EVENT_DETAIL_COMPONENT_VISIBLE' : { + this.eventDetailsVisible(); + break; + } + case 'EVENT_DETAIL_DATA' : { + this.updateEvents(action.events); + break; + } + } + } + + eventDetailsVisible() { + this.eventDetail.eventDetailVisible = true; + this.eventDetail.events = []; + this.emit('change'); + } + + updateEvents(data) { + this.eventDetail.events = data; + this.emit('change'); + } + + getAll() { + return this.eventDetail; + } + + setDefaultEventDetails() { + this.eventDetail.eventDetailVisible = false; + this.eventDetail.events = []; + return this.eventDetail; + } +} + +const eventDetailsStore = new EventDetailsStore; +dispatcher.register(eventDetailsStore.handleAction.bind(eventDetailsStore)); + +export default eventDetailsStore; \ No newline at end of file diff --git a/src/stores/HeaderStore.js b/src/stores/HeaderStore.js new file mode 100644 index 0000000..fbe5a16 --- /dev/null +++ b/src/stores/HeaderStore.js @@ -0,0 +1,122 @@ +import {EventEmitter} from 'events'; +import dispatcher from '../Dispatcher'; +class HeaderStore extends EventEmitter { + + constructor() { + super(); + this.header = { + indexBodyVisible: true, + sobreComponentVisible: false, + eventListComponentVisible: true, + createEventVisible: false, + institutionComponentVisible: false, + active: 'home', + events: [], + auth: false, + user: {} + + } + } + + setHeaderToDefault() { + this.header.indexBodyVisible = false; + this.header.sobreComponentVisible = false; + this.header.eventListComponentVisible = false; + this.header.createEventVisible = false; + this.header.institutionComponentVisible = false; + this.header.active = 'none'; + return this.header; + } + + getAll() { + return this.header; + } + + handleAction(action) { + switch (action.type) { + case 'ABOUT_COMPONENT_VISIBLE' : { + this.aboutComponentVisible(); + break; + } + case 'CREATE_EVENT_COMPONENT_VISIBLE' : { + this.createEventComponentVisible(); + break; + } + case 'CREATE_INSTITUTION_COMPONENT_VISIBLE' : { + this.createInstitutionComponentVisible(); + break; + } + case 'EVENT_LIST_COMPONENT_VISIBLE' : { + this.eventListComponentVisible(); + break; + } + case 'HOME_COMPONENT_VISIBLE' : { + this.homeComponentVisible(); + break; + } + case 'EVENT_LIST_DATA' : { + this.eventDataVisible(action.events); + break; + } + case 'IS_AUTH' : { + this.authenticate(action.facebookData); + break; + } + } + } + + aboutComponentVisible() { + this.setHeaderToDefault(); + this.header.sobreComponentVisible = true; + this.header.active = 'sobre'; + this.emit('change'); + } + + createEventComponentVisible() { + this.setHeaderToDefault(); + this.header.createEventVisible = true; + this.header.active = 'createEvent'; + this.emit('change'); + } + + createInstitutionComponentVisible() { + this.setHeaderToDefault(); + this.header.institutionComponentVisible = true; + this.header.active = 'createInstitution'; + this.emit('change'); + } + + eventListComponentVisible() { + this.setHeaderToDefault(); + this.header.eventListComponentVisible = true; + this.header.active = 'event'; + this.header.events = []; + this.emit('change'); + } + + homeComponentVisible() { + this.setHeaderToDefault(); + this.header.indexBodyVisible = true; + this.header.eventListComponentVisible = true; + this.header.active = 'home'; + this.header.events = []; + this.emit('change'); + } + + eventDataVisible(data) { + this.header.events = data; + this.emit('change'); + } + + authenticate(data) { + this.setHeaderToDefault(); + this.header.auth = true; + this.header.user.name = data.name; + this.emit('change'); + } +} + +const headerStore = new HeaderStore; +dispatcher.register(headerStore.handleAction.bind(headerStore)); + +export default headerStore; diff --git a/src/views/AddressComponent.js b/src/views/AddressComponent.js index ca0fe8a..d4e4dab 100644 --- a/src/views/AddressComponent.js +++ b/src/views/AddressComponent.js @@ -125,7 +125,7 @@ class AddressComponent extends Component { className="fa fa-circle-o-notch fa-spin fa-2x fa-fw"> : null} : null } -

Local do Evento:

+ { this.props.cnpjActive ?

Endereço da Instituição:

:

Local do Evento:

}
{this.props.cnpjActive ? +
+
+
+
+

John Doe

+

Meus dados:

+

Nome: John Doe

+

Endereço: Rua sei lá, 509

+

Telefone: (51) 3311-9955

+

Site: contato@org.com.br

+ Editar Informações +
+
+
+
+

Meus Eventos:



+
+
+ + + + + + + + + + + + + + + + + +
EventoEndereçoDataAções
Evento 1Rua Sei Lá, 2312/07/2017 18:00 + | + | + +
Evento 2Rua X, 52316/07/2017 14:00 + | + | + +
+
+
+
+ ) + } +} + +export default ControlPainelComponent; \ No newline at end of file diff --git a/src/views/createEvent.js b/src/views/createEvent.js index 5ed4962..c01fd34 100644 --- a/src/views/createEvent.js +++ b/src/views/createEvent.js @@ -1,115 +1,115 @@ import React from 'react' import axios from 'axios'; import AddressComponent from './AddressComponent' - -const axiosConfig = () => { - return axios.create({ - headers: {'Content-Type': "application/json; charset=utf-8"} - }); -} - +import * as CreateEventAction from '../actions/CreateEventAction'; +import CreateEventStore from '../stores/CreateEventStore' class CreateEventComponent extends React.Component { - onSubmit(evt) { - var url = "https://solidarize-dev.herokuapp.com/event"; + constructor() { + super() + this.state = { + event: CreateEventStore.getAll() + } + } - let data = this.createFormData(evt); - console.log(data); - axiosConfig().post(url, data); + componentWillMount() { + CreateEventStore.on('change', () => { + this.setState({ + event: CreateEventStore.getAll() + }) + }) + } + onSubmit(evt) { + let body = Array.from(evt.target.elements) + CreateEventAction.createEventAction(body); evt.preventDefault(); return false; } - createFormData(evt) { - let body = Array.from(evt.target.elements) - .filter(el => el.name) - .reduce((a, b) => ({...a, [b.name]: b.value}), {}); - - body["timestamp"] = new Date().toISOString(); - body["event_time"] = new Date().toISOString(); - body["address"] = body["address"] + " - " + body["addressNumber"]; - return JSON.stringify(body); + onClickSuccessMessage() { + CreateEventAction.successConfirm(); } - render() { return ( -
-
-
-

Cadastrar Evento



-
-
-
-
-
-
-
-
-

Título do Evento:

- -
+
+
+

Cadastrar Evento



+
+
+
+ +
+ {this.state.event.success ? +
+ × + Success! Indicates a successful or positive action. +
: null} +
+

Título do Evento:

+
-
-
-

SubTítulo:

- -
+
+
+
+

SubTítulo:

+
-
-
-

Descrição do Evento:

- -
+
+
+
+

Descrição do Evento:

+
-
-
+
+
+
- + -
-
-

Data e Hora:

- -
+
+
+

Data e Hora:

+ +
-



+



-
- -
+
+ +
-
- -
+
+
- -
-
+
+ +
) diff --git a/src/views/createInstituction.js b/src/views/createInstituction.js index 94d85b6..f8f4736 100644 --- a/src/views/createInstituction.js +++ b/src/views/createInstituction.js @@ -34,104 +34,100 @@ class CreateInstituctionComponent extends React.Component { render() { return ( -
-
-
-

Cadastrar Instituição



-
-
-
-
-
-
-
+
+
+

Cadastrar Instituição



+
+
+
+ +
+
+

Nome da Instituição:

+ +
+
+
+
+

Descrição da Instituição:

+ +
+
+
+
+
-

Nome da Instituição:

- +
+

Dados de Contatos:

+
+ + + +
-
-
-

Descrição da Instituição:

- +
-
-
- -
-
-

Dados de Contatos:

-
- - - -
-
-
- -
-
- -
-
- -
+ +
+
+ +
-

+

-
- -
+
+ +
-
- -
+
+
- -
+
+


diff --git a/src/views/eventDetail.js b/src/views/eventDetail.js index dfc0026..122e8cb 100644 --- a/src/views/eventDetail.js +++ b/src/views/eventDetail.js @@ -2,27 +2,31 @@ import React from 'react' import avatar from '../image/avatar.jpg'; import EventList from "./eventList"; +const userInfoStyle = { + clear: 'both' +} + class EventDetailComponent extends React.Component { render() { if (this.props.events.length == 0) { return ( -
+
) } return ( -
-
+
-
-
+
+
+
-

John Doe

+

John Doe

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are @@ -42,7 +46,7 @@ class EventDetailComponent extends React.Component {

-
+




diff --git a/src/views/eventList.jsx b/src/views/eventList.jsx index 4b0ea43..86c3bfe 100644 --- a/src/views/eventList.jsx +++ b/src/views/eventList.jsx @@ -1,10 +1,6 @@ import React from 'react'; import evento from '../image/evento.jpg' - -const centralize = { - width: '860px', - margin: 'auto', -} +import * as EventDetailsAction from '../actions/EventDetailsAction' const getMonth = (event_time) => { var eventDate = new Date(event_time); @@ -35,43 +31,45 @@ const containerStyle = { } - class EventList extends React.Component { constructor(props) { super(props); } + handleEventDetailAction(eventId) { + EventDetailsAction.eventDetailListAction(eventId); + } + render() { if (this.props.events.length == 0) { return ( -
-
+
+
) } return ( -
+
{this.props.events.map(event =>
-
-

-

+
+

-
+

{getMonth(event.event_time)}
{getDay(event.event_time)}
+ + + + + + {event.rank} +
- - - - - {event.rank} -

{event.title}

@@ -82,8 +80,9 @@ class EventList extends React.Component { {event.eventTime}

{event.description} -
diff --git a/src/views/indexBody.jsx b/src/views/indexBody.jsx index 9c1aa72..ff47bb8 100644 --- a/src/views/indexBody.jsx +++ b/src/views/indexBody.jsx @@ -5,27 +5,22 @@ const imgStyle = { } -const containerStyle = { - display: 'inline', -} + var IndexBody = React.createClass({ render: function () { return ( -
-
-
-

solidarize

-

Todos juntos em busca de um mundo melhor!



-

- -
-
+
+
+

solidarize

+

Todos juntos em busca de um mundo melhor!



+

+
-
+

O Solidarize foi criado com a intenção de divulgar serviços de cunho social e unir instituições a pessoas que tem o interesse de contribuir.

- saiba mais + saiba mais
diff --git a/src/views/layout/footer.jsx b/src/views/layout/footer.jsx index 7739959..31a43ca 100644 --- a/src/views/layout/footer.jsx +++ b/src/views/layout/footer.jsx @@ -1,13 +1,17 @@ var React = require('react'); +const containerStyle = { + clear: 'both', + paddingTop: '60px' +} class FooterLayout extends React.Component { render() { return ( -