refactor react, new ScreenDesignatedTasks

alte0 · Jan 11, 2020 · fe64fea · fe64fea
1 parent ce1c9d2
commit fe64fea
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 17 deletions.
diff --git a/spa-react/src/App.js b/spa-react/src/App.js
@@ -7,6 +7,7 @@ import ScreenSingUp from "./screens/screen-sign-up";
 import ScreenAddTask from "./screens/screen-add-task";
 import ScreenTask from "./screens/screen-task";
 import ScreenTasks from "./screens/screen-tasks";
+import ScreenDesignatedTasks from "./screens/designated-tasks";
 import Footer from './components/footer/footer';
 import {getCookie, getTask} from  "./helpers/helpers";
 import {getTasks} from "./data/data";
@@ -38,7 +39,7 @@ class App extends PureComponent {
         this._changeActiveScreen = this._changeActiveScreen.bind(this);
         this._getDataForApp = this._getDataForApp.bind(this);
         this._handleClickMore = this._handleClickMore.bind(this);
-        this._handleAddTaskClick = this._handleAddTaskClick.bind(this);
+        this._handleClickUserOtherLinks = this._handleClickUserOtherLinks.bind(this);
         this._handleClickExit = this._handleClickExit.bind(this);
         this._handleClickChangePagePagination = this._handleClickChangePagePagination.bind(this);
     }
@@ -48,7 +49,7 @@ class App extends PureComponent {
     }
 
     render() {
-        const screen = this._getPage(this.state);
+        const screen = this._getScreen(this.state);
 
         return (
             <React.Fragment>
@@ -108,9 +109,9 @@ class App extends PureComponent {
             }))
     }
 
-    _handleAddTaskClick(evt) {
+    _handleClickUserOtherLinks(evt) {
         evt.preventDefault();
-        this._changeActiveScreen("screen-add-task");
+        this._changeActiveScreen(evt.target.dataset.screen);
     }
 
     _handleClickExit(evt) {
@@ -123,7 +124,7 @@ class App extends PureComponent {
         }
     }
 
-    _getPage(state) {
+    _getScreen(state) {
         const {
             activeScreen,
             tasks,
@@ -141,9 +142,13 @@ class App extends PureComponent {
                     getData={this._getDataForApp}
                 />;
             case "screen-sing-up":
-                return <ScreenSingUp changeActivePage={this._changeActiveScreen}/>;
+                return <ScreenSingUp
+                    changeActivePage={this._changeActiveScreen}
+                />;
             case "screen-add-task":
-                return <ScreenAddTask changeActivePage={this._changeActiveScreen}/>;
+                return <ScreenAddTask
+                    changeActivePage={this._changeActiveScreen}
+                />;
             case "screen-tasks":
                 return <ScreenTasks
                     changeActivePage={this._changeActiveScreen}
@@ -153,14 +158,27 @@ class App extends PureComponent {
                     pageCurrentPagination={pageCurrentPagination}
                     user={user}
                     handleClickMore={this._handleClickMore}
-                    handleAddTaskClick={this._handleAddTaskClick}
+                    handleClickUserOtherLinks={this._handleClickUserOtherLinks}
+                    handleClickExit={this._handleClickExit}
+                    handleClickChangePagePagination={this._handleClickChangePagePagination}
+                    />;
+            case "designated-tasks":
+                return <ScreenDesignatedTasks
+                    changeActivePage={this._changeActiveScreen}
+                    tasks={tasks}
+                    itemsTasks={itemsTasks}
+                    pagesCount={pagesCount}
+                    pageCurrentPagination={pageCurrentPagination}
+                    user={user}
+                    handleClickMore={this._handleClickMore}
+                    handleClickUserOtherLinks={this._handleClickUserOtherLinks}
                     handleClickExit={this._handleClickExit}
                     handleClickChangePagePagination={this._handleClickChangePagePagination}
                     />;
             case "screen-task":
                 return <ScreenTask
                     changeActivePage={this._changeActiveScreen}
-                    handleAddTaskClick={this._handleAddTaskClick}
+                    handleClickUserOtherLinks={this._handleClickUserOtherLinks}
                     handleClickExit={this._handleClickExit}
                     user={user}
                     task={task}

diff --git a/spa-react/src/components/user-menu/user-menu.js b/spa-react/src/components/user-menu/user-menu.js
@@ -6,17 +6,28 @@ const UserMenu = (props) => {
     const {
         name,
         surname,
-        patronymic
+        patronymic,
     } = props.user;
 
     return (
         <nav className="user-menu">
             <span className="user-menu__user-name">{`${name} ${surname} ${patronymic}`}</span>
-            <a className="user-menu__link" href="/designated-task">Я назначил задачу</a>
-            <a
-                className="user-menu__link"
-                onClick={props.handleAddTaskClick}
-                href="/add-task.php">Поставить задачу</a>
+            {
+                props.links.map((item, index) => {
+                    return (
+                        <a className="user-menu__link"
+                           key={item.dataScreen + index}
+                           href={item.href}
+                            data-screen={item.dataScreen}
+                            onClick={props.handleClickUserOtherLinks}>{item.textLink}</a>
+                    )
+                })
+            }
+            {/*<a className="user-menu__link" href="/designated-task">Я назначил задачу</a>*/}
+            {/*<a*/}
+            {/*    className="user-menu__link"*/}
+            {/*    onClick={props.handleAddTaskClick}*/}
+            {/*    href="/add-task">Поставить задачу</a>*/}
             <a
                 className="user-menu__link user-menu__logout"
                 onClick={props.handleClickExit}

diff --git a/spa-react/src/screens/designated-tasks.js b/spa-react/src/screens/designated-tasks.js
@@ -0,0 +1,52 @@
+import React from "react";
+import SearchByTasks from "../components/search-by-tasks/search-by-tasks";
+import UserMenu from "../components/user-menu/user-menu";
+import Tasks from "../components/tasks/tasks";
+import Pagination from "../components/pagination/pagination";
+
+const title = "Я назначил задачи.";
+
+const ScreenDesignatedTasks = (props) => {
+    const {
+        tasks,
+        pageCurrentPagination,
+        pagesCount,
+        itemsTasks,
+        user
+        } = props;
+    const visibleTasks = tasks.slice((pageCurrentPagination - 1) * itemsTasks, pageCurrentPagination * itemsTasks);
+    const links = [
+        {textLink: "Мои задачи", href: "/designated-task", dataScreen: "screen-tasks"},
+        {textLink: "Поставить задачу", href: "/add-task", dataScreen: "screen-add-task"},
+    ];
+
+    return (
+        <React.Fragment>
+            <UserMenu
+                changeActivePage={props.changeActivePage}
+                handleClickUserOtherLinks={props.handleClickUserOtherLinks}
+                handleClickExit={props.handleClickExit}
+                user={user}
+                links={links}
+            />
+            <SearchByTasks/>
+            <Tasks
+                tasks={visibleTasks}
+                title={title}
+                handleClickMore={props.handleClickMore}
+            />
+            {
+                tasks.length > itemsTasks ?
+                    <Pagination
+                        pagesCount={pagesCount}
+                        pageCurrentPagination={pageCurrentPagination}
+                        handleClickChangePagePagination={props.handleClickChangePagePagination}
+                    />
+                    :
+                    null
+            }
+        </React.Fragment>
+    )
+};
+
+export default ScreenDesignatedTasks
diff --git a/spa-react/src/screens/screen-task.js b/spa-react/src/screens/screen-task.js
@@ -8,13 +8,19 @@ const option = {
 };
 
 const ScreenTask = (props) => {
+    const links = [
+        {textLink: "Мои задачи", href: "/", dataScreen: "screen-tasks"},
+        {textLink: "Поставить задачу", href: "/add-task", dataScreen: "screen-add-task"},
+    ];
+
     return (
         <React.Fragment>
             <UserMenu
                 changeActivePage={props.changeActivePage}
-                handleAddTaskClick={props.handleAddTaskClick}
+                handleClickUserOtherLinks={props.handleClickUserOtherLinks}
                 handleClickExit={props.handleClickExit}
                 user={props.user}
+                links={links}
             />
             <Task
                 isMore={option.isMore}

diff --git a/spa-react/src/screens/screen-tasks.js b/spa-react/src/screens/screen-tasks.js
@@ -15,14 +15,19 @@ const ScreenTasks = (props) => {
         user
         } = props;
     const visibleTasks = tasks.slice((pageCurrentPagination - 1) * itemsTasks, pageCurrentPagination * itemsTasks);
+    const links = [
+        {textLink: "Я назначил задачу", href: "/designated-task", dataScreen: "designated-tasks"},
+        {textLink: "Поставить задачу", href: "/add-task", dataScreen: "screen-add-task"},
+    ];
 
     return (
         <React.Fragment>
             <UserMenu
                 changeActivePage={props.changeActivePage}
-                handleAddTaskClick={props.handleAddTaskClick}
+                handleClickUserOtherLinks={props.handleClickUserOtherLinks}
                 handleClickExit={props.handleClickExit}
                 user={user}
+                links={links}
             />
             <SearchByTasks/>
             <Tasks