From 90b7de36408b8143a74cb524f1e3a9c644fd37ce Mon Sep 17 00:00:00 2001 From: Aleksej Messer Date: Sat, 17 Aug 2024 16:36:18 +0200 Subject: [PATCH] feat(issue/137): add a error page --- src/App.tsx | 2 + src/components/banner-list/BannerList.tsx | 6 +-- .../banners-accordion/BannersAccordion.tsx | 2 +- .../events-preview/EventsPreview.tsx | 2 +- .../InfiniteBannerList.tsx | 2 +- .../recent-banners/RecentBanners.tsx | 2 +- .../UserBannerListPreview.tsx | 2 +- src/locales/de/translation.json | 6 ++- src/locales/en/translation.json | 6 ++- src/locales/es/translation.json | 6 ++- src/pages/agent/Agent.tsx | 2 +- src/pages/browser/Browser.tsx | 2 +- src/pages/error/Error.tsx | 54 +++++++++++++++++++ src/pages/error/error.less | 24 +++++++++ src/pages/error/index.ts | 1 + src/pages/map-overview/MapOverview.tsx | 2 +- src/pages/search/Search.tsx | 2 +- src/pages/user-banner-list/UserBannerList.tsx | 2 +- 18 files changed, 109 insertions(+), 16 deletions(-) create mode 100644 src/pages/error/Error.tsx create mode 100644 src/pages/error/error.less create mode 100644 src/pages/error/index.ts diff --git a/src/App.tsx b/src/App.tsx index b03f394f..c30cad6e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -21,6 +21,7 @@ import { CreateBanner } from './pages/create-banner' import { PreviewBanner } from './pages/preview-banner' import { PrivateRoute } from './components/login/private-route' import { Help } from './pages/help' +import { Error } from './pages/error' import { Account } from './pages/account' import MenuMain from './components/menu-main' import Navbar from './components/navbar' @@ -80,6 +81,7 @@ const App: React.FC = () => { /> + = ({ loadMoreBanners, selectedBannerId, onSelectBanner, - applyBannerListStlyes, + applyBannerListStyles, hideBlacklisted, showDetailsButton, }) => { @@ -84,7 +84,7 @@ const BannerList: FC = ({ : undefined } linkStartPlace={false} - applyBannerListStlye={applyBannerListStlyes} + applyBannerListStlye={applyBannerListStyles} /> ) return ( @@ -117,7 +117,7 @@ export interface BannerListProps { selectedBannerId?: string loadMoreBanners?: () => Promise onSelectBanner?: (banner: Banner) => void - applyBannerListStlyes: boolean + applyBannerListStyles: boolean hideBlacklisted: boolean showDetailsButton: boolean } diff --git a/src/components/banners-accordion/BannersAccordion.tsx b/src/components/banners-accordion/BannersAccordion.tsx index ca0f7e36..633103f7 100644 --- a/src/components/banners-accordion/BannersAccordion.tsx +++ b/src/components/banners-accordion/BannersAccordion.tsx @@ -78,7 +78,7 @@ const BannerAccordion: FC = ({ hasMoreBanners={hasMoreBanners} onSelectBanner={onSelectBannerCallback} loadMoreBanners={loadMoreBanners} - applyBannerListStlyes + applyBannerListStyles hideBlacklisted showDetailsButton /> diff --git a/src/components/events-preview/EventsPreview.tsx b/src/components/events-preview/EventsPreview.tsx index b3e59bdc..986b27b0 100644 --- a/src/components/events-preview/EventsPreview.tsx +++ b/src/components/events-preview/EventsPreview.tsx @@ -26,7 +26,7 @@ const EventsPreview: React.FC = () => { hasMoreBanners={false} hideBlacklisted={false} showDetailsButton={false} - applyBannerListStlyes={true} + applyBannerListStyles={true} /> {data.length >= 4 && (
diff --git a/src/components/infinite-banner-list/InfiniteBannerList.tsx b/src/components/infinite-banner-list/InfiniteBannerList.tsx index d519f7b8..8f800c6e 100644 --- a/src/components/infinite-banner-list/InfiniteBannerList.tsx +++ b/src/components/infinite-banner-list/InfiniteBannerList.tsx @@ -38,7 +38,7 @@ const InfiniteBannerList: FC = ({ setMaxPages(maxPages + 1) } }} - applyBannerListStlyes + applyBannerListStyles hideBlacklisted={false} showDetailsButton={false} /> diff --git a/src/components/recent-banners/RecentBanners.tsx b/src/components/recent-banners/RecentBanners.tsx index ad7c38ab..dabd1d9e 100644 --- a/src/components/recent-banners/RecentBanners.tsx +++ b/src/components/recent-banners/RecentBanners.tsx @@ -57,7 +57,7 @@ export const RecentBanners: FC = ({ diff --git a/src/components/user-banner-list-preview/UserBannerListPreview.tsx b/src/components/user-banner-list-preview/UserBannerListPreview.tsx index f9e011f4..d6bbfbca 100644 --- a/src/components/user-banner-list-preview/UserBannerListPreview.tsx +++ b/src/components/user-banner-list-preview/UserBannerListPreview.tsx @@ -96,7 +96,7 @@ class UserBannerListPreview extends React.Component< diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json index acd51eed..9462ab90 100644 --- a/src/locales/de/translation.json +++ b/src/locales/de/translation.json @@ -290,6 +290,10 @@ } } }, + "error": { + "title": "Fehler die Seite wurde nicht gefunden", + "newestBanners": "Versuche mit den neuesten Bannern zu beginnen" + }, "search": { "title": "Suche nach: {{searchTerm}}", "button": "Suchen", @@ -380,4 +384,4 @@ "eventAt": "Event am .", "eventFromTo": "Event vom bis ." } -} \ No newline at end of file +} diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 782633ab..b038bd98 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -291,6 +291,10 @@ } } }, + "error": { + "title": "Error the page was not found", + "newestBanners": "Try to start with the newest banners" + }, "search": { "title": "Search for {{searchTerm}}", "button": "Search", @@ -382,4 +386,4 @@ "eventAt": "Event at .", "eventFromTo": "Event from to ." } -} \ No newline at end of file +} diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json index c5797cb5..dfad28e8 100644 --- a/src/locales/es/translation.json +++ b/src/locales/es/translation.json @@ -270,6 +270,10 @@ } } }, + "error": { + "title": "Error la página no fue encontrada", + "newestBanners": "Intenta empezar con los banners más nuevos" + }, "search": { "title": "Buscando {{searchTerm}}", "button": "Bucar", @@ -361,4 +365,4 @@ "eventAt": "Evento el .", "eventFromTo": "Evento del al ." } -} \ No newline at end of file +} diff --git a/src/pages/agent/Agent.tsx b/src/pages/agent/Agent.tsx index 28e5f3b6..0b33396a 100644 --- a/src/pages/agent/Agent.tsx +++ b/src/pages/agent/Agent.tsx @@ -142,7 +142,7 @@ class Agent extends React.Component { banners={banners} hasMoreBanners={hasMoreBanners} loadMoreBanners={this.onLoadMoreBanners} - applyBannerListStlyes + applyBannerListStyles hideBlacklisted showDetailsButton={false} /> diff --git a/src/pages/browser/Browser.tsx b/src/pages/browser/Browser.tsx index 5a9e54c4..e9f8dc12 100644 --- a/src/pages/browser/Browser.tsx +++ b/src/pages/browser/Browser.tsx @@ -281,7 +281,7 @@ class Browser extends React.Component { banners={banners} hasMoreBanners={hasMore} loadMoreBanners={this.onLoadMoreBanners} - applyBannerListStlyes + applyBannerListStyles hideBlacklisted showDetailsButton={false} /> diff --git a/src/pages/error/Error.tsx b/src/pages/error/Error.tsx new file mode 100644 index 00000000..daa445c8 --- /dev/null +++ b/src/pages/error/Error.tsx @@ -0,0 +1,54 @@ +import React, { useCallback, useState } from 'react' +import { useTranslation } from 'react-i18next' +import { Helmet } from 'react-helmet' +import _ from 'underscore' +import FooterMain from '../../components/footer-main' +import { Issue } from '../../components/Issues-list' +import RecentBanners from '../../components/recent-banners' + +import './error.less' + +const Error: React.FC = () => { + const [ issues, setIssues] = useState>([]) + const { t } = useTranslation() + const titleList: string = t('error.newestBanners') + const addIssues = useCallback( + (iss: Array) => { + setIssues((prevIssues) => + _(prevIssues) + .chain() + .union(iss) + .uniq(false, (i) => i.key) + .value() + ) + }, + [setIssues] + ) + const resetIssue = useCallback( + (key: string) => { + setIssues((prevIssues) => _(prevIssues).filter((i) => i.key !== key)) + }, + [setIssues] + ) + + return ( +
+ + {t('error.title')} + +
+

{t('error.title')}

+
+
+ +
+ +
+ ) +} + +export default Error diff --git a/src/pages/error/error.less b/src/pages/error/error.less new file mode 100644 index 00000000..9b4ec742 --- /dev/null +++ b/src/pages/error/error.less @@ -0,0 +1,24 @@ +.error-page { + align-items: center; + display: flex; + flex-direction: column; + justify-content: flex-start; + margin: 15px; + + &__title { + text-align: center; + } + + &__content { + display: flex; + justify-content: space-around; + margin-bottom: 1.5rem; + width: min(100%, 1200px); + + .recent-banners-title { + h1 { + text-align: center; + } + } + } +} diff --git a/src/pages/error/index.ts b/src/pages/error/index.ts new file mode 100644 index 00000000..f2778664 --- /dev/null +++ b/src/pages/error/index.ts @@ -0,0 +1 @@ +export { default as Error } from './Error' diff --git a/src/pages/map-overview/MapOverview.tsx b/src/pages/map-overview/MapOverview.tsx index 7e3d82ac..2cec5804 100644 --- a/src/pages/map-overview/MapOverview.tsx +++ b/src/pages/map-overview/MapOverview.tsx @@ -195,7 +195,7 @@ class MapOverview extends React.Component { hasMoreBanners={false} selectedBannerId={selectedBannerId} onSelectBanner={this.onSelectBanner} - applyBannerListStlyes + applyBannerListStyles hideBlacklisted showDetailsButton /> diff --git a/src/pages/search/Search.tsx b/src/pages/search/Search.tsx index 4bd2ee69..97bd2c6e 100644 --- a/src/pages/search/Search.tsx +++ b/src/pages/search/Search.tsx @@ -209,7 +209,7 @@ class Search extends React.Component { banners={banners} hasMoreBanners={hasMoreBanners} loadMoreBanners={this.onLoadMoreBanners} - applyBannerListStlyes + applyBannerListStyles hideBlacklisted showDetailsButton={false} /> diff --git a/src/pages/user-banner-list/UserBannerList.tsx b/src/pages/user-banner-list/UserBannerList.tsx index 1bb49e5a..e457e1e9 100644 --- a/src/pages/user-banner-list/UserBannerList.tsx +++ b/src/pages/user-banner-list/UserBannerList.tsx @@ -157,7 +157,7 @@ class UserBannerList extends React.Component< banners={banners} hasMoreBanners={hasMoreBanners} loadMoreBanners={this.onLoadMoreBanners} - applyBannerListStlyes + applyBannerListStyles hideBlacklisted={false} showDetailsButton={false} />