aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
authorVidhu Kant Sharma <vidhukant@vidhukant.xyz>2022-12-04 21:37:52 +0530
committerVidhu Kant Sharma <vidhukant@vidhukant.xyz>2022-12-04 21:37:52 +0530
commit1139da4da7f1bb0ee4a66d420e690beed36832c2 (patch)
treeb0e5fca2f13c691b0c42543d98a747289f527e52 /src/components
parentbb38d843de17bb0b206a663e008c5dbb37f04708 (diff)
added notification system
Diffstat (limited to 'src/components')
-rw-r--r--src/components/editors/brand-editor.js15
-rw-r--r--src/components/editors/client-editor.js24
-rw-r--r--src/components/editors/item-editor.js24
-rw-r--r--src/components/editors/multi-address-editor.js1
-rw-r--r--src/components/navbar/navbar.js2
-rw-r--r--src/components/navbar/navbar.scss3
-rw-r--r--src/components/tables/brand-table.js20
-rw-r--r--src/components/tables/client-table.js24
-rw-r--r--src/components/tables/item-table.js20
9 files changed, 103 insertions, 30 deletions
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 = () => {
<div className={"navbar"}>
<span className={"logo"}>
<Link to="/">
- <img src="/logo.png" alt="App Logo"/>
+ <img src="/waifu_logo.png" alt="App Logo"/>
</Link>
</span>
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 (