Skip to content

Commit

Permalink
Refactor report page logic to utilize translation data and simplify G…
Browse files Browse the repository at this point in the history 
…raphQL queries
  • Loading branch information
@pdcp1
pdcp1 committed Dec 23, 2024
1 parent e3a301f commit 5f37cc9
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 113 deletions.
4 changes: 0 additions & 4 deletions site/gatsby-site/page-creators/createReportPages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,6 @@ const createReportPages = async (graphql, createPage, { languages }) => {
originalPath: pagePath,
locale: language.code,
hrefLang: language.hrefLang,
translate_es: context.language !== 'es',
translate_fr: context.language !== 'fr',
translate_en: context.language !== 'en',
translate_ja: context.language !== 'ja',
},
});
}
Expand Down
95 changes: 21 additions & 74 deletions site/gatsby-site/playwright/e2e-full/pageCreators/createReportPages.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ test.describe('createReportPages', () => {
nodes: [
{ report_number: 1, language: 'en' },
{ report_number: 2, language: 'es' },
{ report_number: 3, language: 'es' },
],
},
},
Expand All @@ -33,81 +34,27 @@ test.describe('createReportPages', () => {
test('Should parse properly', async () => {
graphql.resolves(response);

await createReportPages(graphql as unknown as CreatePagesArgs['graphql'], createPage, { languages });
await createReportPages(graphql as unknown as CreatePagesArgs['graphql'], createPage, {
languages,
});

// Verify total pages created
expect(createPage.callCount).toEqual(8);

// Validate the first page
const page1 = createPage.getCall(0).args[0];
expect(page1.path).toContain('/reports/1/');
expect(page1.context.originalPath).toBe('/reports/1/');
expect(page1.context.locale).toBe('en');
expect(page1.context.hrefLang).toBe('en-US');
expect(page1.context.report_number).toBe(1);
expect(page1.context.language).toBe('en');
expect(page1.context.translate_es).toBe(true);
expect(page1.context.translate_en).toBe(false);
expect(page1.context.translate_fr).toBe(true);

// Validate the second page
const page2 = createPage.getCall(1).args[0];
expect(page2.path).toContain('/reports/2/');
expect(page2.context.originalPath).toBe('/reports/2/');
expect(page2.context.locale).toBe('en');
expect(page2.context.hrefLang).toBe('en-US');
expect(page2.context.report_number).toBe(2);
expect(page2.context.language).toBe('es');
expect(page2.context.translate_es).toBe(false);
expect(page2.context.translate_en).toBe(true);
expect(page2.context.translate_fr).toBe(true);

// Validate the third page
const page3 = createPage.getCall(2).args[0];
expect(page3.path).toContain('/es/reports/1/');
expect(page3.context.originalPath).toBe('/es/reports/1/');
expect(page3.context.locale).toBe('es');
expect(page3.context.hrefLang).toBe('es');
expect(page3.context.report_number).toBe(1);
expect(page3.context.language).toBe('en');
expect(page3.context.translate_es).toBe(true);
expect(page3.context.translate_en).toBe(false);
expect(page3.context.translate_fr).toBe(true);

// Validate the fourth page
const page4 = createPage.getCall(3).args[0];
expect(page4.path).toContain('/es/reports/2/');
expect(page4.context.originalPath).toBe('/es/reports/2/');
expect(page4.context.locale).toBe('es');
expect(page4.context.hrefLang).toBe('es');
expect(page4.context.report_number).toBe(2);
expect(page4.context.language).toBe('es');
expect(page4.context.translate_es).toBe(false);
expect(page4.context.translate_en).toBe(true);
expect(page4.context.translate_fr).toBe(true);

// Validate the fifth page
const page5 = createPage.getCall(4).args[0];
expect(page5.path).toContain('/fr/reports/1/');
expect(page5.context.originalPath).toBe('/fr/reports/1/');
expect(page5.context.locale).toBe('fr');
expect(page5.context.hrefLang).toBe('fr');
expect(page5.context.report_number).toBe(1);
expect(page5.context.language).toBe('en');
expect(page5.context.translate_es).toBe(true);
expect(page5.context.translate_en).toBe(false);
expect(page5.context.translate_fr).toBe(true);

// Validate the sixth page
const page6 = createPage.getCall(5).args[0];
expect(page6.path).toContain('/fr/reports/2/');
expect(page6.context.originalPath).toBe('/fr/reports/2/');
expect(page6.context.locale).toBe('fr');
expect(page6.context.hrefLang).toBe('fr');
expect(page6.context.report_number).toBe(2);
expect(page6.context.language).toBe('es');
expect(page6.context.translate_es).toBe(false);
expect(page6.context.translate_en).toBe(true);
expect(page6.context.translate_fr).toBe(true);
expect(createPage.callCount).toEqual(languages.length * response.data.reports.nodes.length);

languages.forEach((language, languageIndex) => {

response.data.reports.nodes.forEach((report, reportIndex) => {
const callIndex = languageIndex * response.data.reports.nodes.length + reportIndex;
const page = createPage.getCall(callIndex).args[0];

const reportPath = language.code === 'en' ? `/reports/${report.report_number}/` : `/${language.code}/reports/${report.report_number}/`;
expect(page.path).toBe(reportPath);
expect(page.context.originalPath).toBe(reportPath);
expect(page.context.locale).toBe(language.code);
expect(page.context.hrefLang).toBe(language.hrefLang);
expect(page.context.report_number).toBe(report.report_number);
expect(page.context.language).toBe(report.language);
});
});
});
});
56 changes: 21 additions & 35 deletions site/gatsby-site/src/templates/report.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,13 @@ import ClassificationsDisplay from 'components/taxa/ClassificationsDisplay';

function ReportPage(props) {
const {
data: { report, allMongodbAiidprodTaxa, allMongodbAiidprodClassifications, incident },
data,
data: {
report,
allMongodbAiidprodTaxa,
allMongodbAiidprodClassifications,
incident,
allMongodbTranslationsReports,
},
} = props;

const incidentId = incident?.incident_id;
Expand All @@ -25,9 +30,11 @@ function ReportPage(props) {

const { loading, isRole } = useUserContext();

if (report.language !== locale && data[locale]) {
report.title = data[locale].title;
report.text = data[locale].text;
if (report.language !== locale && allMongodbTranslationsReports.nodes?.length > 0) {
const reportTranslation = allMongodbTranslationsReports.nodes[0];

report.title = reportTranslation.title;
report.text = reportTranslation.text;
}

const defaultTitle = t('Report {{report_number}}', { ...report });
Expand Down Expand Up @@ -117,13 +124,7 @@ export const Head = (props) => {
};

export const query = graphql`
query ReportPageQuery(
$report_number: Int
$translate_es: Boolean!
$translate_fr: Boolean!
$translate_ja: Boolean!
$translate_en: Boolean!
) {
query ReportPageQuery($report_number: Int, $locale: String!) {
report: mongodbAiidprodReports(report_number: { eq: $report_number }) {
submitters
date_published
Expand All @@ -140,29 +141,14 @@ export const query = graphql`
language
description
}
es: mongodbTranslationsReportsEs(report_number: { eq: $report_number })
@include(if: $translate_es) {
title
text
report_number
}
fr: mongodbTranslationsReportsFr(report_number: { eq: $report_number })
@include(if: $translate_fr) {
title
text
report_number
}
ja: mongodbTranslationsReportsJa(report_number: { eq: $report_number })
@include(if: $translate_ja) {
title
text
report_number
}
en: mongodbTranslationsReportsEn(report_number: { eq: $report_number })
@include(if: $translate_en) {
title
text
report_number
allMongodbTranslationsReports(
filter: { report_number: { eq: $report_number }, language: { eq: $locale } }
) {
nodes {
title
text
report_number
}
}
allMongodbAiidprodTaxa {
nodes {
Expand Down

0 comments on commit 5f37cc9

Please sign in to comment.