Add thematic pages

.env.development

@@ -2,8 +2,8 @@
 # To override locally, make a copy called `.env.development.local`
 # Refer: https://nextjs.org/docs/basic-features/environment-variables
 
-NEXT_PUBLIC_OONI_API=https://backend-hel.ooni.org
-NEXT_PUBLIC_USER_FEEDBACK_API=https://backend-hel.ooni.org
+NEXT_PUBLIC_OONI_API=https://api.ooni.org
+NEXT_PUBLIC_USER_FEEDBACK_API=https://api.dev.ooni.io
 NEXT_PUBLIC_EXPLORER_URL=http://localhost:3100
 
 RUN_GIT_COMMIT_SHA_SHORT=yarn --silent git:getCommitSHA:short

.env.test

@@ -2,7 +2,7 @@
 # To override locally, make a copy called `.env.test.local`
 # Refer: https://nextjs.org/docs/basic-features/environment-variables
 
-NEXT_PUBLIC_OONI_API=https://api.ooni.io
-NEXT_PUBLIC_USER_FEEDBACK_API=https://backend-hel.ooni.org
+NEXT_PUBLIC_OONI_API=https://api.ooni.org
+NEXT_PUBLIC_USER_FEEDBACK_API=https://api.dev.ooni.io
 NEXT_PUBLIC_EXPLORER_URL=https://explorer.test.ooni.org
 NEXT_PUBLIC_IS_TEST_ENV=1

components/BlockText.js

@@ -1,6 +1,6 @@
 const BlockText = ({ className, ...props }) => (
   <div
-    className={`bg-gray-50 border-s-[10px] text-base border-blue-500 p-3 font-base ${className}`}
+    className={`bg-gray-50 border-s-[10px] border-blue-500 p-3 font-base ${className}`}
     {...props}
   />
 )

components/Chart.js

@@ -58,11 +58,7 @@ export const MATLink = ({ query }) => {
   )
 }
 
-const Chart = memo(function Chart({
-  testGroup = null,
-  queryParams = {},
-  setState,
-}) {
+const Chart = ({ queryParams = {}, setState = null, headerOptions = {} }) => {
   const apiQuery = useMemo(() => {
     const qs = new URLSearchParams(queryParams).toString()
     return qs
@@ -87,24 +83,18 @@ const Chart = memo(function Chart({
     if (setState && data?.data) setState(data.data)
   }, [data, setState])
 
-  const headerOptions = { probe_cc: false, subtitle: false }
-
   return (
-    // <MATContextProvider key={name} test_name={name} {...queryParams}>
     <MATContextProvider {...queryParams}>
       <div className="flex flex-col">
-        {!chartData && !error ? (
-          <FormattedMessage id="General.Loading" />
-        ) : (
-          <>
-            <GridChart
-              data={chartData}
-              rowKeys={rowKeys}
-              rowLabels={rowLabels}
-            />
-            {!!chartData?.size && <MATLink query={queryParams} />}
-          </>
-        )}
+        <>
+          <GridChart
+            data={chartData}
+            rowKeys={rowKeys}
+            rowLabels={rowLabels}
+            header={headerOptions}
+          />
+          {!!chartData?.size && <MATLink query={queryParams} />}
+        </>
         {error && (
           <DetailsBox
             content={
@@ -120,6 +110,6 @@ const Chart = memo(function Chart({
       </div>
     </MATContextProvider>
   )
-})
+}
 
-export default Chart
+export default memo(Chart)

components/ChartIntersectionObserver.tsx

@@ -0,0 +1,55 @@
+import Chart, { ChartSpinLoader } from 'components/Chart'
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
+import { useInView } from 'react-intersection-observer'
+
+type ChartIntersectionObserverProps = {
+  domain?: string
+  testName?: string
+  headerOptions?: object
+}
+
+const ChartIntersectionObserver = ({
+  domain,
+  testName = 'web_connectivity',
+  headerOptions,
+}: ChartIntersectionObserverProps) => {
+  const router = useRouter()
+
+  const {
+    query: { since, until, probe_cc },
+  } = router
+
+  const query = useMemo(
+    () => ({
+      axis_x: 'measurement_start_day',
+      axis_y: 'probe_cc',
+      since,
+      until,
+      test_name: testName,
+      ...(domain && { domain }),
+      ...(probe_cc && { probe_cc }),
+      time_grain: 'day',
+    }),
+    [domain, since, until, probe_cc, testName],
+  )
+
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    rootMargin: '-300px 0px 0px 0px',
+    threshold: 0.5,
+    initialInView: false,
+  })
+
+  return (
+    <div ref={ref}>
+      {inView ? (
+        <Chart queryParams={query} headerOptions={headerOptions} />
+      ) : (
+        <ChartSpinLoader />
+      )}
+    </div>
+  )
+}
+
+export default ChartIntersectionObserver

components/FindingsSection.tsx

@@ -0,0 +1,42 @@
+import { FindingBoxSmall } from 'components/landing/HighlightBox'
+import Link from 'next/link'
+
+interface Finding {
+  id: string
+}
+
+type FindingsSectionProps = {
+  title: string
+  theme: string
+  findings: Finding[]
+}
+
+const FindingsSection = ({
+  title,
+  theme,
+  findings = [],
+}: FindingsSectionProps) => {
+  return (
+    <section className="mb-12">
+      <h2>{title}</h2>
+      {findings.length ? (
+        <>
+          <div className="grid my-8 gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
+            {findings.map((finding) => (
+              <FindingBoxSmall key={finding.id} incident={finding} />
+            ))}
+            <div className="flex items-center justify-center px-24 text-center">
+              <Link href={`/findings?theme=${theme}`}>
+                See all related censorship findings »
+              </Link>
+            </div>
+          </div>
+        </>
+      ) : (
+        <div className="my-3">No findings available</div>
+      )}
+    </section>
+  )
+}
+
+export default FindingsSection

components/FormattedMarkdown.js

@@ -29,7 +29,7 @@ const FormattedMarkdown = ({ id, defaultMessage, values }) => {
   const intl = useIntl()
 
   return (
-    <FormattedMarkdownBase>
+    <FormattedMarkdownBase suppressHydrationWarning>
       {intl.formatMessage({ id, defaultMessage }, values)}
     </FormattedMarkdownBase>
   )

components/Layout.js

@@ -24,6 +24,10 @@ const Layout = ({ children, isEmbeddedView }) => {
     return (
       pathname === '/countries' ||
       pathname === '/domains' ||
+      pathname === '/human-rights' ||
+      pathname === '/social-media' ||
+      pathname === '/news-media' ||
+      pathname === '/circumvention' ||
       pathname === '/networks' ||
       pathname === '/findings' ||
       pathname.match(/^\/country\/\S+/)

components/MATChart.js

@@ -9,6 +9,7 @@ import { useMemo } from 'react'
 import { useIntl } from 'react-intl'
 import dayjs from 'services/dayjs'
 import useSWR from 'swr'
+import { ChartSpinLoader } from './Chart'
 import { FormattedMarkdownBase } from './FormattedMarkdown'
 
 axiosResponseTime(axios)
@@ -86,38 +87,29 @@ const MATChart = ({ query, showFilters = true }) => {
     swrOptions,
   )
 
-  const showLoadingIndicator = useMemo(() => isValidating, [isValidating])
   return (
     <>
       <MATContextProvider queryParams={query}>
         {error && <NoCharts message={error?.info ?? JSON.stringify(error)} />}
-        <>
-          {showLoadingIndicator ? (
-            <h2>{intl.formatMessage({ id: 'General.Loading' })}</h2>
-          ) : (
-            <>
-              {data?.data?.result?.length > 0 ? (
-                <>
-                  {data && data.data.dimension_count === 0 && (
-                    <FunnelChart data={data.data.result} />
-                  )}
-                  {data && data.data.dimension_count === 1 && (
-                    <StackedBarChart data={data.data.result} query={query} />
-                  )}
-                  {data && data.data.dimension_count > 1 && (
-                    <TableView
-                      data={data.data.result}
-                      query={query}
-                      showFilters={showFilters}
-                    />
-                  )}
-                </>
-              ) : (
-                <NoCharts />
-              )}
-            </>
-          )}
-        </>
+        {isValidating ? (
+          <ChartSpinLoader height="500px" />
+        ) : (
+          <>
+            {data && data.data.dimension_count === 0 && (
+              <FunnelChart data={data.data.result} />
+            )}
+            {data && data.data.dimension_count === 1 && (
+              <StackedBarChart data={data.data.result} query={query} />
+            )}
+            {data && data.data.dimension_count > 1 && (
+              <TableView
+                data={data.data.result}
+                query={query}
+                showFilters={showFilters}
+              />
+            )}
+          </>
+        )}
       </MATContextProvider>
     </>
   )