From ece49837fad2835a299783e07c27ae44d0c45378 Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Sun, 27 Oct 2024 12:42:57 -0400 Subject: [PATCH 1/8] feat: add Notifications example for ts #117 --- src/examples/ts/useTitle/Notifications.tsx | 62 ++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 src/examples/ts/useTitle/Notifications.tsx diff --git a/src/examples/ts/useTitle/Notifications.tsx b/src/examples/ts/useTitle/Notifications.tsx new file mode 100644 index 0000000..0d16ec2 --- /dev/null +++ b/src/examples/ts/useTitle/Notifications.tsx @@ -0,0 +1,62 @@ +import { useEffect, useState } from 'react'; +import { useTitle } from '../../../hooks/ts/useTitle.ts'; + +// Simulate an API call that returns a list of notifications +const fetchNotifications = () => { + return new Promise<{ id: number; text: string }[]>((resolve) => { + setTimeout(() => { + resolve([ + { id: 1, text: 'Notification 1' }, + { id: 2, text: 'Notification 2' }, + { id: 3, text: 'Notification 3' }, + { id: 4, text: 'Notification 4' }, + { id: 5, text: 'Notification 5' } + ]); + }, 1000); + }); +}; + +export const Notifications = () => { + const [notifications, setNotifications] = useState< + { id: number; text: string }[] + >([]); + const { title, changeTitle } = useTitle(); + + useEffect(() => { + fetchNotifications().then((notifications) => { + setNotifications(notifications); + changeTitle(`${title} (${notifications.length})`); + }); + }, []); + + // Delete notification + const deleteNotification = (id: number) => { + const updatedNotifications = notifications.filter( + (notification) => notification.id !== id + ); + setNotifications(updatedNotifications); + + // Set the title depending on the number of notifications left + const newTitle = + updatedNotifications.length > 0 + ? `${title.split(' (')[0]} (${updatedNotifications.length})` + : title.split(' (')[0]; + changeTitle(newTitle); + }; + + return ( + <> +

Notifications

+ + + ); +}; From 1862c6d2c3d79aee26ef2ca09121be634fa69613 Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Sun, 27 Oct 2024 12:45:43 -0400 Subject: [PATCH 2/8] feat: add Notifications example for js #117 --- src/examples/js/useTitle/Notifications.jsx | 60 ++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/examples/js/useTitle/Notifications.jsx diff --git a/src/examples/js/useTitle/Notifications.jsx b/src/examples/js/useTitle/Notifications.jsx new file mode 100644 index 0000000..43e728c --- /dev/null +++ b/src/examples/js/useTitle/Notifications.jsx @@ -0,0 +1,60 @@ +import { useEffect, useState } from 'react'; +import { useTitle } from '../../../hooks/js/useTitle.js'; + +// Simulate an API call that returns a list of notifications +const fetchNotifications = () => { + return new Promise((resolve) => { + setTimeout(() => { + resolve([ + { id: 1, text: 'Notification 1' }, + { id: 2, text: 'Notification 2' }, + { id: 3, text: 'Notification 3' }, + { id: 4, text: 'Notification 4' }, + { id: 5, text: 'Notification 5' } + ]); + }, 1000); + }); +}; + +export const Notifications = () => { + const [notifications, setNotifications] = useState([]); + const { title, changeTitle } = useTitle(); + + useEffect(() => { + fetchNotifications().then((notifications) => { + setNotifications(notifications); + changeTitle(`${title} (${notifications.length})`); + }); + }, []); + + // Delete notification + const deleteNotification = (id) => { + const updatedNotifications = notifications.filter( + (notification) => notification.id !== id + ); + setNotifications(updatedNotifications); + + // Set the title depending on the number of notifications left + const newTitle = + updatedNotifications.length > 0 + ? `${title.split(' (')[0]} (${updatedNotifications.length})` + : title.split(' (')[0]; + changeTitle(newTitle); + }; + + return ( + <> +

Notifications

+ + + ); +}; From e04cca9b3780e454483b18f6301d3e668dbff894 Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Sun, 27 Oct 2024 12:48:37 -0400 Subject: [PATCH 3/8] refactor: add interface to notifications example --- src/examples/ts/useTitle/Notifications.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/examples/ts/useTitle/Notifications.tsx b/src/examples/ts/useTitle/Notifications.tsx index 0d16ec2..3d2d1e6 100644 --- a/src/examples/ts/useTitle/Notifications.tsx +++ b/src/examples/ts/useTitle/Notifications.tsx @@ -1,9 +1,14 @@ import { useEffect, useState } from 'react'; import { useTitle } from '../../../hooks/ts/useTitle.ts'; +interface Notification { + id: number; + text: string; +} + // Simulate an API call that returns a list of notifications const fetchNotifications = () => { - return new Promise<{ id: number; text: string }[]>((resolve) => { + return new Promise((resolve) => { setTimeout(() => { resolve([ { id: 1, text: 'Notification 1' }, @@ -17,9 +22,7 @@ const fetchNotifications = () => { }; export const Notifications = () => { - const [notifications, setNotifications] = useState< - { id: number; text: string }[] - >([]); + const [notifications, setNotifications] = useState([]); const { title, changeTitle } = useTitle(); useEffect(() => { From b72992f1b858718880435950a00036980cc963c5 Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Sun, 27 Oct 2024 12:56:33 -0400 Subject: [PATCH 4/8] refactor: initial title #117 --- src/examples/js/useTitle/Notifications.jsx | 2 +- src/examples/ts/useTitle/Notifications.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/examples/js/useTitle/Notifications.jsx b/src/examples/js/useTitle/Notifications.jsx index 43e728c..4ae6cdd 100644 --- a/src/examples/js/useTitle/Notifications.jsx +++ b/src/examples/js/useTitle/Notifications.jsx @@ -23,7 +23,7 @@ export const Notifications = () => { useEffect(() => { fetchNotifications().then((notifications) => { setNotifications(notifications); - changeTitle(`${title} (${notifications.length})`); + changeTitle(`Notifications (${notifications.length})`); }); }, []); diff --git a/src/examples/ts/useTitle/Notifications.tsx b/src/examples/ts/useTitle/Notifications.tsx index 3d2d1e6..9f387af 100644 --- a/src/examples/ts/useTitle/Notifications.tsx +++ b/src/examples/ts/useTitle/Notifications.tsx @@ -28,7 +28,7 @@ export const Notifications = () => { useEffect(() => { fetchNotifications().then((notifications) => { setNotifications(notifications); - changeTitle(`${title} (${notifications.length})`); + changeTitle(`Notifications (${notifications.length})`); }); }, []); From 374a7be003bffe0b6690bb7b6b6a7a3dd88b8b26 Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Sun, 27 Oct 2024 13:36:18 -0400 Subject: [PATCH 5/8] feat: add ToDoList example for ts #117 --- src/examples/ts/useTitle/ToDoList.tsx | 69 +++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 src/examples/ts/useTitle/ToDoList.tsx diff --git a/src/examples/ts/useTitle/ToDoList.tsx b/src/examples/ts/useTitle/ToDoList.tsx new file mode 100644 index 0000000..a45dfbe --- /dev/null +++ b/src/examples/ts/useTitle/ToDoList.tsx @@ -0,0 +1,69 @@ +import { useEffect, useState } from 'react'; +import { useTitle } from '../../../hooks/ts/useTitle.ts'; + +interface Task { + id: number; + title: string; + isDone: boolean; +} + +// Simulate an API call that returns a list of tasks +const fetchTasks = () => { + return new Promise((resolve) => { + setTimeout(() => { + resolve([ + { id: 1, title: 'Task 1', isDone: false }, + { id: 2, title: 'Task 2', isDone: false }, + { id: 3, title: 'Task 3', isDone: false }, + { id: 4, title: 'Task 4', isDone: false }, + { id: 5, title: 'Task 5', isDone: false } + ]); + }, 1000); + }); +}; + +export const ToDoList = () => { + const [tasks, setTasks] = useState([]); + const { changeTitle } = useTitle(); + + useEffect(() => { + fetchTasks().then((tasks) => { + setTasks(tasks); + changeTitle(`${tasks.length} pending tasks`); + }); + }, []); + + // Handle check/uncheck task + const checkTask = (id: number, isDone: boolean) => { + const updatedTasks = tasks.map((task) => + task.id === id ? { ...task, isDone } : task + ); + setTasks(updatedTasks); + + // Set the title depending on the number of tasks left + const unfinishedTasks = updatedTasks.filter((task) => !task.isDone).length; + const newTitle = + unfinishedTasks !== 1 + ? `${unfinishedTasks} pending tasks` + : `${unfinishedTasks} pending task`; + changeTitle(newTitle); + }; + + return ( + <> +

Tasks

+
    + {tasks.map((task) => ( +
  • + checkTask(task.id, e.target.checked)} + /> + {task.title} +
    • + ))} +
+ + ); +}; From cdc3cf3206d077c55d8d5723fbd5261334645539 Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Sun, 27 Oct 2024 13:39:48 -0400 Subject: [PATCH 6/8] feat: add Notifications example for js #117 --- src/examples/js/useTitle/ToDoList.jsx | 63 +++++++++++++++++++++++++++ src/examples/ts/useTitle/ToDoList.tsx | 2 +- 2 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 src/examples/js/useTitle/ToDoList.jsx diff --git a/src/examples/js/useTitle/ToDoList.jsx b/src/examples/js/useTitle/ToDoList.jsx new file mode 100644 index 0000000..4aae159 --- /dev/null +++ b/src/examples/js/useTitle/ToDoList.jsx @@ -0,0 +1,63 @@ +import { useEffect, useState } from 'react'; +import { useTitle } from '../../../hooks/js/useTitle'; + +// Simulate an API call that returns a list of tasks +const fetchTasks = () => { + return new Promise((resolve) => { + setTimeout(() => { + resolve([ + { id: 1, title: 'Task 1', isDone: false }, + { id: 2, title: 'Task 2', isDone: false }, + { id: 3, title: 'Task 3', isDone: false }, + { id: 4, title: 'Task 4', isDone: false }, + { id: 5, title: 'Task 5', isDone: false } + ]); + }, 1000); + }); +}; + +export const ToDoList = () => { + const [tasks, setTasks] = useState([]); + const { changeTitle } = useTitle(); + + useEffect(() => { + fetchTasks().then((tasks) => { + setTasks(tasks); + changeTitle(`${tasks.length} pending tasks`); + }); + }, []); + + // Handle check/uncheck task + const checkTask = (id, isDone) => { + const updatedTasks = tasks.map((task) => + task.id === id ? { ...task, isDone } : task + ); + setTasks(updatedTasks); + + // Set the title depending on the number of tasks left + const unfinishedTasks = updatedTasks.filter((task) => !task.isDone).length; + const newTitle = + unfinishedTasks !== 1 + ? `${unfinishedTasks} pending tasks` + : `${unfinishedTasks} pending task`; + changeTitle(newTitle); + }; + + return ( + <> +

Tasks

+
    + {tasks.map((task) => ( +
  • + checkTask(task.id, e.target.checked)} + /> + {task.title} +
    • + ))} +
+ + ); +}; diff --git a/src/examples/ts/useTitle/ToDoList.tsx b/src/examples/ts/useTitle/ToDoList.tsx index a45dfbe..a3fee87 100644 --- a/src/examples/ts/useTitle/ToDoList.tsx +++ b/src/examples/ts/useTitle/ToDoList.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { useTitle } from '../../../hooks/ts/useTitle.ts'; +import { useTitle } from '../../../hooks/ts/useTitle'; interface Task { id: number; From 3d7d63c83cdf4fe8766bc14424a9eb0a64c54ba1 Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Sun, 27 Oct 2024 14:06:01 -0400 Subject: [PATCH 7/8] refactor: delete promise #117 --- src/examples/js/useTitle/Notifications.jsx | 30 +++++++------------- src/examples/js/useTitle/ToDoList.jsx | 28 ++++++------------ src/examples/ts/useTitle/Notifications.tsx | 33 ++++++++-------------- src/examples/ts/useTitle/ToDoList.tsx | 28 ++++++------------ 4 files changed, 40 insertions(+), 79 deletions(-) diff --git a/src/examples/js/useTitle/Notifications.jsx b/src/examples/js/useTitle/Notifications.jsx index 4ae6cdd..6cc408a 100644 --- a/src/examples/js/useTitle/Notifications.jsx +++ b/src/examples/js/useTitle/Notifications.jsx @@ -1,30 +1,20 @@ import { useEffect, useState } from 'react'; import { useTitle } from '../../../hooks/js/useTitle.js'; -// Simulate an API call that returns a list of notifications -const fetchNotifications = () => { - return new Promise((resolve) => { - setTimeout(() => { - resolve([ - { id: 1, text: 'Notification 1' }, - { id: 2, text: 'Notification 2' }, - { id: 3, text: 'Notification 3' }, - { id: 4, text: 'Notification 4' }, - { id: 5, text: 'Notification 5' } - ]); - }, 1000); - }); -}; +const appNotifications = [ + { id: 1, title: 'Notification 1' }, + { id: 2, title: 'Notification 2' }, + { id: 3, title: 'Notification 3' }, + { id: 4, title: 'Notification 4' }, + { id: 5, title: 'Notification 5' } +]; export const Notifications = () => { - const [notifications, setNotifications] = useState([]); + const [notifications, setNotifications] = useState(appNotifications); const { title, changeTitle } = useTitle(); useEffect(() => { - fetchNotifications().then((notifications) => { - setNotifications(notifications); - changeTitle(`Notifications (${notifications.length})`); - }); + changeTitle(`${title} (${notifications.length})`); }, []); // Delete notification @@ -48,7 +38,7 @@ export const Notifications = () => {
    {notifications.map((notification) => (
  • - {notification.text} + {notification.title} diff --git a/src/examples/js/useTitle/ToDoList.jsx b/src/examples/js/useTitle/ToDoList.jsx index 4aae159..89d48b0 100644 --- a/src/examples/js/useTitle/ToDoList.jsx +++ b/src/examples/js/useTitle/ToDoList.jsx @@ -1,30 +1,20 @@ import { useEffect, useState } from 'react'; import { useTitle } from '../../../hooks/js/useTitle'; -// Simulate an API call that returns a list of tasks -const fetchTasks = () => { - return new Promise((resolve) => { - setTimeout(() => { - resolve([ - { id: 1, title: 'Task 1', isDone: false }, - { id: 2, title: 'Task 2', isDone: false }, - { id: 3, title: 'Task 3', isDone: false }, - { id: 4, title: 'Task 4', isDone: false }, - { id: 5, title: 'Task 5', isDone: false } - ]); - }, 1000); - }); -}; +const Tasks = [ + { id: 1, title: 'Task 1', isDone: false }, + { id: 2, title: 'Task 2', isDone: false }, + { id: 3, title: 'Task 3', isDone: false }, + { id: 4, title: 'Task 4', isDone: false }, + { id: 5, title: 'Task 5', isDone: false } +]; export const ToDoList = () => { - const [tasks, setTasks] = useState([]); + const [tasks, setTasks] = useState(Tasks); const { changeTitle } = useTitle(); useEffect(() => { - fetchTasks().then((tasks) => { - setTasks(tasks); - changeTitle(`${tasks.length} pending tasks`); - }); + changeTitle(`${tasks.length} pending tasks`); }, []); // Handle check/uncheck task diff --git a/src/examples/ts/useTitle/Notifications.tsx b/src/examples/ts/useTitle/Notifications.tsx index 9f387af..abc971e 100644 --- a/src/examples/ts/useTitle/Notifications.tsx +++ b/src/examples/ts/useTitle/Notifications.tsx @@ -3,33 +3,24 @@ import { useTitle } from '../../../hooks/ts/useTitle.ts'; interface Notification { id: number; - text: string; + title: string; } -// Simulate an API call that returns a list of notifications -const fetchNotifications = () => { - return new Promise((resolve) => { - setTimeout(() => { - resolve([ - { id: 1, text: 'Notification 1' }, - { id: 2, text: 'Notification 2' }, - { id: 3, text: 'Notification 3' }, - { id: 4, text: 'Notification 4' }, - { id: 5, text: 'Notification 5' } - ]); - }, 1000); - }); -}; +const appNotifications: Notification[] = [ + { id: 1, title: 'Notification 1' }, + { id: 2, title: 'Notification 2' }, + { id: 3, title: 'Notification 3' }, + { id: 4, title: 'Notification 4' }, + { id: 5, title: 'Notification 5' } +]; export const Notifications = () => { - const [notifications, setNotifications] = useState([]); + const [notifications, setNotifications] = + useState(appNotifications); const { title, changeTitle } = useTitle(); useEffect(() => { - fetchNotifications().then((notifications) => { - setNotifications(notifications); - changeTitle(`Notifications (${notifications.length})`); - }); + changeTitle(`${title} (${notifications.length})`); }, []); // Delete notification @@ -53,7 +44,7 @@ export const Notifications = () => {
      {notifications.map((notification) => (
    • - {notification.text} + {notification.title} diff --git a/src/examples/ts/useTitle/ToDoList.tsx b/src/examples/ts/useTitle/ToDoList.tsx index a3fee87..80506f4 100644 --- a/src/examples/ts/useTitle/ToDoList.tsx +++ b/src/examples/ts/useTitle/ToDoList.tsx @@ -7,30 +7,20 @@ interface Task { isDone: boolean; } -// Simulate an API call that returns a list of tasks -const fetchTasks = () => { - return new Promise((resolve) => { - setTimeout(() => { - resolve([ - { id: 1, title: 'Task 1', isDone: false }, - { id: 2, title: 'Task 2', isDone: false }, - { id: 3, title: 'Task 3', isDone: false }, - { id: 4, title: 'Task 4', isDone: false }, - { id: 5, title: 'Task 5', isDone: false } - ]); - }, 1000); - }); -}; +const Tasks: Task[] = [ + { id: 1, title: 'Task 1', isDone: false }, + { id: 2, title: 'Task 2', isDone: false }, + { id: 3, title: 'Task 3', isDone: false }, + { id: 4, title: 'Task 4', isDone: false }, + { id: 5, title: 'Task 5', isDone: false } +]; export const ToDoList = () => { - const [tasks, setTasks] = useState([]); + const [tasks, setTasks] = useState(Tasks); const { changeTitle } = useTitle(); useEffect(() => { - fetchTasks().then((tasks) => { - setTasks(tasks); - changeTitle(`${tasks.length} pending tasks`); - }); + changeTitle(`${tasks.length} pending tasks`); }, []); // Handle check/uncheck task From c04ea8348b0664a473726756222cf7bde5e735c1 Mon Sep 17 00:00:00 2001 From: Daniel Castillo Date: Sun, 27 Oct 2024 14:17:37 -0400 Subject: [PATCH 8/8] refactor: update const #117 --- src/examples/js/useTitle/ToDoList.jsx | 7 ++++--- src/examples/ts/useTitle/ToDoList.tsx | 7 ++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/examples/js/useTitle/ToDoList.jsx b/src/examples/js/useTitle/ToDoList.jsx index 89d48b0..43d57b8 100644 --- a/src/examples/js/useTitle/ToDoList.jsx +++ b/src/examples/js/useTitle/ToDoList.jsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import { useTitle } from '../../../hooks/js/useTitle'; -const Tasks = [ +const appTasks = [ { id: 1, title: 'Task 1', isDone: false }, { id: 2, title: 'Task 2', isDone: false }, { id: 3, title: 'Task 3', isDone: false }, @@ -10,11 +10,12 @@ const Tasks = [ ]; export const ToDoList = () => { - const [tasks, setTasks] = useState(Tasks); + const [tasks, setTasks] = useState(appTasks); const { changeTitle } = useTitle(); useEffect(() => { - changeTitle(`${tasks.length} pending tasks`); + const unfinishedTasks = tasks.filter((task) => !task.isDone).length; + changeTitle(`${unfinishedTasks} pending tasks`); }, []); // Handle check/uncheck task diff --git a/src/examples/ts/useTitle/ToDoList.tsx b/src/examples/ts/useTitle/ToDoList.tsx index 80506f4..4619e12 100644 --- a/src/examples/ts/useTitle/ToDoList.tsx +++ b/src/examples/ts/useTitle/ToDoList.tsx @@ -7,7 +7,7 @@ interface Task { isDone: boolean; } -const Tasks: Task[] = [ +const appTasks: Task[] = [ { id: 1, title: 'Task 1', isDone: false }, { id: 2, title: 'Task 2', isDone: false }, { id: 3, title: 'Task 3', isDone: false }, @@ -16,11 +16,12 @@ const Tasks: Task[] = [ ]; export const ToDoList = () => { - const [tasks, setTasks] = useState(Tasks); + const [tasks, setTasks] = useState(appTasks); const { changeTitle } = useTitle(); useEffect(() => { - changeTitle(`${tasks.length} pending tasks`); + const unfinishedTasks = tasks.filter((task) => !task.isDone).length; + changeTitle(`${unfinishedTasks} pending tasks`); }, []); // Handle check/uncheck task