Form submission functional

card shows up

src/Components/Inputs.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Form, Button, Popup } from 'semantic-ui-react';
+import { Form, Button, Popup, Loader } from 'semantic-ui-react';
 
 class Inputs extends Component {
 	constructor(props) {
@@ -60,7 +60,11 @@ class Inputs extends Component {
 						</Popup.Content>
 					</Popup>
 				</Form.Group>
-				<Button inverted color='green' type='submit'>Submit</Button>
+				<Button loading={this.props.loading}
+					color='green' inverted
+					type='submit'>
+					Submit
+				</Button>
 			</Form>
 		);
 

src/Containers/App.js

@@ -11,13 +11,11 @@ import store from '../Store/store';
 function App(props) {
     //store.dispatch({ type: 'GET ALL', payload: 200 });
     return (
-        <Provider store={store}>
-            <div >
-                <NavBar {...props}/>
-                <Main />
-            </div>
-        </Provider>
-        );
+        <div >
+            <NavBar {...props} />
+            <Main />
+        </div>
+    );
 }
 
 export default Form(App);

src/Containers/Form.js

@@ -1,53 +1,101 @@
 import React, { Component } from 'react';
 
-import { Segment, Grid } from 'semantic-ui-react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as actions from '../Store/actions/actionCreators';
 
+import { Segment, Grid, Message, Icon, Dimmer } from 'semantic-ui-react';
 import Card from '../Components/Card';
 import Inputs from '../Components/Inputs';
 
+import { postOne } from '../Services/apiCalls';
+
+
+// functions for store subscriptions
+function mapStateToProps(state) {
+    return { ...state };
+}
+function mapDispatchToProps(dispatch) {
+    return bindActionCreators(actions, dispatch);
+}
+
+
+
 class BuiltForm extends Component {
     constructor(props) {
         super(props);
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleDismiss = this.handleDismiss.bind(this);
+
         const { status } = this.props;
         if (status === 'edit') {
-            this.state = { ...this.props };
+            this.state = { ...this.props, err: '' };
             delete this.state[status];
         } else {
             // status is new 
             this.state = {
                 name: '',
                 shows: '',
                 img: '',
-                abilities: ''
+                abilities: '',
+                err: '',
+                loading: false
             }
         }
     }
 
     handleChange(e, { name, value }) {
-        console.log('we have ', name, value);
         this.setState({ [name]: value });
     }
 
-    handleSubmit() {
-        console.log('you submitted the values', this.state);
+    async handleSubmit() {
+        console.log('submitting data now', this.state);
+        this.setState({ loading: true });
+        let inputs = { ...this.state };
+        delete inputs['err']; // remove the unnecessary fields
+        delete inputs['loading'];
+
+        const m = await postOne(inputs);
+
+        if (m.status === 0) this.setState({ loading: false, err: m.message });
+        if (m.status === 1) {
+            await new Promise(resolve => setTimeout(resolve, 1500)); // needs at least 1 second to get the character
+            this.props.doPutOne(m.character_id);
+            this.props.hideForm();
+            this.setState({
+                name: '', shows: '', img: '', abilities: '', err: ''
+            });
+        }
+    }
+
+    handleDismiss() {
+        this.setState({ err: '' });
     }
 
     render() {
         return (
-            <Segment piled>
+            <Segment piled >
+                {(this.state.err && this.state.err.length > 0 ?
+                    <Message icon error onDismiss={this.handleDismiss} >
+                        <Icon name='times circle' />
+                        <Message.Header floated>
+                            {this.state.err}
+                        </Message.Header>
+                    </Message> : null)}
                 <Grid columns={3} stackable celled='internally'>
                     <Grid.Column floated='left'>
                         <Card {...this.state} />
                     </Grid.Column>
                     <Grid.Column floated='right'>
-                        <Inputs handleChange={this.handleChange} handleSubmit={this.handleSubmit} {...this.state} />
+                         <Inputs handleChange={this.handleChange} handleSubmit={this.handleSubmit} {...this.state} />
                     </Grid.Column>
                 </Grid>
             </Segment>
         );
     }
 }
 
-export default BuiltForm;
+const ConnectedBuiltForm = connect(mapStateToProps, mapDispatchToProps)(BuiltForm);
+
+export default ConnectedBuiltForm;

src/Containers/Main.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-import { Grid, Button, Card } from 'semantic-ui-react';
+import { Grid, Button } from 'semantic-ui-react';
 import './stylesheets/Main.css';
 
 import * as actions from '../Store/actions/actionCreators';
@@ -13,7 +13,6 @@ import SideBar from './hocs/SideBar';
 
 // helper functions
 function mapStateToProps(state) {
-    console.log(state, 'at map state to props');
     return { ...state };
 }
 function mapDispatchToProps(dispatch) {
@@ -44,16 +43,9 @@ class Main extends Component {
     render() {
         const { handleClick, cards } = this.props;
         let grid = produceGrid(cards.length, handleClick, cards);
-
-        const inputs = {
-            name: 'last one',
-            abilities: 'hit,shot',
-            shows: 'agent 7',
-            img: 'goimg'
-        }
         return (
             <div className='main container'>
-                <Button onClick={() => this.props.doPostOne(inputs)}>CLICK THIS</Button>
+
                 <Grid stackable columns={3} centered>
                     {grid.map(g => g)}
                 </Grid>

src/Containers/hocs/PageDimmer.js

@@ -29,7 +29,7 @@ const PageDimmer = WrappedComponent => {
                         verticalAlign='top'
                     >
                         <div className='builtform container'>
-                            <BuiltForm />
+                            <BuiltForm hideForm={this.handleHide} />
                         </div>
                     </Dimmer>
 

src/Services/apiCalls.js

@@ -6,23 +6,27 @@ export function getAll() {
     return axios.get(BASE_URL);
 }
 
-export function postOne(data) {
-    return axios({
+export async function postOne(inputs) {
+    let err = null;
+    const response = await axios({
         method: 'POST',
-        url: BASE_URL+'characters',
-        data: data
-    })
+        url: BASE_URL + 'characters',
+        data: inputs
+    }).catch(e => err = e);
+
+    const data = response.data;
+    if (!response)
+        return { status: 0, message: "Please check your network connectivity!" };
+    else if ('code' in data && data.code === '23505')
+        return { status: 0, message: "Buddy, that Character already exists!" };
+    else if ('code' in data)
+        return { status: 0, message: "Oops! Something went wrong while submitting your Character. Error Code : "+data.code };
+
+    const character_id = data.character_id;
+    return { status: 1, character_id, message: "Your character was saved!" };
 }
 
 export function getOne(id) {
     console.log(id, 'is the value of id');
     return axios.get(BASE_URL + id);
 }
-
-async function test() {
-    getOne(51)
-        .then(resp => resp.data)
-        .then(data => console.log(data))
-        .catch(e=>console.log(e))
-}
-test();

src/Store/actionTypes.js

@@ -1,6 +1,4 @@
 export const GET_ALL = 'GET ALL';
-export const UPDATE_ONE = 'UPDATE ONE CHARACTER';
-export const GET_ONE = 'GET ONE';
-export const POST_ONE = 'POST ONE';
+export const PUT_ONE = 'PUT ONE CHARACTER';
 
 export const ERR = 'AN ERROR OCCURRED';

src/Store/actions/actionCreators.js

@@ -1,20 +1,4 @@
-import { GET_ALL, UPDATE_ONE } from '../actionTypes';
-
-import * as apicalls from '../../Services/apiCalls';
-
 import doGetAll from './doGetAll';
-import doPostOne from './doPostOne';
-
-/*export function doGetAll() {
-    return (dispatch, getState) => { // we are returning a function
-        console.log('we have getState as', getState()); // notice getState is a function
-        //let num = 50 + getState().num; // be careful of the name of the variables inside the state 
-        apicalls.getAll()
-            .then(response => response.data)
-            .then(data => dispatch({ type: GET_ALL, payload: data }))
-            .catch(e => console.log(e));
-
-    }
-}*/
+import doPutOne from './doPutOne';
 
-export { doGetAll, doPostOne };
+export { doGetAll, doPutOne };

src/Store/actions/doGetAll.js

@@ -1,5 +1,5 @@
 import { getAll } from '../../Services/apiCalls';
-import { GET_ALL, UPDATE_ONE } from '../actionTypes';
+import { GET_ALL } from '../actionTypes';
 
 export default function doGetAll() {
     return (dispatch, getState) => { // we are returning a function

src/Store/actions/doPutOne.js

@@ -0,0 +1,12 @@
+import { PUT_ONE } from '../actionTypes';
+
+import { getOne } from '../../Services/apiCalls';
+
+export default function doPutOne(cid) {
+    return async (dispatch, getState) => {
+        getOne(cid)
+            .then(response => response.data)
+            .then(data => dispatch({ type: PUT_ONE, payload: { cards: getState().cards, newCharacter: data[0] } }))
+            .catch(error => console.log(error, 'while retreiving that card'));
+    }
+}

src/Store/reducers/getAll.js

@@ -5,7 +5,6 @@ const initialState = []; // acts as placeholder
 export default function (state = initialState, action) {
     switch (action.type) {
         case GET_ALL:
-            console.log('we have the intial state as ', state,'\n and the action as ',action);
             const newState = action.payload;
             return newState;
         default:

src/Store/reducers/putOne.js

@@ -0,0 +1,15 @@
+import { PUT_ONE } from '../actionTypes';
+
+const initialState = '';
+
+export default function (state = initialState, action) {
+    switch (action.type) {
+        case PUT_ONE:
+            console.log('AT PUT ONE, we have the intial state as ', state, '\n and the action as ', action);
+            const { cards, newCharacter } = action.payload;
+            const newCards = cards.unshift(newCharacter);
+            return { cards: newCards };
+        default:
+            return state;
+    }
+}

src/Store/reducers/rootReducer.js

@@ -1,8 +1,8 @@
 import { combineReducers } from 'redux';
 
 import getAll from './getAll';
-import postOne from './postOne';
+import putOne from './putOne';
 
-const rootReducer = combineReducers({ cards : getAll, postOne }); // getAll is the name of the reducer and we are changing it's name to num
+const rootReducer = combineReducers({ cards: getAll, putOne }); // getAll is the name of the reducer and we are changing it's name to num
 
 export default rootReducer;