From b2feaac3e1ca0f8fbd983d56b74c6c3a3fbd5978 Mon Sep 17 00:00:00 2001 From: Sergey Elpashev Date: Tue, 15 Apr 2025 11:23:48 +0300 Subject: [PATCH] feat: withTitle modif --- src/constructors/Component.tsx | 12 ++++++++++++ src/pages/404.tsx | 7 ++----- src/pages/calendar.tsx | 8 +++----- src/pages/login.tsx | 7 ++----- src/pages/profile_settings.tsx | 7 ++----- src/pages/profile_tasks.tsx | 8 +++----- 6 files changed, 24 insertions(+), 25 deletions(-) create mode 100644 src/constructors/Component.tsx diff --git a/src/constructors/Component.tsx b/src/constructors/Component.tsx new file mode 100644 index 0000000..4a02469 --- /dev/null +++ b/src/constructors/Component.tsx @@ -0,0 +1,12 @@ +import { FunctionComponent } from "preact"; +import { useEffect } from "preact/hooks"; + +export const withTitle = (title: string, WrappedComponent: FunctionComponent

): FunctionComponent

=> { + const ComponentWithTitle: FunctionComponent

= (props) => { + useEffect(() => { + document.title = title; + }, []); + return ; + }; + return ComponentWithTitle; +}; diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 1bfe437..666a7e5 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,15 +1,12 @@ import Button from "@/components/ui/Button"; +import { withTitle } from "@/constructors/Component"; import { UrlsTitle } from "@/enums/urls"; import { FunctionComponent } from "preact"; import { useLocation } from "preact-iso"; -import { useEffect } from "preact/hooks"; import classes from "./404.module.scss"; const Page404: FunctionComponent = () => { const { route } = useLocation(); - useEffect(() => { - document.title = UrlsTitle.PAGE404; - }, []); return (

@@ -27,4 +24,4 @@ const Page404: FunctionComponent = () => { ); }; -export default Page404; +export default withTitle(UrlsTitle.PAGE404, Page404); diff --git a/src/pages/calendar.tsx b/src/pages/calendar.tsx index dcbe198..187d971 100644 --- a/src/pages/calendar.tsx +++ b/src/pages/calendar.tsx @@ -1,7 +1,8 @@ +import { withTitle } from "@/constructors/Component"; import { UrlsTitle } from "@/enums/urls"; import { cn } from "@/utils/class-merge"; import { FunctionComponent, h } from "preact"; -import { useEffect, useState } from "preact/hooks"; +import { useState } from "preact/hooks"; type MarkedDateType = "event" | "holiday" | "important" | string; type MarkedDates = Record; @@ -17,9 +18,6 @@ const BigCalendar: FunctionComponent = ({ markedDates = {}, className = "", }: BigCalendarProps) => { - useEffect(() => { - document.title = UrlsTitle.CALENDAR; - }, []); const [currentDate, setCurrentDate] = useState(new Date()); const [selectedDate, setSelectedDate] = useState(null); @@ -251,4 +249,4 @@ const BigCalendar: FunctionComponent = ({ ); }; -export default BigCalendar; +export default withTitle(UrlsTitle.CALENDAR, BigCalendar); diff --git a/src/pages/login.tsx b/src/pages/login.tsx index 697a1b3..dbd51c0 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -1,17 +1,14 @@ import Button from "@/components/ui/Button"; import Input from "@/components/ui/Input"; +import { withTitle } from "@/constructors/Component"; import { UrlsTitle } from "@/enums/urls"; import { useAppContext } from "@/providers/AuthProvider"; import { FunctionComponent } from "preact"; import { useLocation } from "preact-iso"; -import { useEffect } from "preact/hooks"; import classes from "./login.module.scss"; const LoginPage: FunctionComponent = () => { const { isLoggedIn } = useAppContext(); const { route } = useLocation(); - useEffect(() => { - document.title = UrlsTitle.LOGIN; - }, []); return (
@@ -33,4 +30,4 @@ const LoginPage: FunctionComponent = () => { ); }; -export default LoginPage; +export default withTitle(UrlsTitle.LOGIN, LoginPage); diff --git a/src/pages/profile_settings.tsx b/src/pages/profile_settings.tsx index ba15871..32294fb 100644 --- a/src/pages/profile_settings.tsx +++ b/src/pages/profile_settings.tsx @@ -1,17 +1,14 @@ import Button from "@/components/ui/Button"; +import { withTitle } from "@/constructors/Component"; import { UrlsTitle } from "@/enums/urls"; import { useAppContext } from "@/providers/AuthProvider"; import { FunctionComponent } from "preact"; import { useLocation } from "preact-iso"; -import { useEffect } from "preact/hooks"; import classes from "./profile_settings.module.scss"; const ProfileSettings: FunctionComponent = () => { const { isLoggedIn } = useAppContext(); const { route } = useLocation(); - useEffect(() => { - document.title = UrlsTitle.PROFILE; - }, []); return (
Аватар
@@ -42,4 +39,4 @@ const ProfileSettings: FunctionComponent = () => { ); }; -export default ProfileSettings; +export default withTitle(UrlsTitle.PROFILE, ProfileSettings); diff --git a/src/pages/profile_tasks.tsx b/src/pages/profile_tasks.tsx index c62a22e..3f7683a 100644 --- a/src/pages/profile_tasks.tsx +++ b/src/pages/profile_tasks.tsx @@ -1,7 +1,8 @@ import Task from "@/components/task"; +import { withTitle } from "@/constructors/Component"; import { UrlsTitle } from "@/enums/urls"; import { FunctionComponent } from "preact"; -import { useEffect, useMemo } from "preact/hooks"; +import { useMemo } from "preact/hooks"; import classes from "./profile_tasks.module.scss"; const example_tasks = ["Test 1", "Test 2", "Test 3", "Test 4", "Test 5", "Test 6", "Test 7", "Test 8"]; @@ -12,9 +13,6 @@ const ProfileTasks: FunctionComponent = () => { const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" }); return formatter.format(date); }, []); - useEffect(() => { - document.title = UrlsTitle.TASKS; - }, []); return (
Сегодня: {getDate}
@@ -27,4 +25,4 @@ const ProfileTasks: FunctionComponent = () => { ); }; -export default ProfileTasks; +export default withTitle(UrlsTitle.TASKS, ProfileTasks);