Merge pull request #26 from 001elijah/card-operations

Card operations

src/components/ModalChangeColumn/ModalChangeColumn.jsx

@@ -1,31 +1,40 @@
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import clsx from 'clsx';
+
 import { selectorTheme } from 'redux/Auth/authSelectors';
-import s from './ModalChangeColumn.module.scss';
+// import { selectorColumns } from 'redux/Column/columnSelectors';
+import { updateCardColumn } from 'redux/Cards/cardsOperations';
 import sprite from '../../assets/icons/sprite.svg';
+import s from './ModalChangeColumn.module.scss';
 
-export const ModalChangeColumn = ({ closeModal }) => {
+export const ModalChangeColumn = ({ closeModal, columnId = 3 }) => {
+  const dispatch = useDispatch();
+  // const columnList = useSelector(selectorColumns);
   const theme = useSelector(selectorTheme);
   const columnList = [
     { id: 1, name: 'to do' },
     { id: 2, name: 'in progress' },
     { id: 3, name: 'done' },
   ];
+
   return (
     <div className={clsx(s.modalWrapper, s[theme])}>
       <ul>
         {columnList.map(({ id, name }) => (
           <li key={id} className={s.item}>
             <button
-              className={clsx(s.button, s[theme])}
+              className={clsx(s.button, s[theme], id === columnId && s.current)}
               onClick={() => {
+                dispatch(updateCardColumn(id));
                 closeModal();
               }}
               type="button"
             >
               {name}
-              <svg className={clsx(s.icon, s[theme])}>
+              <svg
+                className={clsx(s.icon, s[theme], id === columnId && s.current)}
+              >
                 <use href={sprite + '#icon-arrow'}></use>
               </svg>
             </button>
@@ -37,5 +46,6 @@ export const ModalChangeColumn = ({ closeModal }) => {
 };
 
 ModalChangeColumn.propTypes = {
-  closeModal: PropTypes.func.isRequired,
+  closeModal: PropTypes.func,
+  columnId: PropTypes.string,
 };

src/components/ModalChangeColumn/ModalChangeColumn.module.scss

@@ -25,8 +25,6 @@
   width: 100%;
   height: 21px;
   color: $black-text-color;
-  // active:$priority-high-color; light/dark
-  // active:$accent-bright-color; violet
   background-color: transparent;
   border: none;
 
@@ -42,8 +40,19 @@
     transform: scale(1.1);
   }
 
+  &.current {
+    color: $priority-high-color;
+  }
+
   &.dark {
     color: $icon-secondary-color;
+    &.current {
+      color: $priority-high-color;
+    }
+  }
+
+  &.colorful.current {
+    color: $accent-bright-color;
   }
 }
 
@@ -52,10 +61,19 @@
   height: 16px;
   margin-left: 8px;
   stroke: $black-text-color;
-  // active:$priority-high-color; light/dark
-  // active:$accent-bright-color; violet
+
+  &.current {
+    stroke: $priority-high-color;
+  }
 
   &.dark {
     stroke: $icon-secondary-color;
+    &.current {
+      stroke: $priority-high-color;
+    }
+  }
+
+  &.colorful.current {
+    stroke: $accent-bright-color;
   }
 }

src/components/TaskCard/TaskCard.jsx

@@ -1,40 +1,59 @@
-import { useState, useSelector } from 'react';
+import { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import clsx from 'clsx';
 import shortid from 'shortid';
 import PropTypes from 'prop-types';
 
 import sprite from '../../assets/icons/sprite.svg';
+import { removeCard } from 'redux/Cards/cardsOperations';
 import { selectorTheme } from 'redux/Auth/authSelectors';
 import { TaskControlButton } from '../TaskControlButton/TaskControlButton';
 import { ModalChangeColumn } from 'components/ModalChangeColumn/ModalChangeColumn';
 import { BackdropModal } from 'components/BackdropMain/BackdropMain';
 import s from './TaskCard.module.scss';
 
 export const TaskCard = ({
+  id,
   title,
   description,
-  priority = 'High',
-  deadline,
-  editCard,
-  removeCard,
+  label = 'Low',
+  deadline = '26/06/2023',
+  boardId,
+  columnId,
 }) => {
+  const dispatch = useDispatch();
   const theme = useSelector(selectorTheme);
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isModalChangeOpen, setIsModalChangeOpen] = useState(false);
+  const [isModalEditOpen, setIsModalEditOpen] = useState(false);
 
+  const date = new Date();
+  // const currentTime = `${date.toISOString().split('T')[0]} ${
+  //   date.toTimeString().split(' ')[0]
+  // }`;
+  // const isDeadline = deadline === currentTime.slice(0, -3);
+  const isDeadline = deadline === date.toLocaleDateString('en-GB');
+  // console.log(date);
   const openModalChangeColumn = () => {
-    setIsModalOpen(true);
+    setIsModalChangeOpen(true);
   };
 
-  const closeModalChangeColumn = () => setIsModalOpen(false);
+  const closeModalChangeColumn = () => setIsModalChangeOpen(false);
+
+  const openModalEditCard = () => {
+    setIsModalEditOpen(true);
+  };
+  const closeModalEditCard = () => {
+    setIsModalEditOpen(false);
+  };
 
   return (
-    <div className={clsx(s.cardWrapper, s[theme])}>
+    <li key={id} className={clsx(s.cardWrapper, s[theme])}>
       <div
         className={clsx(
           s.priorityLine,
-          priority === 'Low' && s.bg_low,
-          priority === 'Medium' && s.bg_medium,
-          priority === 'High' && s.bg_high,
+          label === 'Medium' && s.bg_medium,
+          label === 'High' && s.bg_high,
+          label === 'Low' && s.bg_low,
         )}
       ></div>
       <div className={s.infoWrapper}>
@@ -57,26 +76,25 @@ export const TaskCard = ({
               <div
                 className={clsx(
                   s.priorityCircle,
-                  priority === 'Low' && s.bg_low,
-                  priority === 'Medium' && s.bg_medium,
-                  priority === 'High' && s.bg_high,
+                  label === 'Low' && s.bg_low,
+                  label === 'Medium' && s.bg_medium,
+                  label === 'High' && s.bg_high,
                 )}
               ></div>
-              <p className={clsx(s.text, s[theme])}>{priority}</p>
+              <p className={clsx(s.text, s[theme])}>{label}</p>
             </div>
           </div>
           <div>
             <h5 className={clsx(s.subtitle, s[theme])}>Deadline</h5>
-            <p className={clsx(s.text, s[theme])}>
-              {deadline}
-              12/05/2023
-            </p>
+            <p className={clsx(s.text, s[theme])}>{deadline}</p>
           </div>
         </div>
         <div className={s.iconsWrapper}>
-          <svg className={clsx(s.icon, s[theme])}>
-            <use href={sprite + '#icon-bell'}></use>
-          </svg>
+          {isDeadline && (
+            <svg className={clsx(s.icon, s[theme])}>
+              <use href={sprite + '#icon-bell'}></use>
+            </svg>
+          )}
           <ul className={s.buttonList}>
             <li key={shortid.generate()} className={s.item}>
               <TaskControlButton
@@ -87,29 +105,42 @@ export const TaskCard = ({
               />
             </li>
             <li key={shortid.generate()} className={s.item}>
-              <TaskControlButton icon="#icon-pencil" onClick={editCard} />
+              <TaskControlButton
+                icon="#icon-pencil"
+                onClick={() => {
+                  openModalEditCard();
+                }}
+              />
             </li>
             <li key={shortid.generate()} className={s.item}>
-              <TaskControlButton icon="#icon-trash" onClick={removeCard} />
+              <TaskControlButton
+                icon="#icon-trash"
+                onClick={() => dispatch(removeCard(id))}
+              />
             </li>
           </ul>
         </div>
       </div>
-      {isModalOpen && (
+      {isModalChangeOpen && (
         <BackdropModal closeModal={closeModalChangeColumn}>
-          <ModalChangeColumn closeModal={closeModalChangeColumn} />
+          <ModalChangeColumn
+            closeModal={closeModalChangeColumn}
+            boardId={boardId}
+            columnId={columnId}
+          />
         </BackdropModal>
       )}
-    </div>
+      {/* {isModalEditOpen && <ModalEditCard closeModal={closeModalEditCard} />} */}
+    </li>
   );
 };
 
 TaskCard.propTypes = {
-  title: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  priority: PropTypes.string.isRequired,
-  deadline: PropTypes.string.isRequired,
-  editCard: PropTypes.func.isRequired,
-  removeCard: PropTypes.func.isRequired,
-  theme: PropTypes.string.isRequire,
+  id: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  label: PropTypes.string,
+  deadline: PropTypes.string,
+  boardId: PropTypes.string,
+  columnId: PropTypes.string,
 };

src/components/TaskCard/TaskCard.module.scss

@@ -8,6 +8,7 @@
   background-color: $white-text-color;
   border-radius: 8px;
   overflow: hidden;
+  list-style: none;
 
   &.dark {
     background-color: $black-color;
@@ -142,7 +143,7 @@
   height: 16px;
   stroke: $priority-high-color;
 
-  &.violet {
+  &.colorful {
     stroke: $accent-bright-color;
   }
 }

src/components/TasksColumnHeader/TasksColumnHeader.jsx

@@ -1,13 +1,25 @@
+import { useState } from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import shortid from 'shortid';
 import clsx from 'clsx';
+
 import { selectorTheme } from 'redux/Auth/authSelectors';
+import { removeColumn } from 'redux/Column/columnOperations';
 import { TaskControlButton } from 'components/TaskControlButton/TaskControlButton';
 import s from './TasksColumnHeader.module.scss';
 
-export const TasksColumnHeader = ({ title, editColumn, removeColumn }) => {
+export const TasksColumnHeader = ({ title, id }) => {
+  const dispatch = useDispatch();
+
   const theme = useSelector(selectorTheme);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const openModalEditColumn = () => {
+    setIsModalOpen(true);
+  };
+
+  const closeModalEditColumn = () => setIsModalOpen(false);
   return (
     <div className={clsx(s.columnHeaderWrapper, s[theme])}>
       <h4 className={clsx(s.title, s[theme])}>
@@ -16,18 +28,26 @@ export const TasksColumnHeader = ({ title, editColumn, removeColumn }) => {
       </h4>
       <ul className={s.buttonList}>
         <li key={shortid.generate()} className={s.item}>
-          <TaskControlButton icon="#icon-pencil" onClick={editColumn} />
+          <TaskControlButton
+            icon="#icon-pencil"
+            onClick={() => {
+              openModalEditColumn;
+            }}
+          />
         </li>
         <li key={shortid.generate()} className={s.item}>
-          <TaskControlButton icon="#icon-trash" onClick={removeColumn} />
+          <TaskControlButton
+            icon="#icon-trash"
+            onClick={() => dispatch(removeColumn(id))}
+          />
         </li>
       </ul>
+      {/* {isModalOpen && <ModalEditColumn closeModal={closeModalEditColumn} />} */}
     </div>
   );
 };
 
 TasksColumnHeader.propTypes = {
   title: PropTypes.string.isRequired,
-  editColumn: PropTypes.func.isRequired,
-  removeColumn: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
 };