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

@@ -3,6 +3,7 @@ import GridChart, {
 } from 'components/aggregation/mat/GridChart'
 import { MATContextProvider } from 'components/aggregation/mat/MATContext'
 import { DetailsBox } from 'components/measurement/DetailsBox'
+import SpinLoader from 'components/vendor/SpinLoader'
 import Link from 'next/link'
 import { memo, useEffect, useMemo } from 'react'
 import { MdBarChart, MdOutlineFileDownload } from 'react-icons/md'
@@ -46,11 +47,19 @@ export const MATLink = ({ query }) => {
   )
 }
 
-const Chart = memo(function Chart({
-  testGroup = null,
-  queryParams = {},
-  setState,
-}) {
+export const ChartSpinLoader = ({ height = '300px' }) => {
+  return (
+    <div
+      className="bg-gray-100 flex items-center justify-center p-6"
+      style={{ height }}
+    >
+      {/* <FormattedMessage id="General.Loading" /> */}
+      <SpinLoader />
+    </div>
+  )
+}
+
+const Chart = ({ queryParams = {}, setState = null, headerOptions = {} }) => {
   const apiQuery = useMemo(() => {
     const qs = new URLSearchParams(queryParams).toString()
     return qs
@@ -75,42 +84,34 @@ 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
             collapsed={false}
             content={
-              <>
-                <details>
-                  <summary>
-                    <span>Error: {error.message}</span>
-                  </summary>
-                  <pre>{JSON.stringify(error, null, 2)}</pre>
-                </details>
-              </>
+              <details>
+                <summary>
+                  <span>Error: {error.message}</span>
+                </summary>
+                <pre>{JSON.stringify(error, null, 2)}</pre>
+              </details>
             }
           />
         )}
       </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,44 @@
+import { FindingBox } 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">
+      <h3>{title}</h3>
+      {findings.length ? (
+        <>
+          <div className="grid my-8 gap-6 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {findings.map((finding) => (
+              <FindingBox key={finding.id} incident={finding} />
+            ))}
+          </div>
+          <div className="flex my-4 justify-center">
+            <Link href={`/findings?theme=${theme}`}>
+              <button type="button" className="btn btn-primary-hollow">
+                See more
+              </button>
+            </Link>
+          </div>
+        </>
+      ) : (
+        <div className="my-3">No findings available</div>
+      )}
+    </section>
+  )
+}
+
+export default FindingsSection

components/Layout.js

@@ -23,6 +23,10 @@ const Layout = ({ children }) => {
     return (
       pathname === '/countries' ||
       pathname === '/domains' ||
+      pathname === '/human-rights' ||
+      pathname === '/social-media' ||
+      pathname === '/news-media' ||
+      pathname === '/circumvention' ||
       pathname === '/networks' ||
       pathname === '/findings' ||
       pathname.match(/^\/country\/\S+/)
@@ -31,7 +35,7 @@ const Layout = ({ children }) => {
 
   return (
     <UserProvider>
-      <div className="site text-sm flex flex-col min-h-[100vh]">
+      <div className="site flex flex-col min-h-[100vh]">
         <div className="flex-[1_0_auto]">
           <Header />
           {navbarSticky ? (