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

client/src/components/Board/Board.jsx

@@ -13,7 +13,7 @@ import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-ic
 
 import styles from './Board.module.css';
 
-const parseDNDId = (dndId) => parseInt(dndId.split(':').pop(), 10);
+const parseDndId = (dndId) => dndId.split(':')[1];
 
 const Board = React.memo(
   ({
@@ -51,7 +51,7 @@ const Board = React.memo(
           return;
         }
 
-        const id = parseDNDId(draggableId);
+        const id = parseDndId(draggableId);
 
         switch (type) {
           case DroppableTypes.LIST:
@@ -59,7 +59,7 @@ const Board = React.memo(
 
             break;
           case DroppableTypes.CARD:
-            onCardMove(id, parseDNDId(destination.droppableId), destination.index);
+            onCardMove(id, parseDndId(destination.droppableId), destination.index);
 
             break;
           default:

client/src/components/Boards/Boards.jsx

@@ -168,7 +168,7 @@ const Boards = React.memo(
 
 Boards.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
-  currentId: PropTypes.number,
+  currentId: PropTypes.string,
   isEditable: PropTypes.bool.isRequired,
   onCreate: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,

client/src/components/Card/Card.jsx

@@ -74,7 +74,7 @@ const Card = React.memo(
         )}
         <div className={styles.name}>{name}</div>
         {tasks.length > 0 && <Tasks items={tasks} />}
-        {(dueDate || timer) && (
+        {(dueDate || timer || notificationsTotal > 0) && (
           <span className={styles.attachments}>
             {notificationsTotal > 0 && (
               <span
@@ -168,7 +168,7 @@ const Card = React.memo(
 );
 
 Card.propTypes = {
-  id: PropTypes.number.isRequired,
+  id: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   dueDate: PropTypes.instanceOf(Date),

client/src/components/List/List.jsx

@@ -110,7 +110,7 @@ const List = React.memo(
 );
 
 List.propTypes = {
-  id: PropTypes.number.isRequired,
+  id: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   isPersisted: PropTypes.bool.isRequired,

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;