diff options
26 files changed, 540 insertions, 77 deletions
diff --git a/package.json b/package.json index 50223ea..83eb09b 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "node-sass": "^7.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-notifications-component": "^4.0.1", "react-router-dom": "^6.4.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.0" diff --git a/public/waifu_logo.png b/public/waifu_logo.png Binary files differnew file mode 100644 index 0000000..11145bb --- /dev/null +++ b/public/waifu_logo.png @@ -16,7 +16,9 @@ */ import { BrowserRouter, Route, Routes } from "react-router-dom"; -import './App.scss'; +import { ReactNotifications } from "react-notifications-component"; +import "./notifications_styles/notification.scss" + import Navbar from './components/navbar/navbar'; import HomePage from './views/homepage'; import RegisterPage from './views/login/register'; @@ -27,11 +29,13 @@ import ManageItemsPage from './views/manage/items'; import ManageClientsPage from './views/manage/clients'; import ManageBrandsPage from './views/manage/brands'; import ManageInvoicesPage from './views/manage/invoices'; +import './App.scss'; const App = () => { return ( <BrowserRouter> <Navbar/> + <ReactNotifications /> <main> <Routes> <Route exact path="/" element={<HomePage/>}/> diff --git a/src/App.scss b/src/App.scss index 1b37ffe..f7fdf46 100644 --- a/src/App.scss +++ b/src/App.scss @@ -86,3 +86,22 @@ $selectionColor: rgba($primaryAccentColor, 0.9) } } +.floating-wrapper { + height: 100vh; + width: 100vw; + box-sizing: border-box; + position: fixed; + top: 0; + left: 0; + background-color: rgba($backgroundColor, 0.3); + z-index: 5; + display: flex; + justify-content: center; + align-items: center; + backdrop-filter: blur(2px); + .floating-window { + width: 90%; + max-width: 1200px; + z-index: 6; + } +} diff --git a/src/_colors.scss b/src/_colors.scss index 08a700c..0b73ab9 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -30,6 +30,8 @@ $darkgray: #232627; $black: black; $warningColor: #ed4683; +$infoColor: #e8b454; +$successColor: #0ec685; $fgColor: $white; $darkFgColor: $black; diff --git a/src/classes/item.js b/src/classes/item.js index 63f65ca..53f4bcd 100644 --- a/src/classes/item.js +++ b/src/classes/item.js @@ -54,25 +54,25 @@ export class InvoiceItem extends Item { export const saveItem = (item, ok, fail) => { axios.post("/item/new", item) .then(res => ok()) - .catch((err) => fail()) + .catch(err => fail(err)) } export const deleteItem = (id, ok, fail) => { axios.delete(`/item/${id}`) .then(res => ok()) - .catch((err) => fail()) + .catch(err => fail(err)) } export const getAllItems = (ok, fail) => { axios.get("/item/all") .then(res => ok(res.data)) - .catch(err => fail()) + .catch(err => fail(err)) } export const editItem = (item, ok, fail) => { axios.put(`/item/${item.Id}`, item) .then(res => ok()) - .catch(err => fail()); + .catch(err => fail(err)); } export const getDiscountValue = (item) => diff --git a/src/_styles.scss b/src/classes/notifications.js index 064b9c6..5ffdec8 100644 --- a/src/_styles.scss +++ b/src/classes/notifications.js @@ -15,26 +15,17 @@ * along with this program. If not, see <https://www.gnu.org/licenses/>. */ -@import "colors"; - -@mixin floating-window { - .floating-wrapper { - height: 100vh; - width: 100vw; - box-sizing: border-box; - position: fixed; - top: 0; - left: 0; - background-color: rgba($backgroundColor, 0.3); - z-index: 5; - display: flex; - justify-content: center; - align-items: center; - backdrop-filter: blur(2px); - .floating-window { - width: 90%; - max-width: 1200px; - z-index: 6; - } +// TODO: load defaults from config +export function notificationConfig(type, duration=3000) { + return { + type: type, + insert: "top", + container: "top-right", + animationIn: ["animate__animated", "animate__fadeIn"], + animationOut: ["animate__animated", "animate__fadeOut"], + dismiss: { + duration: duration, + onScreen: true } + }; } 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 ( diff --git a/src/notifications_styles/_containers.scss b/src/notifications_styles/_containers.scss new file mode 100644 index 0000000..b0f00a4 --- /dev/null +++ b/src/notifications_styles/_containers.scss @@ -0,0 +1,100 @@ +.rnc__notification-container--top-center,
+.rnc__notification-container--top-left,
+.rnc__notification-container--top-right,
+.rnc__notification-container--bottom-center,
+.rnc__notification-container--bottom-left,
+.rnc__notification-container--bottom-right,
+.rnc__notification-container--center,
+.rnc__notification-container--top-full,
+.rnc__notification-container--bottom-full {
+ min-width: 325px;
+ position: absolute;
+ pointer-events: all;
+}
+
+.rnc__notification-container--center,
+.rnc__notification-container--top-center,
+.rnc__notification-container--bottom-center {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ left: calc(50% - 175px);
+}
+
+.rnc__notification-container--center,
+.rnc__notification-container--top-center,
+.rnc__notification-container--bottom-center {
+ max-width: 350px;
+}
+
+.rnc__notification-container--center {
+ top: 20px;
+ height: 100%;
+ pointer-events: none;
+}
+
+.rnc__notification-container--top-full,
+.rnc__notification-container--bottom-full {
+ width: 100%;
+ min-width: 100%;
+}
+
+.rnc__notification-container--bottom-full {
+ bottom: 0;
+}
+
+.rnc__util--flex-center {
+ min-width: 325px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ pointer-events: all;
+}
+
+.rnc__notification-container--top-center {
+ top: 20px;
+}
+.rnc__notification-container--bottom-center {
+ bottom: 20px;
+}
+
+.rnc__notification-container--top-left {
+ left: 20px;
+ top: 20px;
+}
+
+.rnc__notification-container--top-right {
+ right: 20px;
+ top: 20px;
+}
+
+.rnc__notification-container--bottom-left {
+ left: 20px;
+ bottom: 20px;
+}
+
+.rnc__notification-container--bottom-right {
+ bottom: 20px;
+ right: 20px;
+}
+
+.rnc__notification-container--mobile-top,
+.rnc__notification-container--mobile-bottom {
+ pointer-events: all;
+ position: absolute;
+}
+
+.rnc__notification-container--mobile-top {
+ right: 20px;
+ left: 20px;
+ top: 20px;
+}
+
+.rnc__notification-container--mobile-bottom {
+ right: 20px;
+ left: 20px;
+ bottom: 20px;
+ margin-bottom: -15px;
+}
diff --git a/src/notifications_styles/_types.scss b/src/notifications_styles/_types.scss new file mode 100644 index 0000000..ccfbee2 --- /dev/null +++ b/src/notifications_styles/_types.scss @@ -0,0 +1,91 @@ +@import "_variables.scss";
+
+.rnc__notification-item--default {
+ background-color: $default;
+ border-left: 8px solid $default_dark;
+
+ .rnc__notification-timer {
+ background-color: $default_timer;
+ }
+ .rnc__notification-timer-filler {
+ background-color: $default_timer_filler;
+ }
+ .rnc__notification-close-mark {
+ background-color: $default;
+ }
+}
+
+.rnc__notification-item--success {
+ background-color: $success;
+ border-left: 8px solid $success_dark;
+
+ .rnc__notification-timer {
+ background-color: $success_timer;
+ }
+ .rnc__notification-timer-filler {
+ background-color: $success_timer_filler;
+ }
+ .rnc__notification-close-mark {
+ background-color: $success;
+ }
+}
+
+.rnc__notification-item--danger {
+ background-color: $danger;
+ border-left: 8px solid $danger_dark;
+
+ .rnc__notification-timer {
+ background-color: $danger_timer;
+ }
+ .rnc__notification-timer-filler {
+ background-color: $danger_timer_filler;
+ }
+ .rnc__notification-close-mark {
+ background-color: $danger;
+ }
+}
+
+.rnc__notification-item--info {
+ background-color: $info;
+ border-left: 8px solid $info_dark;
+
+ .rnc__notification-timer {
+ background-color: $info_timer;
+ }
+ .rnc__notification-timer-filler {
+ background-color: $info_timer_filler;
+ }
+ .rnc__notification-close-mark {
+ background-color: $info;
+ }
+}
+
+.rnc__notification-item--warning {
+ background-color: $warning;
+ border-left: 8px solid $warning_dark;
+
+ .rnc__notification-timer {
+ background-color: $warning_timer;
+ }
+ .rnc__notification-timer-filler {
+ background-color: $warning_timer_filler;
+ }
+ .rnc__notification-close-mark {
+ background-color: $warning;
+ }
+}
+
+.rnc__notification-item--awesome {
+ background-color: $awesome;
+ border-left: 8px solid $awesome_dark;
+
+ .rnc__notification-timer {
+ background-color: $awesome_timer;
+ }
+ .rnc__notification-timer-filler {
+ background-color: $awesome_timer_filler;
+ }
+ .rnc__notification-close-mark {
+ background-color: $awesome;
+ }
+}
\ No newline at end of file diff --git a/src/notifications_styles/_variables.scss b/src/notifications_styles/_variables.scss new file mode 100644 index 0000000..a65c811 --- /dev/null +++ b/src/notifications_styles/_variables.scss @@ -0,0 +1,31 @@ +@import "../colors";
+
+$default: $altBackgroundColor !default;
+$default_dark: $primaryAccentColor !default;
+$default_timer: $backgroundColor !default;
+$default_timer_filler: $primaryAccentColor !default;
+
+$success: $altBackgroundColor !default;
+$success_dark: $successColor !default;
+$success_timer: $backgroundColor !default;
+$success_timer_filler: $successColor !default;
+
+$danger: $altBackgroundColor !default;
+$danger_dark: $warningColor !default;
+$danger_timer: $backgroundColor !default;
+$danger_timer_filler: $warningColor !default;
+
+$warning: $altBackgroundColor !default;
+$warning_dark: $infoColor !default;
+$warning_timer: $backgroundColor !default;
+$warning_timer_filler: $infoColor !default;
+
+$info: $default;
+$info_dark: $default_dark;
+$info_timer: $default_timer;
+$info_timer_filler: $default_timer_filler;
+
+$awesome: $success;
+$awesome_dark: $success_dark;
+$awesome_timer: $success_timer;
+$awesome_timer_filler: $success_timer_filler;
diff --git a/src/notifications_styles/notification.scss b/src/notifications_styles/notification.scss new file mode 100644 index 0000000..33d8efb --- /dev/null +++ b/src/notifications_styles/notification.scss @@ -0,0 +1,110 @@ +@import "./_containers.scss";
+@import "./_types.scss";
+
+@keyframes timer {
+ 0% { width: 100%; }
+ 100% { width: 0%; }
+}
+
+.rnc__base {
+ position: fixed;
+ z-index: 9000;
+ pointer-events: none;
+ width: 100%;
+ height: 100%;
+}
+
+.rnc__notification-item {
+ display: flex;
+ position: relative;
+ border-radius: 3px;
+ margin-bottom: 15px;
+ box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.2);
+ cursor: pointer;
+}
+
+.rnc__notification-container--top-full .rnc__notification-item,
+.rnc__notification-container--bottom-full .rnc__notification-item {
+ margin-bottom: 0;
+ border-radius: 0;
+}
+
+.rnc__notification-container--top-full .rnc__notification,
+.rnc__notification-container--bottom-full .rnc__notification {
+ width: 100% !important;
+}
+
+.rnc__notification-timer {
+ width: 100%;
+ height: 3px;
+ margin-top: 10px;
+ border-radius: 5px;
+}
+.rnc__notification-timer-filler {
+ height: 3px;
+ border-radius: 5px;
+}
+.rnc__notification-title {
+ color: #fff;
+ font-weight: 700;
+ font-size: 14px;
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+.rnc__notification-message {
+ color: #fff;
+ max-width: calc(100% - 15px);
+ font-size: 14px;
+ line-height: 150%;
+ word-wrap: break-word;
+ margin-bottom: 0;
+ margin-top: 0;
+}
+.rnc__notification-content {
+ padding: 8px 15px;
+ display: inline-block;
+ width: 100%;
+}
+.rnc__notification-close-mark {
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ display: inline-block;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+
+ &::after {
+ content: '\D7';
+ position: absolute;
+ transform: translate(-50%, -50%);
+ color: #fff;
+ font-size: 12px;
+ left: 50%;
+ top: 50%;
+ }
+}
+
+.rnc__notification-container--mobile-top .rnc__notification-item,
+.rnc__notification-container--mobile-bottom .rnc__notification-item,
+.rnc__notification-container--mobile-top .notification,
+.rnc__notification-container--mobile-bottom .notification {
+ max-width: 100%;
+ width: 100%;
+}
+
+.rnc__notification-container--top-right .notification,
+.rnc__notification-container--bottom-right .notification {
+ margin-left: auto;
+}
+
+.rnc__notification-container--top-left .notification,
+.rnc__notification-container--bottom-left .notification {
+ margin-right: auto;
+}
+
+.rnc__notification-container--mobile-top .notification,
+.rnc__notification-container--mobile-bottom .notification {
+ margin-left: auto;
+ margin-right: auto;
+}
\ No newline at end of file diff --git a/src/views/homepage.js b/src/views/homepage.js index a9cdb50..92f9544 100644 --- a/src/views/homepage.js +++ b/src/views/homepage.js @@ -15,9 +15,22 @@ * along with this program. If not, see <https://www.gnu.org/licenses/>. */ -import { Link } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router-dom'; +import { notificationConfig } from "../classes/notifications"; +import { Store } from "react-notifications-component"; const HomePage = () => { + // this is temporary, just for testing + // TODO: find better way to do this + const navigate = useNavigate(); + if (!localStorage.getItem("accessToken")) { + Store.addNotification({ + title: "You are not logged in", + message: "You need to log in before accessing this page.", + ...notificationConfig("default") + }); + navigate("/login") + } return ( <> <h1>Welcome to OpenBills</h1> diff --git a/src/views/login/register.js b/src/views/login/register.js index c747f59..1b1755b 100644 --- a/src/views/login/register.js +++ b/src/views/login/register.js @@ -17,12 +17,15 @@ import './scss/login.scss'; import { User, validateEmail, validateUsername, validatePassword, saveUser } from '../../classes/user'; +import { notificationConfig } from "./../../classes/notifications"; +import { Store } from "react-notifications-component"; import { Link } from 'react-router-dom'; import { useState } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faEye } from '@fortawesome/free-solid-svg-icons' + const RegisterPage = () => { const [user, setUser] = useState(new User()); const [showPassword, setShowPassword] = useState(false); @@ -41,11 +44,19 @@ const RegisterPage = () => { } const handleSuccess = () => { - alert("yay") + Store.addNotification({ + title: "Created new account", + message: `Welcome to OpenBills, ${user.UserName}!`, + ...notificationConfig("default") + }); } - const handleError = () => { - alert("fail") + const handleError = err => { + Store.addNotification({ + title: "An error occoured", + message: `Failed to create new account. ${err.message}`, + ...notificationConfig("danger") + }); } return ( diff --git a/src/views/manage/brands.js b/src/views/manage/brands.js index dad21e2..4ab3924 100644 --- a/src/views/manage/brands.js +++ b/src/views/manage/brands.js @@ -16,18 +16,26 @@ */ import { useState, useEffect } from 'react'; +import { Store } from "react-notifications-component"; import './scss/management-page.scss' import { Brand, getAllBrands } from '../../classes/brand'; import BrandEditor from './../../components/editors/brand-editor'; import BrandTable from './../../components/tables/brand-table'; +import { notificationConfig } from "./../../classes/notifications"; const ManageBrandsPage = () => { const [brandToEdit, setBrandToEdit] = useState(new Brand()); const [allBrands, setAllBrands] = useState([]); - // TODO: handle error + const updateList = () => - getAllBrands(setAllBrands, () => {}); + getAllBrands(setAllBrands, err => { + Store.addNotification({ + title: "Error while getting Brands list.", + message: err.message, + ...notificationConfig("danger") + }); + }); useEffect(() => { updateList(); diff --git a/src/views/manage/clients.js b/src/views/manage/clients.js index 8445d80..89e5ade 100644 --- a/src/views/manage/clients.js +++ b/src/views/manage/clients.js @@ -20,18 +20,26 @@ */ import { useState, useEffect } from 'react'; +import { Store } from "react-notifications-component"; import './scss/management-page.scss'; import { Client, getAllClients } from '../../classes/client'; import ClientEditor from './../../components/editors/client-editor'; import ClientTable from './../../components/tables/client-table'; +import { notificationConfig } from "./../../classes/notifications"; const ManageClientsPage = () => { const [clientToEdit, setClientToEdit] = useState(new Client()); const [allClients, setAllClients] = useState([]); // TODO: handle error const updateList = () => - getAllClients(setAllClients, () => {}); + getAllClients(setAllClients, err => { + Store.addNotification({ + title: "Error while getting Clients list.", + message: err.message, + ...notificationConfig("danger") + }); + }); useEffect(() => { updateList(); diff --git a/src/views/manage/items.js b/src/views/manage/items.js index 567be7c..2a862bc 100644 --- a/src/views/manage/items.js +++ b/src/views/manage/items.js @@ -20,18 +20,26 @@ */ import { useState, useEffect } from 'react'; +import { Store } from "react-notifications-component"; import './scss/management-page.scss' import { Item, getAllItems } from '../../classes/item'; import ItemEditor from './../../components/editors/item-editor'; import ItemTable from './../../components/tables/item-table'; +import { notificationConfig } from "./../../classes/notifications"; const ManageItemsPage = () => { const [itemToEdit, setItemToEdit] = useState(new Item()); const [allItems, setAllItems] = useState([]); - // TODO: handle error + const updateList = () => - getAllItems(setAllItems, () => {}); + getAllItems(setAllItems, err => { + Store.addNotification({ + title: "Error while getting Items list.", + message: err.message, + ...notificationConfig("danger") + }); + }); useEffect(() => { updateList(); @@ -1210,11 +1210,6 @@ resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz#76467a94aa888aeb22aafa43eb6ff889df3a5a7f" integrity sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg== -"@fortawesome/fontawesome-common-types@6.2.1": - version "6.2.1" - resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz#411e02a820744d3f7e0d8d9df9d82b471beaa073" - integrity sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ== - "@fortawesome/fontawesome-svg-core@^6.2.0": version "6.2.0" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz#11856eaf4dd1d865c442ddea1eed8ee855186ba2" @@ -1222,13 +1217,6 @@ dependencies: "@fortawesome/fontawesome-common-types" "6.2.0" -"@fortawesome/free-regular-svg-icons@^6.2.1": - version "6.2.1" - resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.1.tgz#650e56d937755a8341f2eef258ecb6f95458820f" - integrity sha512-wiqcNDNom75x+pe88FclpKz7aOSqS2lOivZeicMV5KRwOAeypxEYWAK/0v+7r+LrEY30+qzh8r2XDaEHvoLsMA== - dependencies: - "@fortawesome/fontawesome-common-types" "6.2.1" - "@fortawesome/free-solid-svg-icons@^6.2.0": version "6.2.0" resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz#8dcde48109354fd7a5ece8ea48d678bb91d4b5f0" @@ -8176,6 +8164,11 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== +react-notifications-component@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/react-notifications-component/-/react-notifications-component-4.0.1.tgz#c4cf71eb40375f346e2a4dc2b395a8590895d253" + integrity sha512-NRBkWO19AsXmN0b8YQ0L12eoCAhrnmIZtGm77ATWSfQEXPL5PYSyeACpx7tePP+R2De9b0IP4yk9vY4TtzC02w== + react-refresh@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" |
