Merge pull request #1470 from IFRCGo/fix/field-report-title-server-generation

project: Move field report title generation logic to server

Author: frozenhelium

.changeset/itchy-dryers-turn.md

@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Move field report / emergency title generation logic from client to server

app/env.ts

@@ -16,7 +16,7 @@ export default defineConfig({
         return value as ('production' | 'staging' | 'testing' | `alpha-${number}` | 'development' | 'APP_ENVIRONMENT_PLACEHOLDER');
     },
     APP_API_ENDPOINT: Schema.string({ format: 'url', protocol: true, tld: false }),
-    APP_ADMIN_URL: Schema.string.optional({ format: 'url', protocol: true }),
+    APP_ADMIN_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
     APP_MAPBOX_ACCESS_TOKEN: Schema.string(),
     APP_TINY_API_KEY: Schema.string(),
     APP_RISK_API_ENDPOINT: Schema.string({ format: 'url', protocol: true }),

app/src/views/FieldReportForm/ContextFields/TitlePreview/i18n.json

@@ -0,0 +1,8 @@
+{
+    "namespace": "fieldReportForm",
+    "strings": {
+        "titlePreview": "Title Preview",
+        "failedToGenerateTitle": "Failed To Generate the Field Report Title"
+    }
+}
+

app/src/views/FieldReportForm/ContextFields/TitlePreview/index.tsx

@@ -0,0 +1,70 @@
+import { useMemo } from 'react';
+import { TextOutput } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import useAlert from '#hooks/useAlert';
+import useDebouncedValue from '#hooks/useDebouncedValue';
+import { useRequest } from '#utils/restRequest';
+
+import i18n from './i18n.json';
+
+interface Props {
+    country: number;
+    disasterType: number;
+    event?: number;
+    isCovidReport?: boolean;
+    startDate?: string;
+    title: string;
+}
+
+function TitlePreview(props: Props) {
+    const {
+        country,
+        disasterType,
+        event,
+        isCovidReport,
+        startDate,
+        title,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const alert = useAlert();
+
+    const variables = useMemo(() => ({
+        countries: [country],
+        is_covid_report: isCovidReport,
+        start_date: startDate,
+        dtype: disasterType,
+        event,
+        title,
+    }), [country, isCovidReport, startDate, disasterType, event, title]);
+
+    const debouncedVariables = useDebouncedValue(variables);
+
+    const {
+        response: generateTitleResponse,
+    } = useRequest({
+        url: '/api/v2/field-report/generate-title/',
+        method: 'POST',
+        body: debouncedVariables,
+        preserveResponse: true,
+        onFailure: () => {
+            alert.show(
+                strings.failedToGenerateTitle,
+                {
+                    variant: 'danger',
+                },
+            );
+        },
+    });
+
+    return (
+        <TextOutput
+            value={generateTitleResponse?.title}
+            label={strings.titlePreview}
+            strongLabel
+        />
+    );
+}
+
+export default TitlePreview;

app/src/views/FieldReportForm/ContextFields/i18n.json

@@ -33,8 +33,8 @@
         "fieldReportFormContextTitle": "Context",
         "fieldReportFormSearchTitle": "Search for existing emergency",
         "fieldReportFormSearchDescription": "Type the name of the country you want to report on in the box above to begin the search.",
-        "fieldPrefix": "Prefix",
-        "fieldReportFormSuffix": "Suffix"
+        "originalTitle": "Original Title",
+        "generatedTitlePreview": "Title Preview"
     }
 }
 

app/src/views/FieldReportForm/ContextFields/index.tsx

@@ -2,16 +2,19 @@ import {
     useCallback,
     useMemo,
 } from 'react';
+import { useParams } from 'react-router-dom';
 import {
     BooleanInput,
     Container,
     DateInput,
     InputSection,
     RadioInput,
     TextInput,
+    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
+    isDefined,
     isNotDefined,
     isTruthyString,
 } from '@togglecorp/fujs';
@@ -36,6 +39,7 @@ import {
 } from '#utils/constants';
 
 import { type PartialFormValue } from '../common';
+import TitlePreview from './TitlePreview';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -54,10 +58,6 @@ interface Props {
     setDistrictOptions: React.Dispatch<React.SetStateAction<DistrictItem[] | null | undefined>>;
     setEventOptions: React.Dispatch<React.SetStateAction<EventItem[] | null | undefined>>;
     disabled?: boolean;
-
-    fieldReportId: string | undefined;
-    titlePrefix: string | undefined;
-    titleSuffix: string | undefined;
 }
 
 function ContextFields(props: Props) {
@@ -71,12 +71,10 @@ function ContextFields(props: Props) {
         setDistrictOptions,
         setEventOptions,
         disabled,
-        titlePrefix,
-        titleSuffix,
-        fieldReportId,
     } = props;
 
     const strings = useTranslation(i18n);
+    const { fieldReportId } = useParams<{ fieldReportId: string }>();
 
     const {
         api_field_report_status,
@@ -171,16 +169,7 @@ function ContextFields(props: Props) {
         [onValueChange, value.dtype],
     );
 
-    const prefixVisible = !fieldReportId && isTruthyString(titlePrefix);
     const summaryVisible = !value.is_covid_report;
-    const suffixVisible = !fieldReportId && isTruthyString(titleSuffix);
-
-    const preferredColumnNoForSummary = Math.max(
-        (prefixVisible ? 1 : 0)
-        + (summaryVisible ? 1 : 0)
-        + (suffixVisible ? 1 : 0),
-        1,
-    ) as 1 | 2 | 3;
 
     return (
         <Container
@@ -299,37 +288,43 @@ function ContextFields(props: Props) {
                 title={strings.summaryLabel}
                 description={strings.summaryDescription}
                 withAsteriskOnTitle
-                numPreferredColumns={preferredColumnNoForSummary}
+                numPreferredColumns={1}
             >
-                {prefixVisible && (
-                    <TextInput
-                        label={summaryVisible ? strings.fieldPrefix : strings.titleSecondaryLabel}
-                        name={undefined}
-                        value={titlePrefix}
-                        onChange={() => { }}
-                    />
-                )}
                 {summaryVisible && (
-                    <TextInput
-                        label={strings.titleSecondaryLabel}
-                        placeholder={strings.titleInputPlaceholder}
-                        name="summary"
-                        value={value.summary}
-                        maxLength={256}
-                        onChange={onValueChange}
-                        error={error?.summary}
-                        disabled={disabled}
-                        withAsterisk
-                    />
-                )}
-                {suffixVisible && (
-                    <TextInput
-                        label={strings.fieldReportFormSuffix}
-                        name={undefined}
-                        value={titleSuffix}
-                        onChange={() => { }}
-                    // readOnly
-                    />
+                    <>
+                        <TextInput
+                            label={strings.titleSecondaryLabel}
+                            placeholder={strings.titleInputPlaceholder}
+                            name="title"
+                            value={value.title}
+                            maxLength={256}
+                            onChange={onValueChange}
+                            error={error?.title}
+                            disabled={disabled}
+                            withAsterisk
+                        />
+                        {isDefined(value.country)
+                            && isDefined(value.dtype)
+                            && isDefined(value.title)
+                            && isTruthyString(value.title.trim())
+                            ? (
+                                <TitlePreview
+                                    country={value.country}
+                                    disasterType={value.dtype}
+                                    event={value.event}
+                                    isCovidReport={value.is_covid_report}
+                                    startDate={value.start_date}
+                                    title={value.title}
+                                />
+                            ) : (
+                                <TextOutput
+                                    value={value.summary}
+                                    label={isDefined(fieldReportId)
+                                        ? strings.originalTitle : strings.generatedTitlePreview}
+                                    strongLabel
+                                />
+                            )}
+                    </>
                 )}
             </InputSection>
             <InputSection

app/src/views/FieldReportForm/common.ts

@@ -152,6 +152,7 @@ const fieldsInContext = [
     'summary',
     'request_assistance',
     'ns_request_assistance',
+    'title',
 ] satisfies (keyof PartialFormValue)[];
 const fieldsInSituation = [
     'affected_pop_centres',
@@ -274,6 +275,7 @@ export const reportSchema: FormSchema = {
             country: { required: true },
             districts: { defaultValue: [] },
             dtype: { required: true },
+            title: { required: true, requiredValidation: requiredStringCondition },
             start_date: { required: true },
             request_assistance: {},
             ns_request_assistance: {},