Update findings and reports card styling

ooni · Dec 13, 2024 · 7121e24 · 7121e24
1 parent deec60a
commit 7121e24
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 44 deletions.
diff --git a/components/FindingsSection.tsx b/components/FindingsSection.tsx
@@ -1,4 +1,4 @@
-import { FindingBox } from 'components/landing/HighlightBox'
+import { FindingBoxSmall } from 'components/landing/HighlightBox'
 import Link from 'next/link'
 
 interface Finding {
@@ -18,20 +18,18 @@ const FindingsSection = ({
 }: FindingsSectionProps) => {
   return (
     <section className="mb-12">
-      <h3>{title}</h3>
+      <h2>{title}</h2>
       {findings.length ? (
         <>
-          <div className="grid my-8 gap-6 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          <div className="grid my-8 gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
             {findings.map((finding) => (
-              <FindingBox key={finding.id} incident={finding} />
+              <FindingBoxSmall 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 className="flex items-center justify-center px-24 text-center">
+              <Link href={`/findings?theme=${theme}`}>
+                See all related censorship findings »
+              </Link>
+            </div>
           </div>
         </>
       ) : (

diff --git a/components/ReportBox.tsx b/components/ReportBox.tsx
@@ -0,0 +1,24 @@
+import Link from 'next/link'
+import { useIntl } from 'react-intl'
+import { formatLongDate } from 'utils'
+import { OONI_BLOG_BASE_URL } from './country/Overview'
+
+type ReportBoxType = {
+  title: string
+  date: string
+  link: string
+}
+
+const ReportBox = ({ title = '', date, link = '' }: ReportBoxType) => {
+  const intl = useIntl()
+
+  return (
+    <Link href={OONI_BLOG_BASE_URL + link} className="flex text-black">
+      <div className="flex justify-between flex-col py-6 px-6 border border-gray-300 border-b-[10px] border-b-blue-500">
+        <h4 className="text-lg mb-2 leading-tight">{title}</h4>
+        <div className="text-gray-600">{formatLongDate(date, intl.locale)}</div>
+      </div>
+    </Link>
+  )
+}
+export default ReportBox
diff --git a/components/ReportsSection.js b/components/ReportsSection.js
@@ -1,25 +1,39 @@
+import Link from 'next/link'
 import { FormattedMessage } from 'react-intl'
-import { FeaturedArticle } from './country/Overview'
 import { BoxWithTitle } from './country/boxes'
+import { FeaturedArticle, OONI_BLOG_BASE_URL } from './country/Overview'
+import ReportBox from './ReportBox'
 
-const ReportsSection = ({ title, reports }) => {
+const ooniOrgPath = {
+  human_rights: 'human-rights',
+  circumvention: 'circumvention',
+  social_media: 'social-media-im',
+  news_media: 'news-media',
+}
+const ReportsSection = ({ title, reports, theme }) => {
   return (
-    <BoxWithTitle title={title}>
-      {/* <section className="my-12"> */}
-      {/* <h3>{title}</h3> */}
+    <section className="mb-12">
+      <h2>{title}</h2>
       {reports?.length === 0 ? (
         <FormattedMessage id="Country.Overview.FeaturedResearch.None" />
       ) : (
-        <ul>
+        <div className="grid my-8 gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
           {reports?.map((article, index) => (
-            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-            <li key={index}>
-              <FeaturedArticle link={article.href} title={article.title} />
-            </li>
+            <ReportBox
+              key={article.href}
+              link={article.href}
+              date={article.date}
+              title={article.title}
+            />
           ))}
-        </ul>
+          <div className="flex items-center justify-center px-4 text-center">
+            <Link href={`${OONI_BLOG_BASE_URL}/reports/${ooniOrgPath[theme]}`}>
+              See all related research reports »
+            </Link>
+          </div>
+        </div>
       )}
-    </BoxWithTitle>
+    </section>
   )
 }
 

diff --git a/components/ThematicPage.tsx b/components/ThematicPage.tsx
@@ -65,7 +65,7 @@ const ThematicPage = ({
         />
 
         <AnchorLink id="reports" />
-        <ReportsSection title={reportsTitle} reports={reports} />
+        <ReportsSection title={reportsTitle} reports={reports} theme={theme} />
 
         <StyledStickySubMenu topClass="top-[193px]">
           <div className="pb-4 pt-2">

diff --git a/components/country/Overview.js b/components/country/Overview.js
@@ -6,13 +6,13 @@ import { useCountry } from './CountryContext'
 import SectionHeader from './SectionHeader'
 import { BoxWithTitle } from './boxes'
 
-const ooniBlogBaseURL = 'https://ooni.org'
+export const OONI_BLOG_BASE_URL = 'https://ooni.org'
 
 export const FeaturedArticle = ({ link, title }) => (
   <div className="py-1">
     <a
       className="text-blue-700"
-      href={ooniBlogBaseURL + link}
+      href={OONI_BLOG_BASE_URL + link}
       target="_blank"
       rel="noopener noreferrer"
     >

diff --git a/components/findings/FindingDisplay.js b/components/findings/FindingDisplay.js
@@ -4,7 +4,7 @@ import { MATChartWrapper } from 'components/MATChart'
 import Markdown from 'markdown-to-jsx'
 import Link from 'next/link'
 import { useIntl } from 'react-intl'
-import { formatLongDate } from 'utils'
+import { formatLongDateUTC } from 'utils'
 import { getLocalisedRegionName } from 'utils/i18nCountries'
 
 const FormattedMarkdown = ({ children }) => {
@@ -28,7 +28,8 @@ const FindingDisplay = ({ incident }) => {
 
   const reportedBy = incident?.reported_by
   const formattedCreationDate =
-    incident?.create_time && formatLongDate(incident?.create_time, intl.locale)
+    incident?.create_time &&
+    formatLongDateUTC(incident?.create_time, intl.locale)
   const listOfNetworks = incident?.ASNs?.map((as) => (
     <Link key={as} href={`/as/AS${as}`}>{`AS${as}`}</Link>
   )).reduce((prev, curr) => (prev ? [prev, ', ', curr] : curr), null)
@@ -46,10 +47,10 @@ const FindingDisplay = ({ incident }) => {
       )}
       <div className="text-gray-600 mb-4">
         {incident?.start_time &&
-          formatLongDate(incident?.start_time, intl.locale)}{' '}
+          formatLongDateUTC(incident?.start_time, intl.locale)}{' '}
         -{' '}
         {incident?.end_time
-          ? formatLongDate(incident?.end_time, intl.locale)
+          ? formatLongDateUTC(incident?.end_time, intl.locale)
           : 'ongoing'}
       </div>
       {!!incident?.tags?.length && (

diff --git a/components/landing/HighlightBox.js b/components/landing/HighlightBox.js
@@ -4,14 +4,14 @@ import { useIntl } from 'react-intl'
 import { getLocalisedRegionName } from 'utils/i18nCountries'
 
 import Link from 'next/link'
-import { formatLongDate } from '../../utils'
+import { formatLongDateUTC } from '../../utils'
 import Flag from '../Flag'
 
 const HighlightBox = ({ countryCode, title, text, dates, footer }) => {
   const intl = useIntl()
 
   return (
-    <div className="flex py-8 px-6 flex-col justify-between border border-gray-300 border-l-[10px] border-l-blue-500 min-h-[328px]">
+    <div className="flex py-8 px-6 flex-col justify-between border border-gray-300 border-l-[10px] border-l-blue-500">
       <div>
         {countryCode && (
           <div className="flex items-center">
@@ -23,9 +23,9 @@ const HighlightBox = ({ countryCode, title, text, dates, footer }) => {
         )}
         {dates}
         <h4 className="text-2xl my-2 leading-tight">{title}</h4>
-        <p className="text-xl">
+        <div className="text-lg">
           <Markdown>{text}</Markdown>
-        </p>
+        </div>
       </div>
       {footer}
     </div>
@@ -56,10 +56,10 @@ export const FindingBox = ({ incident }) => {
         <div className="text-gray-600">
           <div className=" mb-2">
             {incident.start_time &&
-              formatLongDate(incident.start_time, intl.locale)}{' '}
+              formatLongDateUTC(incident.start_time, intl.locale)}{' '}
             -{' '}
             {incident.end_time
-              ? formatLongDate(incident.end_time, intl.locale)
+              ? formatLongDateUTC(incident.end_time, intl.locale)
               : 'ongoing'}
           </div>
           <div>
@@ -68,7 +68,7 @@ export const FindingBox = ({ incident }) => {
               {
                 date:
                   incident?.create_time &&
-                  formatLongDate(incident?.create_time, intl.locale),
+                  formatLongDateUTC(incident?.create_time, intl.locale),
               },
             )}
           </div>
@@ -88,3 +88,30 @@ export const FindingBox = ({ incident }) => {
     />
   )
 }
+
+export const FindingBoxSmall = ({ incident }) => {
+  const intl = useIntl()
+
+  return (
+    <Link href={`/findings/${incident.id}`} className="flex text-black">
+      <HighlightBox
+        key={incident.id}
+        countryCode={incident.CCs[0]}
+        title={incident.title}
+        text={incident.short_description}
+        dates={
+          <div className="text-gray-600">
+            <div className=" mb-2">
+              {incident.start_time &&
+                formatLongDateUTC(incident.start_time, intl.locale)}{' '}
+              -{' '}
+              {incident.end_time
+                ? formatLongDateUTC(incident.end_time, intl.locale)
+                : 'ongoing'}
+            </div>
+          </div>
+        }
+      />
+    </Link>
+  )
+}
diff --git a/lib/api.js b/lib/api.js
@@ -195,13 +195,15 @@ export const getThematicData = async (theme) => {
     const firstItem = Array.isArray(theme) ? theme[0] : theme
 
     let findings = await getFindings({ theme: firstItem })
-    const reports = await getReports(themeArr.map((t) => `theme-${t}`))
+    let reports = await getReports(themeArr.map((t) => `theme-${t}`))
     const countries = await getCountries()
 
     findings = JSON.parse(
-      JSON.stringify(sortData(convertDatesData(findings)).slice(0, 4)),
+      JSON.stringify(sortData(convertDatesData(findings)).slice(0, 5)),
     )
 
+    reports = reports.slice(0, 11)
+
     const selectedCountries = findings.flatMap((f) => f.CCs).slice(0, 3)
 
     return {

diff --git a/pages/findings/dashboard.js b/pages/findings/dashboard.js
@@ -21,7 +21,7 @@ import { ToastContainer, toast } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
 import useSWR from 'swr'
 import useSWRMutation from 'swr/mutation'
-import { formatMediumDate } from 'utils'
+import { formatMediumDateUTC } from 'utils'
 
 const Dashboard = () => {
   const intl = useIntl()
@@ -84,7 +84,7 @@ const Dashboard = () => {
       {
         header: 'Last Update',
         accessorKey: 'update_time',
-        cell: (info) => formatMediumDate(info.getValue()),
+        cell: (info) => formatMediumDateUTC(info.getValue()),
       },
       {
         header: 'Reported by',
@@ -93,12 +93,12 @@ const Dashboard = () => {
       {
         header: 'Start Date',
         accessorKey: 'start_time',
-        cell: (info) => formatMediumDate(info.getValue()),
+        cell: (info) => formatMediumDateUTC(info.getValue()),
       },
       {
         header: 'End Date',
         accessorKey: 'end_time',
-        cell: (info) => info.getValue() && formatMediumDate(info.getValue()),
+        cell: (info) => info.getValue() && formatMediumDateUTC(info.getValue()),
       },
       {
         header: 'Published',

diff --git a/utils/index.js b/utils/index.js
@@ -47,12 +47,18 @@ export const getRange = (start, end) => {
 }
 
 export const formatLongDate = (date, locale) =>
+  `${new Intl.DateTimeFormat(locale, {
+    dateStyle: 'long',
+    timeZone: 'UTC',
+  }).format(new Date(date))}`
+
+export const formatLongDateUTC = (date, locale) =>
   `${new Intl.DateTimeFormat(locale, {
     dateStyle: 'long',
     timeZone: 'UTC',
   }).format(new Date(date))} UTC`
 
-export const formatMediumDate = (date, locale) =>
+export const formatMediumDateUTC = (date, locale) =>
   `${new Intl.DateTimeFormat(locale, {
     dateStyle: 'medium',
     timeZone: 'UTC',