Skip to content

Convert ncov and sars to app router [#1132]#1146

Merged
genehack merged 10 commits intomasterfrom
convert-ncov-and-sars-to-app-router-1132
Apr 9, 2025
Merged

Convert ncov and sars to app router [#1132]#1146
genehack merged 10 commits intomasterfrom
convert-ncov-and-sars-to-app-router-1132

Conversation

@genehack
Copy link
Contributor

@genehack genehack commented Apr 3, 2025

Description of proposed changes

Converts /ncov and /sars-cov-2/[[...sars-cov-2]], and the <DatasetSelect> component they use, over to App Router style.

Preview

Related issue(s)

Closes #1132
#1052

Checklist

…]/` pages into App Router style [#1132]

This is a combination of file renames and deletions to get things
switched over into new locations with no file content-level changes.

These files were deleted; they were small stubs that loaded the same
underlying content and presented it at two different URLs:

* static-site/pages/ncov/[[...ncov]].jsx

These files were moved and renamed, for the reason(s) given below:

* `static-site/src/sections/sars-cov-2-page.jsx` was changed to
  `static-site/app/sars-cov-2/[[...sars-cov-2]]/page.tsx`, as this is
  where the base SARS-CoV-2 page content is found
* `static-site/src/components/Datasets/pathogen-page-introduction.jsx`
  was changed to
  `static-site/app/sars-cov-2/[[...sars-cov-2]]/pathogen-page-introduction.tsx`,
  because the <PathogenPageIntroduction> component is only used by the
  SARS-CoV-2 page content
* 'static-site/src/components/Datasets/situation-reports-by-language.jsx'
  was changed to
  `static-site/app/sars-cov-2/[[...sars-cov-2]]/situation-reports-by-language.tsx`,
  because the <SituationReportsByLanguage> component is only used by
  the SARS-CoV-2 page content
* `static-site/src/components/Misc/collapse-title.jsx` was changed to
  `static-site/app/sars-cov-2/[[...sars-cov-2]]/collapse-title.tsx`,
  because the <CollapseTitle> component is only used by the
  <SituationReportsByLanguage> component

Note: this commit will leave the site in a broken state; doing this to
ensure better Git tracking of file renames and history.
This is a bulk copy of the JSX/JS files from
`static-site/src/components/Datasets` into
`static-site/components/dataset-select`.

These files contain the <DatasetSelect> component and numerous child
components used within <DatasetSelect> as well as supporting code,
etc.

The files are being copied rather than renamed, because they're used
by additional pages, beyond the `/ncov` and
`/sars-cov-2/[[...sars-cov-2]]` pages being converted in this branch.

The site will be in a broken state with this commit, because the
component has not yet been ported to App Router style.
@nextstrain-bot nextstrain-bot temporarily deployed to nextstrain-s-convert-nc-vzyshx April 3, 2025 18:29 Inactive
@joverlee521 joverlee521 self-requested a review April 9, 2025 16:24
Copy link
Contributor

@joverlee521 joverlee521 left a comment

Choose a reason for hiding this comment

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

Mainly checked functionality and styling in the testing app and only skimmed the code changes. Left some nitpicky comments, but the ported pages worked as expected for me.

genehack added 8 commits April 9, 2025 12:44
…to `React.ReactElement`.

Needed to support the error message used by the `/ncov` and
`/sars-cov-2` pages.

Requires that the value of the `contents` prop in the <ErrorMessage>
in `/staging` page be converted to a JSX <p>. Remove the <p> tags that
were wrapping the `contents` prop previously.
…uter [#1132]

* Converts <SituationReportsByLanguage> from a React Class Component
  to a regular React Client Component (non-class-based); this
  implementation based on `useState()` and `useEffect()` makes the
  data fetch and rendering process more consistent with other parts of
  the code base (e.g., `static-site/components/list-resources/use-data-fetch.ts`)
* Converts styled components use to CSS module
* Also converts <CollapseTitle> to use CSS module
Used extensively in <DatasetSelect> and friends.

This is a new addition, without removal of the existing (Styled
Components-based) component, because it is also used in the Groups
pages.
…1132]

* Convert <DatasetMap> to a React Client Component; converted
  associated styles to CSS Module
* Convert <DatasetSelect> to a React Client Component
* Consolidate <FilterBadge>-associated components into <FilterDisplay>
* Convert <FilterDispay> to a React Server Component; convert
  associated styles to CSS Module and remove unused styles.
* Convert `filter-helpers` to Typescript
* Convert <FilterSelect> to a React Server Component
* Convert <ListDatasets> to a React Server Component; convert
  associated styles to CSS Module
* Add <StyledTooltip> component (extracted from duplicated bits in
  <DatasetMap> and <FilterSelect> when converting those)
* Convert <VirtualizedMenuList> to a React Client Component
* Define types for all <DatasetSelect>-associated components and
  helper methods in `types.ts` and annotate types throughout code
  touched by this commit
* Add JSDoc comments to undocumented functions and file-level
  constants throughout
…1132]

* Remove h5 and h6 styling — there is no styled.H5 or styled.H6
* Refactor h1-h4 styling to pull out common parts, which had
  previously only been set for h1
@genehack genehack force-pushed the convert-ncov-and-sars-to-app-router-1132 branch from 2ea5178 to d148c13 Compare April 9, 2025 19:52
@genehack genehack temporarily deployed to nextstrain-s-convert-nc-vzyshx April 9, 2025 19:52 Inactive
@genehack genehack merged commit a118aeb into master Apr 9, 2025
8 checks passed
@victorlin victorlin deleted the convert-ncov-and-sars-to-app-router-1132 branch November 20, 2025 23:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Port /ncov/[[..ncov]] and /sars-cov-2/[[...sars-cov-2]] to App Router

3 participants