Add themes input to findings (#965)

ooni · Oct 2, 2024 · 02fe64a · 02fe64a
1 parent ff9b7ea
commit 02fe64a
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 18 deletions.
diff --git a/components/findings/FindingDisplay.js b/components/findings/FindingDisplay.js
@@ -54,11 +54,13 @@ const FindingDisplay = ({ incident }) => {
       </div>
       {!!incident?.tags?.length && (
         <div className="flex mb-4 flex-wrap gap-2">
-          {incident.tags.map((tag) => (
-            <div key={tag}>
-              <Badge>{tag}</Badge>
-            </div>
-          ))}
+          {incident.tags
+            .filter((t) => !t.includes('theme-'))
+            .map((tag) => (
+              <div key={tag}>
+                <Badge>{tag}</Badge>
+              </div>
+            ))}
         </div>
       )}
       <div className="text-gray-600 mb-4">

diff --git a/components/findings/Form.js b/components/findings/Form.js
@@ -12,7 +12,7 @@ import {
   MultiSelectCreatable,
   Textarea,
 } from 'ooni-components'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 import { useIntl } from 'react-intl'
 import { localisedCountries } from 'utils/i18nCountries'
@@ -66,7 +66,7 @@ const schema = yup.object({
   ASNs: yup.array().test({
     name: 'ASNsError',
     message: 'Only numeric values allowed',
-    test: (val) => val.every((v) => !isNaN(v.value)),
+    test: (val) => val.every((v) => !Number.isNaN(v.value)),
   }),
   start_time: yup.string().required(),
   end_time: yup
@@ -95,9 +95,8 @@ const schema = yup.object({
             .map((obj) => obj.messages.map((m) => m.message).join(', '))
             .join(', ')
           return context.createError({ message, path: 'text' })
-        } else {
-          return true
         }
+        return true
       },
     }),
 })
@@ -106,6 +105,31 @@ const Form = ({ defaultValues, onSubmit }) => {
   const intl = useIntl()
   const { user } = useUser()
 
+  const themeOptions = useMemo(() => [
+    {
+      value: 'theme-human_rights',
+      label: intl.formatMessage({ id: 'Findings.Themes.Options.HumanRights' }),
+    },
+    {
+      value: 'theme-social_media',
+      label: intl.formatMessage({ id: 'Findings.Themes.Options.SocialMedia' }),
+    },
+    {
+      value: 'theme-im',
+      label: intl.formatMessage({ id: 'Findings.Themes.Options.IM' }),
+    },
+    {
+      value: 'theme-circumvention',
+      label: intl.formatMessage({
+        id: 'Findings.Themes.Options.Circumvention',
+      }),
+    },
+    {
+      value: 'theme-news_media',
+      label: intl.formatMessage({ id: 'Findings.Themes.Options.NewsMedia' }),
+    },
+  ])
+
   defaultValues = {
     ...defaultValues,
     CCs: defaultValues.CCs.map((cc) => {
@@ -121,7 +145,15 @@ const Form = ({ defaultValues, onSubmit }) => {
       label: testNames[tn] ? intl.formatMessage({ id: testNames[tn].id }) : tn,
       value: tn,
     })),
-    tags: defaultValues.tags.map((t) => ({ label: t, value: t })),
+    tags: defaultValues.tags
+      .filter((t) => !t.includes('theme-'))
+      .map((t) => ({ label: t, value: t })),
+    themes: defaultValues.tags
+      .filter((t) => t.includes('theme-'))
+      .map((tn) => ({
+        label: themeOptions.find((t) => t.value === tn)?.label || tn,
+        value: tn,
+      })),
     ASNs: defaultValues.ASNs.map((as) => ({ label: as, value: as })),
     domains: defaultValues.domains.map((d) => ({ label: d, value: d })),
   }
@@ -165,6 +197,7 @@ const Form = ({ defaultValues, onSubmit }) => {
 
   const submit = (incident) => {
     console.log(incident)
+    const tags = [...incident.tags, ...incident.themes]
     return onSubmit({
       ...incident,
       start_time: `${incident.start_time}T00:00:00Z`,
@@ -175,7 +208,7 @@ const Form = ({ defaultValues, onSubmit }) => {
         ? incident.test_names.map((test_name) => test_name.value)
         : [],
       CCs: incident.CCs.length ? incident.CCs.map((cc) => cc.value) : [],
-      tags: incident.tags.length ? incident.tags.map((t) => t.value) : [],
+      tags: tags.length ? tags.map((t) => t.value) : [],
       ASNs: incident.ASNs.length
         ? incident.ASNs.map((as) => Number(as.value))
         : [],
@@ -309,6 +342,18 @@ const Form = ({ defaultValues, onSubmit }) => {
             />
           )}
         />
+        <Controller
+          control={control}
+          name="themes"
+          render={({ field }) => (
+            <MultiSelect
+              className="mb-4"
+              {...field}
+              label={intl.formatMessage({ id: 'Findings.Form.Themes.Label' })}
+              options={themeOptions}
+            />
+          )}
+        />
         <Controller
           control={control}
           name="test_names"

diff --git a/pages/404.js b/pages/404.js
@@ -25,7 +25,7 @@ const Custom404 = () => {
                 defaultMessage="We could not find the content you were looking for. Maybe try {measurementLink} or look at {homePageLink}."
                 values={{
                   measurementLink: (
-                    <FormattedMessage id="Error.404.MeasurmentLinkText">
+                    <FormattedMessage id="Error.404.MeasurementLinkText">
                       {(message) => <Link href="/countries">{message}</Link>}
                     </FormattedMessage>
                   ),

diff --git a/pages/findings/create.js b/pages/findings/create.js
@@ -20,6 +20,7 @@ const defaultValues = {
   start_time: dayjs().startOf('date').format('YYYY-MM-DDTHH:mm'),
   end_time: '',
   tags: [],
+  themes: [],
   CCs: [],
   ASNs: [],
   test_names: [],

diff --git a/pages/findings/edit/[id].js b/pages/findings/edit/[id].js
@@ -1,6 +1,5 @@
 import Form from 'components/findings/Form'
 import useUser from 'hooks/useUser'
-import Head from 'next/head'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useMemo } from 'react'
@@ -60,14 +59,11 @@ const EditReport = () => {
 
   return (
     <>
-      {/* <Head>
-        <title></title>
-      </Head> */}
       <div className="container">
         <div className="flex justify-between items-center">
           <h1>{intl.formatMessage({ id: 'Findings.Edit.Title' })}</h1>
           <Link href="/findings/dashboard">
-            <button type="button" className="btn btn-pimary-hollow">
+            <button type="button" className="btn btn-primary-hollow">
               {intl.formatMessage({ id: 'Findings.Dashboard.ShortTitle' })}
             </button>
           </Link>

diff --git a/pages/findings/index.js b/pages/findings/index.js
@@ -86,7 +86,7 @@ const Index = () => {
       </Head> */}
       <div className="container">
         {user?.role === 'admin' && (
-          <div className="mt-4 justify-end">
+          <div className="mt-4 flex justify-end">
             <Link href="/findings/dashboard">
               <button className="btn btn-primary-hollow" type="button">
                 {intl.formatMessage({ id: 'Findings.Dashboard.ShortTitle' })}

diff --git a/public/static/lang/en.json b/public/static/lang/en.json
@@ -659,6 +659,12 @@
   "Findings.Form.Author.Label": "Author*",
   "Findings.Form.EmailAddress.Label": "Email Address*",
   "Findings.Form.Published.Label": "Published",
+  "Findings.Form.Themes.Label": "Themes",
+  "Findings.Themes.Options.SocialMedia": "Social Media",
+  "Findings.Themes.Options.IM": "Instant Messaging",
+  "Findings.Themes.Options.NewsMedia": "News Media",
+  "Findings.Themes.Options.HumanRights": "Human Rights",
+  "Findings.Themes.Options.Circumvention": "Circumvention",
   "Findings.LoginRequiredModal.Title": "Email address is missing. Please log in again to be able to create a censorship finding.",
   "Findings.Display.NotFound": "Censorship Finding not found",
   "Findings.Display.CreatedByOn": "published by {reportedBy} on {formattedDate}",