tasklist opens on portal

bd8fb44a · Joni Laukka · 800603a0 · bd8fb44a · bd8fb44a · bd8fb44a
Commit bd8fb44a authored 5 years ago by Joni Laukka
--- a/public/index.html
+++ b/public/index.html
@@ -23,6 +23,7 @@
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="tasklist"></div>
    <div id="root"></div>
    <!--
      This HTML file is a template.

--- a/src/App.css
+++ b/src/App.css
@@ -138,3 +138,10 @@ div.login button:hover {
  background-color: darkblue;
  cursor: pointer;
 }
+
+.tasklist{
+  position: absolute;
+  margin-top: 50px;
+  z-index: 2020;
+  background-color: #ffffff80;
+}
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -2,6 +2,7 @@ import React from 'react';

 import LoginForm from './LoginForm';
 import RegisterForm from './RegisterForm';
+import TaskListButton from './TaskListButton';

 class Header extends React.Component {
  state = {
@@ -78,6 +79,7 @@ class Header extends React.Component {
          )}
          {this.state.username && <button>{this.state.username}</button>}
          <button onClick={this.props.handleLayerChange}>change layer</button>
+          <TaskListButton />
        </div>
        {this.state.register && (
          <RegisterForm

--- a/src/components/TaskItem.js
+++ b/src/components/TaskItem.js
+import React from 'react';
+
+class TaskItem extends React.Component{
+    render(){
+        return(
+            <p>
+                <label>Name: {this.props.text}</label>
+                <br />
+                <label>Description: {this.props.description}</label>
+            </p>
+        );
+    }
+}
+
+export default TaskItem;
\ No newline at end of file
--- a/src/components/TaskList.js
+++ b/src/components/TaskList.js
+import ReactDOM from 'react-dom';
+import React from 'react';
+import TaskItem from './TaskItem';
+
+class TaskList extends React.Component{
+    render(){
+        return ReactDOM.createPortal(
+            <div className='tasklist'>
+                <TaskItem text='asd' description='asudhaiud'/>
+                <TaskItem text='asd2' description='q7213761923769821'/>
+                <TaskItem text='asd3' description='tehtävä3'/>
+            </div>,
+            document.getElementById('tasklist')
+        );
+    }
+}
+
+export default TaskList;
\ No newline at end of file
--- a/src/components/TaskListButton.js
+++ b/src/components/TaskListButton.js
+import React, { Fragment } from 'react';
+import TaskList from './TaskList';
+
+class TaskListButton extends React.Component{
+    constructor(props){
+        super(props);
+        this.state = {
+            open: false
+        }
+
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick = (e) => {
+        this.setState({
+            open: !this.state.open
+        });
+    }
+
+    render(){
+        return(
+            <Fragment>
+                <button onClick={this.handleClick}>Tasks</button>
+                {this.state.open && <TaskList />}
+            </Fragment>
+        );
+    }
+}
+
+export default TaskListButton;
\ No newline at end of file