Skip to content

Commit 51f1d84

Browse files
ofahimIQSSofahimIQSS
authored
Merge pull request #633 from IQSS/feat/621-enhance-not-found-page
 Enhanced Not Found Page
2 parents b9f3906 + a468501 commit 51f1d84

35 files changed

Lines changed: 448 additions & 257 deletions

File tree

‎public/locales/en/notFoundPage.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"statusNumberNotFound": "404",
3+
"message": "We can't find the <1>{{type}}</1> you're looking for.\n Sorry for the inconvenience.",
4+
"backToHomepage": "Back to {{brandName}} Homepage"
5+
}

‎public/locales/en/shared.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
{
2+
"collection": "Collection",
3+
"dataset": "Dataset",
4+
"file": "File",
5+
"page": "Page",
26
"asterisksIndicateRequiredFields": "Asterisks indicate required fields",
37
"remove": "Remove",
48
"add": "Add",
@@ -20,10 +24,6 @@
2024
"heading": "Page Number Not Found",
2125
"message": "The page number you requested does not exist. Please try a different page number."
2226
},
23-
"pageNotFound": {
24-
"heading": "Page Not Found",
25-
"message": "The page you are looking for was not found."
26-
},
2727
"pagination": {
2828
"results_one": "1 {{item}}",
2929
"results_other": "{{start}} to {{end}} of {{formattedCount}} {{item}}s",

‎src/router/routes.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { lazy, Suspense } from 'react'
2-
import { RouteObject } from 'react-router-dom'
2+
import { Navigate, RouteObject } from 'react-router-dom'
33
import { Route } from '../sections/Route.enum'
44
import { Layout } from '../sections/layout/Layout'
55
import { ErrorPage } from '../sections/error-page/ErrorPage'
@@ -92,6 +92,12 @@ const FeaturedItemPage = lazy(() =>
9292
}))
9393
)
9494

95+
const NotFoundPage = lazy(() =>
96+
import('../sections/not-found-page/NotFoundPageFactory').then(({ NotFoundPageFactory }) => ({
97+
default: () => NotFoundPageFactory.create()
98+
}))
99+
)
100+
95101
export const routes: RouteObject[] = [
96102
{
97103
path: '/',
@@ -229,6 +235,15 @@ export const routes: RouteObject[] = [
229235
errorElement: <ErrorPage />
230236
}
231237
]
238+
},
239+
// 🕵️‍♂️ Not found page, if the path doesn't match any route we redirect to not found page.
240+
{
241+
path: Route.NOT_FOUND_PAGE,
242+
element: <NotFoundPage />
243+
},
244+
{
245+
path: '*',
246+
element: <Navigate to={Route.NOT_FOUND_PAGE} replace />
232247
}
233248
]
234249
}

‎src/sections/Route.enum.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ export enum Route {
1515
EDIT_COLLECTION = '/collections/:collectionId/edit',
1616
ACCOUNT = '/account',
1717
EDIT_COLLECTION_FEATURED_ITEMS = '/collections/:collectionId/edit-featured-items',
18-
FEATURED_ITEM = '/featured-item/:parentCollectionId/:featuredItemId'
18+
FEATURED_ITEM = '/featured-item/:parentCollectionId/:featuredItemId',
19+
NOT_FOUND_PAGE = '/404'
1920
}
2021

2122
export const RouteWithParams = {

‎src/sections/collection/Collection.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import AddDataActionsButton from '../shared/add-data-actions/AddDataActionsButto
1111
import { CollectionItemsPanel } from './collection-items-panel/CollectionItemsPanel'
1212
import { CollectionInfo } from './CollectionInfo'
1313
import { CollectionSkeleton } from './CollectionSkeleton'
14-
import { PageNotFound } from '../page-not-found/PageNotFound'
1514
import { CreatedAlert } from './CreatedAlert'
1615
import { PublishCollectionButton } from './publish-collection/PublishCollectionButton'
1716
import { ShareCollectionButton } from './share-collection-button/ShareCollectionButton'
@@ -20,8 +19,9 @@ import { EditCollectionDropdown } from './edit-collection-dropdown/EditCollectio
2019
import { FeaturedItems } from './featured-items/FeaturedItems'
2120
import { Route } from '../Route.enum'
2221
import { CollectionHelper } from './CollectionHelper'
23-
import styles from './Collection.module.scss'
2422
import { ContactRepository } from '@/contact/domain/repositories/ContactRepository'
23+
import { NotFoundPage } from '../not-found-page/NotFoundPage'
24+
import styles from './Collection.module.scss'
2525

2626
interface CollectionProps {
2727
collectionRepository: CollectionRepository
@@ -72,7 +72,7 @@ export function Collection({
7272
}
7373

7474
if (!isLoadingCollection && !collection) {
75-
return <PageNotFound />
75+
return <NotFoundPage dvObjectNotFoundType="collection" />
7676
}
7777

7878
return (

‎src/sections/create-collection/CreateCollection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { User } from '@/users/domain/models/User'
1111
import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
1212
import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
1313
import { RequiredFieldText } from '../shared/form/RequiredFieldText/RequiredFieldText'
14-
import { PageNotFound } from '../page-not-found/PageNotFound'
14+
import { NotFoundPage } from '../not-found-page/NotFoundPage'
1515
import { CreateCollectionSkeleton } from './CreateCollectionSkeleton'
1616
import { EditCreateCollectionForm } from '../shared/form/EditCreateCollectionForm/EditCreateCollectionForm'
1717

@@ -55,7 +55,7 @@ export function CreateCollection({
5555
}, [isLoading, isLoadingData, setIsLoading])
5656

5757
if (!isLoadingCollection && !collection) {
58-
return <PageNotFound />
58+
return <NotFoundPage dvObjectNotFoundType="collection" />
5959
}
6060

6161
if (isLoadingData || !collection) {

‎src/sections/create-dataset/CreateDataset.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { useLoading } from '../loading/LoadingContext'
1414

1515
import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
1616
import { useCollection } from '../collection/useCollection'
17-
import { PageNotFound } from '../page-not-found/PageNotFound'
17+
import { NotFoundPage } from '../not-found-page/NotFoundPage'
1818
import { CreateDatasetSkeleton } from './CreateDatasetSkeleton'
1919

2020
interface CreateDatasetProps {
@@ -53,7 +53,7 @@ export function CreateDataset({
5353
}, [isLoadingData, setIsLoading])
5454

5555
if (!isLoadingCollection && !collection) {
56-
return <PageNotFound />
56+
return <NotFoundPage dvObjectNotFoundType="collection" />
5757
}
5858

5959
if (isLoadingCollection || !collection) {

‎src/sections/dataset/Dataset.tsx‎

Lines changed: 89 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom'
55
import { DatasetLabels } from './dataset-labels/DatasetLabels'
66
import { useLoading } from '../loading/LoadingContext'
77
import { DatasetSkeleton, TabsSkeleton } from './DatasetSkeleton'
8-
import { PageNotFound } from '../page-not-found/PageNotFound'
8+
import { NotFoundPage } from '../not-found-page/NotFoundPage'
99
import { useTranslation } from 'react-i18next'
1010
import { DatasetMetadata } from './dataset-metadata/DatasetMetadata'
1111
import { DatasetSummary } from './dataset-summary/DatasetSummary'
@@ -87,6 +87,11 @@ export function Dataset({
8787
if (isDatasetLoading && !dataset) {
8888
return <DatasetSkeleton />
8989
}
90+
91+
if (!dataset) {
92+
return <NotFoundPage dvObjectNotFoundType="dataset" />
93+
}
94+
9095
const handleCustomTermsClick = () => {
9196
setActiveTab('terms')
9297
const newParams = new URLSearchParams(searchParams)
@@ -101,100 +106,96 @@ export function Dataset({
101106
setActiveTab(key)
102107
}
103108
}
109+
104110
return (
105111
<>
106112
<NotImplementedModal show={isModalOpen} handleClose={hideModal} />
107-
{!dataset ? (
108-
<PageNotFound />
109-
) : (
110-
<>
111-
<BreadcrumbsGenerator hierarchy={dataset.hierarchy} />
112-
<article>
113-
<div className={styles.container}>
114-
<Row>
115-
<Col>
116-
<DatasetAlerts />
117-
</Col>
118-
</Row>
119-
</div>
120113

121-
<header className={styles.header}>
122-
<h1>{dataset.version.title}</h1>
123-
<DatasetLabels labels={dataset.version.labels} />
124-
</header>
125-
<div className={styles.container}>
126-
<Row>
127-
<Col sm={9}>
128-
<DatasetCitation thumbnail={dataset.thumbnail} version={dataset.version} />
129-
</Col>
130-
<Col sm={3}>
131-
<DatasetActionButtons
132-
datasetRepository={datasetRepository}
133-
collectionRepository={collectionRepository}
134-
dataset={dataset}
135-
contactRepository={contactRepository}
114+
<BreadcrumbsGenerator hierarchy={dataset.hierarchy} />
115+
<article>
116+
<div className={styles.container}>
117+
<Row>
118+
<Col>
119+
<DatasetAlerts />
120+
</Col>
121+
</Row>
122+
</div>
123+
124+
<header className={styles.header}>
125+
<h1>{dataset.version.title}</h1>
126+
<DatasetLabels labels={dataset.version.labels} />
127+
</header>
128+
<div className={styles.container}>
129+
<Row>
130+
<Col sm={9}>
131+
<DatasetCitation thumbnail={dataset.thumbnail} version={dataset.version} />
132+
</Col>
133+
<Col sm={3}>
134+
<DatasetActionButtons
135+
datasetRepository={datasetRepository}
136+
collectionRepository={collectionRepository}
137+
dataset={dataset}
138+
contactRepository={contactRepository}
139+
/>
140+
</Col>
141+
</Row>
142+
<Row>
143+
<Col sm={9} className={styles['summary-container']}>
144+
<DatasetSummary
145+
summaryFields={dataset.summaryFields}
146+
license={dataset.license}
147+
onCustomTermsClick={handleCustomTermsClick}
148+
metadataBlockInfoRepository={metadataBlockInfoRepository}
149+
/>
150+
</Col>
151+
</Row>
152+
{publishInProgress && <TabsSkeleton />}
153+
154+
{(!publishInProgress || !isDatasetLoading) && (
155+
<Tabs defaultActiveKey={activeTab} onSelect={handleTabSelect}>
156+
<Tabs.Tab eventKey="files" title={t('filesTabTitle')}>
157+
<div className={styles['tab-container']}>
158+
{filesTabInfiniteScrollEnabled ? (
159+
<DatasetFilesScrollable
160+
filesRepository={fileRepository}
161+
datasetPersistentId={dataset.persistentId}
162+
datasetVersion={dataset.version}
163+
key={dataset.version.publishingStatus}
164+
/>
165+
) : (
166+
<DatasetFiles
167+
filesRepository={fileRepository}
168+
datasetPersistentId={dataset.persistentId}
169+
datasetVersion={dataset.version}
170+
/>
171+
)}
172+
</div>
173+
</Tabs.Tab>
174+
<Tabs.Tab eventKey="metadata" title={t('metadataTabTitle')}>
175+
<div className={styles['tab-container']}>
176+
<DatasetMetadata
177+
persistentId={dataset.persistentId}
178+
metadataBlocks={dataset.metadataBlocks}
179+
metadataBlockInfoRepository={metadataBlockInfoRepository}
136180
/>
137-
</Col>
138-
</Row>
139-
<Row>
140-
<Col sm={9} className={styles['summary-container']}>
141-
<DatasetSummary
142-
summaryFields={dataset.summaryFields}
181+
</div>
182+
</Tabs.Tab>
183+
<Tabs.Tab title={t('termsTabTitle')} eventKey={'terms'}>
184+
<div ref={termsTabRef} className={styles['tab-container']}>
185+
<DatasetTerms
143186
license={dataset.license}
144-
onCustomTermsClick={handleCustomTermsClick}
145-
metadataBlockInfoRepository={metadataBlockInfoRepository}
187+
termsOfUse={dataset.termsOfUse}
188+
filesRepository={fileRepository}
189+
datasetPersistentId={dataset.persistentId}
190+
datasetVersion={dataset.version}
146191
/>
147-
</Col>
148-
</Row>
149-
{publishInProgress && <TabsSkeleton />}
150-
151-
{(!publishInProgress || !isDatasetLoading) && (
152-
<Tabs defaultActiveKey={activeTab} onSelect={handleTabSelect}>
153-
<Tabs.Tab eventKey="files" title={t('filesTabTitle')}>
154-
<div className={styles['tab-container']}>
155-
{filesTabInfiniteScrollEnabled ? (
156-
<DatasetFilesScrollable
157-
filesRepository={fileRepository}
158-
datasetPersistentId={dataset.persistentId}
159-
datasetVersion={dataset.version}
160-
key={dataset.version.publishingStatus}
161-
/>
162-
) : (
163-
<DatasetFiles
164-
filesRepository={fileRepository}
165-
datasetPersistentId={dataset.persistentId}
166-
datasetVersion={dataset.version}
167-
/>
168-
)}
169-
</div>
170-
</Tabs.Tab>
171-
<Tabs.Tab eventKey="metadata" title={t('metadataTabTitle')}>
172-
<div className={styles['tab-container']}>
173-
<DatasetMetadata
174-
persistentId={dataset.persistentId}
175-
metadataBlocks={dataset.metadataBlocks}
176-
metadataBlockInfoRepository={metadataBlockInfoRepository}
177-
/>
178-
</div>
179-
</Tabs.Tab>
180-
<Tabs.Tab title={t('termsTabTitle')} eventKey={'terms'}>
181-
<div ref={termsTabRef} className={styles['tab-container']}>
182-
<DatasetTerms
183-
license={dataset.license}
184-
termsOfUse={dataset.termsOfUse}
185-
filesRepository={fileRepository}
186-
datasetPersistentId={dataset.persistentId}
187-
datasetVersion={dataset.version}
188-
/>
189-
</div>
190-
</Tabs.Tab>
191-
</Tabs>
192-
)}
193-
<SeparationLine />
194-
</div>
195-
</article>
196-
</>
197-
)}
192+
</div>
193+
</Tabs.Tab>
194+
</Tabs>
195+
)}
196+
<SeparationLine />
197+
</div>
198+
</article>
198199
</>
199200
)
200201
}

‎src/sections/edit-collection-featured-items/EditCollectionFeaturedItems.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useCollection } from '../collection/useCollection'
77
import { useLoading } from '../loading/LoadingContext'
88
import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
99
import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
10-
import { PageNotFound } from '../page-not-found/PageNotFound'
10+
import { NotFoundPage } from '../not-found-page/NotFoundPage'
1111
import { FeaturedItemsForm } from './featured-items-form/FeaturedItemsForm'
1212
import { FeaturedItemsFormHelper } from './featured-items-form/FeaturedItemsFormHelper'
1313
import { FeaturedItemsFormData } from './types'
@@ -40,7 +40,7 @@ export const EditCollectionFeaturedItems = ({
4040
}, [isLoadingData, setIsLoading])
4141

4242
if (!isLoading && !collection) {
43-
return <PageNotFound />
43+
return <NotFoundPage dvObjectNotFoundType="collection" />
4444
}
4545

4646
if (isLoadingData || !collection) {

‎src/sections/edit-collection/EditCollection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { useSession } from '../session/SessionContext'
99
import { useCollection } from '../collection/useCollection'
1010
import { User } from '@/users/domain/models/User'
1111
import { CollectionHelper } from '../collection/CollectionHelper'
12-
import { PageNotFound } from '../page-not-found/PageNotFound'
12+
import { NotFoundPage } from '../not-found-page/NotFoundPage'
1313
import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
1414
import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
1515
import { RequiredFieldText } from '../shared/form/RequiredFieldText/RequiredFieldText'
@@ -55,7 +55,7 @@ export const EditCollection = ({
5555
}, [setIsLoading, isLoadingData])
5656

5757
if (!isLoadingCollection && !collection) {
58-
return <PageNotFound />
58+
return <NotFoundPage dvObjectNotFoundType="collection" />
5959
}
6060

6161
if (isLoadingData || !collection) {

0 commit comments

Comments
 (0)
⚡