From 3b71bb652d437dc4f65d04d5a17b42ff94299737 Mon Sep 17 00:00:00 2001 From: "np.w" Date: Tue, 24 Nov 2020 12:31:02 -0600 Subject: [PATCH] moving more methods around --- client/src/api.js | 4 -- client/src/app.js | 35 ++++------- client/src/box.js | 150 +++++++++++++++++++++++++++------------------ client/src/item.js | 3 +- server/server.js | 51 +++++++-------- 5 files changed, 126 insertions(+), 117 deletions(-) diff --git a/client/src/api.js b/client/src/api.js index 6574fdd..c7f1d57 100644 --- a/client/src/api.js +++ b/client/src/api.js @@ -5,9 +5,5 @@ const databaseName = 'box'; const baseApiUrl = `${PROTOCOL}://${SERVER_IP_ADDRESS}:${SERVER_PORT}/${databaseName}`; export default { - SERVER_IP_ADDRESS, - SERVER_PORT, - PROTOCOL, - databaseName, baseApiUrl } \ No newline at end of file diff --git a/client/src/app.js b/client/src/app.js index 9e64fb8..c23afc9 100644 --- a/client/src/app.js +++ b/client/src/app.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import axios from 'axios'; import Box from './box'; import './styles/app.css'; -=import baseApiUrl from './api'; +import api from './api'; function App() { @@ -22,7 +22,7 @@ function App() { const fetchDataAsync = async () => { try { - const resp = await axios.get(baseApiUrl); + const resp = await axios.get(api.baseApiUrl); setData(resp.data); } catch (error) { @@ -32,7 +32,7 @@ function App() { const createBox = async (boxData) => { try { - const response = await axios.post(baseApiUrl, boxData); + const response = await axios.post(api.baseApiUrl, boxData); setData(response.data); } catch (error) { @@ -42,19 +42,7 @@ function App() { const deleteBox = async (id) => { try { - const response = await axios.delete(`${baseApiUrl}/${id}`); - setData(response.data); - } - catch (error) { - console.log(error); - } - } - - - - const deleteItem = async (id) => { - try { - const response = await axios.delete(`${baseApiUrl}/item/${id}`); + const response = await axios.delete(`${api.baseApiUrl}/${id}`); setData(response.data); } catch (error) { @@ -87,18 +75,17 @@ function App() { - const handler = { - box: { + const boxHandler = { handleSubmit: handleSubmitBox, handleRemove: handleRemoveBox, handleName: handleBoxName, - handleDescription: handleBoxDescription, - }, + handleDescription: handleBoxDescription }; + const lstBoxes = data.map((box) => { return ( ); }); @@ -106,14 +93,14 @@ function App() { const formNewBox = -
+ New Box
diff --git a/client/src/box.js b/client/src/box.js index bb6eade..48c2555 100644 --- a/client/src/box.js +++ b/client/src/box.js @@ -1,71 +1,103 @@ -import React, {useState, setState} from 'react'; +import React, { useState, setState } from 'react'; import Item from './item'; -import baseApiUrl from './api'; +import api from './api'; +import axios from 'axios'; -const [showFormItem, setShowFormItem] = useState(false); -const [itemName, setItemName] = useState(''); -const [itemDescription, setItemDescription] = useState(''); -const handleItemName = (e) => { - setItemName(e.target.value); - } -const handleItemDescription = (e) => { - setItemDescription(e.target.value); - } +const Box = ({ boxData, handleRemove }) => { + const [data, setData] = useState(boxData); + const [showFormItem, setShowFormItem] = useState(false); - const handleAddItem = () => { - setShowFormItem(true); - } - const handleSubmitItem = (event) => { - event.preventDefault(); - const id = (event.target).querySelector("#id").value; - const itemData= { - name: itemName, - description: itemDescription + const [itemName, setItemName] = useState(''); + const [itemDescription, setItemDescription] = useState(''); + + + const createItem = async (id, itemData) => { + try { + const response = await axios.post(`${api.baseApiUrl}/${id}/item`, itemData); + setData(response.data); + } + catch (error) { + console.log(error); + } } - createItem(id, itemData); - return false; - } - const createItem = async (id, itemData) => { - try { - const response = await axios.post(`${baseApiUrl}/${id}/item`, itemData); - const update = [...data]; - update.splice(data.findIndex((box) => box._id === id), 1, response.data); - console.log(update); - setData(update); + + const removeItem = async (id) => { + try { + const response = await axios.delete(`${api.baseApiUrl}/${data._id}/item/${id}`); + //box data copy + let boxData = Object.assign({}, data); + boxData = Object.assign(boxData, {item: response.data}) + setData(boxData); + } + catch (error) { + console.log(error); + } } - catch(error) { - console.log(error); + const clearForm = () => { + setItemName(); + setItemDescription(); } - } -const Box = ({data, handler}) => { - const [items, setItems] = useState(data.item); + const handleItemName = (e) => { + setItemName(e.target.value); + } + const handleItemDescription = (e) => { + setItemDescription(e.target.value); + } + + const handleAddItem = () => { + setShowFormItem(true); + } + const handleRemoveItem = (id) => { + removeItem(id); + } + const handleSubmitItem = (event) => { + event.preventDefault(); + setShowFormItem(false); + clearForm(); + const id = (event.target).querySelector("#id").value; + const itemData = { + name: itemName, + description: itemDescription + } + createItem(id, itemData); + return false; + } + + const itemHandler = { + handleSubmit: handleSubmitItem, + handleRemove: handleRemoveItem, + handleName: handleItemName, + handleDescription: handleItemDescription + }; + + const formNewItem = + New Item +
+ + + +
+ +
+ return (
  • -

    {data.name}

    - - - - - {showFormItem && -
    - New Item -
    - - - -
    - -
    } +

    {data.name}

    +

    {data.description}

    + + + + {showFormItem && formNewItem}
    • - ) } diff --git a/client/src/item.js b/client/src/item.js index 99f479a..3e8cbd5 100644 --- a/client/src/item.js +++ b/client/src/item.js @@ -1,12 +1,13 @@ import React, {useState, setState } from 'react'; -const item = ({data, handler}) => { +const item = ({data, handleRemove}) => { return (

  • {data.name}

    +
    • ); }; diff --git a/server/server.js b/server/server.js index 070c447..85fae65 100644 --- a/server/server.js +++ b/server/server.js @@ -21,15 +21,23 @@ db.once('open', function() { /*------------MODELS------------*/ //create schema +var itemSchema = new mongoose.Schema({ + id: String, + name: String, + description: String, + quantity: Number +}); + var boxSchema = new mongoose.Schema({ id: String, name: String, description: String, - item: [mongoose.Schema.Types.Mixed], + item: [itemSchema], }); //compile schema into model var Box = mongoose.model('box', boxSchema, 'box'); +var Item = mongoose.model('item', itemSchema, 'item'); /*------------/MODELS------------*/ /*------------CONTROLLER------------*/ @@ -43,20 +51,14 @@ app.get('/box', async (request, response) => { // create box app.post('/box', async (request, response) => { - Box.create(request.body, (error, document) => { - if(error) return request.next(error); - return document; - }); + await Box.create(request.body); const updatedBoxes = await getAllBoxes(); response.send(updatedBoxes); }); //delete box app.delete('/box/:id', async (request, response) => { - await Box.deleteOne({_id: request.params.id}, (error, document) => { - if(error)return null; - return document; - }); + await Box.deleteOne({_id: request.params.id}); const updatedBoxes = await getAllBoxes(); response.send(updatedBoxes); }); @@ -65,24 +67,21 @@ app.delete('/box/:id', async (request, response) => { app.post('/box/:id/item', async (request, response) => { const id = request.params.id; const query = {_id: id}; - const box = Box.updateOne(query,{ + const box = await Box.updateOne(query, { $push: { item: request.body } - }, (error, document) => { - if(error)return null; - return document; }); const updatedBox = await getBox(id); response.send(updatedBox); }); -//delete item //THIS IS NOT WORKING -app.delete('/item/:id', async (request, response) => { - Item.deleteOne({_id: request.params.id}, (error, document) => { - if(error)return null; - return document; - }); - const updatedBoxes = await getAllBoxes(); - response.send(updatedBoxes); +//delete item +app.delete('/box/:boxId/item/:itemId', async (request, response) => { + const boxID = request.params.boxId; + const itemID = request.params.itemId; + await Box.update({ _id: boxID }, { $pull: { item: { _id: itemID } } }); + const box = await getBox(boxID); + console.log(box.item); + response.send(box.item); }); @@ -90,17 +89,11 @@ app.delete('/item/:id', async (request, response) => { const getAllBoxes = async (queryParameters) => { queryParameters = queryParameters ?? {}; - const data = await Box.find(queryParameters, (error, document) => { - if(error) return null; - return document; - }); + const data = await Box.find(queryParameters); return data; } const getBox = async (id) => { - const data = await Box.findById(id, (error, document) => { - if(error) return null; - return document; - }); + const data = await Box.findById(id); return data; } \ No newline at end of file