Change id generation algorithm, display notifications total on the main page

client/src/components/Projects/Projects.jsx

@@ -31,6 +31,9 @@ const Projects = React.memo(({
                 }
               >
                 <div className={classNames(styles.card, styles.open)}>
+                  {item.notificationsTotal > 0 && (
+                    <span className={styles.notification}>{item.notificationsTotal}</span>
+                  )}
                   <div className={styles.cardOverlay} />
                   <div className={styles.openTitle}>{item.name}</div>
                 </div>
@@ -69,7 +72,7 @@ const Projects = React.memo(({
 
 Projects.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
-  currentId: PropTypes.number,
+  currentId: PropTypes.string,
   isEditable: PropTypes.bool.isRequired,
   onAdd: PropTypes.func.isRequired,
 };

client/src/components/Projects/Projects.module.css

@@ -59,6 +59,20 @@
   margin: 0 !important;
 }
 
+.notification {
+  background: #eb5a46;
+  color: #fff;
+  float: right;
+  font-size: 12px;
+  line-height: 20px;
+  padding: 0px 6px;
+  border: none;
+  border-radius: 3px;
+  outline: none;
+  text-align: left;
+  transition: background 0.3s ease;
+}
+
 .open {
   background: #555;
   background-size: cover;