Merge pull request #68 from AnWhiteM/taskColumn1

add render board logic

src/components/HeaderDashboard/HeaderDashboard.jsx

@@ -1,16 +1,16 @@
-import css from "./HeaderDashboard.module.css"
+import css from "./HeaderDashboard.module.css";
 import svg from "../../img/icons.svg";
 
-export const HeaderDashboard = () => {
-  return (
-    <div className={css.header}>
-      <h2 className={css.dashboardName}>Project office</h2>
-      <button className={css.filterBtn}>
-      <svg className={css.icon} width="16" height="16">
-          <use href={svg + "#icon-filter"}></use>
-      </svg>
-      <p className={css.text}>Filters</p>
-        </button>
-    </div>
-  );
-};
+export const HeaderDashboard = ({ boardName }) => {
+    return (
+        <div className={css.header}>
+            <h2 className={css.dashboardName}>{boardName}</h2>
+            <button className={css.filterBtn}>
+                <svg className={css.icon} width="16" height="16">
+                    <use href={svg + "#icon-filter"}></use>
+                </svg>
+                <p className={css.text}>Filters</p>
+            </button>
+        </div>
+    );
+};

src/components/MainDashboard/MainDashboard.jsx

@@ -1,16 +1,17 @@
 import { AddColumnBtn } from "../AddColumnBtn/AddColumnBtn";
-import { DashboardMessage } from "../DashboardMessage/DashboardMessage";
 import { TaskColumn } from "../TaskColumn/TaskColumn";
 import css from "./MainDashboard.module.css";
 
-export const MainDashboard = () => {
-  return (
-    <div className={css.container}>
-      {/* <DashboardMessage /> */}
-      <div className={css.dashContainer}>
-        <TaskColumn />
-        <AddColumnBtn/>
-      </div>
-    </div>
-  );
+export const MainDashboard = ({ board }) => {
+    return (
+        <div className={css.container}>
+            <div className={css.dashContainer}>
+                {board.columns && board.columns.map(column => (
+                    <TaskColumn key={column.id} column={column} />
+                ))}
+                <AddColumnBtn />
+            </div>
+        </div>
+    );
 };
+

src/components/ScreensPage/ScreensPage.jsx

@@ -1,12 +1,29 @@
-import { HeaderDashboard } from "../HeaderDashboard/HeaderDashboard"
-import { MainDashboard } from "../MainDashboard/MainDashboard"
-import css from "./ScreensPage.module.css"
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getBoards } from "../../redux/boards/operations";
+import { selectBoards, selectLoading, selectError } from "../../redux/boards/selectors";
+import { HeaderDashboard } from "../HeaderDashboard/HeaderDashboard";
+import { MainDashboard } from "../MainDashboard/MainDashboard";
+import { DashboardMessage } from "../DashboardMessage/DashboardMessage";
+import css from "./ScreensPage.module.css";
 
 export const ScreensPage = () => {
+    const dispatch = useDispatch();
+    const boards = useSelector(selectBoards);
+    const loading = useSelector(selectLoading);
+    const error = useSelector(selectError);
+
+    useEffect(() => {
+        dispatch(getBoards());
+    }, [dispatch]);
+
+    if (loading) return <p>Loading...</p>;
+    if (error) return <p>Error loading boards</p>;
+
     return (
         <div className={css.container}>
-            <HeaderDashboard/>
-            <MainDashboard/>
+            <HeaderDashboard boardName={boards.length ? boards[0].title : ""} />
+            {boards.length ? <MainDashboard board={boards[0]} /> : <DashboardMessage />}
         </div>
-    )
-}
+    );
+};