From bd8fb44a94a3884625e5a526c4659520df39f9d7 Mon Sep 17 00:00:00 2001
From: Joni Laukka <joni.laukka.overflow@gmail.com>
Date: Thu, 20 Jun 2019 12:41:42 +0300
Subject: [PATCH] tasklist opens on portal
---
public/index.html | 1 +
src/App.css | 7 +++++++
src/components/Header.js | 2 ++
src/components/TaskItem.js | 15 +++++++++++++++
src/components/TaskList.js | 18 ++++++++++++++++++
src/components/TaskListButton.js | 30 ++++++++++++++++++++++++++++++
6 files changed, 73 insertions(+)
create mode 100644 src/components/TaskItem.js
create mode 100644 src/components/TaskList.js
create mode 100644 src/components/TaskListButton.js
diff --git a/public/index.html b/public/index.html
index dd1ccfd..8fad1fb 100644
--- 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.
diff --git a/src/App.css b/src/App.css
index b0f08dd..f791179 100644
--- 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;
+}
diff --git a/src/components/Header.js b/src/components/Header.js
index 7079906..3cb15b0 100644
--- 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
diff --git a/src/components/TaskItem.js b/src/components/TaskItem.js
new file mode 100644
index 0000000..7e1c968
--- /dev/null
+++ b/src/components/TaskItem.js
@@ -0,0 +1,15 @@
+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
diff --git a/src/components/TaskList.js b/src/components/TaskList.js
new file mode 100644
index 0000000..d67b16c
--- /dev/null
+++ b/src/components/TaskList.js
@@ -0,0 +1,18 @@
+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
diff --git a/src/components/TaskListButton.js b/src/components/TaskListButton.js
new file mode 100644
index 0000000..4ed49c5
--- /dev/null
+++ b/src/components/TaskListButton.js
@@ -0,0 +1,30 @@
+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
--
GitLab