From 597ee0abc186b8a0feca9ac94f9ad3d601877dc7 Mon Sep 17 00:00:00 2001 From: Batyr Date: Wed, 21 May 2025 13:43:39 +0500 Subject: [PATCH] refactoring --- src/components/layout/cover.tsx | 2 +- src/components/shared/home/home-about.tsx | 6 +- src/components/shared/home/home-sponsors.tsx | 79 ++++++++++++++++++++ src/components/shared/home/index.ts | 1 + src/data/home/home-hero.data.ts | 4 +- src/hooks/tanstack/use-sponsors.ts | 15 ++++ src/locales/en/home.json | 6 +- src/locales/ru/home.json | 6 +- src/pages/home.tsx | 4 +- src/pages/participants.tsx | 2 + src/pages/stend-form.tsx | 34 +++++---- src/routes.ts | 36 +++++++++ src/services/service.ts | 9 +++ 13 files changed, 178 insertions(+), 26 deletions(-) create mode 100644 src/components/shared/home/home-sponsors.tsx create mode 100644 src/hooks/tanstack/use-sponsors.ts create mode 100644 src/routes.ts diff --git a/src/components/layout/cover.tsx b/src/components/layout/cover.tsx index 40d20ce..1de2a7c 100644 --- a/src/components/layout/cover.tsx +++ b/src/components/layout/cover.tsx @@ -6,7 +6,7 @@ interface Props { export const Cover: FC = ({ title }) => { return ( -
+
{ const title = data?.find((item) => item.key === "index_1")?.text; const text = data?.find((item) => item.key === "index_2")?.text; + const translate = useTranslate(lang); + if (isPending) return ; return ( @@ -36,9 +38,7 @@ export const HomeAbout: FC = () => { /> - +
diff --git a/src/components/shared/home/home-sponsors.tsx b/src/components/shared/home/home-sponsors.tsx new file mode 100644 index 0000000..68126f5 --- /dev/null +++ b/src/components/shared/home/home-sponsors.tsx @@ -0,0 +1,79 @@ +import { cn } from "@/lib/utils"; +import { FC } from "react"; +import { Link } from "react-router-dom"; +import useEmblaCarousel from "embla-carousel-react"; +import Autoplay from "embla-carousel-autoplay"; +import { useTranslation } from "react-i18next"; +import { useSponsors } from "@/hooks/tanstack/use-sponsors"; +import { Container } from "@/components/layout"; +import { Loader } from "../loader"; + +interface Props { + className?: string; +} + +export const HomeSponsors: FC = ({ className }) => { + const [emblaRef] = useEmblaCarousel( + { + loop: true, + align: "start", + skipSnaps: true, + duration: 75, + }, + [Autoplay({ stopOnInteraction: false, delay: 3000 })] + ); + + const { data, isPending } = useSponsors(); + + const { t } = useTranslation("home", { keyPrefix: "sponsors" }); + + if (isPending) return ; + + return ( +
+ +

{t("title")}

+ +
+
+ {data?.map((item, i) => + item.link ? ( + + logo +
+ {item.name} +
+ + ) : ( +
+
+ logo +
+
+ {item.name} +
+
+ ) + )} +
+
+ +
+ ); +}; diff --git a/src/components/shared/home/index.ts b/src/components/shared/home/index.ts index b60ddbf..f56aa43 100644 --- a/src/components/shared/home/index.ts +++ b/src/components/shared/home/index.ts @@ -3,3 +3,4 @@ export { HomeTime } from "./home-time"; export { HomeAbout } from "./home-about"; export { HomeTheme } from "./home-theme"; export { HomeOffers } from "./home-offers"; +export { HomeSponsors } from "./home-sponsors"; diff --git a/src/data/home/home-hero.data.ts b/src/data/home/home-hero.data.ts index e7d8eeb..27aec3f 100644 --- a/src/data/home/home-hero.data.ts +++ b/src/data/home/home-hero.data.ts @@ -15,7 +15,7 @@ export const btns = [ }, { title: "Список участников", - link: "", + link: "/participants", }, { title: "B2B | B2G встречи", @@ -38,7 +38,7 @@ export const btns = [ }, { title: "List of participants", - link: "/", + link: "/participants", }, { title: "B2B | B2G meetings", diff --git a/src/hooks/tanstack/use-sponsors.ts b/src/hooks/tanstack/use-sponsors.ts new file mode 100644 index 0000000..06e017c --- /dev/null +++ b/src/hooks/tanstack/use-sponsors.ts @@ -0,0 +1,15 @@ +import { useQuery } from "@tanstack/react-query"; +import { useLangStore } from "@/store/lang"; +import { getSponsors } from "@/services/service"; + +export const useSponsors = () => { + const lang = useLangStore((state) => state.lang); + + const { data, isPending } = useQuery({ + queryKey: ["sponsors", lang], + queryFn: () => getSponsors(lang), + select: ({ data }) => data.data, + }); + + return { data, isPending }; +}; diff --git a/src/locales/en/home.json b/src/locales/en/home.json index cbe44d5..6a21cc4 100644 --- a/src/locales/en/home.json +++ b/src/locales/en/home.json @@ -23,7 +23,7 @@ }, { "title": "Participants list", - "link": "" + "link": "/participants" }, { "title": "B2B | B2G meetings", @@ -57,5 +57,9 @@ ], "button": "More about the exhibition" + }, + + "sponsors": { + "title": "Sponsors and partners" } } diff --git a/src/locales/ru/home.json b/src/locales/ru/home.json index 31e708f..84b1ae0 100644 --- a/src/locales/ru/home.json +++ b/src/locales/ru/home.json @@ -22,7 +22,7 @@ }, { "title": "Список участников", - "link": "" + "link": "/participants" }, { "title": "B2B | B2G встречи", @@ -56,5 +56,9 @@ ], "button": "Подробнее о выставке" + }, + + "sponsors": { + "title": "Спонсоры и партнеры" } } diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 733d72c..fa7e007 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -2,19 +2,19 @@ import { HomeAbout, HomeHero, HomeOffers, + HomeSponsors, HomeTheme, HomeTime, } from "@/components/shared"; -import { HomePartners } from "@/components/shared/home/home-partners"; export default function Home() { return (
+ -
); diff --git a/src/pages/participants.tsx b/src/pages/participants.tsx index 27cde55..fcca601 100644 --- a/src/pages/participants.tsx +++ b/src/pages/participants.tsx @@ -4,12 +4,14 @@ import { useLangStore } from "@/store/lang"; import { Container } from "@/components/layout"; import { Loader, ParticipantItem, Tabs } from "@/components/shared"; import { useParticipants } from "@/hooks/tanstack/use-participants"; +import { useScrollTop } from "@/hooks/use-scroll-top"; interface Props { className?: string; } const Participants: FC = ({ className }) => { + useScrollTop(); const lang = useLangStore((state) => state.lang); const { data, isPending } = useParticipants(); diff --git a/src/pages/stend-form.tsx b/src/pages/stend-form.tsx index 37eda4d..9f5a872 100644 --- a/src/pages/stend-form.tsx +++ b/src/pages/stend-form.tsx @@ -40,10 +40,12 @@ export default function StendForm() { useEffect(() => { window.scrollTo({ behavior: "smooth", top: 0 }); - }, [status]); + }, []); const { errors } = form.formState; + const translate = useTranslate(lang); + return (
@@ -64,7 +66,7 @@ export default function StendForm() { render={({ field }) => ( - {stendData[useTranslate(lang)].h2} + {stendData[translate].h2} @@ -81,7 +83,7 @@ export default function StendForm() { /> - {stendData[useTranslate(lang)].radio} + {stendData[translate].radio} @@ -93,7 +95,7 @@ export default function StendForm() { /> - {stendData[useTranslate(lang)].radio_2} + {stendData[translate].radio_2} @@ -103,51 +105,51 @@ export default function StendForm() { /> @@ -158,7 +160,7 @@ export default function StendForm() { render={({ field }) => ( - {stendData[useTranslate(lang)].visa} + {stendData[translate].visa} @@ -175,7 +177,7 @@ export default function StendForm() { /> - {stendData[useTranslate(lang)].visa_radio} + {stendData[translate].visa_radio} @@ -187,7 +189,7 @@ export default function StendForm() { /> - {stendData[useTranslate(lang)].visa_radio_2} + {stendData[translate].visa_radio_2} @@ -200,7 +202,7 @@ export default function StendForm() { {form.formState.isSubmitting ? ( ) : ( - stendData[useTranslate(lang)].button + stendData[translate].button )} diff --git a/src/routes.ts b/src/routes.ts new file mode 100644 index 0000000..7432567 --- /dev/null +++ b/src/routes.ts @@ -0,0 +1,36 @@ +// import { lazy } from "react"; +// import { RouteObject } from "react-router-dom"; +// import App from "./App"; + +// const lazyLoad = (path: string) => +// lazy(() => import(/* webpackPrefetch: true */ path)); + +// const Home = lazyLoad("./pages/home"); +// const About = lazyLoad("./pages/about"); +// const B2b = lazyLoad("./pages/b2b"); +// const BecomeSponsor = lazyLoad("./pages/become-sponsor"); +// const StendForm = lazyLoad("./pages/stend-form"); +// const Contacts = lazyLoad("./pages/contacts"); +// const News = lazyLoad("./pages/news"); +// const NewsInner = lazyLoad("./pages/news-inner"); +// const Participants = lazyLoad("./pages/participants"); +// const Media = lazyLoad("./pages/media"); + +// export const routes: RouteObject[] = [ +// { +// path: "/", +// element: , +// children: [ +// { index: true, element: }, +// { path: "about", element: }, +// { path: "B2B-B2G", element: }, +// { path: "become-sponsor", element: }, +// { path: "stend-form", element: }, +// { path: "contacts", element: }, +// { path: "news", element: }, +// { path: "news/:id", element: }, +// { path: "participants", element: }, +// { path: "media", element: }, +// ], +// }, +// ]; diff --git a/src/services/service.ts b/src/services/service.ts index f66e3e3..121fb83 100644 --- a/src/services/service.ts +++ b/src/services/service.ts @@ -160,3 +160,12 @@ export const getVideos = async (id: number) => { return data; }; +export const getSponsors = async (lang: LangState["lang"]) => { + const data = axios_url("sponsors_and_partners", { + headers: { + "Accept-Language": lang, + }, + }); + + return data; +};