From 7121e24007b6839a968162f2f0fda9a8032eafb5 Mon Sep 17 00:00:00 2001 From: majakomel Date: Fri, 13 Dec 2024 13:03:36 +0100 Subject: [PATCH] Update findings and reports card styling --- components/FindingsSection.tsx | 20 ++++++------- components/ReportBox.tsx | 24 ++++++++++++++++ components/ReportsSection.js | 38 +++++++++++++++++-------- components/ThematicPage.tsx | 2 +- components/country/Overview.js | 4 +-- components/findings/FindingDisplay.js | 9 +++--- components/landing/HighlightBox.js | 41 ++++++++++++++++++++++----- lib/api.js | 6 ++-- pages/findings/dashboard.js | 8 +++--- utils/index.js | 8 +++++- 10 files changed, 116 insertions(+), 44 deletions(-) create mode 100644 components/ReportBox.tsx diff --git a/components/FindingsSection.tsx b/components/FindingsSection.tsx index c1b421bd..f3312493 100644 --- 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 (
-

{title}

+

{title}

{findings.length ? ( <> -
+
{findings.map((finding) => ( - + ))} -
-
- - - +
+ + See all related censorship findings » + +
) : ( diff --git a/components/ReportBox.tsx b/components/ReportBox.tsx new file mode 100644 index 00000000..505ff061 --- /dev/null +++ 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 ( + +
+

{title}

+
{formatLongDate(date, intl.locale)}
+
+ + ) +} +export default ReportBox diff --git a/components/ReportsSection.js b/components/ReportsSection.js index a5dc0ccf..068f00d0 100644 --- 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 ( - - {/*
*/} - {/*

{title}

*/} +
+

{title}

{reports?.length === 0 ? ( ) : ( -
    +
    {reports?.map((article, index) => ( - // biome-ignore lint/suspicious/noArrayIndexKey: -
  • - -
    • + ))} -
+
+ + See all related research reports » + +
+
)} - +
) } diff --git a/components/ThematicPage.tsx b/components/ThematicPage.tsx index 99ae41d4..11ad1123 100644 --- a/components/ThematicPage.tsx +++ b/components/ThematicPage.tsx @@ -65,7 +65,7 @@ const ThematicPage = ({ /> - +
diff --git a/components/country/Overview.js b/components/country/Overview.js index 7f8a6dfc..e77b17c9 100644 --- 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 }) => (
diff --git a/components/findings/FindingDisplay.js b/components/findings/FindingDisplay.js index f220c6c1..0d92b5b1 100644 --- 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) => ( {`AS${as}`} )).reduce((prev, curr) => (prev ? [prev, ', ', curr] : curr), null) @@ -46,10 +47,10 @@ const FindingDisplay = ({ incident }) => { )}
{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'}
{!!incident?.tags?.length && ( diff --git a/components/landing/HighlightBox.js b/components/landing/HighlightBox.js index 3233a081..6541fe31 100644 --- 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 ( -
+
{countryCode && (
@@ -23,9 +23,9 @@ const HighlightBox = ({ countryCode, title, text, dates, footer }) => { )} {dates}

{title}

-

+

{text} -

+
{footer}
@@ -56,10 +56,10 @@ export const FindingBox = ({ incident }) => {
{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'}
@@ -68,7 +68,7 @@ export const FindingBox = ({ incident }) => { { date: incident?.create_time && - formatLongDate(incident?.create_time, intl.locale), + formatLongDateUTC(incident?.create_time, intl.locale), }, )}
@@ -88,3 +88,30 @@ export const FindingBox = ({ incident }) => { /> ) } + +export const FindingBoxSmall = ({ incident }) => { + const intl = useIntl() + + return ( + + +
+ {incident.start_time && + formatLongDateUTC(incident.start_time, intl.locale)}{' '} + -{' '} + {incident.end_time + ? formatLongDateUTC(incident.end_time, intl.locale) + : 'ongoing'} +
+
+ } + /> + + ) +} diff --git a/lib/api.js b/lib/api.js index d1f60369..a83679b9 100644 --- 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 index 7f250333..89b292d9 100644 --- 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 index 222790db..e5010585 100644 --- 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',