created task form
This commit is contained in:
tomasz kasprowicz
parent
00b18a2db2
commit
a6d9b628ff
72
package-lock.json
generated
72
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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.
|
||||
|
||||
15
src/App.tsx
15
src/App.tsx
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
97
src/components/CreateTask.tsx
Normal file
97
src/components/CreateTask.tsx
Normal 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;
|
||||
@ -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
86
src/components/Login.tsx
Normal 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;
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
|
||||
Loading…
Reference in New Issue
Block a user