Submit idea success

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: '' 
             }
           };
 

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,
   };
 }

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 (
       <FormUI idea={this.props.idea} 
                         loadingStatus={this.props.isLoading}
+                        ideaSubmitMessage = {this.props.ideaSubmissionMessage}
                         addEntry={this.props.addEntry} 
                         startIdeasubmission={this.props.startIdeasubmission} 
                         updateEntry={this.props.updateEntry} 
@@ -41,17 +29,20 @@ class IdeaForm extends Component {
 //ideaForm - same trigger as above except rerenders IdeaForm with its passed props (only Id is passed into it)
 const mapStateToProps = (state, ideaFormProps) => {
 
+  //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}),
   };
 }

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 {
           <Button type="submit">
             Submit Idea
           </Button>
-            {loadingDisplay}
+            {loadingDisplay} {submissionMessage}
         </FormGroup>
       </Form>
     );

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:{}

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);
 }