created task form

This commit is contained in:
tomasz kasprowicz 2020-11-24 14:38:11 +01:00
parent 00b18a2db2
commit a6d9b628ff
9 changed files with 317 additions and 56 deletions

72
package-lock.json generated
View File

@ -1250,35 +1250,6 @@
}
}
},
"@fortawesome/fontawesome-common-types": {
"version": "0.2.32",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
"integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.32",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz",
"integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.32"
}
},
"@fortawesome/free-solid-svg-icons": {
"version": "5.15.1",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
"integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.32"
}
},
"@fortawesome/react-fontawesome": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.13.tgz",
"integrity": "sha512-/HrLnIft5Ks2511Pz6TxHBIctC9QalVscAC64sufQ4sJH/sXaQlG3uR9LCu6VpEwkBemgcBLrz/QPNP/ddbjDg==",
"requires": {
"prop-types": "^15.7.2"
}
},
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@ -2063,6 +2034,11 @@
}
}
},
"@types/history": {
"version": "4.7.8",
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz",
"integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA=="
},
"@types/hoist-non-react-statics": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@ -2186,6 +2162,25 @@
"@types/react": "*"
}
},
"@types/react-router": {
"version": "5.1.8",
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.8.tgz",
"integrity": "sha512-HzOyJb+wFmyEhyfp4D4NYrumi+LQgQL/68HvJO+q6XtuHSDvw6Aqov7sCAhjbNq3bUPgPqbdvjXC5HeB2oEAPg==",
"requires": {
"@types/history": "*",
"@types/react": "*"
}
},
"@types/react-router-dom": {
"version": "5.1.6",
"resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.6.tgz",
"integrity": "sha512-gjrxYqxz37zWEdMVvQtWPFMFj1dRDb4TGOcgyOfSXTrEXdF92L00WE3C471O3TV/RF1oskcStkXsOU0Ete4s/g==",
"requires": {
"@types/history": "*",
"@types/react": "*",
"@types/react-router": "*"
}
},
"@types/resolve": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@ -3507,6 +3502,11 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
"bootstrap": {
"version": "4.5.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.3.tgz",
"integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -11668,6 +11668,20 @@
}
}
},
"react-router-dom": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
"requires": {
"@babel/runtime": "^7.1.2",
"history": "^4.9.0",
"loose-envify": "^1.3.1",
"prop-types": "^15.6.2",
"react-router": "5.2.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
}
},
"react-scripts": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.1.tgz",

View File

@ -3,20 +3,19 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/react-fontawesome": "^0.1.13",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.6",
"@types/styled-components": "^5.1.4",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"redux": "^4.0.5",
"styled-components": "^5.2.1",

View File

@ -17,6 +17,7 @@
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.

View File

@ -2,6 +2,9 @@ import React, { useState } from "react";
import Header from "./components/Header";
import styled from "styled-components";
import SideDrawer from "./components/SideDrawer";
import { Switch, Route } from "react-router-dom";
import Login from "./components/Login";
import CreateTask from "./components/CreateTask";
const StyledApp = styled.div`
height: 100vh;
@ -9,7 +12,7 @@ const StyledApp = styled.div`
`;
function App() {
const [sideDrawer, setSiderDrawer] = useState(false);
const [sideDrawer, setSiderDrawer] = useState<boolean>(false);
const toggleSideDrawerHandler = () => {
setSiderDrawer(!sideDrawer);
@ -17,8 +20,16 @@ function App() {
return (
<StyledApp>
<Header sideDrawer={toggleSideDrawerHandler} />
<Header sideDrawer={toggleSideDrawerHandler} isOpen={sideDrawer} />
{sideDrawer && <SideDrawer />}
<Switch>
<Route exact path="/">
<CreateTask />
</Route>
<Route exact path="/login">
<Login />
</Route>
</Switch>
</StyledApp>
);
}

View File

@ -0,0 +1,97 @@
import React from "react";
import styled from "styled-components";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
const StyledTasks = styled.div`
width: 100%;
height: 92%;
display: flex;
justify-content: center;
align-items: center;
form {
width: 100%;
max-width: 40rem;
padding: 2rem;
a {
color: blue !important;
cursor: pointer;
}
textarea{
resize:none;
}
}
`;
const CreateTask = () => {
return (
<StyledTasks>
<form>
<h3>Create Task</h3>
<div className="form-group">
<label>Task Name</label>
<input type="text" className="form-control" placeholder="Task Name" />
</div>
<div className="form-group">
<label>Task Description</label>
<textarea
className="form-control"
id="exampleFormControlTextarea1"
rows="4"
></textarea>
</div>
<div className="form-check">
<input
className="form-check-input"
type="radio"
name="exampleRadios"
id="bussiness"
value="bussiness"
checked
readOnly
/>
<label className="form-check-label" htmlFor="bussiness">
Bussiness
</label>
</div>
<div className="form-check">
<input
className="form-check-input"
type="radio"
name="exampleRadios"
id="personal"
value="personal"
readOnly
/>
<label className="form-check-label" htmlFor="personal">
Personal
</label>
</div>
<div className="form-check">
<input
className="form-check-input"
type="checkbox"
value=""
id="important"
/>
<label className="form-check-label" htmlFor="important">
Important
</label>
</div>
<hr/>
<div className="form-group">
<label>End Date</label>
<input type="date" className="form-control" placeholder="Date" />
</div>
<button type="submit" className="btn btn-primary btn-block">
Create Task
</button>
</form>
</StyledTasks>
);
};
export default CreateTask;

View File

@ -1,10 +1,10 @@
import React from "react";
import styled from "styled-components";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars } from "@fortawesome/free-solid-svg-icons";
import { NavLink } from "react-router-dom";
import Button from "./Button";
const StyledHeader = styled.div`
height: 8%;
position: relative;
z-index: 100;
background-color: #4153af;
@ -13,6 +13,8 @@ const StyledHeader = styled.div`
align-items: center;
justify-content: space-between;
.menu-icon {
width: 1rem;
height: 1rem;
cursor: pointer;
font-size: 1.2rem;
color: #fff;
@ -21,23 +23,36 @@ const StyledHeader = styled.div`
color: #fff;
font-weight: 700;
}
a {
text-decoration: none;
color: inherit;
}
`;
interface Props {
sideDrawer: () => void;
isOpen: boolean;
}
const Header: React.FC<Props> = (props) => {
return (
<StyledHeader>
<Button onClick={props.sideDrawer}>
<FontAwesomeIcon className="menu-icon" icon={faBars} />
{props.isOpen ? (
<i className="fas fa-times menu-icon"></i>
) : (
<i className="fas fa-bars menu-icon"></i>
)}
</Button>
<span>ToDo App</span>
<div>
<span>
<NavLink to={process.env.PUBLIC_URL + "/"}>
<Button>Create Task</Button>
</NavLink>
</span>
<NavLink to={process.env.PUBLIC_URL + "/login"}>
<Button>Login</Button>
<Button>Register</Button>
</div>
</NavLink>
</StyledHeader>
);
};

86
src/components/Login.tsx Normal file
View File

@ -0,0 +1,86 @@
import React, { useState } from "react";
import styled from "styled-components";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
const StyledForm = styled.div`
width: 100%;
height: 92%;
display: flex;
justify-content: center;
align-items: center;
form {
width: 100%;
max-width: 40rem;
padding: 2rem;
a {
color: blue !important;
cursor: pointer;
}
}
`;
const Login = () => {
const [signUp, setSignUp] = useState<boolean>(false);
const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");
const authorizationHandler = (e:React.FormEvent) => {
e.preventDefault();
if (signUp) {
console.log('rejestracja', email, password);
} else {
console.log('log', email, password);
}
};
return (
<StyledForm>
<form onSubmit={authorizationHandler}>
{signUp ? <h3>Sign Up</h3> : <h3>Login</h3>}
<div className="form-group">
<label>Email address</label>
<input
type="email"
className="form-control"
placeholder="Enter email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="form-group">
<label>Password</label>
<input
type="password"
className="form-control"
placeholder="Enter password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
{signUp ? (
<button type="submit" className="btn btn-primary btn-block">
Sign Up
</button>
) : (
<button type="submit" className="btn btn-primary btn-block">
Login
</button>
)}
<p className="forgot-password text-right">
Already registered{" "}
{signUp ? (
<a onClick={() => setSignUp(false)}>sign in?</a>
) : (
<a onClick={() => setSignUp(true)}>sign up?</a>
)}
</p>
</form>
</StyledForm>
);
};
export default Login;

View File

@ -2,15 +2,19 @@ import React from "react";
import styled from "styled-components";
const StyledSidedrawer = styled.div`
position: fixed;
top: 0;
left: 0;
z-index:8;
overflow-y: hidden;
position: absolute;
top: 0;
left: 0;
height: auto;
width: 20rem;
height: 100%;
background-color: #424242;
ul {
overflow-x: hidden;
padding: 2rem 0;
list-style-type: none;
width: 100%;
@ -21,6 +25,19 @@ const StyledSidedrawer = styled.div`
justify-content: space-evenly;
li {
color: #fff;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
padding-right:1rem;
i {
padding: 0 1rem;
font-size: 1rem;
}
span {
padding: 0 1rem;
display:contents;
}
}
}
@media screen and (max-width: 768px) {
@ -32,12 +49,30 @@ const SideDrawer = () => {
return (
<StyledSidedrawer>
<ul>
<li>Finished</li>
<li>On going</li>
<li>Bussiness</li>
<li>Private</li>
<li>Flagged(important)</li>
<li>Canceled</li>
<li>
<i className="fas fa-hourglass-end"></i>
<span>Finished</span>
</li>
<li>
<i className="fas fa-stopwatch"></i>
<span>On going</span>
</li>
<li>
<i className="fas fa-briefcase"></i>
<span>Bussiness</span>
</li>
<li>
<i className="fas fa-lock"></i>
<span>Personal</span>
</li>
<li>
<i className="fas fa-flag"></i>
<span>Important</span>
</li>
<li>
<i className="fas fa-ban"></i>
<span>Canceled</span>
</li>
</ul>
</StyledSidedrawer>
);

View File

@ -1,14 +1,17 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<App />
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function