Merge pull request #23 from 001elijah/main-plus-dashboard

Main plus dashboard
001elijah · Jun 24, 2023 · b7f01e7 · b7f01e7
2 parents 5cd19a4 + 85bfa87
commit b7f01e7
Show file tree

Hide file tree

Showing 21 changed files with 348 additions and 210 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",

diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -5,12 +5,13 @@ import { useDispatch } from 'react-redux';
 import WelcomePage from 'pages/WelcomePage';
 import AuthPage from '../pages/AuthPage';
 import { HomePage } from 'pages/HomePage';
-import { BoardPage } from 'pages/BoardPage';
 
 import { PrivateRoute, PublicRoute } from './Route/route';
 
 import { currentUser } from 'redux/Auth/authOperations';
 import { Loader } from './Loader/Loader';
+import { DefaultDashBoard } from './DefaultBoard/DefaultBoard';
+import { MainBoard } from './MainBoard/MainBoard';
 
 export const App = () => {
   const dispatch = useDispatch();
@@ -29,14 +30,16 @@ export const App = () => {
           path="/auth/:id"
           element={<PublicRoute component={<AuthPage />} />}
         />
-        <Route
-          path="/home"
-          element={<PrivateRoute component={<HomePage />} />}
-        />
-        <Route
-          path="/board"
-          element={<PrivateRoute component={<BoardPage />} />}
-        />
+        <Route path="/home" element={<PrivateRoute component={<HomePage />} />}>
+          <Route
+            index
+            element={<PrivateRoute component={<DefaultDashBoard />} />}
+          />
+          <Route
+            path=":boardName"
+            element={<PrivateRoute component={<MainBoard />} />}
+          />
+        </Route>
         <Route path="*" element={<Navigate to="/home" />} />
       </Routes>
     </>

diff --git a/src/components/BoardModalWindow/BoardModalWindow.jsx b/src/components/BoardModalWindow/BoardModalWindow.jsx
@@ -30,8 +30,9 @@ export const BoardModalWindow = ({
       inputTitle={inputTitle}
       modalTitle={modalTitle}
       titleModalButton={titleModalButton}
-      onClick={handleAddBoard}
+      onSubmit={handleAddBoard}
       handleToggleModal={handleToggleModal}
+      onClick={onClick}
     >
       <BoxRadioIconGroup valueChange={setIcon} />
       <BoxRadioBackgroundGroup valueChange={setBackground} />

diff --git a/src/components/DefaultBoard/Default.module.scss b/src/components/DefaultBoard/Default.module.scss
@@ -0,0 +1,57 @@
+@import '../../assets/styles/vars';
+@import '../../assets/styles/mixins';
+
+.BackGround {
+  height: 100vh;
+  &.dark {
+    background-color: #1f1f1f;
+  }
+  &.light {
+    background-color: #f6f6f7;
+  }
+  &.colorful {
+    background-color: #ecedfd;
+  }
+}
+.Wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 100%;
+}
+.DefaultTitle {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.29;
+  text-align: center;
+  letter-spacing: -0.02em;
+  margin-left: auto;
+  margin-right: auto;
+
+  @include mobileSmall {
+    max-width: 335px;
+  }
+  @include mobile {
+    width: 335px;
+  }
+  @include tablet {
+    width: 486px;
+  }
+  &.dark {
+    color: #ffffff80;
+  }
+  &.light,
+  &.colorful {
+    color: #161616;
+  }
+}
+.DefaultLink {
+  &.dark,
+  &.light {
+    color: #bedbb0;
+  }
+  &.colorful {
+    color: #5255bc;
+  }
+}
diff --git a/src/components/DefaultBoard/DefaultBoard.jsx b/src/components/DefaultBoard/DefaultBoard.jsx
@@ -0,0 +1,29 @@
+import { selectorTheme } from 'redux/Auth/authSelectors';
+import { useSelector } from 'react-redux';
+import clsx from 'clsx';
+import React from 'react';
+import s from './Default.module.scss';
+import { HeaderDashBoard } from 'components/HeaderDashBoard/HeaderDashBoard';
+
+export const DefaultDashBoard = () => {
+  const theme = useSelector(selectorTheme);
+  return (
+    <>
+      <div className={clsx(s.BackGround, s[theme])}>
+        <HeaderDashBoard />
+        <div className={s.Wrapper}>
+          <p className={clsx(s.DefaultTitle, s[theme])}>
+            Before starting your project, it is essential
+            <span className={clsx(s.DefaultLink, s[theme])}>
+              {' '}
+              to create a board{' '}
+            </span>
+            to visualize and track all the necessary tasks and milestones. This
+            board serves as a powerful tool to organize the workflow and ensure
+            effective collaboration among team members.
+          </p>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import clsx from 'clsx';
-import { Container } from 'components/Container';
+// import { Container } from 'components/Container';
 import { UserInfo } from 'components/UserInfo/UserInfo';
 import { selectorTheme } from 'redux/Auth/authSelectors';
 import { themeChangeUser } from 'redux/Auth/authOperations';
@@ -35,45 +35,45 @@ export const Header = () => {
   return (
     <>
       <header className={clsx(s.header, s[theme])}>
-        <Container>
-          <div className={s.pageHeader}>
-            <button onClick={toggleSidebar} className={s.burgerMenu}>
-              <svg className={clsx(s.burgerIcon, s[theme])}>
-                <use href={`${icons}#icon-burger-menu`}></use>
+        {/* <Container> */}
+        <div className={s.pageHeader}>
+          <button onClick={toggleSidebar} className={s.burgerMenu}>
+            <svg className={clsx(s.burgerIcon, s[theme])}>
+              <use href={`${icons}#icon-burger-menu`}></use>
+            </svg>
+          </button>
+
+          <div className={s.dropDown}>
+            <button className={clsx(s.dropBtn, s[theme])}>
+              Theme
+              <svg className={clsx(s.arrowIcon, s[theme])}>
+                <use href={`${icons}#icon-arrow-down`}></use>
               </svg>
             </button>
-
-            <div className={s.dropDown}>
-              <button className={clsx(s.dropBtn, s[theme])}>
-                Theme
-                <svg className={clsx(s.arrowIcon, s[theme])}>
-                  <use href={`${icons}#icon-arrow-down`}></use>
-                </svg>
-              </button>
-              <div className={clsx(s.dropDownContent, s[theme])}>
-                <div
-                  className={clsx(s.dropDownItem, s[theme])}
-                  onClick={() => changeTheme('light')}
-                >
-                  Light
-                </div>
-                <div
-                  className={clsx(s.dropDownItem, s[theme])}
-                  onClick={() => changeTheme('dark')}
-                >
-                  Dark
-                </div>
-                <div
-                  className={clsx(s.dropDownItem, s[theme])}
-                  onClick={() => changeTheme('colorful')}
-                >
-                  Colorful
-                </div>
+            <div className={clsx(s.dropDownContent, s[theme])}>
+              <div
+                className={clsx(s.dropDownItem, s[theme])}
+                onClick={() => changeTheme('light')}
+              >
+                Light
+              </div>
+              <div
+                className={clsx(s.dropDownItem, s[theme])}
+                onClick={() => changeTheme('dark')}
+              >
+                Dark
+              </div>
+              <div
+                className={clsx(s.dropDownItem, s[theme])}
+                onClick={() => changeTheme('colorful')}
+              >
+                Colorful
               </div>
             </div>
-            <UserInfo />
           </div>
-        </Container>
+          <UserInfo />
+        </div>
+        {/* </Container> */}
       </header>
       {showSidebar && (
         <SideBarBackDrop toggleSidebar={toggleSidebar}>

diff --git a/src/components/HeaderDashBoard/HeaderDashBoard.jsx b/src/components/HeaderDashBoard/HeaderDashBoard.jsx
@@ -32,10 +32,7 @@ export const HeaderDashBoard = ({ title }) => {
         </button>
         {showModalWindow && (
           <BackdropModal closeModal={handleModalWindowClose}>
-            <ModalFilter
-              closeModal={handleModalWindowClose}
-              // color={setColor}
-            />
+            <ModalFilter closeModal={handleModalWindowClose} />
           </BackdropModal>
         )}
       </div>

diff --git a/src/components/HeaderDashBoard/HeaderDashBoard.module.scss b/src/components/HeaderDashBoard/HeaderDashBoard.module.scss
@@ -4,16 +4,15 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
-  background-color: $black-color;
   padding: 10px 24px;
 
-  &.dark {
-    background-color: $black-color;
-  }
-  &.light,
-  &.colorful {
-    background-color: $background-color;
-  }
+  // &.dark {
+  //   background-color: $black-color;
+  // }
+  // &.light,
+  // &.colorful {
+  //   background-color: $background-color;
+  // }
 }
 .HeaderTitle {
   font-weight: 500;
@@ -32,7 +31,7 @@
 .HeaderFilter {
   background: transparent;
   border: none;
-
+  margin-left: auto;
   outline: none;
 
   &.dark {

diff --git a/src/components/MainBoard/MainBoard.jsx b/src/components/MainBoard/MainBoard.jsx
@@ -0,0 +1,34 @@
+// import s from './MainBoard.module.scss';
+import { Wrapper } from './MainBoard.styled';
+import PropTypes from 'prop-types';
+import { HeaderDashBoard } from '../HeaderDashBoard/HeaderDashBoard';
+import { AddButton } from '../ButtonAddColumn/ButtonAddColumn';
+// import {TaskCard} from '../../TaskCard/TaskCard'
+// import {TasksColumnHeader} from '../../TasksColumnHeader/TasksColumnHeader'
+
+const BASE_URL_IMG =
+  'https://res.cloudinary.com/dblzpxfzb/image/upload/v1687449642/background/';
+// import { useParams } from 'react-router-dom';
+
+export const MainBoard = ({ imgid }) => {
+  // const { boardName } = useParams();
+  //робимо запит на бек за id дошки
+
+  return (
+    <>
+      <Wrapper imgurl={BASE_URL_IMG} imgid={imgid}>
+        <HeaderDashBoard title="test" />
+        <div>
+          {/* <TasksColumnHeader/>
+        <TaskCard/> */}
+        </div>
+
+        <AddButton typeOfButton="Card" title="Add another column" />
+      </Wrapper>
+    </>
+  );
+};
+
+MainBoard.propTypes = {
+  imgid: PropTypes.string,
+};