Finish feature/117

Author: dlcastillop

src/examples/js/useTitle/Notifications.jsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import { useTitle } from '../../../hooks/js/useTitle.js';
+
+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(appNotifications);
+  const { title, changeTitle } = useTitle();
+
+  useEffect(() => {
+    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 (
+    <>
+      <h1>Notifications</h1>
+      <ul>
+        {notifications.map((notification) => (
+          <li key={notification.id}>
+            {notification.title}
+            <button onClick={() => deleteNotification(notification.id)}>
+              Delete
+            </button>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};

src/examples/js/useTitle/ToDoList.jsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+import { useTitle } from '../../../hooks/js/useTitle';
+
+const appTasks = [
+  { 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(appTasks);
+  const { changeTitle } = useTitle();
+
+  useEffect(() => {
+    const unfinishedTasks = tasks.filter((task) => !task.isDone).length;
+    changeTitle(`${unfinishedTasks} 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 (
+    <>
+      <h1>Tasks</h1>
+      <ul>
+        {tasks.map((task) => (
+          <li key={task.id}>
+            <input
+              type="checkbox"
+              checked={task.isDone}
+              onChange={(e) => checkTask(task.id, e.target.checked)}
+            />
+            {task.title}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};

src/examples/ts/useTitle/Notifications.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { useTitle } from '../../../hooks/ts/useTitle.ts';
+
+interface Notification {
+  id: number;
+  title: string;
+}
+
+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<Notification[]>(appNotifications);
+  const { title, changeTitle } = useTitle();
+
+  useEffect(() => {
+    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 (
+    <>
+      <h1>Notifications</h1>
+      <ul>
+        {notifications.map((notification) => (
+          <li key={notification.id}>
+            {notification.title}
+            <button onClick={() => deleteNotification(notification.id)}>
+              Delete
+            </button>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};

src/examples/ts/useTitle/ToDoList.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+import { useTitle } from '../../../hooks/ts/useTitle';
+
+interface Task {
+  id: number;
+  title: string;
+  isDone: boolean;
+}
+
+const appTasks: 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<Task[]>(appTasks);
+  const { changeTitle } = useTitle();
+
+  useEffect(() => {
+    const unfinishedTasks = tasks.filter((task) => !task.isDone).length;
+    changeTitle(`${unfinishedTasks} 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 (
+    <>
+      <h1>Tasks</h1>
+      <ul>
+        {tasks.map((task) => (
+          <li key={task.id}>
+            <input
+              type="checkbox"
+              checked={task.isDone}
+              onChange={(e) => checkTask(task.id, e.target.checked)}
+            />
+            {task.title}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};