created task form

package-lock.json

@@ -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",

package.json

@@ -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",

public/index.html

@@ -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.

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>
   );
 }

src/components/CreateTask.tsx

@@ -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;

src/components/Header.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import styled from "styled-components";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { NavLink } from "react-router-dom";
-import { faBars } from "@fortawesome/free-solid-svg-icons";
 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>
+      <span>
-      <div>
+        <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>
+      </NavLink>
-      </div>
     </StyledHeader>
   );
 };

src/components/Login.tsx

@@ -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;

src/components/SideDrawer.tsx

@@ -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>
-        <li>On going</li>
+          <i className="fas fa-hourglass-end"></i>
-        <li>Bussiness</li>
+          <span>Finished</span>
-        <li>Private</li>
+        </li>
-        <li>Flagged(important)</li>
+        <li>
-        <li>Canceled</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>
   );

src/index.tsx

@@ -1,14 +1,17 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
-import './index.css';
+import "./index.css";
-import App from './App';
+import App from "./App";
-import reportWebVitals from './reportWebVitals';
+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