Skip to content

Commit

Permalink
Merge pull request #348 from colonial-heritage/new-homepage
Browse files Browse the repository at this point in the history
New homepage and navigation
  • Loading branch information
barbarah authored Dec 7, 2023
2 parents dfb526c + 19be9f3 commit fa0f6c1
Show file tree
Hide file tree
Showing 26 changed files with 761 additions and 512 deletions.
2 changes: 2 additions & 0 deletions apps/dataset-browser/cypress/e2e/home.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ describe('Dataset list filters', () => {
const searchText = 'My query';

cy.getBySel('searchQuery').type(searchText);
cy.getBySel('searchQuery').next('button').click();

cy.getBySel('selectedFilter').should('have.length', 1);
cy.getBySel('selectedFilter').should('have.text', searchText);
Expand All @@ -76,6 +77,7 @@ describe('Dataset list filters', () => {
const searchText = 'My query';

cy.getBySel('searchQuery').type(searchText);
cy.getBySel('searchQuery').next('button').click();
cy.getBySel('publishersFilter').within(() => {
cy.get('[type="checkbox"]').first().check();
});
Expand Down
73 changes: 47 additions & 26 deletions apps/researcher/cypress/e2e/home.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,43 +3,67 @@
// Passing `failOnStatusCode: false` into `cy.visit` accomplishes just that.

describe('Researcher homepage', () => {
it('shows an object list', () => {
it('shows the object list after searching', () => {
cy.visit('/en', {
failOnStatusCode: false,
});
cy.getBySel('searchQuery').type('object');
cy.getBySel('searchQuery').next('button').click();
cy.location('search', {timeout: 60000}).should('include', '?query=');

cy.getBySel('error').should('not.exist');
cy.getBySel('object-card').its('length').should('be.gt', 0);
});
});

describe('Object list filters', () => {
it('filters by one publisher', () => {
it('filters based on the search query', () => {
cy.visit('/en', {
failOnStatusCode: false,
});
const searchText = 'My query';

cy.getBySel('searchQuery').type(searchText);
cy.getBySel('searchQuery').next('button').click();
cy.location('search', {timeout: 60000}).should('include', '?query=');

cy.getBySel('selectedFilter').should('have.length', 1);
cy.getBySel('selectedFilter').should('have.text', searchText);
});

it('filters by one publisher', () => {
cy.visit('/', {
failOnStatusCode: false,
qs: {query: 'object'},
});

cy.getBySel('publishersFilter').within(() => {
cy.get('[type="checkbox"]').first().check();
});

cy.getBySel('selectedFilter').should('have.length', 1);
cy.getBySel('selectedFilter').should('have.length', 2);
});

it('filters by two materials', () => {
cy.visit('/en', {
cy.visit('/', {
failOnStatusCode: false,
qs: {query: 'object'},
});

cy.getBySel('materialsFilter').within(() => {
cy.get('[type="checkbox"]').eq(0).check();
cy.get('[type="checkbox"]').eq(1).check();
});

cy.getBySel('selectedFilter').should('have.length', 2);
cy.getBySel('selectedFilter').should('have.length', 3);
});

it('removes a publisher filter by deselecting the filter in the sidebar', () => {
cy.visit('/en', {
cy.visit('/', {
failOnStatusCode: false,
qs: {query: 'object'},
});

cy.getBySel('publishersFilter').within(() => {
cy.get('[type="checkbox"]').first().check();
});
Expand All @@ -48,45 +72,38 @@ describe('Object list filters', () => {
cy.get('[type="checkbox"]').first().uncheck();
});

cy.getBySel('selectedFilter').should('have.length', 0);
cy.getBySel('selectedFilter').should('have.length', 1);
});

it('removes a publisher filter by deselecting it in the selected filter bar', () => {
cy.visit('/en', {
cy.visit('/', {
failOnStatusCode: false,
qs: {query: 'object'},
});

cy.getBySel('publishersFilter').within(() => {
cy.get('[type="checkbox"]').first().check();
});

cy.getBySel('selectedFilter').within(() => {
cy.get('button').click();
});
cy.getBySel('selectedFilter')
.first()
.within(() => {
cy.get('button').click();
});

cy.getBySel('selectedFilter').should('have.length', 0);
cy.getBySel('selectedFilter').should('have.length', 1);
});

it('filters by one type', () => {
cy.visit('/en', {
cy.visit('/', {
failOnStatusCode: false,
qs: {query: 'object'},
});
cy.getBySel('typesFilter').within(() => {
cy.get('[type="checkbox"]').first().check();
});

cy.getBySel('selectedFilter').should('have.length', 1);
});

it('filters based on the search query', () => {
cy.visit('/en', {
failOnStatusCode: false,
});
const searchText = 'My query';

cy.getBySel('searchQuery').type(searchText);

cy.getBySel('selectedFilter').should('have.length', 1);
cy.getBySel('selectedFilter').should('have.text', searchText);
cy.getBySel('selectedFilter').should('have.length', 2);
});

it('filters multiple categories together (query, publishers and types)', () => {
Expand All @@ -96,9 +113,13 @@ describe('Object list filters', () => {
const searchText = 'object';

cy.getBySel('searchQuery').type(searchText);
cy.getBySel('searchQuery').next('button').click();
cy.location('search', {timeout: 60000}).should('include', '?query=');

cy.getBySel('typesFilter').within(() => {
cy.get('[type="checkbox"]').first().check();
});

cy.getBySel('publishersFilter').within(() => {
cy.get('[type="checkbox"]').first().check();
});
Expand Down
11 changes: 7 additions & 4 deletions apps/researcher/cypress/e2e/object.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@

describe('Object details page', () => {
it('opens the object page if clicked on in the search list', () => {
cy.visit('/en', {
cy.visit('/', {
failOnStatusCode: false,
qs: {query: 'object'},
});

// Get the name of the first object in the list.
cy.getBySel('object-card-name')
.first()
Expand All @@ -33,8 +35,9 @@ describe('Object details page', () => {
});

it('navigates back to the list with the previously selected filters', () => {
cy.visit('/en', {
cy.visit('/', {
failOnStatusCode: false,
qs: {query: 'object'},
});

cy.getBySel('typesFilter').within(() => {
Expand All @@ -43,7 +46,7 @@ describe('Object details page', () => {

cy.url()
// Wait for the URL to contain the search param
.should('contain', '?')
.should('contain', 'types=')
.then(url => {
// Open the details page
cy.getBySel('object-card').first().click();
Expand All @@ -53,7 +56,7 @@ describe('Object details page', () => {
cy.getBySel('to-filtered-list-button').first().click();

cy.url().should('eq', url);
cy.getBySel('selectedFilter').should('have.length', 1);
cy.getBySel('selectedFilter').should('have.length', 2);
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function HeritageObjectList({
heritageObjects,
totalCount,
}: Props) {
const t = useTranslations('Home');
const t = useTranslations('ObjectSearchResults');

if (totalCount > 0) {
return (
Expand Down
66 changes: 66 additions & 0 deletions apps/researcher/src/app/[locale]/(objects)/home.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import {Background} from '@colonial-collections/ui/branding';
import CommunityCard from '../communities/community-card';
import {getCommunities} from '@/lib/community/actions';
import ErrorMessage from '@/components/error-message';
import {SortBy} from '@/lib/community/definitions';
import {useLocale} from 'next-intl';
import {getTranslator} from 'next-intl/server';
import {CommunitiesLink, Description} from './labels';
import {SearchFieldHome} from './search-field';

export default async function Home() {
const locale = useLocale();
const t = await getTranslator(locale, 'Home');

let communities;
try {
communities = await getCommunities({
sortBy: SortBy.CreatedAtDesc,
limit: 4,
});
} catch (err) {
return <ErrorMessage error={t('error')} />;
}

return (
<div className=" flex flex-col md:flex-row grow gap-4 md:gap-16 w-full mx-auto">
<main className="w-full flex flex-col text-white">
<div className="-mt-8 w-full bg-consortiumBlue-800 flex flex-col justify-center text-consortiumGreen-400 items-center min-h-[60vh] relative">
<div className="flex justify-center w-full max-w-6xl absolute bottom-0 opacity-20">
<Background />
</div>
<div className="w-full max-w-4xl px-4 sm:px-10 flex flex-col gap-10 relative pb-16">
<h1 className="text-3xl lg:text-5xl mt-4">{t('title')}</h1>
<p className="max-w-2xl text-lg">
<Description />
</p>
<div className="flex flex-col gap-2 max-w-3xl">
<label htmlFor="s1">
<strong>{t('searchLabel')}</strong>
</label>
<SearchFieldHome />
</div>
</div>
</div>
<div className="w-full flex flex-col items-center py-20 gap-6 text-consortiumBlue-800">
<div className="w-full max-w-4xl px-4 sm:px-10 flex flex-col gap-10 relative pb-10">
<h2 className="text-5xl">{t('communitiesTitle')}</h2>
<p className="max-w-xl">{t('communitiesDescription')}</p>
<p className="max-w-xl">
<CommunitiesLink />
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 h-full grow content-stretch gap-6 w-full max-w-[1800px] mx-auto px-4 sm:px-10 pt-10">
{communities.map(community => (
<CommunityCard
key={community.id}
community={community}
locale={locale}
/>
))}
</div>
</div>
</main>
</div>
);
}
25 changes: 25 additions & 0 deletions apps/researcher/src/app/[locale]/(objects)/labels.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
'use client';

import {useTranslations} from 'next-intl';
import Link from 'next-intl/link';

// In the current version of `next-intl` (3.0.0-beta.*), the server components do not fully support rich text.
// `t.rich()` only supports strings as response, not React components.
// This is fixed in the next version of `next-intl` (3.1.*), so we can remove this file when we upgrade.
// Add the `t.rich()` calls directly in the components.

export function Description() {
const t = useTranslations('Home');

return t.rich('description', {
em: text => <em>{text}</em>,
});
}

export function CommunitiesLink() {
const t = useTranslations('Home');

return t.rich('communitiesLink', {
link: text => <Link href="/communities">{text}</Link>,
});
}
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export default async function Details({params}: Props) {

return (
<>
<div className="px-4 sm:px-10 -mt-3 -mb-3 sm:-mb-9 flex gap-2 flex-row sm:justify-between">
<div className="px-4 sm:px-10 flex gap-2 flex-row sm:justify-between">
<div>
<ToFilteredListButton className="flex items-center gap-1">
<ChevronLeftIcon className="w-4 h-4 fill-neutral-500" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ function Form({
});
addNotification({
id: 'add-user-enrichment-success',
message: t.rich('successfullyAdded'),
message: t('successfullyAdded'),
type: 'success',
});
setIsVisible(slideOutId, false);
Expand Down
Loading

2 comments on commit fa0f6c1

@vercel
Copy link

@vercel vercel bot commented on fa0f6c1 Dec 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on fa0f6c1 Dec 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.