Introduce feature flags for conditional rendering of eLife terms

elifesciences · Nov 22, 2024 · cd54b9b · cd54b9b
1 parent 367908c
commit cd54b9b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/src/components/atoms/assessment/assessment.tsx b/src/components/atoms/assessment/assessment.tsx
@@ -1,17 +1,18 @@
 import './assessment.scss';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TermsList } from '../terms-list/terms-list';
 import {
   findTerms, highlightTerms, significanceTerms, strengthTerms,
 } from '../../../utils/terms';
 import { Descriptors } from '../descriptors/descriptors';
 import { isPdfRoute } from '../../../utils/isPdfRoute';
-import { config } from '../../../config';
+import { FeaturesContext } from '../../../features';
 
 type Props = { content: string, doi?: string };
 export const Assessment = ({ content, doi }: Props) => {
   const { t } = useTranslation();
+  const features = useContext(FeaturesContext);
 
   const [expanded, setExpanded] = useState<boolean | null>(null);
 
@@ -21,7 +22,7 @@ export const Assessment = ({ content, doi }: Props) => {
 
   const { strength, significance } = findTerms(content);
 
-  return config.disableTerms ? (
+  return !features.showElifeTerms ? (
     <section id="assessment" className="assessment">
       <div className="assessment__body" dangerouslySetInnerHTML={{ __html: content }} />
       {doi && <Descriptors doi={doi}/>}

diff --git a/src/features.ts b/src/features.ts
@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+export type FeaturesData = {
+  showElifeTerms: boolean,
+};
+
+export const FeaturesContext = createContext<FeaturesData>({
+  showElifeTerms: true,
+});
diff --git a/src/pages/_app.page.tsx b/src/pages/_app.page.tsx
@@ -1,11 +1,12 @@
 import Head from 'next/head';
 import { Noto_Serif, Noto_Sans } from 'next/font/google';
-import { ReactNode } from 'react';
+import { ReactNode, useContext } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { DefaultLayout } from '../components/layouts/default';
 import { config } from '../config';
 import { BiophysicsColabLayout } from '../components/layouts/biophysics-colab';
 import { i18n } from '../i18n';
+import { FeaturesContext } from '../features';
 
 const LayoutSelector = ({ siteName, children }: { siteName?: string, children: ReactNode }) => {
   switch (siteName) {
@@ -45,6 +46,7 @@ const notoSans = Noto_Sans({
 });
 
 export default function MyApp({ Component, pageProps }: any) {
+  const features = pageProps.features ?? useContext(FeaturesContext);
   return (
     <>
       <Head>
@@ -76,11 +78,13 @@ export default function MyApp({ Component, pageProps }: any) {
           }}></script>
         }
       </Head>
-      <I18nextProvider i18n={i18n} defaultNS={pageProps.siteName?.replace('-', '_')}>
-        <LayoutSelector siteName={pageProps.siteName}>
-          <Component {...pageProps} />
-        </LayoutSelector>
-      </I18nextProvider>
+      <FeaturesContext.Provider value={features}>
+        <I18nextProvider i18n={i18n} defaultNS={pageProps.siteName?.replace('-', '_')}>
+          <LayoutSelector siteName={pageProps.siteName}>
+            <Component {...pageProps} />
+          </LayoutSelector>
+        </I18nextProvider>
+      </FeaturesContext.Provider>
     </>
   );
 }
diff --git a/src/pages/reviewed-preprints/[...path].page.tsx b/src/pages/reviewed-preprints/[...path].page.tsx
@@ -23,6 +23,7 @@ import { ErrorMessages } from '../../components/atoms/error-messages/error-messa
 import { formatAuthorName } from '../../utils/formatters';
 import { makeNullableOptional } from '../../utils/make-nullable-optional';
 import { SerialisedTimelineEvent } from '../../types/article-timeline';
+import { FeaturesData } from '../../features';
 
 type PageProps = {
   siteName?: string,
@@ -35,6 +36,7 @@ type PageProps = {
   peerReview: PeerReview | null,
   metrics: Metrics | null,
   previousVersionWarningUrl: string | null,
+  features: FeaturesData,
 };
 
 const getPublishedDate = (events: TimelineEvent[], currentVersion: number): string | undefined => {
@@ -230,6 +232,9 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async (context:
       peerReview: articleWithVersions.article.peerReview ?? null, // cast to null because undefined isn't a JSON value
       metrics: articleWithVersions.metrics ?? null,
       previousVersionWarningUrl,
+      features: {
+        showElifeTerms: !config.disableTerms,
+      },
     },
   };
 };