From f9f099f1512575017a0c9e75407725b980468c48 Mon Sep 17 00:00:00 2001 From: andrxpie Date: Wed, 10 Jun 2026 14:27:14 +0300 Subject: [PATCH 1/8] Aligns project styling and extends type definitions --- src/global.d.ts | 2 +- src/index.d.ts | 17 +++++++++-------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/global.d.ts b/src/global.d.ts index 61ca562..1449394 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -2,4 +2,4 @@ declare const process: { env: { NODE_ENV: 'development' | 'production' | 'test'; }; -}; \ No newline at end of file +}; diff --git a/src/index.d.ts b/src/index.d.ts index d564f89..d62328a 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1,12 +1,13 @@ -declare module '*.png'; -declare module '*.jpg'; -declare module '*.svg' { - const content: React.FunctionComponent>; - export default content; +declare module "*.png"; +declare module "*.jpg"; +declare module "*.jpeg"; +declare module "*.gif"; +declare module "*.svg" { + const content: React.FunctionComponent>; + export default content; } -declare module '*.css'; -declare module '*.jpeg'; -declare module '*.scss' { +declare module "*.css"; +declare module "*.scss" { const classes: { [key: string]: string }; export default classes; } From 5cb6e4a8c0d778af2c492d635c343e223920a3cd Mon Sep 17 00:00:00 2001 From: andrxpie Date: Wed, 10 Jun 2026 14:27:14 +0300 Subject: [PATCH 2/8] Introduces nested routing for comments feature --- src/app/router/Routes.tsx | 91 +++++++++++++------------ src/assets/images/utils/Comment_btn.svg | 23 +++++++ 2 files changed, 72 insertions(+), 42 deletions(-) create mode 100644 src/assets/images/utils/Comment_btn.svg diff --git a/src/app/router/Routes.tsx b/src/app/router/Routes.tsx index 840dc0e..da97a7a 100644 --- a/src/app/router/Routes.tsx +++ b/src/app/router/Routes.tsx @@ -1,51 +1,58 @@ -import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom'; -import RequireAuth from '@components/RequireAuth/RequireAuth.component'; -import FRONTEND_ROUTES from '@constants/frontend-routes.constants'; -import EditStreetcodePage from '@features/AdminPage/EditStreetcodePage/EditStreetcodePage.component'; -import ForFansMainPage from '@features/AdminPage/ForFansPage/ForFansMainPage.component'; -import App from '@layout/app/App.component'; -import StreetcodeContent from '@streetcode/Streetcode.component'; +import { createBrowserRouter, createRoutesFromElements, Route } from "react-router-dom"; +import RequireAuth from "@components/RequireAuth/RequireAuth.component"; +import FRONTEND_ROUTES from "@constants/frontend-routes.constants"; +import EditStreetcodePage from "@features/AdminPage/EditStreetcodePage/EditStreetcodePage.component"; +import ForFansMainPage from "@features/AdminPage/ForFansPage/ForFansMainPage.component"; +import App from "@layout/app/App.component"; +import StreetcodeContent from "@streetcode/Streetcode.component"; -import ContactUs from '@/features/AdditionalPages/ContactUsPage/ContanctUs.component'; -import NewsPage from '@/features/AdditionalPages/NewsPage/News.component'; -import NotFound from '@/features/AdditionalPages/NotFoundPage/NotFound.component'; -import PartnersPage from '@/features/AdditionalPages/PartnersPage/Partners.component'; -import SupportPage from '@/features/AdditionalPages/SupportUsPage/SupportUs.component'; -import AdminPage from '@/features/AdminPage/AdminPage.component'; -import Dictionary from '@/features/AdminPage/DictionaryPage/Dictionary.component'; -import LoginPage from '@/features/AdminPage/LoginPage/LoginPage.component'; -import Partners from '@/features/AdminPage/PartnersPage/Partners.component'; -import StreetcodeCreate from '@/features/AdminPage/StreetcodesPage/StreetcodeCreate/StreetcodeCreate.component'; -import Streetcodes from '@/features/AdminPage/StreetcodesPage/Streetcodes.component'; -import TeamPage from '@/features/AdminPage/TeamPage/TeamPage.component'; -import StreetcodeCatalog from '@/features/StreetcodeCatalogPage/StreetcodeCatalog.component'; -import StreetcodeEditor from '@/features/AdminPage/StreetcodesPage/StreetcodeEditor.component'; +import ContactUs from "@/features/AdditionalPages/ContactUsPage/ContanctUs.component"; +import NewsPage from "@/features/AdditionalPages/NewsPage/News.component"; +import NotFound from "@/features/AdditionalPages/NotFoundPage/NotFound.component"; +import PartnersPage from "@/features/AdditionalPages/PartnersPage/Partners.component"; +import SupportPage from "@/features/AdditionalPages/SupportUsPage/SupportUs.component"; +import AdminPage from "@/features/AdminPage/AdminPage.component"; +import Dictionary from "@/features/AdminPage/DictionaryPage/Dictionary.component"; +import LoginPage from "@/features/AdminPage/LoginPage/LoginPage.component"; +import Partners from "@/features/AdminPage/PartnersPage/Partners.component"; +import StreetcodeCreate from "@/features/AdminPage/StreetcodesPage/StreetcodeCreate/StreetcodeCreate.component"; +import Streetcodes from "@/features/AdminPage/StreetcodesPage/Streetcodes.component"; +import TeamPage from "@/features/AdminPage/TeamPage/TeamPage.component"; +import StreetcodeCatalog from "@/features/StreetcodeCatalogPage/StreetcodeCatalog.component"; -const router = createBrowserRouter(createRoutesFromElements( +const router = createBrowserRouter( + createRoutesFromElements( }> - } /> + } /> - }> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + }> + } /> + } /> + }> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + - } /> - } /> - } /> - } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> + + }> + } /> + + + } /> + } /> , -)); + ), +); export default router; diff --git a/src/assets/images/utils/Comment_btn.svg b/src/assets/images/utils/Comment_btn.svg new file mode 100644 index 0000000..905dc35 --- /dev/null +++ b/src/assets/images/utils/Comment_btn.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From 123c513d305b13cef7a4582dd5ab54d5965bc79b Mon Sep 17 00:00:00 2001 From: andrxpie Date: Wed, 10 Jun 2026 14:32:13 +0300 Subject: [PATCH 3/8] Refactor: Standardizes imports and updates page navigation --- src/features/MainPage/MainPage.component.tsx | 79 ++++++++++--------- .../MainBlock/MainBlock.component.tsx | 47 ++++++----- 2 files changed, 62 insertions(+), 64 deletions(-) diff --git a/src/features/MainPage/MainPage.component.tsx b/src/features/MainPage/MainPage.component.tsx index 409385f..8af8342 100644 --- a/src/features/MainPage/MainPage.component.tsx +++ b/src/features/MainPage/MainPage.component.tsx @@ -1,47 +1,48 @@ -import './MainPage.styles.scss'; +/* eslint-disable max-len */ +import "./MainPage.styles.scss"; -import ScrollToTopBtn from '../../app/common/components/ScrollToTopBtn/ScrollToTopBtn.component'; -import InstagramBlock from './InstagramBlock/InstagramBlock.component'; -import PartnersBlockComponent from './PartnersBlockMain/PartnersBlockMain.component'; -import StaticBanner from './StaticBanners/StaticBanner.component'; -import StreetcodeSliderComponent from './StreetcodeSlider/StreetcodeSlider.component'; -import TeamComponent from './TeamSlider/TeamComponent.component'; -import TopCarouselComponent from './TopCarousel/TopCarousel.component'; -import NewsSliderComponent from './NewsSlider/NewsSlider.component'; +import ScrollToTopBtn from "@components/ScrollToTopBtn/ScrollToTopBtn.component"; + +import NewsSliderComponent from "./NewsSlider/NewsSlider.component"; +import PartnersBlockComponent from "./PartnersBlockMain/PartnersBlockMain.component"; +import StaticBanner from "./StaticBanners/StaticBanner.component"; +import StreetcodeSliderComponent from "./StreetcodeSlider/StreetcodeSlider.component"; +import TeamComponent from "./TeamSlider/TeamComponent.component"; +import TopCarouselComponent from "./TopCarousel/TopCarousel.component"; const mainPageContent = () => ( - <> - + <> +
- - { - window.location.href = '../catalog'; - }} - /> - - - - { - window.location.href = '../support-us'; - }} - /> -
-
- -
+ + { + globalThis.location.href = "../catalog"; + }} + /> + + + + { + globalThis.location.href = "../support-us"; + }} + /> +
+
+
+
- + ); -export default mainPageContent; \ No newline at end of file +export default mainPageContent; diff --git a/src/features/StreetcodePage/MainBlock/MainBlock.component.tsx b/src/features/StreetcodePage/MainBlock/MainBlock.component.tsx index c37da6f..002759d 100644 --- a/src/features/StreetcodePage/MainBlock/MainBlock.component.tsx +++ b/src/features/StreetcodePage/MainBlock/MainBlock.component.tsx @@ -1,35 +1,32 @@ -import './MainBlock.styles.scss'; +/* eslint-disable implicit-arrow-linebreak */ +import "./MainBlock.styles.scss"; -import { observer } from 'mobx-react-lite'; -import BreadCrumb from '@streetcode/MainBlock/BreadCrumb/BreadCrumb.component'; -import StreetcodeCard from '@streetcode/MainBlock/StreetcodeCard/StreetcodeCard.component'; +import { observer } from "mobx-react-lite"; +import BreadCrumb from "@streetcode/MainBlock/BreadCrumb/BreadCrumb.component"; +import StreetcodeCard from "@streetcode/MainBlock/StreetcodeCard/StreetcodeCard.component"; -import ListenTextModal from '@/app/common/components/modals/ListenText/ListenText.component'; -import Streetcode from '@/models/streetcode/streetcode-types.model'; +import ListenTextModal from "@/app/common/components/modals/ListenText/ListenText.component"; +import Streetcode from "@/models/streetcode/streetcode-types.model"; interface Props { - setActiveTagId: React.Dispatch>, - setActiveBlock: React.Dispatch>, - streetcode?: Streetcode, + setActiveTagId: React.Dispatch>; + setActiveBlock: React.Dispatch>; + streetcode?: Streetcode; } -const MainBlock = ({ setActiveTagId, setActiveBlock, streetcode } : Props) => (streetcode && ( +const MainBlock = ({ setActiveTagId, setActiveBlock, streetcode }: Props) => + streetcode && (
-
- } streetcode={streetcode} /> -
-
- -
-
+
+ } streetcode={streetcode} /> +
+
+ +
- +
+
-) -); + ); -export default observer(MainBlock); \ No newline at end of file +export default observer(MainBlock); From ae30349fc07a546f725dae9c460af140c3abc396 Mon Sep 17 00:00:00 2001 From: andrxpie Date: Wed, 10 Jun 2026 14:32:13 +0300 Subject: [PATCH 4/8] Feat: Implements comments drawer functionality --- .../CommentDrawerContainer.styles.scss | 0 .../Comments/CommentsDrawerContainer.tsx | 38 +++ .../StreetcodeCard.component.tsx | 273 +++++++++--------- .../StreetcodePage/Streetcode.component.tsx | 218 +++++++------- 4 files changed, 272 insertions(+), 257 deletions(-) create mode 100644 src/features/StreetcodePage/Comments/CommentDrawerContainer.styles.scss create mode 100644 src/features/StreetcodePage/Comments/CommentsDrawerContainer.tsx diff --git a/src/features/StreetcodePage/Comments/CommentDrawerContainer.styles.scss b/src/features/StreetcodePage/Comments/CommentDrawerContainer.styles.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/features/StreetcodePage/Comments/CommentsDrawerContainer.tsx b/src/features/StreetcodePage/Comments/CommentsDrawerContainer.tsx new file mode 100644 index 0000000..b4bd301 --- /dev/null +++ b/src/features/StreetcodePage/Comments/CommentsDrawerContainer.tsx @@ -0,0 +1,38 @@ +/* eslint-disable max-len */ +import "./CommentDrawerContainer.styles.scss"; + +import React, { useEffect, useState } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; + +import { Drawer, Grid } from "antd"; + +const { useBreakpoint } = Grid; + +const CommentsDrawerContainer: React.FC = () => { + const location = useLocation(); + const navigate = useNavigate(); + const screens = useBreakpoint(); + const [isOpen, setIsOpen] = useState(false); + + useEffect(() => { + setIsOpen(location.pathname.endsWith("/comments")); + }, [location.pathname]); + + const handleClose = () => { + setIsOpen(false); + const currentBaseUrl = location.pathname.replace(/\/comments\/?$/, ""); + navigate(currentBaseUrl || "/"); + }; + + const drawerWidth = screens.md ? 500 : "100%"; + + return ( + +
+

Тут скоро з'являться коментарі...

+
+ + ); +}; + +export default CommentsDrawerContainer; diff --git a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx index 4e8dd1b..4dbca96 100644 --- a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx +++ b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx @@ -1,161 +1,148 @@ -import './StreetcodeCard.styles.scss'; - -import { observer } from 'mobx-react-lite'; -import { useEffect, useState } from 'react'; -import { PlayCircleFilled } from '@ant-design/icons'; -import TagList from '@components/TagList/TagList.component'; -import BlockSlider from '@features/SlickSlider/SlickSlider.component'; -import { useAsync } from '@hooks/stateful/useAsync.hook'; -import { StreetcodeTag } from '@models/additional-content/tag.model'; -import Streetcode from '@models/streetcode/streetcode-types.model'; -import useMobx, { useModalContext, useStreecodePageLoaderContext } from '@stores/root-store'; - -import { Button } from 'antd'; - -import AudiosApi from '@/app/api/media/audios.api'; -import ImagesApi from '@/app/api/media/images.api'; -import TransactionLinksApi from '@/app/api/transactions/transactLinks.api'; -import base64ToUrl from '@/app/common/utils/base64ToUrl.utility'; -import { audioClickEvent, personLiveEvent } from '@/app/common/utils/googleAnalytics.unility'; -import Audio from '@/models/media/audio.model'; -import Image from '@/models/media/image.model'; - -const fullMonthNumericYearDateFmtr = new Intl.DateTimeFormat('uk-UA', { - day: 'numeric', - month: 'long', - year: 'numeric', +/* eslint-disable object-curly-newline */ +/* eslint-disable react/jsx-one-expression-per-line */ +/* eslint-disable max-len */ +import "./StreetcodeCard.styles.scss"; + +import { observer } from "mobx-react-lite"; +import { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { PlayCircleFilled } from "@ant-design/icons"; +import CommentBtn from "@assets/images/utils/Comment_btn.svg"; +import TagList from "@components/TagList/TagList.component"; +import BlockSlider from "@features/SlickSlider/SlickSlider.component"; +import { useAsync } from "@hooks/stateful/useAsync.hook"; +import { StreetcodeTag } from "@models/additional-content/tag.model"; +import Streetcode from "@models/streetcode/streetcode-types.model"; +import useMobx, { useModalContext, useStreecodePageLoaderContext } from "@stores/root-store"; + +import { Button } from "antd"; + +import ImagesApi from "@/app/api/media/images.api"; +import TransactionLinksApi from "@/app/api/transactions/transactLinks.api"; +import base64ToUrl from "@/app/common/utils/base64ToUrl.utility"; +import { audioClickEvent, personLiveEvent } from "@/app/common/utils/googleAnalytics.unility"; +import Image from "@/models/media/image.model"; + +const fullMonthNumericYearDateFmtr = new Intl.DateTimeFormat("uk-UA", { + day: "numeric", + month: "long", + year: "numeric", }); interface Props { - streetcode?: Streetcode; - setActiveTagId: React.Dispatch>, - setActiveBlock: React.Dispatch> + streetcode?: Streetcode; + setActiveTagId: React.Dispatch>; + setActiveBlock: React.Dispatch>; } -const formatDate = (date?: Date): string => fullMonthNumericYearDateFmtr.format(date).replace('р.', 'року'); +const formatDate = (date?: Date): string => fullMonthNumericYearDateFmtr.format(date).replace("р.", "року"); const concatDates = (firstDate?: Date, secondDate?: Date): string => { - let dates = ''; + let dates = ""; - if (firstDate) { - dates += formatDate(new Date(firstDate)); - } + if (firstDate) { + dates += formatDate(new Date(firstDate)); + } - if (secondDate) { - dates += ` — ${formatDate(new Date(secondDate))}`; - } + if (secondDate) { + dates += ` — ${formatDate(new Date(secondDate))}`; + } - return dates; + return dates; }; const StreetcodeCard = ({ streetcode, setActiveTagId, setActiveBlock }: Props) => { - const id = streetcode?.id; - const { modalStore: { setModal } } = useModalContext(); - const streecodePageLoaderContext = useStreecodePageLoaderContext(); - const { audiosStore } = useMobx(); - const [arlink, setArlink] = useState(''); - - useAsync(() => { - if (id && id > 0) { - audiosStore.fetchAudioByStreetcodeId(id).then(() => streecodePageLoaderContext.addBlockFetched()); - } - }, [id]); - - const [images, setImages] = useState([]); - - useEffect(() => { - if (id) { - ImagesApi.getByStreetcodeId(id ?? 1) - .then((imgs) => setImages(imgs)) - .catch((e) => { }); - TransactionLinksApi.getByStreetcodeId(id).then((x) => setArlink(x.url)); - } - }, [streetcode]); - - return ( -
-
-
- - {images.slice(0, 2).map((im) => ( - {im.imageDetails?.alt} - ))} - -
-
-
-
-
-
- Стріткод # - {streetcode?.index ?? 0 <= 9999 ? `000${streetcode?.index}`.slice(-4) : streetcode?.index} -
-

- {streetcode?.title} -

-
- {streetcode?.dateString} -
- tag.isVisible)} - setActiveTagId={setActiveTagId} - setActiveTagBlock={setActiveBlock} - /> -

- {streetcode?.teaser} -

-
- -
- {audiosStore.audio?.base64 - ? ( - - ) - : ( - - )} - - {arlink - ? ( - - ) - : <>} -
-
+ const id = streetcode?.id; + const { + modalStore: { setModal }, + } = useModalContext(); + const streecodePageLoaderContext = useStreecodePageLoaderContext(); + const { audiosStore } = useMobx(); + const [arlink, setArlink] = useState(""); + + const navigate = useNavigate(); + const handleOpenComments = () => { + navigate("comments"); + }; + + useAsync(() => { + if (id && id > 0) { + audiosStore.fetchAudioByStreetcodeId(id).then(() => streecodePageLoaderContext.addBlockFetched()); + } + }, [id]); + + const [images, setImages] = useState([]); + + useEffect(() => { + if (id) { + ImagesApi.getByStreetcodeId(id ?? 1) + .then((imgs) => setImages(imgs)) + .catch((e) => { + console.error("Помилка при завантаженні зображень:", e); + }); + TransactionLinksApi.getByStreetcodeId(id).then((x) => setArlink(x.url)); + } + }, [id, streetcode]); + + return ( +
+
+
+ + {images.slice(0, 2).map((im) => ( + {im.imageDetails?.alt} + ))} + +
+
+
+
+
+
+ Стріткод #{(streetcode?.index ?? 0 <= 9999) ? `000${streetcode?.index}`.slice(-4) : streetcode?.index}
+

{streetcode?.title}

+
{streetcode?.dateString}
+ tag.isVisible)} + setActiveTagId={setActiveTagId} + setActiveTagBlock={setActiveBlock} + /> +

{streetcode?.teaser}

+
+ +
+ {audiosStore.audio?.base64 ? ( + + ) : ( + + )} + + {arlink && ( + + )} + +
- ); +
+
+ ); }; export default observer(StreetcodeCard); diff --git a/src/features/StreetcodePage/Streetcode.component.tsx b/src/features/StreetcodePage/Streetcode.component.tsx index c61a8fa..a1f3c9d 100644 --- a/src/features/StreetcodePage/Streetcode.component.tsx +++ b/src/features/StreetcodePage/Streetcode.component.tsx @@ -1,130 +1,120 @@ -import './Streetcode.styles.scss'; +/* eslint-disable react/jsx-curly-newline */ +/* eslint-disable react/button-has-type */ +/* eslint-disable global-require */ +/* eslint-disable function-paren-newline */ +/* eslint-disable implicit-arrow-linebreak */ +import "./Streetcode.styles.scss"; -import { observer } from 'mobx-react-lite'; -import { useEffect, useRef, useState } from 'react'; -import { useMediaQuery } from 'react-responsive'; -import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'; -import ScrollToTopBtn from '@components/ScrollToTopBtn/ScrollToTopBtn.component'; -import ProgressBar from '@features/ProgressBar/ProgressBar.component'; -import { useStreecodePageLoaderContext, useStreetcodeDataContext } from '@stores/root-store'; -import DonateBtn from '@streetcode/DonateBtn/DonateBtn.component'; -import MainBlock from '@streetcode/MainBlock/MainBlock.component'; -import QRBlock from '@streetcode/QRBlock/QR.component'; -import SourcesBlock from '@streetcode/SourcesBlock/Sources.component'; -import TextBlockComponent from '@streetcode/TextBlock/TextBlock.component'; -import TickerBlock from '@streetcode/TickerBlock/Ticker.component'; +import logoAnimationMob from "@images/gifs/Logo-animation_mob.gif"; +import logoAnimationWeb from "@images/gifs/Logo-animation_web.gif"; -import StatisticRecordApi from '@/app/api/analytics/statistic-record.api'; -import StreetcodesApi from '@/app/api/streetcode/streetcodes.api'; -import TagsModalComponent from '@/app/common/components/modals/Tags/TagsModal.component'; -import FRONTEND_ROUTES from '@/app/common/constants/frontend-routes.constants'; -import { useAsync } from '@/app/common/hooks/stateful/useAsync.hook'; -import { useRouteUrl } from '@/app/common/hooks/stateful/useRouter.hook'; -import Streetcode from '@/models/streetcode/streetcode-types.model'; +import { observer } from "mobx-react-lite"; +import { useEffect, useRef, useState } from "react"; +import { useMediaQuery } from "react-responsive"; +import { useNavigate, useSearchParams } from "react-router-dom"; +import ScrollToTopBtn from "@components/ScrollToTopBtn/ScrollToTopBtn.component"; +import ProgressBar from "@features/ProgressBar/ProgressBar.component"; +import { useStreecodePageLoaderContext, useStreetcodeDataContext } from "@stores/root-store"; +import DonateBtn from "@streetcode/DonateBtn/DonateBtn.component"; +import MainBlock from "@streetcode/MainBlock/MainBlock.component"; +import QRBlock from "@streetcode/QRBlock/QR.component"; +import SourcesBlock from "@streetcode/SourcesBlock/Sources.component"; +import TextBlockComponent from "@streetcode/TextBlock/TextBlock.component"; +import TickerBlock from "@streetcode/TickerBlock/Ticker.component"; -import ArtGalleryBlockComponent from './ArtGalleryBlock/ArtGalleryBlock.component'; -import InterestingFactsComponent from './InterestingFactsBlock/InterestingFacts.component'; -import MapBlock from './MapBlock/MapBlock.component'; -import PartnersComponent from './PartnersBlock/Partners.component'; -import RelatedFiguresComponent from './RelatedFiguresBlock/RelatedFigures.component'; -import TimelineBlockComponent from './TimelineBlock/TimelineBlock.component'; +import StatisticRecordApi from "@/app/api/analytics/statistic-record.api"; +import TagsModalComponent from "@/app/common/components/modals/Tags/TagsModal.component"; +import FRONTEND_ROUTES from "@/app/common/constants/frontend-routes.constants"; +import { useAsync } from "@/app/common/hooks/stateful/useAsync.hook"; +import { useRouteUrl } from "@/app/common/hooks/stateful/useRouter.hook"; +import Streetcode from "@/models/streetcode/streetcode-types.model"; + +import ArtGalleryBlockComponent from "./ArtGalleryBlock/ArtGalleryBlock.component"; +import CommentsDrawerContainer from "./Comments/CommentsDrawerContainer"; +import InterestingFactsComponent from "./InterestingFactsBlock/InterestingFacts.component"; +import PartnersComponent from "./PartnersBlock/Partners.component"; +import RelatedFiguresComponent from "./RelatedFiguresBlock/RelatedFigures.component"; +import TimelineBlockComponent from "./TimelineBlock/TimelineBlock.component"; const StreetcodeContent = () => { - const { streetcodeStore } = useStreetcodeDataContext(); - const { setCurrentStreetcodeId } = streetcodeStore; - const pageLoadercontext = useStreecodePageLoaderContext(); - const streetcodeUrl = useRef(useRouteUrl()); + const { streetcodeStore } = useStreetcodeDataContext(); + const { setCurrentStreetcodeId } = streetcodeStore; + const pageLoadercontext = useStreecodePageLoaderContext(); + const streetcodeUrl = useRef(useRouteUrl()); + + const [activeTagId, setActiveTagId] = useState(0); + const [activeBlock, setActiveBlock] = useState(0); + const [streetcode, setStreetcode] = useState(); - const [activeTagId, setActiveTagId] = useState(0); - const [activeBlock, setActiveBlock] = useState(0); - const [streetcode, setStreecode] = useState(); + const navigate = useNavigate(); - const navigate = useNavigate(); - const [searchParams, setSearchParams] = useSearchParams(); - const location = useLocation(); - const isMobile = useMediaQuery({ - query: '(max-width: 4800px)', - }); - const checkExist = async (qrId: number) => { - const exist = await StatisticRecordApi.existByQrId(qrId); - return exist; - }; + const [searchParams, setSearchParams] = useSearchParams(); + const isMobile = useMediaQuery({ + query: "(max-width: 4800px)", + }); - const checkStreetcodeExist = async (url: string) => { - const exist = await StreetcodesApi.existWithUrl(url); - return exist; - }; + const checkExist = async (qrId: number) => { + const exist = await StatisticRecordApi.existByQrId(qrId); + return exist; + }; - const addCount = async (qrId: number) => { - await StatisticRecordApi.update(qrId); - }; + const addCount = async (qrId: number) => { + await StatisticRecordApi.update(qrId); + }; - useAsync(() => { - const idParam = searchParams.get('qrid'); - if (idParam !== null) { - const tempId = +idParam; - Promise.all([checkExist(tempId), addCount(tempId)]).then( - (resp) => { - if (resp.at(0) && resp.at(1) !== null) { - searchParams.delete('qrid'); - setSearchParams(searchParams); - } - }, - ).catch( - () => { - navigate(`${FRONTEND_ROUTES.OTHER_PAGES.ERROR404}`, { replace: true }); - }, - ); - } - }); + useAsync(() => { + const idParam = searchParams.get("qrid"); + if (idParam !== null) { + const tempId = +idParam; + Promise.all([checkExist(tempId), addCount(tempId)]) + .then((resp) => { + if (resp.at(0) && resp.at(1) !== null) { + searchParams.delete("qrid"); + setSearchParams(searchParams); + } + }) + .catch(() => { + navigate(`${FRONTEND_ROUTES.OTHER_PAGES.ERROR404}`, { + replace: true, + }); + }); + } + }); - useEffect(() => { - setCurrentStreetcodeId(streetcodeUrl.current).then((val) => setStreecode(val)); - }, []); + useEffect(() => { + setCurrentStreetcodeId(streetcodeUrl.current).then((val) => setStreetcode(val)); + }, [setCurrentStreetcodeId]); - return ( -
- {!pageLoadercontext.isPageLoaded && ( -
- -
- )} - - - - - - {/* */} - - - - - - -
-
- - -
-
- - + return ( +
+ {!pageLoadercontext.isPageLoaded && ( +
+ Streetcode Loader +
+ )} + + + + + + {/* */} + + + + + + +
+
+ +
- ); +
+ + + +
+ ); }; export default observer(StreetcodeContent); From 3845e52231ed6aaa8df00a7df88dff416abbcaf7 Mon Sep 17 00:00:00 2001 From: andrxpie Date: Wed, 10 Jun 2026 14:32:13 +0300 Subject: [PATCH 5/8] Refactor: Enhances Top Carousel accessibility and responsiveness --- .../TopCarousel/TopCarousel.component.tsx | 73 ++++++++--------- .../TopCarousel/TopCarousel.styles.scss | 78 ++++++++++++++----- 2 files changed, 94 insertions(+), 57 deletions(-) diff --git a/src/features/MainPage/TopCarousel/TopCarousel.component.tsx b/src/features/MainPage/TopCarousel/TopCarousel.component.tsx index 5b7773a..74c795c 100644 --- a/src/features/MainPage/TopCarousel/TopCarousel.component.tsx +++ b/src/features/MainPage/TopCarousel/TopCarousel.component.tsx @@ -1,40 +1,41 @@ -import './TopCarousel.styles.scss' -import { observer } from 'mobx-react-lite'; -import { Carousel } from 'antd'; -import StreetcodeMarker from '@images/footer/main-page.png'; -import StreetcodeMarker2 from '@images/footer/Baner_2.png'; -import StreetcodeMarker3 from '@images/footer/main-page2.png'; -import StreetcodeMarker4 from '@images/footer/main-page3.png'; -import StreetcodeMarker5 from '@images/footer/main-page4.png'; +import "./TopCarousel.styles.scss"; + +import StreetcodeMarker2 from "@images/footer/Baner_2.png"; +import StreetcodeMarker from "@images/footer/main-page.png"; +import StreetcodeMarker3 from "@images/footer/main-page2.png"; +import StreetcodeMarker4 from "@images/footer/main-page3.png"; +import StreetcodeMarker5 from "@images/footer/main-page4.png"; + +import { observer } from "mobx-react-lite"; + +import { Carousel } from "antd"; + const content = [ - { - image: StreetcodeMarker, - }, - { - image: StreetcodeMarker2, - }, - { - image: StreetcodeMarker3, - }, - { - image: StreetcodeMarker4, - }, - { - image: StreetcodeMarker5, - } + { + image: StreetcodeMarker, + }, + { + image: StreetcodeMarker2, + }, + { + image: StreetcodeMarker3, + }, + { + image: StreetcodeMarker4, + }, + { + image: StreetcodeMarker5, + }, ]; -const TopCarouselBlock = () => { - return ( - - {content.map(item => ( -
- -
- ))} - - ); -}; + +const TopCarouselBlock = () => ( + + {content.map((item) => ( +
+ {item.image} +
+ ))} + +); export default observer(TopCarouselBlock); diff --git a/src/features/MainPage/TopCarousel/TopCarousel.styles.scss b/src/features/MainPage/TopCarousel/TopCarousel.styles.scss index 3bd23da..cf72599 100644 --- a/src/features/MainPage/TopCarousel/TopCarousel.styles.scss +++ b/src/features/MainPage/TopCarousel/TopCarousel.styles.scss @@ -4,36 +4,72 @@ @use "@sass/_utils.functions.scss" as f; @use "@sass/mixins/_vendor.mixins.scss" as vnd; +.ant-carousel { + .slick-slider, + .slick-list, + .slick-track, + .slick-slide { + outline: none !important; + box-shadow: none !important; + + &:focus, + &:active, + &:focus-visible, + &:focus-within { + outline: none !important; + box-shadow: none !important; + } + } + + .slick-slide { + div, + img, + a { + outline: none !important; + box-shadow: none !important; + + &:focus, + &:active, + &:focus-visible { + outline: none !important; + box-shadow: none !important; + } + } + } +} + .top-carousel { @include mut.rem-padded($top: 82px); .carousel-image { - width: 100%; - height: f.pxToRem(737px); - } + width: 100%; + object-fit: scale-down; + margin: auto; + overflow: hidden; - .slick-dots li button { - @include mut.sized(12px, 12px); - } + .slick-dots li button { + @include mut.sized(12px, 12px); + } - .slick-dots { - bottom: f.pxToRem(30px);; - top: auto; - } + .slick-dots { + bottom: f.pxToRem(30px); + top: auto; + } - .slick-dots li { - margin: 0 f.pxToRem(8px); - } + .slick-dots li { + margin: 0 f.pxToRem(8px); + } - @media screen and (min-width: 1800px) { - .carousel-image { - height: f.pxToRem(830px); + @media screen and (min-width: 1800px) { + .carousel-image { + height: f.pxToRem(830px); + } } } -} -@media screen and (max-width: 1024px) { - .top-carousel { - @include mut.rem-padded($top: 64px); + @media screen and (max-width: 1024px) { + .top-carousel { + @include mut.rem-padded($top: 64px); + } } -} \ No newline at end of file +} From 9adccb4ad979aac4dd753073657a596db88d602e Mon Sep 17 00:00:00 2001 From: andrxpie Date: Wed, 10 Jun 2026 14:32:13 +0300 Subject: [PATCH 6/8] Style: Refines Streetcode card layout and responsiveness --- .../StreetcodeCard/StreetcodeCard.styles.scss | 279 +++++++++++------- 1 file changed, 166 insertions(+), 113 deletions(-) diff --git a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss index c7a782a..397e306 100644 --- a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss +++ b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss @@ -2,83 +2,92 @@ @use "@sass/variables/_variables.colors.scss" as c; @use "@sass/variables/_variables.fonts.scss" as ft; @use "@sass/_utils.functions.scss" as f; + .card { + @include mut.flexed(row, center, center, wrap); + @include mut.rem-padded($top: 0px, $right: 0px, $bottom: 0px, $left: 0px); + @include mut.sized(1200px, 697px); + @include mut.full-rounded(50px); + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + line-height: f.pxToRem(19px); + background-color: c.$pure-white-color; + + .slick-initialized .slick-slide { @include mut.flexed(row, center, center, wrap); - @include mut.rem-padded($top: 0px, $right: 0px, $bottom: 0px, $left: 0px); - @include mut.sized(1200px, 697px); - @include mut.full-rounded(50px); - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - line-height: f.pxToRem(19px); - background-color: c.$pure-white-color; - - .slick-initialized .slick-slide { - @include mut.flexed(row, center, center, wrap); - @include mut.rem-margined($top: 0px, $right: 0px, $bottom: 10px, $left: 0px); - } + @include mut.rem-margined($top: 0px, $right: 0px, $bottom: 10px, $left: 0px); + @include mut.flexed($justify-content: center, $gap: 0px); + @include mut.rem-margined($top: 20px, $right: 0px, $bottom: 10px, $left: 0px); + } - .slick-track { - margin: 0; - } - .slick-initialized .slick-slide { - @include mut.flexed($justify-content: center, $gap: 0px); - @include mut.rem-margined($top: 20px, $right: 0px, $bottom: 10px, $left: 0px); - } + .slick-track { + margin: 0; + } } + .leftSider { - @include mut.full-rounded(53px); - @include mut.sized(514px, 697px); - flex: 0 0 f.pxToRem(514px); - background-color: c.$pure-white-color; - justify-self: flex-start; + @include mut.full-rounded(53px); + @include mut.sized(514px, 697px); + flex: 0 0 f.pxToRem(514px); + background-color: c.$pure-white-color; + justify-self: flex-start; } + .leftSiderContent { - background-color: c.$accented-gray-color; - @include mut.border(c.$pure-white-color,22px,solid); - @include mut.full-rounded(50px); - @include mut.parent-sized(); - @include mut.flex-centered(); + background-color: c.$accented-gray-color; + @include mut.border(c.$pure-white-color, 22px, solid); + @include mut.full-rounded(50px); + @include mut.parent-sized(); + @include mut.flex-centered(); } + .rightSider { - box-sizing: border-box; - @include mut.flexed(column, start, start, nowrap); - justify-self: flex-end; - align-self: flex-start; - width: min-content; - height: f.pxToRem(697px); - padding-top: f.pxToRem(20px); - flex: 1 1 auto; + box-sizing: border-box; + @include mut.flexed(column, start, start, nowrap); + justify-self: flex-end; + align-self: flex-start; + width: min-content; + height: f.pxToRem(697px); + padding-top: f.pxToRem(20px); + flex: 1 1 auto; } + .streetcodeIndex { - @include mut.rem-padded($top: 2px, $right: 0px, $bottom: 14px, $left: 0px); - color: c.$dark-red-color; - @include mut.with-font($font-weight: bolder); - line-height: f.pxToRem(18px); + @include mut.rem-padded($top: 2px, $right: 0px, $bottom: 14px, $left: 0px); + color: c.$dark-red-color; + @include mut.with-font($font-weight: bolder); + line-height: f.pxToRem(18px); } + .streetcodeTitle { @include mut.rem-padded(7px, 10px, 7px, 0px); @include mut.with-font(ft.$closer-text-font, $font-weight: 600, $font-size: 36px); color: c.$lighter-black-color; line-height: f.pxToRem(42px); } + .streetcodeDate { @include mut.rem-padded(7px, 10px, 13px, 0px); font-size: f.pxToRem(20px); line-height: f.pxToRem(23px); } + .headerContainer { - box-sizing: border-box; - width: 100%; - height: 100%; - @include mut.flexed(column, start, space-between, nowrap); - @include mut.rem-padded(50px, 15px, 0px, 50px); - .upper-info{ - @include mut.flexed(column, start, start, nowrap); - max-height: f.pxToRem(500px); - } - .tagContainer{ - max-height: f.pxToRem(85px); - } + box-sizing: border-box; + width: 100%; + height: 100%; + @include mut.flexed(column, start, space-between, nowrap); + @include mut.rem-padded(50px, 15px, 0px, 50px); + + .upper-info { + @include mut.flexed(column, start, start, nowrap); + max-height: f.pxToRem(500px); + } + + .tagContainer { + max-height: f.pxToRem(85px); + } } + .teaserBlock { width: 100%; @include mut.rem-margined(13px, 3px, 0px, 0px); @@ -88,185 +97,225 @@ overflow: auto; color: c.$lighter-black-color; float: left; + &::-webkit-scrollbar { display: none; } } .teaserBlockContainer { - position: relative; - height: f.pxToRem(214px); - - + position: relative; + height: f.pxToRem(214px); } .cardFooter { - width: 100%; - position: relative; - @include mut.rem-padded(10px, 0px, 54px, 0px); - @include mut.flexed($justify-content: flex-start, $gap: 20px); + display: flex; + gap: 1px; + width: 100%; + position: relative; + @include mut.rem-padded(10px, 0px, 54px, 0px); + @include mut.flexed($justify-content: flex-start, $gap: 20px); + .ant-btn-primary:disabled { background-color: c.$lighter-gray-color; color: c.$pure-white-color; - } + } + .ant-btn-default { border-width: 3px; border-color: c.$accented-red-color; } + + .comment-btn { + @include mut.sized(73px, 73px); + @include mut.flex-centered(); + @include mut.full-rounded(14px); + + color: c.$accented-red-color; + + svg { + color: c.$accented-red-color; + } + } + &:before { - content: ''; + content: ""; position: absolute; bottom: 45px; left: 0; right: 5px; height: 25px; box-shadow: none; - background: linear-gradient(0deg, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.25) 5%, rgba(255,255,255,0.75) 21%); + background: linear-gradient(0deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.25) 5%, rgba(255, 255, 255, 0.75) 21%); -webkit-text-fill-color: transparent; + } } -} .audioBtnActive { background-color: c.$accented-red-color; border-color: c.$accented-red-color; + &:hover { box-shadow: 0 4px 4px rgba(219, 52, 36, 0.18); } } + .audioBtn { - @include mut.sized(271px, 73px); - @include mut.flex-centered(); - @include mut.full-rounded(14px); - @include mut.with-font($font-weight: 500); + @include mut.sized(271px, 73px); + @include mut.flex-centered(); + @include mut.full-rounded(14px); + @include mut.with-font($font-weight: 500); } + .audioBtn:disabled { - cursor: default; + cursor: default; } + .animateFigureBtn { @include mut.sized(229px, 73px); @include mut.flex-centered(); @include mut.full-rounded(14px); + a { @include mut.with-font($font-weight: 500); border-width: 3px; border-color: c.$accented-red-color; color: c.$accented-red-color; } + &:hover { filter: drop-shadow(0px 4px 4px rgba(219, 52, 36, 0.1)); } } + .streetcodeImg { - margin: auto; - @include mut.sized(415px, 542px); + margin: auto; + @include mut.sized(415px, 542px); } + .playCircle { - font-size: f.pxToRem(37px); - margin-right: f.pxToRem(10px); + font-size: f.pxToRem(37px); + margin-right: f.pxToRem(10px); } @media screen and (max-width: 1300px) { - .blockCentering { - width: 100%; - @include mut.rem-padded($top: 0px, $right: 10px, $bottom: 0px, $left: 10px); - margin: auto; + .blockCentering { + width: 100%; + @include mut.rem-padded($top: 0px, $right: 10px, $bottom: 0px, $left: 10px); + margin: auto; - .headerContainer { - @include mut.rem-padded($top: 20px, $right: 40px, $bottom: 10px, $left: 7px); - } + .headerContainer { + @include mut.rem-padded($top: 20px, $right: 40px, $bottom: 10px, $left: 7px); } + } } @media screen and (max-width: 1210px) { - .blockCentering { - .headerContainer { - @include mut.rem-padded($top: 20px, $right: 15px, $bottom: 10px, $left: 0px); - } + .blockCentering { + .headerContainer { + @include mut.rem-padded($top: 20px, $right: 15px, $bottom: 10px, $left: 0px); + } - .teaserBlock { - margin-right: f.pxToRem(30px); - } + .teaserBlock { + margin-right: f.pxToRem(30px); + } - .rightSider { - margin-top: f.pxToRem(0px); - align-self: center; - } + .rightSider { + margin-top: f.pxToRem(0px); + align-self: center; + } - .cardFooter { - gap: f.pxToRem(10px); + .cardFooter { + gap: f.pxToRem(10px); - .audioBtn { - @include mut.sized(255px, 73px); - @include mut.flex-centered(); - } - } + .audioBtn { + @include mut.sized(255px, 73px); + @include mut.flex-centered(); + } } + } } @media screen and (max-width: 1060px) { .blockCentering { - @include mut.rem-padded($top: 0px, $right: 0px, $bottom: 0px, $left: 0px); + @include mut.rem-padded($top: 0px, $right: 0px, $bottom: 0px, $left: 0px); } } @media screen and (max-width: 1024px) { .blockCentering { @include mut.rem-padded($top: 0px, $right: 10px, $bottom: 0px, $left: 10px); + .headerContainer { @include mut.rem-padded($top: 0px, $right: 10px, $bottom: 0px, $left: 21px); - .tagContainer{ + + .tagContainer { max-height: f.pxToRem(82px); } - .upper-info{ + + .upper-info { max-height: f.pxToRem(433px); } } + .teaserBlock { line-height: f.pxToRem(19px); max-height: f.pxToRem(214px); @include mut.with-font($font-weight: 300, $font-size: 16px); } + .card { @include mut.sized(100%, 495px); background-color: rgba(0, 0, 0, 0) !important; box-shadow: none; - .rightSider{ + + .rightSider { padding: 0; height: f.pxToRem(489px); } + .leftSider { @include mut.sized(360px, 489px); flex: 0 0 f.pxToRem(360px); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + .leftSiderContent { background-color: c.$accented-gray-color; - @include mut.border(c.$pure-white-color,10px,solid); + @include mut.border(c.$pure-white-color, 10px, solid); } } + .streetcodeIndex { @include mut.rem-padded($top: 0px, $right: 0px, $bottom: 5px, $left: 0px); @include mut.with-font($font-weight: 300, $font-size: 15px); } + .streetcodeTitle { @include mut.rem-padded(0px, 10px, 0px, 0px); @include mut.with-font(ft.$closer-text-font, $font-weight: 500, $font-size: 32px); @include mut.withLineHeight(42px); } + .streetcodeDate { @include mut.rem-padded(0px, 5px, 0px, 0px); @include mut.with-font(ft.$roboto-font, $font-weight: 400, $font-size: 20px); @include mut.withLineHeight(23px); } + .streetcodeImg { @include mut.sized(290px, 377px); } + .cardFooter { width: 98%; @include mut.rem-padded(10px, 0px, 0px, 0px); + .animateFigureBtn { @include mut.hidden(); } + .audioBtn { @include mut.full-rounded(8px); @include mut.with-font($font-weight: 400, $font-size: 14px); @include mut.sized(95%, 46px); + .playCircle { font-size: f.pxToRem(23px); margin-right: f.pxToRem(10px); @@ -276,32 +325,36 @@ } } } + @media screen and (max-width: 680px) { - .blockCentering{ - .card{ + .blockCentering { + .card { width: 100%; - height: unset ; + height: unset; @include mut.full-rounded(0px); + .rightSider { width: 100%; - height: unset ; + height: unset; } - .cardFooter{ + + .cardFooter { margin-top: f.pxToRem(39px) !important; @include mut.rem-padded(0px, 0px, 5px, 0px); - .audioBtn{ + + .audioBtn { width: 100%; } } + .teaserBlock { max-height: f.pxToRem(240px); - } - .headerContainer{ + + .headerContainer { @include mut.rem-padded($top: 40px, $right: 0px, $bottom: 0px, $left: 0px); @include mut.full-rounded(0px); - } } } -} \ No newline at end of file +} From 00dd3a9b563a7864040d823dc93966f7c79f9a26 Mon Sep 17 00:00:00 2001 From: andrxpie Date: Wed, 10 Jun 2026 15:50:26 +0300 Subject: [PATCH 7/8] fix/215: cancel azure job. --- .../azure-static-web-apps-agreeable-ground-01c3b230f.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/.github/workflows/azure-static-web-apps-agreeable-ground-01c3b230f.yml b/.github/workflows/azure-static-web-apps-agreeable-ground-01c3b230f.yml index d606c23..b7b88c7 100644 --- a/.github/workflows/azure-static-web-apps-agreeable-ground-01c3b230f.yml +++ b/.github/workflows/azure-static-web-apps-agreeable-ground-01c3b230f.yml @@ -4,12 +4,10 @@ on: push: branches: - main - # - dev pull_request: types: [opened, synchronize, reopened, closed] branches: - main - # - dev jobs: build_and_deploy_job: From d3a497adfad76bfbdda9b9fa90bc470f205b779a Mon Sep 17 00:00:00 2001 From: andrxpie Date: Mon, 15 Jun 2026 18:48:11 +0300 Subject: [PATCH 8/8] fix/215: after merge fix. --- src/app/router/Routes.tsx | 54 +++++++------------ .../StreetcodePage/Streetcode.component.tsx | 43 +-------------- 2 files changed, 20 insertions(+), 77 deletions(-) diff --git a/src/app/router/Routes.tsx b/src/app/router/Routes.tsx index a4bc732..963ef57 100644 --- a/src/app/router/Routes.tsx +++ b/src/app/router/Routes.tsx @@ -1,63 +1,47 @@ import { createBrowserRouter, createRoutesFromElements, Route } from "react-router-dom"; import RequireAuth from "@components/RequireAuth/RequireAuth.component"; import FRONTEND_ROUTES from "@constants/frontend-routes.constants"; -import EditStreetcodePage from "@features/AdminPage/EditStreetcodePage/EditStreetcodePage.component"; import ForFansMainPage from "@features/AdminPage/ForFansPage/ForFansMainPage.component"; import App from "@layout/app/App.component"; import StreetcodeContent from "@streetcode/Streetcode.component"; import ContactUs from "@/features/AdditionalPages/ContactUsPage/ContanctUs.component"; -import NewsPage from "@/features/AdditionalPages/NewsPage/News.component"; +import PublicNewsPage from "@/features/AdditionalPages/NewsPage/News.component"; import NotFound from "@/features/AdditionalPages/NotFoundPage/NotFound.component"; import PartnersPage from "@/features/AdditionalPages/PartnersPage/Partners.component"; import SupportPage from "@/features/AdditionalPages/SupportUsPage/SupportUs.component"; import AdminPage from "@/features/AdminPage/AdminPage.component"; +import CalendarPage from "@/features/AdminPage/CalendarPage/CalendarPage.component"; import Dictionary from "@/features/AdminPage/DictionaryPage/Dictionary.component"; +import EditPge from "@/features/AdminPage/EditorPage/Editor.component"; import LoginPage from "@/features/AdminPage/LoginPage/LoginPage.component"; +import AdminNewsPage from "@/features/AdminPage/NewsPage/NewsPage.component"; import Partners from "@/features/AdminPage/PartnersPage/Partners.component"; -import StreetcodeCreate from "@/features/AdminPage/StreetcodesPage/StreetcodeCreate/StreetcodeCreate.component"; import Streetcodes from "@/features/AdminPage/StreetcodesPage/Streetcodes.component"; import TeamPage from "@/features/AdminPage/TeamPage/TeamPage.component"; +import VacanciesPage from "@/features/AdminPage/VacanciesPage/VacanciesPage.component"; import StreetcodeCatalog from "@/features/StreetcodeCatalogPage/StreetcodeCatalog.component"; -import ContactUs from '@/features/AdditionalPages/ContactUsPage/ContanctUs.component'; -import NotFound from '@/features/AdditionalPages/NotFoundPage/NotFound.component'; -import PartnersPage from '@/features/AdditionalPages/PartnersPage/Partners.component'; -import SupportPage from '@/features/AdditionalPages/SupportUsPage/SupportUs.component'; -import AdminPage from '@/features/AdminPage/AdminPage.component'; -import Dictionary from '@/features/AdminPage/DictionaryPage/Dictionary.component'; -import LoginPage from '@/features/AdminPage/LoginPage/LoginPage.component'; -import Partners from '@/features/AdminPage/PartnersPage/Partners.component'; -import Streetcodes from '@/features/AdminPage/StreetcodesPage/Streetcodes.component'; -import TeamPage from '@/features/AdminPage/TeamPage/TeamPage.component'; -import StreetcodeCatalog from '@/features/StreetcodeCatalogPage/StreetcodeCatalog.component'; -import StreetcodeEditor from '@/features/AdminPage/StreetcodesPage/StreetcodeEditor.component'; -import CalendarPage from '@/features/AdminPage/CalendarPage/CalendarPage.component'; -import VacanciesPage from '@/features/AdminPage/VacanciesPage/VacanciesPage.component'; -import PublicNewsPage from '@/features/AdditionalPages/NewsPage/News.component'; -import AdminNewsPage from '@/features/AdminPage/NewsPage/NewsPage.component'; -import EditPge from '@/features/AdminPage/EditorPage/Editor.component'; const router = createBrowserRouter( createRoutesFromElements( }> } /> - }> - }> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - } /> - - + }> + }> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + } /> + } /> } /> diff --git a/src/features/StreetcodePage/Streetcode.component.tsx b/src/features/StreetcodePage/Streetcode.component.tsx index ff2a2bb..8199cac 100644 --- a/src/features/StreetcodePage/Streetcode.component.tsx +++ b/src/features/StreetcodePage/Streetcode.component.tsx @@ -85,51 +85,11 @@ const StreetcodeContent = () => { setCurrentStreetcodeId(streetcodeUrl.current).then((val) => setStreetcode(val)); }, [setCurrentStreetcodeId]); - return ( -
- {!pageLoadercontext.isPageLoaded && ( -
- -
- )} - - - - - - - - - - - -
-
- - -
-
- - -
- ); return (
{!pageLoadercontext.isPageLoaded && (
- Streetcode Loader +
)} @@ -137,7 +97,6 @@ const StreetcodeContent = () => { - {/* */}