diff --git a/src/App.js b/src/App.js index 9b349e6..18c65cc 100644 --- a/src/App.js +++ b/src/App.js @@ -13,7 +13,8 @@ class App extends Component { this.state = { entries: [], config:{ - loading: false + loading: false, + ideaSubmitMessage: '' } }; } @@ -33,7 +34,8 @@ class App extends Component { var ideaHubState = { entries: entriesRetrieved, config:{ - loading: false + loading: false, + ideaSubmitMessage: '' } }; diff --git a/src/actions/index.js b/src/actions/index.js index 2ac7611..59d09f7 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -4,13 +4,15 @@ export const SUBMIT_IDEA_FAILED = 'SUBMIT_IDEA_FAILED'; export const TOGGLE_PROCESS_STATUS = 'TOGGLE_PROCESS_STATUS'; export const ADD_IDEA = 'ADD_IDEA' +//Submits idea for processing export function submitIdea(idea) { return { type: SUBMIT_IDEA, - idea, + payload: idea }; } +//Actually adds idea export function addIdea (idea){ return { type: ADD_IDEA, payload: { username: "TODO: create username", @@ -27,16 +29,10 @@ export function toggleProcessStatus (statusBool) { payload: statusBool }; }; -// var ideaHubState = { -// entries: entriesRetrieved, -// config:{ -// loading: false -// } -// }; -export function submitIdeaSucceeded(idea) { +export function submitIdeaSucceeded(successMessage) { return { type: SUBMIT_IDEA_SUCCEEDED, - idea, + payload: successMessage, }; } diff --git a/src/components/ui/IdeaForm.js b/src/components/ui/IdeaForm.js index 7670f3a..f24a0b7 100755 --- a/src/components/ui/IdeaForm.js +++ b/src/components/ui/IdeaForm.js @@ -4,30 +4,18 @@ import style from '../style/IdeaForm.css'; import store from "../../store"; import FormUI from "./IdeaForm/FormUI"; -import {//Is this doing anything? +import { submitIdea, } from '../../actions'; class IdeaForm extends Component { - constructor(props) { - super(props); - this.state = { //Passed down to FormUI - isLoading: props.isLoading, - idea: props.idea || { - title: '', - problem: '', - potential_solution: '', - isEdit: props.id != null //Unecessarily recreated in FormUI but should be passed in from this - }, - }; - } render() { - console.log(this.props.isLoading, "in render ideaform"); return ( { + //TODO: Was not able to successfully pass config object and have rerender work properly. const isLoading = state.ideaHubState.config.loading; + const ideaSubmissionMessage = state.ideaHubState.config.ideaSubmitMessage; const id = Number(ideaFormProps.id); const idea = state.ideaHubState.entries.find(entry => entry.id === id); - return {idea, isLoading}; + return {idea, isLoading, ideaSubmissionMessage}; }; const mapDispatchToProps = (dispatch) => { return { + //Refactor to use actions like addEntry does startIdeasubmission : (entry) => dispatch({type: 'START_IDEA_SUBMISSION'}), - addEntry: (entry) => dispatch({type: 'SUBMIT_IDEA', payload: entry}), + addEntry: (entry) => dispatch(submitIdea(entry)), updateEntry: (entry) => dispatch({type: 'UPDATE_IDEA', payload: entry}), }; } diff --git a/src/components/ui/IdeaForm/FormUI.js b/src/components/ui/IdeaForm/FormUI.js index 0ad1a20..eb886a4 100644 --- a/src/components/ui/IdeaForm/FormUI.js +++ b/src/components/ui/IdeaForm/FormUI.js @@ -1,22 +1,23 @@ -import React from 'react'; +import React, {Component} from 'react'; import { Button, Form, FormGroup, FormControl } from 'react-bootstrap'; import style from '../../style/IdeaForm.css'; -class BaseForm extends React.Component { +class BaseForm extends Component { state = { //Why aren't we using this.state? id: this.props.idea.id, title: this.props.idea.title, problem: this.props.idea.problem, potential_solution: this.props.idea.potential_solution, - loadingStatus: this.props.loadingStatus + loadingStatus: this.props.loadingStatus, + submissionMessage: this.props.ideaSubmitMessage }; - //TODO: Figure out if this method below is needed. Doesn't appear necessary. componentWillReceiveProps(nextProps) { const newState = {}; nextProps.idea.loadingStatus = nextProps.loadingStatus; + nextProps.idea.submissionMessage = nextProps.ideaSubmitMessage; - ['id', 'title', 'problem', 'potential_solution', 'loadingStatus'].forEach(key => { + ['id', 'title', 'problem', 'potential_solution', 'loadingStatus', 'submissionMessage'].forEach(key => { if (nextProps.idea[key] !== this.state[key]) { newState[key] = nextProps.idea[key]; } @@ -51,10 +52,9 @@ class BaseForm extends React.Component { render() { const {isEdit} = this.props; - const { title, problem, potential_solution, loadingStatus } = this.state; + const { title, problem, potential_solution, loadingStatus, submissionMessage } = this.state; const updateIdeaState = this.updateIdeaState; const loadingDisplay = loadingStatus ? "Submitting..." : ""; - console.log(loadingDisplay, "FORMui"); //Todo: Show/Hide logic on Add vs Edit idea in h2 below return ( @@ -90,7 +90,7 @@ class BaseForm extends React.Component { - {loadingDisplay} + {loadingDisplay} {submissionMessage} ); diff --git a/src/reducers/entries.js b/src/reducers/entries.js index 3466d9e..a2f708c 100644 --- a/src/reducers/entries.js +++ b/src/reducers/entries.js @@ -4,20 +4,11 @@ const REDUCERS = { //All methods below return the new "state" of the store in one statement //First parameter is state of store and second is what is passed to Store //You don't need 'action' names for this current setup. - // submitIdea: (entries, payload) => ( - // //Append new idea to existing array - // entries.concat({ - // id: entries.sort((entryA, entryB) => entryA.id < entryB.id)[0].id + 1, - // username: payload.username, - // title: payload.title, - // problem: payload.problem, - // potential_solution: payload.solution, - // //TODO: Finish datecreatedAt: Date() - // }) - // ), + toggleProcessStatus: (submitedIdeaHubState, payload) =>{ submitedIdeaHubState.config.loading = payload; - console.log(submitedIdeaHubState, "toggle ideas"); + + //Wont rerender formUI if you return submitedIdeaHubState var newState = { entries: submitedIdeaHubState.entries, config: submitedIdeaHubState.config @@ -26,11 +17,17 @@ const REDUCERS = { return newState; }, - startIdeasubmission: (submitedIdeaHubState, payload) => { - console.log(payload, "Payload"); - console.log(submitedIdeaHubState, "submitedIdeaHubState"); - return payload.currentSetup; - }, + submitIdeaSucceeded: (submitedIdeaHubState, payload) => { + submitedIdeaHubState.config.ideaSubmitMessage = payload; + + var newState = { + entries: submitedIdeaHubState.entries, + config: submitedIdeaHubState.config + } + + return newState; + }, + addIdea: (submitedIdeaHubState, payload) => { var newEntries = submitedIdeaHubState.entries.concat({ id: submitedIdeaHubState.entries.sort((entryA, entryB) => entryA.id < entryB.id)[0].id + 1, @@ -66,6 +63,7 @@ const REDUCERS = { }, }; +//Initially populated in App.js const ideaHubState = { entries: [], config:{} diff --git a/src/sagas/index.js b/src/sagas/index.js index 33bbdf5..8a13cd6 100644 --- a/src/sagas/index.js +++ b/src/sagas/index.js @@ -7,8 +7,8 @@ import { toggleProcessStatus, addIdea } from '../actions'; -//meetings to get government opinion -// + + function* submitIdea({payload}) { try { // const token = yield select(getToken); @@ -22,21 +22,14 @@ function* submitIdea({payload}) { yield put(toggleProcessStatus(false)); - // yield put(submitIdeaSucceeded({ - // id: 44, //Todo: Databse needs to create this - // // title: title, - // // problem: problem, - // // potential_solution: solution, - // user: 'username of submitted user' - // })); + yield put(submitIdeaSucceeded("Submitted Successfully!")); } catch (e) { // handle failure } } -//function* processIdea() - +//Create global listener for any component using methods below export default function* rootSaga() { yield takeEvery(SUBMIT_IDEA, submitIdea); }