From 29a07f785fa3764e5205055f90c1dfb765b069fc Mon Sep 17 00:00:00 2001 From: "np.w" Date: Fri, 20 Nov 2020 17:56:36 -0600 Subject: [PATCH] moving some boxes around --- client/src/api.js | 13 +++++++ client/src/app.js | 70 ++++++++++++++++++++----------------- client/src/box.js | 72 +++++++++++++++++++++++++++++++++++++++ client/src/item.js | 13 +++++++ client/src/styles/app.css | 4 --- server/server.js | 50 +++++++++++++++++++++------ 6 files changed, 176 insertions(+), 46 deletions(-) create mode 100644 client/src/api.js create mode 100644 client/src/box.js create mode 100644 client/src/item.js diff --git a/client/src/api.js b/client/src/api.js new file mode 100644 index 0000000..6574fdd --- /dev/null +++ b/client/src/api.js @@ -0,0 +1,13 @@ +const SERVER_IP_ADDRESS = 'localhost'; +const SERVER_PORT = '5000'; +const PROTOCOL = 'http'; +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 c04b2dc..9e64fb8 100644 --- a/client/src/app.js +++ b/client/src/app.js @@ -1,12 +1,8 @@ import React, { useState, useEffect } from 'react'; import axios from 'axios'; +import Box from './box'; import './styles/app.css'; - -const SERVER_IP_ADDRESS = 'localhost'; -const SERVER_PORT = '5000'; -const PROTOCOL = 'http'; -const databaseName = 'box'; -const baseApiUrl = `${PROTOCOL}://${SERVER_IP_ADDRESS}:${SERVER_PORT}/${databaseName}`; +=import baseApiUrl from './api'; function App() { @@ -22,13 +18,15 @@ function App() { const [boxName, setBoxName] = useState(''); const [boxDescription, setBoxDescription] = useState(''); + + const fetchDataAsync = async () => { try { const resp = await axios.get(baseApiUrl); setData(resp.data); } - catch (e) { - console.log(e); + catch (error) { + console.log(error); } } @@ -52,15 +50,27 @@ function App() { } } + + + const deleteItem = async (id) => { + try { + const response = await axios.delete(`${baseApiUrl}/item/${id}`); + setData(response.data); + } + catch (error) { + console.log(error); + } + } + const handleBoxName = (e) => { setBoxName(e.target.value); } - + const handleBoxDescription = (e) => { setBoxDescription(e.target.value); } - - const handleSubmit = (event) => { + + const handleSubmitBox = (event) => { event.preventDefault(); const boxData = { name: boxName, @@ -69,35 +79,34 @@ function App() { createBox(boxData); return false; } - const handleRemove = (id) => { - console.log(id); + + const handleRemoveBox = (id) => { deleteBox(id); } + + + + const handler = { + box: { + handleSubmit: handleSubmitBox, + handleRemove: handleRemoveBox, + handleName: handleBoxName, + handleDescription: handleBoxDescription, + }, + }; const lstBoxes = data.map((box) => { return ( ); }); + + const formNewBox = -
+ New Box
- - +
return ( diff --git a/client/src/box.js b/client/src/box.js new file mode 100644 index 0000000..bb6eade --- /dev/null +++ b/client/src/box.js @@ -0,0 +1,72 @@ +import React, {useState, setState} from 'react'; +import Item from './item'; +import baseApiUrl from './api'; + +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 handleAddItem = () => { + setShowFormItem(true); + } + const handleSubmitItem = (event) => { + event.preventDefault(); + const id = (event.target).querySelector("#id").value; + const itemData= { + name: itemName, + description: itemDescription + } + 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); + } + catch(error) { + console.log(error); + } + } +const Box = ({data, handler}) => { + const [items, setItems] = useState(data.item); + return ( +
  • +

    {data.name}

    + + + + + {showFormItem && +
    + New Item +
    + + + +
    + +
    } +
    • + + ) +} + +export default Box; \ No newline at end of file diff --git a/client/src/item.js b/client/src/item.js new file mode 100644 index 0000000..99f479a --- /dev/null +++ b/client/src/item.js @@ -0,0 +1,13 @@ +import React, {useState, setState } from 'react'; + +const item = ({data, handler}) => { + return (
  • +

    {data.name}

    + +
    • ); +}; + +export default item; \ No newline at end of file diff --git a/client/src/styles/app.css b/client/src/styles/app.css index 1796490..1aa60c6 100644 --- a/client/src/styles/app.css +++ b/client/src/styles/app.css @@ -4,8 +4,4 @@ form > fieldset > label { form > fieldset { border: none; -} - -.item { - display: none; } \ No newline at end of file diff --git a/server/server.js b/server/server.js index b7aa824..070c447 100644 --- a/server/server.js +++ b/server/server.js @@ -6,7 +6,7 @@ const cors = require('cors'); app.use(cors(), express.json()); const port = process.env.PORT || 5000; -const MONGO_IP_ADDRESS = '192.168.1.2'; +const MONGO_IP_ADDRESS = '192.168.100.102'; mongoose.connect(`mongodb://${MONGO_IP_ADDRESS}/storage`, {useNewUrlParser: true}); const db = mongoose.connection; @@ -21,16 +21,11 @@ db.once('open', function() { /*------------MODELS------------*/ //create schema -var itemSchema = new mongoose.Schema({ - name: String, - quantity: Number, - description: String, -}); var boxSchema = new mongoose.Schema({ id: String, name: String, description: String, - item: [itemSchema], + item: [mongoose.Schema.Types.Mixed], }); //compile schema into model @@ -46,7 +41,7 @@ app.get('/box', async (request, response) => { response.send(boxes); }); -// create new box +// create box app.post('/box', async (request, response) => { Box.create(request.body, (error, document) => { if(error) return request.next(error); @@ -58,19 +53,52 @@ app.post('/box', async (request, response) => { //delete box app.delete('/box/:id', async (request, response) => { - Box.deleteOne({_id: request.params.id}, (error, document) => { + await Box.deleteOne({_id: request.params.id}, (error, document) => { if(error)return null; return document; }); const updatedBoxes = await getAllBoxes(); response.send(updatedBoxes); -}) +}); + +//create item +app.post('/box/:id/item', async (request, response) => { + const id = request.params.id; + const query = {_id: id}; + const box = 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); +}); + /*------------/CONTROLLER------------*/ const getAllBoxes = async (queryParameters) => { queryParameters = queryParameters ?? {}; - const data = Box.find(queryParameters, (error, document) => { + const data = await Box.find(queryParameters, (error, document) => { + if(error) return null; + return document; + }); + return data; +} + +const getBox = async (id) => { + const data = await Box.findById(id, (error, document) => { if(error) return null; return document; });