From 52dcc2ef72c9fae3db7dae405e13170da8c7c453 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonathan=20Cede=C3=B1o?= Date: Wed, 19 May 2021 13:42:52 +0200 Subject: [PATCH 01/29] resolved initial errors --- .gitignore | 3 ++- .prettierrc | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index b0d57997..3a1b5fa4 100644 --- a/.gitignore +++ b/.gitignore @@ -121,4 +121,5 @@ dist **/*.backup.* **/*.back.* -node_modules \ No newline at end of file +node_modules +package-lock.json \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 8c4b2fa1..f85defc5 100644 --- a/.prettierrc +++ b/.prettierrc @@ -15,5 +15,5 @@ "tabWidth": 2, "trailingComma": "all", "useTabs": false, - "endOfLine": "lf" + "endOfLine": "auto" } From a9f032db61c8a75a85935596fbf3ba2460821221 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonathan=20Cede=C3=B1o?= Date: Wed, 19 May 2021 17:39:05 +0200 Subject: [PATCH 02/29] first step of structure --- src/App.js | 122 +++++++++++++++++++++++++++++++++++++---- src/api/getTasks.js | 15 +++++ src/api/index.js | 0 src/pages/Home.js | 75 +++++++++++++++++++++++++ src/pages/index.js | 1 + src/utils/demo-data.js | 28 ++++++++++ 6 files changed, 231 insertions(+), 10 deletions(-) create mode 100644 src/api/getTasks.js create mode 100644 src/api/index.js create mode 100644 src/pages/Home.js create mode 100644 src/pages/index.js create mode 100644 src/utils/demo-data.js diff --git a/src/App.js b/src/App.js index de524524..b36694ec 100644 --- a/src/App.js +++ b/src/App.js @@ -1,15 +1,117 @@ import React from "react"; +import { Component } from "react"; +import { BrowserRouter, Route } from "react-router-dom"; -function App() { - return ( -
-
-
-

Hola mundo

-
-
-
- ); +import Home from "./pages/Home"; + +import * as api from "./api"; + +const LOCAL_STORAGE_KEY = "react-tasks-state"; + +function loadLocalStorageData() { + const prevItems = localStorage.getItem(LOCAL_STORAGE_KEY); + + if (!prevItems) { + return null; + } + + try { + return JSON.parse(prevItems); + } catch (error) { + return null; + } +} + +class App extends Component { + constructor(props) { + super(props); + + this.state = { + tasks: [], + isLoading: false, + hasError: false, + loadingError: null, + // newProductFormOpen: false, + }; + + // this.handleAddToCart = this.handleAddToCart.bind(this); + // this.handleRemove = this.handleRemove.bind(this); + // this.handleChange = this.handleChange.bind(this); + // this.handleDownVote = this.handleDownVote.bind(this); + // this.handleUpVote = this.handleUpVote.bind(this); + // this.handleSetFavorite = this.handleSetFavorite.bind(this); + // this.saveNewProduct = this.saveNewProduct.bind(this); + // this.toggleNewProductForm = this.toggleNewProductForm.bind(this); + } + + componentDidMount() { + const prevItems = loadLocalStorageData(); + + if (!prevItems) { + this.setState({ + isLoading: true, + }); + + api.getTasks().then((data) => { + this.setState({ + tasks: data, + isLoading: false, + }); + }); + return; + } + + this.setState({ + tasks: prevItems.tasks, + }); + } + + componentDidUpdate() { + const { tasks } = this.state; + + localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify({ tasks })); + } + + render() { + return ( + + ( + + )} + /> + {/* ( + + )} + /> */} + + //
+ //
+ //
+ //

Hola mundo

+ //
+ //
+ //
+ ); + } } export default App; diff --git a/src/api/getTasks.js b/src/api/getTasks.js new file mode 100644 index 00000000..8114f268 --- /dev/null +++ b/src/api/getTasks.js @@ -0,0 +1,15 @@ +import tasks from "../utils/demo-data"; + +function getTasks(fail = false) { + return new Promise((res, rej) => { + setTimeout(() => { + if (fail) { + rej(new Error("Failed to fetch")); + } + + res(tasks); + }, 1000); + }); +} + +export { getTasks }; diff --git a/src/api/index.js b/src/api/index.js new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/Home.js b/src/pages/Home.js new file mode 100644 index 00000000..a7d9798b --- /dev/null +++ b/src/pages/Home.js @@ -0,0 +1,75 @@ +import React from "react"; + +function Home( + { + // products, + // cartItems, + // isLoading, + // hasError, + // loadingError, + // handleDownVote, + // handleUpVote, + // handleSetFavorite, + // handleAddToCart, + // handleRemove, + // handleChange, + }, +) { + return ( + <> + {/* +
+
+
+
+
+
+

Shoe shop

+

+ This is the best shoe shop ever, you will never find a + better one. +

+

Buy now!

+
+
+ {isLoading && ( +
+

Loading products...

+
+ )} + {hasError && ( +
+

Something went wrong...

+ 
+                    {loadingError}
+
+
+ )} + {!isLoading && !hasError && ( +
+ +
+ )} +
+
+ + +
+
+
*/} + + ); +} + +export default Home; diff --git a/src/pages/index.js b/src/pages/index.js new file mode 100644 index 00000000..ffa79319 --- /dev/null +++ b/src/pages/index.js @@ -0,0 +1 @@ +export { default } from "./Home"; diff --git a/src/utils/demo-data.js b/src/utils/demo-data.js new file mode 100644 index 00000000..ec9707d8 --- /dev/null +++ b/src/utils/demo-data.js @@ -0,0 +1,28 @@ +const tasks = [ + { + title: "Task 1", + isCompleted: true, + }, + { + title: "Task 2", + isCompleted: false, + }, + { + title: "Task 3", + isCompleted: false, + }, + { + title: "Task 4", + isCompleted: true, + }, + { + title: "Task 5", + isCompleted: false, + }, + { + title: "Task 6", + isCompleted: true, + }, +]; + +export default tasks; From 5cffae0840f049c41a0687ea0ee3c5c6ae3c5c78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonathan=20Cede=C3=B1o?= Date: Fri, 21 May 2021 09:17:31 +0200 Subject: [PATCH 03/29] implemented first steps of Header component --- src/components/Header/Header.js | 35 +++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/components/Header/Header.js diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js new file mode 100644 index 00000000..36092140 --- /dev/null +++ b/src/components/Header/Header.js @@ -0,0 +1,35 @@ +import React from "react"; + +import "./Header.scss"; + +function Header({ toggleDarkLightMode, isDark }) { + let state; + if (isDark === true) + state = ( + + ); + else + state = ( + + ); + return ( +
+
T O D O
+ {state} +
+ ); +} + +export default Header; From b823cdb7d8f57a8bc83549039f7581310aa657ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonathan=20Cede=C3=B1o?= Date: Fri, 21 May 2021 09:17:48 +0200 Subject: [PATCH 04/29] index.js for Header component --- src/components/Header/index.js | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/components/Header/index.js diff --git a/src/components/Header/index.js b/src/components/Header/index.js new file mode 100644 index 00000000..2764567d --- /dev/null +++ b/src/components/Header/index.js @@ -0,0 +1 @@ +export { default } from "./Header"; From b5c4251b59be6771e8919c6794bfa518726af740 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonathan=20Cede=C3=B1o?= Date: Fri, 21 May 2021 09:18:32 +0200 Subject: [PATCH 05/29] added export in index for api --- src/api/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/api/index.js b/src/api/index.js index e69de29b..cf547600 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -0,0 +1 @@ +export * from "./getTasks"; From 352a8f61ad49500705f535350049ec6c5e1869e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonathan=20Cede=C3=B1o?= Date: Fri, 21 May 2021 09:19:26 +0200 Subject: [PATCH 06/29] added NewTask component with its index and schema for formik --- src/components/NewTask/NewTask.js | 66 +++++++++++++++++++++++++++ src/components/NewTask/index.js | 1 + src/components/NewTask/task-schema.js | 10 ++++ 3 files changed, 77 insertions(+) create mode 100644 src/components/NewTask/NewTask.js create mode 100644 src/components/NewTask/index.js create mode 100644 src/components/NewTask/task-schema.js diff --git a/src/components/NewTask/NewTask.js b/src/components/NewTask/NewTask.js new file mode 100644 index 00000000..98874beb --- /dev/null +++ b/src/components/NewTask/NewTask.js @@ -0,0 +1,66 @@ +import React from "react"; +import { Formik } from "formik"; + +import taskSchema from "./task-schema"; + +function NewTask({ saveNewTask }) { + return ( + <> + { + saveNewTask(values); + }} + > + {({ + handleChange, + handleBlur, + handleSubmit, + errors, + values, + touched, + }) => ( +
+ +
+ + {touched.taskText && errors.taskText && ( +

{errors.taskText}

+ )} +
+
+ +
+ ); +} + +export default ListFooter; diff --git a/src/components/ListFooter/ListFooter.scss b/src/components/ListFooter/ListFooter.scss new file mode 100644 index 00000000..ed4a5c90 --- /dev/null +++ b/src/components/ListFooter/ListFooter.scss @@ -0,0 +1,2 @@ +.ListFooter { +} diff --git a/src/components/ListFooter/index.js b/src/components/ListFooter/index.js new file mode 100644 index 00000000..f3a48d9f --- /dev/null +++ b/src/components/ListFooter/index.js @@ -0,0 +1 @@ +export { default } from "./ListFooter"; diff --git a/src/components/TasksList/TasksList.js b/src/components/TasksList/TasksList.js new file mode 100644 index 00000000..f3e08d04 --- /dev/null +++ b/src/components/TasksList/TasksList.js @@ -0,0 +1,35 @@ +import React from "react"; + +import TasksListEntry from "../TasksListEntry"; + +function TasksList({ tasks, handleDeleteTask, ...props }) { + return ( + + ); +} + +export default TasksList; diff --git a/src/components/TasksList/index.js b/src/components/TasksList/index.js new file mode 100644 index 00000000..7be9e6ea --- /dev/null +++ b/src/components/TasksList/index.js @@ -0,0 +1 @@ +export { default } from "./TasksList"; diff --git a/src/components/TasksListEntry/TasksListEntry.js b/src/components/TasksListEntry/TasksListEntry.js new file mode 100644 index 00000000..06118a44 --- /dev/null +++ b/src/components/TasksListEntry/TasksListEntry.js @@ -0,0 +1,46 @@ +import React from "react"; + +import "./TasksListEntry.scss"; +import { Formik } from "formik"; +import Checkbox from "../Checkbox"; + +function TasksListEntry({ + id, + title, + isCompleted, + editing, + handleDeleteTask, + ...props +}) { + function onHandleDeleteTask(event) { + handleDeleteTask(event, id); + } + // function onHandleToggleEditing() {} + + return ( +
  • + + {editing ? ( + {}} + /> + ) : ( + + {title} + + )} + +
    • + ); +} + +export default TasksListEntry; diff --git a/src/components/TasksListEntry/TasksListEntry.scss b/src/components/TasksListEntry/TasksListEntry.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/TasksListEntry/index.js b/src/components/TasksListEntry/index.js new file mode 100644 index 00000000..40974353 --- /dev/null +++ b/src/components/TasksListEntry/index.js @@ -0,0 +1 @@ +export { default } from "./TasksListEntry"; diff --git a/src/pages/Active.js b/src/pages/Active.js new file mode 100644 index 00000000..1e1516d3 --- /dev/null +++ b/src/pages/Active.js @@ -0,0 +1,15 @@ +import React from "react"; +import TasksList from "../components/TasksList"; + +function Active({ tasks, handleDeleteTask }) { + return ( +
      + !task.isCompleted)} + handleDeleteTask={handleDeleteTask} + /> +
    + ); +} + +export default Active; diff --git a/src/pages/Completed.js b/src/pages/Completed.js new file mode 100644 index 00000000..087f00e3 --- /dev/null +++ b/src/pages/Completed.js @@ -0,0 +1,15 @@ +import React from "react"; +import TasksList from "../components/TasksList"; + +function Completed({ tasks, handleDeleteTask }) { + return ( +
      + task.isCompleted)} + handleDeleteTask={handleDeleteTask} + /> +
    + ); +} + +export default Completed; diff --git a/src/pages/Home.js b/src/pages/Home.js index a7d9798b..86049989 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -1,74 +1,11 @@ import React from "react"; +import TasksList from "../components/TasksList"; -function Home( - { - // products, - // cartItems, - // isLoading, - // hasError, - // loadingError, - // handleDownVote, - // handleUpVote, - // handleSetFavorite, - // handleAddToCart, - // handleRemove, - // handleChange, - }, -) { +function Home({ tasks, handleDeleteTask }) { return ( - <> - {/* -
    -
    -
    -
    -
    -
    -

    Shoe shop

    -

    - This is the best shoe shop ever, you will never find a - better one. -

    -

    Buy now!

    -
    -
    - {isLoading && ( -
    -

    Loading products...

    -
    - )} - {hasError && ( -
    -

    Something went wrong...

    - 
    -                    {loadingError}
-
    -
    - )} - {!isLoading && !hasError && ( -
    - -
    - )} -
    -
    - - -
    -
    -