UI notification/alert system with global redux state

client/src/components/Apps/AppForm/AppForm.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef, ChangeEvent, SyntheticEvent } from 'react';
 import { connect } from 'react-redux';
 import { addApp, updateApp } from '../../../store/actions';
-import { App, NewApp } from '../../../interfaces/App';
+import { App, NewApp } from '../../../interfaces';
 
 import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
 import InputGroup from '../../UI/Forms/InputGroup/InputGroup';

client/src/components/Home/Home.module.css

@@ -25,8 +25,8 @@
   background-color: var(--color-accent);
   border-radius: 50%;
   position: fixed;
-  bottom: 10px;
-  left: 10px;
+  bottom: var(--spacing-ui);
+  left: var(--spacing-ui);
   display: flex;
   justify-content: center;
   align-items: center;

client/src/components/NotificationCenter/NotificationCenter.module.css

@@ -0,0 +1,8 @@
+.NotificationCenter {
+  position: fixed;
+  right: var(--spacing-ui);
+  bottom: var(--spacing-ui);
+  max-width: 300px;
+  z-index: 500;
+  color: white;
+}

client/src/components/NotificationCenter/NotificationCenter.tsx

@@ -0,0 +1,38 @@
+import { connect } from 'react-redux';
+import { GlobalState, Notification as _Notification } from '../../interfaces';
+
+import classes from './NotificationCenter.module.css';
+
+import Notification from '../UI/Notification/Notification';
+
+interface ComponentProps {
+  notifications: _Notification[];
+}
+
+const NotificationCenter = (props: ComponentProps): JSX.Element => {
+  return (
+    <div
+      className={classes.NotificationCenter}
+      style={{ height: `${props.notifications.length * 75}px` }}
+    >
+      {props.notifications.map((notification: _Notification) => {
+        return (
+          <Notification
+            title={notification.title}
+            message={notification.message}
+            id={notification.id}
+            key={notification.id}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    notifications: state.notification.notifications
+  }
+}
+
+export default connect(mapStateToProps)(NotificationCenter);

client/src/components/UI/Notification/Notification.module.css

@@ -0,0 +1,47 @@
+.Notification {
+  width: 300px;
+  background-color: var(--color-background);
+  border: 1px solid var(--color-primary);
+  color: var(--color-primary);
+  border-radius: 4px;
+  padding: 15px 10px;
+  transition: all 0.25s;
+  margin-bottom: 10px;
+}
+
+.Notification:hover {
+  background-color: var(--color-primary);
+  color: var(--color-background);
+  cursor: pointer;
+}
+
+.Notification:last-child {
+  margin-bottom: 0;
+}
+
+.NotificationOpen {
+  animation: slideIn 0.3s;
+}
+
+.NotificationClose {
+  animation: slideOut 0.3s;
+  transform: translateX(600px);
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(600px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(600px);
+  }
+}

client/src/components/UI/Notification/Notification.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { clearNotification } from '../../../store/actions';
+
+import classes from './Notification.module.css';
+
+interface ComponentProps {
+  title: string;
+  message: string;
+  id: number;
+  clearNotification: (id: number) => void;
+}
+
+const Notification = (props: ComponentProps): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(true);
+  const elementClasses = [classes.Notification, isOpen ? classes.NotificationOpen : classes.NotificationClose].join(' ');
+
+  useEffect(() => {
+    const closeNotification = setTimeout(() => {
+      setIsOpen(false);
+    }, 3500);
+
+    const clearNotification = setTimeout(() => {
+      props.clearNotification(props.id);
+    }, 3600)
+
+    return () => {
+      window.clearTimeout(closeNotification);
+      window.clearTimeout(clearNotification);
+    }
+  }, [])
+
+  return (
+    <div className={elementClasses}>
+      <h4>{props.title}</h4>
+      <p>{props.message}</p>
+      <div className={classes.Pog}></div>
+    </div>
+  )
+}
+
+export default connect(null, { clearNotification })(Notification);