Merge pull request #63 from AnWhiteM/Dashboard

added task list + filter redux

Author: AnWhiteM

src/components/CardList/CardList.jsx

@@ -1,9 +1,9 @@
-import css from "./TaskCard.module.css"
+import css from "./Task.module.css"
 import svg from "../../img/icons.svg";
 import { EditCard } from "../EditCardModal/EditCardModal";
 import { useState } from "react";
 
-export const Card = () => {
+export const Task = ({task}) => {
   const [editCardModal, setEditCardModal] = useState(false);
 
   const openModal = () => {
@@ -17,12 +17,9 @@ export const Card = () => {
     return (
       <div className={css.card}>
         <div className={css.border}></div>
-        <h4 className={css.title}>The Watch Spot Design</h4>
+        <h4 className={css.title}>{task.title}</h4>
         <p className={css.desc}>
-          Create a visually stunning and eye-catching watch dial design that
-          embodies our brand's essence of sleek aesthetics and modern elegance.
-          Your design should be unique, innovative, and reflective of the latest
-          trends in watch design.
+          {task.description}
         </p>
         <hr className={css.decor}></hr>
 
@@ -33,13 +30,13 @@ export const Card = () => {
                 <p className={css.p}>Priority</p>
                 <div className={css.container}>
                     <div className={css.kolo}></div>
-                    <p className={css.info}>Low</p>
+                    <p className={css.info}>{task.priority}</p>
                 </div>
                 </div>
 
                 <div className={css.column}>
                 <p className={css.p}>Deadline</p>
-                <p className={css.info}>12/05/2023</p>
+                <p className={css.info}>{task.deadline}</p>
                 </div>
             </div>
 
@@ -63,9 +60,8 @@ export const Card = () => {
                 <use href={svg + "#icon-trash"}></use>
             </svg>
             </div>
-            
-          </div>
 
+          </div>
         </div>
         {editCardModal &&
         <EditCard isOpen={editCardModal} isClose={closeModal} />}

src/components/TaskCard/TaskCard.jsx renamed to src/components/Task/Task.jsx

@@ -1,12 +1,14 @@
 import { AddAnotherCardBtn } from "../AddAnotherCardBtn/AddAnotherCardBtn";
-import { Card } from "../TaskCard/TaskCard";
+import { Task } from "../Task/Task";
 import { TaskColumnName } from "../TaskColumnName/TaskColumnName";
+import { TaskList } from "../TaskList/TaskList";
 
 export const TaskColumn = () => {
     return (
       <div>
         <TaskColumnName />
-        <Card />
+        {/* <Task /> */}
+        <TaskList/>
         <AddAnotherCardBtn />
       </div>
     );

src/components/TaskCard/TaskCard.module.css renamed to src/components/Task/Task.module.css

@@ -0,0 +1,17 @@
+import { useSelector } from "react-redux"
+import { selectTasks } from "../../redux/tasks/selectors"
+import { Task } from "../Task/Task";
+
+export const TaskList = () => {
+const tasks = useSelector(selectTasks);
+
+    return (
+    <ul>
+        {tasks.map((task) => (
+            <li key={task.id}>
+                <Task task={task} />
+            </li>
+        ))}
+    </ul>
+    );
+};

src/components/TaskColumn/TaskColumn.jsx

@@ -0,0 +1 @@
+export const selecFilter = (state) => state.filters.name

src/components/TaskList/TaskList.jsx

@@ -0,0 +1,16 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const filtersSlice = createSlice({
+    name: "filters",
+    initialState: {
+        priority: ""
+    }, 
+    reducers: {
+        changeFilter(state, action) {
+            state.priority = action.payload;
+        }
+    }
+})
+
+export const { changeFilter } = filtersSlice.actions;
+export const filtersReducer = filtersSlice.reducer;

src/redux/filter/selectors.js

@@ -14,6 +14,7 @@ import { authReducer } from "./auth/slice";
 import { columnReducer } from "./columns/slice";
 import { tasksReducer } from "./tasks/slice";
 import storage from "redux-persist/lib/storage";
+import { filtersReducer } from "./filter/slice";
 
 const authPersistConfig = {
   key: "authSlice",
@@ -29,6 +30,7 @@ export const store = configureStore({
     auth: persistedAuthReducer,
     column: columnReducer,
     tasks: tasksReducer,
+    filter: filtersReducer
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({

src/redux/filter/slice.js

@@ -2,4 +2,4 @@ export const selectTasks = (state) => state.tasks.items;
 
 export const selectLoading = (state) => state.tasks.loading;
 
-export const selectError = (state) => state.tasks.error;
+export const selectError = (state) => state.tasks.error;