From 1139da4da7f1bb0ee4a66d420e690beed36832c2 Mon Sep 17 00:00:00 2001 From: Vidhu Kant Sharma Date: Sun, 4 Dec 2022 21:37:52 +0530 Subject: added notification system --- src/components/editors/brand-editor.js | 15 +++++++++++++-- src/components/editors/client-editor.js | 24 +++++++++++++++++------- src/components/editors/item-editor.js | 24 ++++++++++++++++++++---- src/components/editors/multi-address-editor.js | 1 - src/components/navbar/navbar.js | 2 +- src/components/navbar/navbar.scss | 3 ++- src/components/tables/brand-table.js | 20 ++++++++++++++++---- src/components/tables/client-table.js | 24 ++++++++++++++++++------ src/components/tables/item-table.js | 20 ++++++++++++++++---- 9 files changed, 103 insertions(+), 30 deletions(-) (limited to 'src/components') diff --git a/src/components/editors/brand-editor.js b/src/components/editors/brand-editor.js index 7796c68..2b7806e 100644 --- a/src/components/editors/brand-editor.js +++ b/src/components/editors/brand-editor.js @@ -16,8 +16,10 @@ */ import { Brand, saveBrand, editBrand } from './../../classes/brand' +import { notificationConfig } from "./../../classes/notifications"; import './scss/brand-editor.scss' +import { Store } from "react-notifications-component"; import { useState } from 'react'; const BrandEditor = (props) => { @@ -36,13 +38,22 @@ const BrandEditor = (props) => { } const handleSuccess = () => { + Store.addNotification({ + title: `Successfully ${props.editing ? "edited" : "added"} brand!`, + message: `${name} has successfully been ${props.editing ? "edited" : "saved"}.`, + ...notificationConfig("success") + }); clearAll(); props.callback(); props.editing && props.hide(); } - const handleFail = () => { - alert("fail"); + const handleFail = err => { + Store.addNotification({ + title: "An error occoured", + message: `Failed to ${props.editing ? "edit" : "add"} brand '${name}'. ${err.message}`, + ...notificationConfig("danger") + }); } const clearAll = () => { diff --git a/src/components/editors/client-editor.js b/src/components/editors/client-editor.js index 9a752c7..96ab639 100644 --- a/src/components/editors/client-editor.js +++ b/src/components/editors/client-editor.js @@ -16,11 +16,13 @@ */ import { Client, saveClient, editClient, Contact, Address } from './../../classes/client'; +import { notificationConfig } from "./../../classes/notifications"; import MultiAddressEditor from './multi-address-editor'; import AddressEditor from './address-editor'; import ContactEditor from './contact-editor'; import './scss/client-editor.scss'; +import { Store } from "react-notifications-component"; import { useState, useEffect } from 'react'; const ClientEditor = (props) => { @@ -37,8 +39,8 @@ const ClientEditor = (props) => { // will delete existing shipping addresses if false useEffect(() => - setShippingAddresses(shipToBillingAddress ? [] : (shippingAddresses.length > 0 ? shippingAddresses : [new Address()])) - , [shipToBillingAddress, shippingAddresses]); + setShippingAddresses(i => shipToBillingAddress ? [] : (i.length > 0 ? i : [new Address()])) + , [shipToBillingAddress]); const handleSubmit = (e) => { e.preventDefault(); @@ -63,15 +65,23 @@ const ClientEditor = (props) => { } const handleSuccess = (res) => { - console.log("Successfully saved client", res) + Store.addNotification({ + title: `Successfully ${props.editing ? "edited" : "added"} client!`, + message: `${name} has successfully been ${props.editing ? "edited" : "saved"}.`, + ...notificationConfig("success") + }); clearAll(); - props.successCallback(); + props.successCallback && props.successCallback(); props.editing && props.hide(); } - const handleFail = (err) => { - alert("error while saving client. please check logs"); - console.log(err); + const handleFail = err => { + Store.addNotification({ + title: "An error occoured", + message: `Failed to edit client ${name}. ${err.message}`, + ...notificationConfig("danger") + }); + console.log(err) } const clearAll = () => { diff --git a/src/components/editors/item-editor.js b/src/components/editors/item-editor.js index be0ac4f..c1d260d 100644 --- a/src/components/editors/item-editor.js +++ b/src/components/editors/item-editor.js @@ -17,9 +17,11 @@ import { Item, saveItem, editItem } from './../../classes/item'; import { Brand, getAllBrands } from './../../classes/brand'; +import { notificationConfig } from "./../../classes/notifications"; import './scss/item-editor.scss'; import { useState, useEffect } from 'react'; +import { Store } from "react-notifications-component"; const ItemEditor = (props) => { const [name, setName] = useState(props.item.Name); @@ -37,8 +39,13 @@ const ItemEditor = (props) => { // get saved brands from API // needed by the brands dropdown menu useEffect(() => { - // TODO: handle error - getAllBrands(setSavedBrands, () => {}); + getAllBrands(setSavedBrands, err => { + Store.addNotification({ + title: "Error while getting Brands list.", + message: err.message, + ...notificationConfig("danger") + }); + }); }, []) const handleSubmit = (e) => { @@ -76,13 +83,22 @@ const ItemEditor = (props) => { } const handleSuccess = () => { + Store.addNotification({ + title: `Successfully ${props.editing ? "edited" : "added"} item!`, + message: `${name} has successfully been ${props.editing ? "edited" : "saved"}.`, + ...notificationConfig("success") + }); clearAll(); props.callback(); props.editing && props.hide(); } - const handleFail = () => { - alert("fail"); + const handleFail = err => { + Store.addNotification({ + title: "An error occoured", + message: `Failed to ${props.editing ? "edit" : "add"} item ${name}. ${err.message}`, + ...notificationConfig("danger") + }); } const handleBrandSelect = (e) => { diff --git a/src/components/editors/multi-address-editor.js b/src/components/editors/multi-address-editor.js index 1159fab..1ea58b7 100644 --- a/src/components/editors/multi-address-editor.js +++ b/src/components/editors/multi-address-editor.js @@ -18,7 +18,6 @@ import AddressEditor from './address-editor'; const MultiAddressEditor = ({addresses, setAddresses, setShipToBillingAddress}) => { - console.log(addresses) const handleChange = (id, data) => { const newAddresses = [...addresses]; newAddresses[id] = { diff --git a/src/components/navbar/navbar.js b/src/components/navbar/navbar.js index bf909e7..1254952 100644 --- a/src/components/navbar/navbar.js +++ b/src/components/navbar/navbar.js @@ -58,7 +58,7 @@ const Navbar = () => {
- App Logo + App Logo diff --git a/src/components/navbar/navbar.scss b/src/components/navbar/navbar.scss index 8173249..a7f560e 100644 --- a/src/components/navbar/navbar.scss +++ b/src/components/navbar/navbar.scss @@ -52,8 +52,9 @@ .logo { flex: 1; + height: 3.5rem; img { - height: 4rem; + height: 3.5rem; } } } diff --git a/src/components/tables/brand-table.js b/src/components/tables/brand-table.js index db8272c..3b38a5c 100644 --- a/src/components/tables/brand-table.js +++ b/src/components/tables/brand-table.js @@ -17,6 +17,9 @@ import './scss/brand-table.scss'; import { deleteBrand } from './../../classes/brand'; +import { notificationConfig } from "./../../classes/notifications"; + +import { Store } from "react-notifications-component"; const BrandTable = (props) => { const handleEdit = (b) => { @@ -25,15 +28,24 @@ const BrandTable = (props) => { const handleDelete = (b) => { // TODO: add confirmation prompt - deleteBrand(b.Id, handleDelSuccess, handleDelFail); + deleteBrand(b.Id, () => handleDelSuccess(b), err => handleDelFail(b, err)); } - const handleDelSuccess = () => { + const handleDelSuccess = b => { + Store.addNotification({ + title: "Successfully deleted brand!", + message: `Brand '${b.Name}' has successfully been deleted.`, + ...notificationConfig("success") + }); props.refresh(); } - const handleDelFail = () => { - alert("fail") + const handleDelFail = (b, err) => { + Store.addNotification({ + title: "An error occoured", + message: `Failed to delete brand '${b.Name}'. ${err.message}`, + ...notificationConfig("danger") + }); } return ( diff --git a/src/components/tables/client-table.js b/src/components/tables/client-table.js index cea612d..1f51c88 100644 --- a/src/components/tables/client-table.js +++ b/src/components/tables/client-table.js @@ -17,23 +17,35 @@ import './scss/client-table.scss'; import { deleteClient } from './../../classes/client'; +import { notificationConfig } from "./../../classes/notifications"; + +import { Store } from "react-notifications-component"; const ClientTable = (props) => { - const handleEdit = (c) => { + const handleEdit = c => { props.setClientToEdit(c) } - const handleDelete = (c) => { + const handleDelete = c => { // TODO: add confirmation prompt - deleteClient(c.Id, handleDelSuccess, handleDelFail); + deleteClient(c.Id, () => handleDelSuccess(c), err => handleDelFail(c, err)); } - const handleDelSuccess = () => { + const handleDelSuccess = c => { + Store.addNotification({ + title: "Successfully deleted client!", + message: `Client '${c.Name}' has successfully been deleted.`, + ...notificationConfig("success") + }); props.refresh(); } - const handleDelFail = () => { - alert("fail") + const handleDelFail = (c, err) => { + Store.addNotification({ + title: "An error occoured", + message: `Failed to delete client '${c.Name}'. ${err.message}`, + ...notificationConfig("danger") + }); } return ( diff --git a/src/components/tables/item-table.js b/src/components/tables/item-table.js index 2fb7210..1b47f6f 100644 --- a/src/components/tables/item-table.js +++ b/src/components/tables/item-table.js @@ -17,6 +17,9 @@ import './scss/table.scss'; import { deleteItem } from './../../classes/item'; +import { notificationConfig } from "./../../classes/notifications"; + +import { Store } from "react-notifications-component"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons' @@ -27,15 +30,24 @@ const ItemTable = (props) => { const handleDelete = (i) => { // TODO: add confirmation prompt - deleteItem(i.Id, handleDelSuccess, handleDelFail); + deleteItem(i.Id, () => handleDelSuccess(i), err => handleDelFail(i, err)); } - const handleDelSuccess = () => { + const handleDelSuccess = i => { + Store.addNotification({ + title: "Successfully deleted item!", + message: `Item '${i.Name}' has successfully been deleted.`, + ...notificationConfig("success") + }); props.refresh(); } - const handleDelFail = () => { - alert("fail") + const handleDelFail = (i, err) => { + Store.addNotification({ + title: "An error occoured", + message: `Failed to delete item '${i.Name}'. ${err.message}`, + ...notificationConfig("danger") + }); } return ( -- cgit v1.2.3