feat(issue/137): add a error page

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 = () => {
                   />
                   <Redirect path="/user/banners" to="/user/banners/todo" />
                   <Route path="/help" component={Help} />
+                  <Route path="/error" component={Error} />
                   <Route path="/new-banner" component={CreateBanner} />
                   <PrivateRoute
                     path="/edit-banner/:id"

src/components/banner-list/BannerList.tsx

@@ -15,7 +15,7 @@ const BannerList: FC<BannerListProps> = ({
   loadMoreBanners,
   selectedBannerId,
   onSelectBanner,
-  applyBannerListStlyes,
+  applyBannerListStyles,
   hideBlacklisted,
   showDetailsButton,
 }) => {
@@ -84,7 +84,7 @@ const BannerList: FC<BannerListProps> = ({
                     : undefined
                 }
                 linkStartPlace={false}
-                applyBannerListStlye={applyBannerListStlyes}
+                applyBannerListStlye={applyBannerListStyles}
               />
             )
             return (
@@ -117,7 +117,7 @@ export interface BannerListProps {
   selectedBannerId?: string
   loadMoreBanners?: () => Promise<void>
   onSelectBanner?: (banner: Banner) => void
-  applyBannerListStlyes: boolean
+  applyBannerListStyles: boolean
   hideBlacklisted: boolean
   showDetailsButton: boolean
 }

src/components/banners-accordion/BannersAccordion.tsx

@@ -78,7 +78,7 @@ const BannerAccordion: FC<BannerAccordionProps> = ({
             hasMoreBanners={hasMoreBanners}
             onSelectBanner={onSelectBannerCallback}
             loadMoreBanners={loadMoreBanners}
-            applyBannerListStlyes
+            applyBannerListStyles
             hideBlacklisted
             showDetailsButton
           />

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 && (
         <div className="seeFullList">

src/components/infinite-banner-list/InfiniteBannerList.tsx

@@ -38,7 +38,7 @@ const InfiniteBannerList: FC<InfiniteBannerListProps> = ({
               setMaxPages(maxPages + 1)
             }
           }}
-          applyBannerListStlyes
+          applyBannerListStyles
           hideBlacklisted={false}
           showDetailsButton={false}
         />

src/components/recent-banners/RecentBanners.tsx

@@ -57,7 +57,7 @@ export const RecentBanners: FC<RecentBannersProps> = ({
       <BannerList
         banners={banners}
         hasMoreBanners={false}
-        applyBannerListStlyes
+        applyBannerListStyles
         hideBlacklisted
         showDetailsButton={false}
       />

src/components/user-banner-list-preview/UserBannerListPreview.tsx

@@ -96,7 +96,7 @@ class UserBannerListPreview extends React.Component<
                   <BannerList
                     banners={banners}
                     hasMoreBanners={false}
-                    applyBannerListStlyes
+                    applyBannerListStyles
                     hideBlacklisted={false}
                     showDetailsButton={false}
                   />

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 <at />.",
     "eventFromTo": "Event vom <from /> bis <to />."
   }
-}
+}

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 <at />.",
     "eventFromTo": "Event from <from /> to <to />."
   }
-}
+}

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 <at />.",
     "eventFromTo": "Evento del <from /> al <to />."
   }
-}
+}

src/pages/agent/Agent.tsx

@@ -142,7 +142,7 @@ class Agent extends React.Component<AgentProps, AgentState> {
                             banners={banners}
                             hasMoreBanners={hasMoreBanners}
                             loadMoreBanners={this.onLoadMoreBanners}
-                            applyBannerListStlyes
+                            applyBannerListStyles
                             hideBlacklisted
                             showDetailsButton={false}
                           />

src/pages/browser/Browser.tsx

@@ -281,7 +281,7 @@ class Browser extends React.Component<BrowserProps, BrowserState> {
                     banners={banners}
                     hasMoreBanners={hasMore}
                     loadMoreBanners={this.onLoadMoreBanners}
-                    applyBannerListStlyes
+                    applyBannerListStyles
                     hideBlacklisted
                     showDetailsButton={false}
                   />

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<Array<Issue>>([])
+  const { t } = useTranslation()
+  const titleList: string = t('error.newestBanners')
+  const addIssues = useCallback(
+    (iss: Array<Issue>) => {
+      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 (
+    <div className="error-page">
+      <Helmet defer={false}>
+        <title>{t('error.title')}</title>
+      </Helmet>
+      <div className="error-page__title">
+        <h1>{t('error.title')}</h1>
+      </div>
+      <div className="error-page__content">
+        <RecentBanners
+          titleList={titleList}
+          setIssues={addIssues}
+          resetIssue={resetIssue}
+        />
+      </div>
+      <FooterMain />
+    </div>
+  )
+}
+
+export default Error

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;
+      }
+    }
+  }
+}

src/pages/error/index.ts

@@ -0,0 +1 @@
+export { default as Error } from './Error'

src/pages/map-overview/MapOverview.tsx

@@ -195,7 +195,7 @@ class MapOverview extends React.Component<MapOverviewProps, MapOverviewState> {
                 hasMoreBanners={false}
                 selectedBannerId={selectedBannerId}
                 onSelectBanner={this.onSelectBanner}
-                applyBannerListStlyes
+                applyBannerListStyles
                 hideBlacklisted
                 showDetailsButton
               />

src/pages/search/Search.tsx

@@ -209,7 +209,7 @@ class Search extends React.Component<SearchProps, SearchState> {
                           banners={banners}
                           hasMoreBanners={hasMoreBanners}
                           loadMoreBanners={this.onLoadMoreBanners}
-                          applyBannerListStlyes
+                          applyBannerListStyles
                           hideBlacklisted
                           showDetailsButton={false}
                         />

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}
                           />