-
-)
-);
+ );
-export default observer(MainBlock);
\ No newline at end of file
+export default observer(MainBlock);
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
-
+
-
-
+
+
+
-
+
-
-
-
-
- {images.slice(0, 2).map((im) => (
- 
- ))}
-
-
-
- ([]);
+
+ 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 (
+ (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 (
-
-
+ 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
- tag.isVisible)}
- setActiveTagId={setActiveTagId}
- setActiveTagBlock={setActiveBlock}
- />
-
-
-
- Стріткод #
- {streetcode?.index ?? 0 <= 9999 ? `000${streetcode?.index}`.slice(-4) : streetcode?.index}
-
- - {streetcode?.title} -
-
- {streetcode?.dateString}
-
- - {streetcode?.teaser} -
-
- {audiosStore.audio?.base64
- ? (
-
- )
- : (
-
- )}
-
- {arlink
- ? (
-
- )
- : <>}
-
-
+
+ );
};
export default observer(StreetcodeCard);
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
+}
diff --git a/src/features/StreetcodePage/Streetcode.component.tsx b/src/features/StreetcodePage/Streetcode.component.tsx
index 455e031..8199cac 100644
--- a/src/features/StreetcodePage/Streetcode.component.tsx
+++ b/src/features/StreetcodePage/Streetcode.component.tsx
@@ -1,129 +1,119 @@
-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 LogoAnimationWeb from '../../assets/images/gifs/Logo-animation_web.gif';
-import LogoAnimationMob from '../../assets/images/gifs/Logo-animation_mob.gif';
+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
+
+
+
+ {images.slice(0, 2).map((im) => (
+
+ ))}
+
+
+
+
+
+
- );
+
+ tag.isVisible)}
+ setActiveTagId={setActiveTagId}
+ setActiveTagBlock={setActiveBlock}
+ />
+
+
+
+ Стріткод #{(streetcode?.index ?? 0 <= 9999) ? `000${streetcode?.index}`.slice(-4) : streetcode?.index}
+ {streetcode?.title}
+{streetcode?.dateString}
+ {streetcode?.teaser}
+
+ {audiosStore.audio?.base64 ? (
+
+ ) : (
+
+ )}
+
+ {arlink && (
+
+ )}
+
+
- {!pageLoadercontext.isPageLoaded && (
-
-
- >;
- 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;
}
- 
-
- )}
-
-
-
-
-
+ {!pageLoadercontext.isPageLoaded && (
+
+
+
+ );
};
export default observer(StreetcodeContent);
diff --git a/src/global.d.ts b/src/global.d.ts
index b1270ee..4cb2480 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -8,4 +8,4 @@ declare const process: {
readonly REACT_APP_BUILD_SHA?: string;
readonly REACT_APP_BUILD_NUMBER?: string;
};
-};
\ No newline at end of file
+};
diff --git a/src/index.d.ts b/src/index.d.ts
index b374de2..d62328a 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -1,13 +1,13 @@
-declare module '*.png';
-declare module '*.jpg';
-declare module '*.gif';
-declare module '*.svg' {
- const content: React.FunctionComponent
+
+
+ )}
+
+
+
+
- );
+