post and get of character working

src/Components/Card.css

@@ -163,7 +163,7 @@
     color: white;
     font-size: 100px;
     position: relative;
-    width: 400px;
+    width: 350px;
     margin: 0 auto;
     font-family: 'Bangers', cursive;
 }

src/Components/Card.js

@@ -10,16 +10,16 @@ function randomColour() {
 }
 
 function Card(props) {
-    let { name, shows, abilities, img } = props;
+    let { name, shows, abilities, img, id } = props;
     abilities = Array.isArray(abilities) ? abilities : abilities.split(',');
-    let listAbilities = [];
+    let listAbilities = [], counter = 0;
     for (const ability of abilities) {
         const listAbility =
-            <label className={"class-badge badge-" + randomColour()}>{ability}</label>
+            <label key={counter++} className={"class-badge badge-" + randomColour()}>{ability}</label>
         listAbilities.push(listAbility);
     }
     return (
-        <div className={"character-card-v2 card-"+randomColour()}>
+        <div className={"character-card-v2 card-" + randomColour()}>
             <div className="portrait" style={{ backgroundImage: 'url(' + img + ')' }}>
             </div>
             <div className="details">

src/Containers/Main.js

@@ -25,7 +25,7 @@ function produceGrid(n, handleClick, cards) {
     for (let i = 0; i < n; i++) {
         let column =
             <Grid.Column floated='left' key={cards[i].id} onClick={handleClick} >
-                <BuiltCard {...cards[i]} />
+                <BuiltCard {...cards[i]} key={cards[i].id} />
             </Grid.Column>;
         grid.push(column);
     }
@@ -44,8 +44,16 @@ 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='container'>
+            <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/stylesheets/Main.css

@@ -1,4 +1,4 @@
-.container{
+.main.container{
     margin:0 1.5rem;
     margin-bottom: 2rem;
 }

src/Services/apiCalls.js

@@ -4,4 +4,25 @@ const BASE_URL = "http://localhost:9000/";
 
 export function getAll() {
     return axios.get(BASE_URL);
-}
+}
+
+export function postOne(data) {
+    return axios({
+        method: 'POST',
+        url: BASE_URL+'characters',
+        data: data
+    })
+}
+
+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,2 +1,6 @@
 export const GET_ALL = 'GET ALL';
-export const UPDATE_ONE = 'UPDATE ONE CHARACTER';
+export const UPDATE_ONE = 'UPDATE ONE CHARACTER';
+export const GET_ONE = 'GET ONE';
+export const POST_ONE = 'POST ONE';
+
+export const ERR = 'AN ERROR OCCURRED';

src/Store/actions/actionCreators.js

@@ -2,7 +2,10 @@ import { GET_ALL, UPDATE_ONE } from '../actionTypes';
 
 import * as apicalls from '../../Services/apiCalls';
 
-export function doGetAll() {
+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 
@@ -12,4 +15,6 @@ export function doGetAll() {
             .catch(e => console.log(e));
 
     }
-}
+}*/
+
+export { doGetAll, doPostOne };

src/Store/actions/doGetAll.js

@@ -0,0 +1,13 @@
+import { getAll } from '../../Services/apiCalls';
+import { GET_ALL, UPDATE_ONE } from '../actionTypes';
+
+export default 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 
+        getAll()
+            .then(response => response.data)
+            .then(data => dispatch({ type: GET_ALL, payload: data }))
+            .catch(e => console.log(e));
+    }
+}

src/Store/actions/doPostOne.js

@@ -0,0 +1,28 @@
+import { POST_ONE, GET_ONE, ERR } from '../actionTypes';
+
+import { postOne, getOne } from '../../Services/apiCalls';
+
+export default function doPostOne(inputs) {
+    return async (dispatch, getState) => {
+        const resPostOne = await postOne(inputs).catch(e => console.log(e, 'at 1'));
+        const dataPostOne = resPostOne.data;
+
+        if ('code' in dataPostOne && dataPostOne.code === '23505')
+            return dispatch({ type: ERR, payload: "That Character already exists!" });
+        else if ('code' in dataPostOne)
+            return dispatch({ type: ERR, payload: "Oops! Something went wrong while submitting your Character." })
+
+        const character_id = dataPostOne.character_id;
+        console.log('got tha char id as', character_id, dataPostOne);
+
+        if (character_id) {
+            await new Promise(resolve => setTimeout(resolve, 1000)); // needs at least 1 second to get the character
+            console.log(character_id, 'is the character id');
+            const resp = await getOne(character_id).catch('Please check your network connectivity!');
+            const newCharacter = resp.data;
+            console.log('got this', newCharacter);
+            return dispatch({ type: POST_ONE, payload: { newCharacter, cards: getState().cards } });
+        }else console.log('did not happen')
+
+    }
+}

src/Store/reducers/getAll.js

@@ -9,7 +9,6 @@ export default function (state = initialState, action) {
             const newState = action.payload;
             return newState;
         default:
-            console.log('no case matched');
             return state;
     }
 }

src/Store/reducers/getOne.js

@@ -0,0 +1,15 @@
+import { GET_ONE } from '../actionTypes';
+
+const initialState = ''; // acts as placeholder
+
+export default function (state = initialState, action) {
+    switch (action.type) {
+        case GET_ONE:
+            console.log('at getone, we have the intial state as ', state, '\n and the action as ', action);
+            const { cards, newCard } = action.payload;
+            const newState = cards.unshift(newCard);
+            return newState;
+        default:
+            return state;
+    }
+}

src/Store/reducers/postOne.js

@@ -0,0 +1,13 @@
+import { POST_ONE } from '../actionTypes';
+
+const initialState = [];
+
+export default function (state = initialState, action) {
+    switch (action.type) {
+        case POST_ONE: console.log('reached postone', action, state);
+            return state;
+            break;
+        default:
+            return state;
+    }
+}

src/Store/reducers/rootReducer.js

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