diff --git a/.eslintcache b/.eslintcache new file mode 100644 index 0000000..7d34386 --- /dev/null +++ b/.eslintcache @@ -0,0 +1 @@ +[{"/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/index.tsx":"1","/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/components/Button.tsx":"2","/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/components/CreateTask.tsx":"3","/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/components/Header.tsx":"4","/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/store/actions/actionTypes.ts":"5","/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/store/reducers/reducer.ts":"6","/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/components/Login.tsx":"7","/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/components/SideDrawer.tsx":"8","/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/store/actions/actions.ts":"9","/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/App.tsx":"10","/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/components/TodoList.tsx":"11"},{"size":1082,"mtime":1607870572555,"results":"12","hashOfConfig":"13"},{"size":694,"mtime":1608811793339,"results":"14","hashOfConfig":"13"},{"size":4881,"mtime":1608819417483,"results":"15","hashOfConfig":"13"},{"size":2016,"mtime":1608815616436,"results":"16","hashOfConfig":"13"},{"size":401,"mtime":1608819875103,"results":"17","hashOfConfig":"13"},{"size":1441,"mtime":1608826539038,"results":"18","hashOfConfig":"13"},{"size":3050,"mtime":1608816450132,"results":"19","hashOfConfig":"13"},{"size":2622,"mtime":1608820837478,"results":"20","hashOfConfig":"13"},{"size":3136,"mtime":1608826712990,"results":"21","hashOfConfig":"13"},{"size":1509,"mtime":1608821206467,"results":"22","hashOfConfig":"13"},{"size":1936,"mtime":1608827652874,"results":"23","hashOfConfig":"13"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"26","usedDeprecatedRules":"27"},"mxnhpw",{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"32"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"39","messages":"40","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"47","messages":"48","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/index.tsx",["49"],"import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\nimport App from \"./App\";\nimport reportWebVitals from \"./reportWebVitals\";\nimport { BrowserRouter } from \"react-router-dom\";\nimport { Provider } from \"react-redux\";\nimport { createStore, applyMiddleware, compose } from \"redux\";\nimport reducer from \"./store/reducers/reducer\";\nimport { composeWithDevTools } from \"redux-devtools-extension\";\nimport thunk from \"redux-thunk\";\n\nconst store = createStore(\n reducer,\n compose(\n applyMiddleware(thunk),\n (window as any).__REDUX_DEVTOOLS_EXTENSION__ &&\n (window as any).__REDUX_DEVTOOLS_EXTENSION__()\n )\n);\n\nReactDOM.render(\n \n \n \n \n \n \n ,\n document.getElementById(\"root\")\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n",["50","51"],"/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/components/Button.tsx",[],"/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/components/CreateTask.tsx",["52"],"import React, { ReactEventHandler, useState } from \"react\";\r\nimport styled from \"styled-components\";\r\nimport \"../../node_modules/bootstrap/dist/css/bootstrap.min.css\";\r\nimport { connect } from \"react-redux\";\r\nimport * as actions from \"../store/actions/actions\";\r\nimport { withRouter } from \"react-router-dom\";\r\n\r\nconst StyledTasks = styled.div`\r\n width: 100%;\r\n height: 92%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n form {\r\n width: 100%;\r\n max-width: 40rem;\r\n padding: 2rem;\r\n a {\r\n color: blue !important;\r\n cursor: pointer;\r\n }\r\n textarea {\r\n resize: none;\r\n }\r\n }\r\n`;\r\n\r\nconst CreateTask = (props: any) => {\r\n const [taskName, setTaskName] = useState(\"\");\r\n const [taskDesc, setTaskDesc] = useState(\"\");\r\n const [taskType, setTaskType] = useState(\"bussiness\");\r\n const [isImportant, setIsImportant] = useState(false);\r\n const [date, setDate] = useState(\"\");\r\n\r\n const addTaskHandler = () => {\r\n const isValid = formValidator();\r\n if (isValid) {\r\n props.isAuth\r\n ? props.addToDo(\r\n taskName,\r\n taskDesc,\r\n taskType,\r\n isImportant,\r\n date,\r\n props.idToken,\r\n props.userId\r\n )\r\n : props.history.push(\"/login\");\r\n }\r\n };\r\n\r\n const radioButtonsHandler = (type: string) => {\r\n setTaskType(type);\r\n };\r\n\r\n const importantButtonsHandler = (e: any) => {\r\n if (e.target.value === \"true\") setIsImportant(true);\r\n };\r\n\r\n const formValidator = () => {\r\n if (taskName.length > 1 && taskDesc.length > 1 && date.length > 1)\r\n return true;\r\n };\r\n\r\n return (\r\n \r\n
\r\n

Create Task

\r\n\r\n
\r\n \r\n setTaskName(e.target.value)}\r\n />\r\n
\r\n\r\n
\r\n \r\n setTaskDesc(e.target.value)}\r\n >\r\n
\r\n\r\n
\r\n radioButtonsHandler(\"bussiness\")}\r\n />\r\n \r\n
\r\n
\r\n radioButtonsHandler(\"personal\")}\r\n />\r\n \r\n
\r\n
\r\n importantButtonsHandler(e)}\r\n />\r\n \r\n
\r\n
\r\n
\r\n \r\n setDate(e.target.value)}\r\n />\r\n
\r\n\r\n \r\n Create Task\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\ninterface RootState {\r\n isAuth: boolean;\r\n idToken: string;\r\n userId: string\r\n}\r\n\r\nconst mapStateToProps = (state: RootState) => {\r\n return {\r\n isAuth: state.isAuth,\r\n idToken: state.idToken,\r\n userId: state.userId,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch: any) => {\r\n return {\r\n addToDo: (\r\n name: string,\r\n desc: string,\r\n type: string,\r\n important: boolean,\r\n date: string,\r\n token: string,\r\n userId: string,\r\n ) => dispatch(actions.addToDo(name, desc, type, important, date, token, userId)),\r\n };\r\n};\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(withRouter(CreateTask));\r\n","/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/components/Header.tsx",[],"/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/store/actions/actionTypes.ts",[],"/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/store/reducers/reducer.ts",["53"],"/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/components/Login.tsx",["54"],"/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/components/SideDrawer.tsx",[],"/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/store/actions/actions.ts",["55"],"/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/App.tsx",[],"/Users/tomasz.kasprowicz/Documents/UAM/todo-list/src/components/TodoList.tsx",["56","57"],{"ruleId":"58","severity":1,"message":"59","line":10,"column":10,"nodeType":"60","messageId":"61","endLine":10,"endColumn":29},{"ruleId":"62","replacedBy":"63"},{"ruleId":"64","replacedBy":"65"},{"ruleId":"58","severity":1,"message":"66","line":1,"column":17,"nodeType":"60","messageId":"61","endLine":1,"endColumn":34},{"ruleId":"58","severity":1,"message":"67","line":2,"column":8,"nodeType":"60","messageId":"61","endLine":2,"endColumn":15},{"ruleId":"58","severity":1,"message":"68","line":1,"column":27,"nodeType":"60","messageId":"61","endLine":1,"endColumn":36},{"ruleId":"58","severity":1,"message":"69","line":3,"column":6,"nodeType":"60","messageId":"61","endLine":3,"endColumn":16},{"ruleId":"58","severity":1,"message":"70","line":1,"column":28,"nodeType":"60","messageId":"61","endLine":1,"endColumn":36},{"ruleId":"71","severity":1,"message":"72","line":26,"column":6,"nodeType":"73","endLine":26,"endColumn":8,"suggestions":"74"},"@typescript-eslint/no-unused-vars","'composeWithDevTools' is defined but never used.","Identifier","unusedVar","no-native-reassign",["75"],"no-negated-in-lhs",["76"],"'ReactEventHandler' is defined but never used.","'produce' is defined but never used.","'useEffect' is defined but never used.","'ILoadToDos' is defined but never used.","'useState' is defined but never used.","react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect.","ArrayExpression",["77"],"no-global-assign","no-unsafe-negation",{"desc":"78","fix":"79"},"Update the dependencies array to be: [props]",{"range":"80","text":"81"},[628,630],"[props]"] \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 956c17c..eca7063 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,7 @@ import SideDrawer from "./components/SideDrawer"; import { Switch, Route } from "react-router-dom"; import Login from "./components/Login"; import CreateTask from "./components/CreateTask"; +import TodoList from "./components/TodoList"; const StyledApp = styled.div` height: 100vh; @@ -29,6 +30,27 @@ function App() { + + + + + + + + + + + + + + + + + + + + + ); diff --git a/src/components/Button.tsx b/src/components/Button.tsx index af07b79..e03f81c 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -17,6 +17,12 @@ const StyledButton = styled.button` &:hover { background-color: rgba(18, 18, 18, 0.6); } + &:focus, &:active { + border-color: inherit; + -webkit-box-shadow: none; + box-shadow: none; + outline:none; +} `; const Button: React.FC = (props) => { diff --git a/src/components/CreateTask.tsx b/src/components/CreateTask.tsx index 7afeea9..c682fc2 100644 --- a/src/components/CreateTask.tsx +++ b/src/components/CreateTask.tsx @@ -1,6 +1,9 @@ -import React from "react"; +import React, { ReactEventHandler, useState } from "react"; import styled from "styled-components"; import "../../node_modules/bootstrap/dist/css/bootstrap.min.css"; +import { connect } from "react-redux"; +import * as actions from "../store/actions/actions"; +import { withRouter } from "react-router-dom"; const StyledTasks = styled.div` width: 100%; @@ -16,13 +19,49 @@ const StyledTasks = styled.div` color: blue !important; cursor: pointer; } - textarea{ - resize:none; + textarea { + resize: none; } } `; -const CreateTask = () => { +const CreateTask = (props: any) => { + const [taskName, setTaskName] = useState(""); + const [taskDesc, setTaskDesc] = useState(""); + const [taskType, setTaskType] = useState("bussiness"); + const [isImportant, setIsImportant] = useState(false); + const [date, setDate] = useState(""); + + const addTaskHandler = () => { + const isValid = formValidator(); + if (isValid) { + props.isAuth + ? props.addToDo( + taskName, + taskDesc, + taskType, + isImportant, + date, + props.idToken, + props.userId + ) + : props.history.push("/login"); + } + }; + + const radioButtonsHandler = (type: string) => { + setTaskType(type); + }; + + const importantButtonsHandler = (e: any) => { + if (e.target.value === "true") setIsImportant(true); + }; + + const formValidator = () => { + if (taskName.length > 1 && taskDesc.length > 1 && date.length > 1) + return true; + }; + return (
@@ -30,7 +69,13 @@ const CreateTask = () => {
- + setTaskName(e.target.value)} + />
@@ -39,6 +84,8 @@ const CreateTask = () => { className="form-control" id="exampleFormControlTextarea1" rows={4} + value={taskDesc} + onChange={(e) => setTaskDesc(e.target.value)} >
@@ -51,6 +98,7 @@ const CreateTask = () => { value="bussiness" checked readOnly + onClick={() => radioButtonsHandler("bussiness")} />