WSTEAM1-851 - UGC form state management (#11425)

.storybook/main.js

@@ -64,6 +64,13 @@ module.exports = {
       }),
     );
 
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      fs: false,
+      stream: false,
+      zlib: false,
+    };
+
     config.resolve.extensions.push('.js', '.jsx', '.ts', '.tsx'); // resolves `import '../Foo'` to `../Foo/index.jsx`
     config.resolve.alias = {
       ...config.resolve.alias,

package.json

@@ -187,6 +187,7 @@
     "@types/react-router-dom": "5.3.3",
     "@types/testing-library__react": "10.2.0",
     "@types/url-parse": "^1.4.8",
+    "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "5.59.6",
     "@typescript-eslint/parser": "5.59.6",
     "amphtml-validator": "1.0.35",

ws-nextjs-app/pages/[service]/send/[id]/Form/index.tsx

@@ -0,0 +1,37 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { useFormContext } from '../FormContext';
+import { Field } from '../types';
+import FormField from '../FormField';
+import styles from './styles';
+import Submit from '../SubmitButton';
+
+export default function Form({ fields }: { fields: Field[] }) {
+  const { handleSubmit, submissionError } = useFormContext();
+
+  const formFields = fields?.map(({ id, label, type, htmlType, textArea }) => (
+    <FormField
+      key={id}
+      id={id}
+      label={label}
+      type={type}
+      htmlType={htmlType}
+      textArea={textArea}
+    />
+  ));
+
+  return (
+    <>
+      <form onSubmit={handleSubmit}>
+        {formFields}
+        <Submit />
+      </form>
+      {submissionError && (
+        <div css={styles.submissionError}>
+          {`${submissionError.message} - ${submissionError.status}`}
+        </div>
+      )}
+    </>
+  );
+}

ws-nextjs-app/pages/[service]/send/[id]/Form/styles.ts

@@ -0,0 +1,12 @@
+import { css } from '@emotion/react';
+
+export default {
+  submissionError: () =>
+    css({
+      color: 'black',
+      fontFamily: 'sans-serif',
+      backgroundColor: 'pink',
+      padding: '1rem',
+      margin: '1rem 0',
+    }),
+};

ws-nextjs-app/pages/[service]/send/[id]/FormContext/index.tsx

@@ -0,0 +1,104 @@
+import React, {
+  createContext,
+  FormEvent,
+  PropsWithChildren,
+  useContext,
+  useState,
+} from 'react';
+import { FetchError } from '#app/models/types/fetch';
+import { v4 as uuid } from 'uuid';
+
+import { useRouter } from 'next/router';
+import { OK } from '#app/lib/statusCodes.const';
+import {
+  Field,
+  OnChangeHandler,
+  OnChangeInputName,
+  OnChangeInputValue,
+} from '../types';
+
+type SubmissionError = {
+  message: string;
+  status: number;
+} | null;
+
+type ContextProps = {
+  formState: Record<OnChangeInputName, OnChangeInputValue | null>;
+  handleChange: OnChangeHandler;
+  handleSubmit: (event: FormEvent) => Promise<void>;
+  submissionError?: SubmissionError;
+};
+
+const FormContext = createContext({} as ContextProps);
+
+const getInitialFormState = (
+  fields: Field[],
+): Record<OnChangeInputName, OnChangeInputValue | null> =>
+  fields?.reduce((acc, field) => ({ ...acc, [field.id]: null }), {});
+
+export const FormContextProvider = ({
+  fields,
+  children,
+}: PropsWithChildren<{ fields: Field[] }>) => {
+  const {
+    query: { id },
+  } = useRouter();
+
+  const [formState, setFormState] = useState(getInitialFormState(fields));
+  const [submissionError, setSubmissionError] = useState<SubmissionError>(null);
+
+  const handleChange = (name: OnChangeInputName, value: OnChangeInputValue) => {
+    setFormState(prevState => {
+      return { ...prevState, [name]: value };
+    });
+  };
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+
+    // Reset error state
+    setSubmissionError(null);
+
+    const formData = new FormData();
+
+    // TODO: This is a mock data, we should use the formState instead
+    Object.entries({ surname: 'BBC TEST NAME' }).forEach(([key, value]) => {
+      formData.append(key, value);
+    });
+
+    try {
+      const url = `https://www.bbc.com/ugc/send/${id}?said=${uuid()}`;
+
+      const req = new XMLHttpRequest();
+      req.open('POST', url, true);
+
+      req.onreadystatechange = () => {
+        if (req.readyState === XMLHttpRequest.DONE) {
+          if (req.status !== OK) {
+            setSubmissionError({
+              message: req.responseText,
+              status: req.status,
+            });
+          }
+        }
+      };
+
+      req.send(formData);
+    } catch (error) {
+      const { message, status } = error as FetchError;
+      setSubmissionError({ message, status });
+    }
+  };
+
+  return (
+    <FormContext.Provider
+      value={{ formState, handleChange, handleSubmit, submissionError }}
+    >
+      {children}
+    </FormContext.Provider>
+  );
+};
+
+export function useFormContext() {
+  return useContext(FormContext);
+}