CAS-440 - Add hook form to proposal creation

frontend/packages/client/package.json

@@ -19,6 +19,7 @@
     "date-fns": "^2.28.0",
     "draft-js": "^0.11.7",
     "draft-js-export-html": "^1.4.1",
+    "draft-js-import-html": "^1.4.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "immutable": "^4.0.0",

frontend/packages/client/src/App.sass

@@ -695,9 +695,12 @@ span[data-tooltip]
 	background-size: contain
 	border-color: transparent
 	background-repeat: no-repeat
-	
+
 @keyframes star
-	from 
-		transform: scale(0) 
+	from
+		transform: scale(0)
 	to
-		transform: scale(1)
+		transform: scale(1)
+
+.rdw-editor-toolbar
+	border-radius: 8px !important

frontend/packages/client/src/components/CommunityCreate/StepThree.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { useForm } from 'react-hook-form';
+import React, { useEffect } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
 import { useWebContext } from 'contexts/Web3';
 import { ActionButton } from 'components';
 import { ThresholdForm } from 'components/Community/ProposalThresholdEditor';
@@ -24,7 +24,7 @@ export default function StepThree({
 
   const { isValidFlowAddress } = useWebContext();
 
-  const { control, register, handleSubmit, formState } = useForm({
+  const { control, register, handleSubmit, formState, setFocus } = useForm({
     resolver: yupResolver(Schema(isValidFlowAddress)),
     defaultValues: {
       proposalThreshold,
@@ -42,6 +42,15 @@ export default function StepThree({
 
   const { isDirty, isSubmitting, errors, isValid } = formState;
 
+  const dropdownValue = useWatch({ control, name: 'contractType' });
+  const contractAddressValue = useWatch({ control, name: 'contractAddress' });
+
+  useEffect(() => {
+    if (dropdownValue && contractAddressValue === '') {
+      setFocus('contractAddress');
+    }
+  }, [dropdownValue, contractAddressValue, setFocus]);
+
   return (
     <ThresholdForm
       handleSubmit={handleSubmit(onSubmit)}

frontend/packages/client/src/components/Dropdown.js

@@ -26,7 +26,9 @@ const DropDown = forwardRef(
     const [isOpen, setIsOpen] = useState(false);
     const [innerValue, setInnerValue] = useState(defaultValue ?? { label });
 
-    const openCloseDropdown = () => {
+    const openCloseDropdown = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
       setIsOpen((status) => !status);
     };
 

frontend/packages/client/src/components/ProposalCreate/FormConfig.js

@@ -0,0 +1,76 @@
+import yup from 'helpers/validation';
+
+const formFieldsStepOne = ['name', 'strategy', 'body', 'choices', 'tabOption'];
+const formFieldsStepTwo = ['startDate', 'endDate', 'startTime', 'endTime'];
+
+const StepOneSchema = yup.object().shape({
+  name: yup
+    .string()
+    .trim()
+    .required('Please enter a proposal title')
+    .max(150, 'The maximum length for title is 128 characters'),
+  strategy: yup.string().required('Please select a strategy'),
+  body: yup.string().required('Please enter a proposal description'),
+  tabOption: yup.string().oneOf(['text-based', 'visual']),
+  choices: yup
+    .array()
+    .of(
+      yup.object({
+        value: yup.string().required('Please enter option value'),
+        choiceImgUrl: yup.string().nullable(),
+      })
+    )
+    .when('tabOption', {
+      is: 'visual',
+      then: yup.array().of(
+        yup.object({
+          value: yup.string().required('Please enter option value'),
+          choiceImgUrl: yup
+            .string()
+            .trim()
+            .url('Image option is not valid')
+            .required('Please upload an image'),
+        })
+      ),
+    })
+    .min(2, 'Please add a choice, minimun amout is two')
+    .unique('value', 'Invalid duplicated option'),
+  maxWeight: yup
+    .string()
+    .trim()
+    .matches(
+      /\s+$|^$|(^[0-9]+$)/,
+      'Proposal maximun weight must be a valid number'
+    ),
+  minBalance: yup
+    .string()
+    .trim()
+    .matches(
+      /\s+$|^$|(^[0-9]+$)/,
+      'Proposal minimun balance must be a valid number'
+    ),
+});
+
+const StepTwoSchema = yup.object().shape({
+  startDate: yup.date().required('Please provide a start date'),
+  startTime: yup.date().required('Please provide a start time'),
+  endDate: yup.date().required('Please provide an end date'),
+  endTime: yup.date().required('Please provide an end time'),
+});
+
+const initialValues = (fields = []) =>
+  Object.assign({}, ...fields.map((key) => ({ [key]: undefined })));
+
+const stepOne = {
+  Schema: StepOneSchema,
+  initialValues: initialValues(formFieldsStepOne),
+  formFields: formFieldsStepOne,
+};
+
+const stepTwo = {
+  Schema: StepTwoSchema,
+  initialValues: initialValues(formFieldsStepTwo),
+  formFields: formFieldsStepTwo,
+};
+
+export { stepOne, stepTwo };

frontend/packages/client/src/components/ProposalCreate/StepOne/ChoiceOptionCreator.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useWatch } from 'react-hook-form';
+import ImageChoices from './ImageChoices';
+import TextBasedChoices from './TextBasedChoices';
+
+export default function ChoiceOptionCreator({
+  setValue = () => {},
+  error = [],
+  register,
+  fieldName,
+  control,
+  clearErrors,
+} = {}) {
+  const tabOption = useWatch({ control, name: 'tabOption' });
+
+  // tabOption value is saved on form
+  const setTab = (option) => (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setValue('tabOption', option);
+  };
+
+  return (
+    <>
+      <div className="tabs choice-option is-toggle mt-2 mb-4">
+        <ul>
+          <li>
+            <button
+              className={`button left ${
+                tabOption === 'text-based' ? 'is-black' : 'outlined'
+              }`}
+              onClick={setTab('text-based')}
+            >
+              <span>Text-based</span>
+            </button>
+          </li>
+          <li>
+            <button
+              className={`button right ${
+                tabOption === 'visual' ? 'is-black' : 'outlined'
+              }`}
+              onClick={setTab('visual')}
+            >
+              <span>Visual</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+      {tabOption === 'text-based' && (
+        <TextBasedChoices
+          error={error}
+          register={register}
+          fieldName={fieldName}
+          control={control}
+          clearErrors={clearErrors}
+        />
+      )}
+      {tabOption === 'visual' && (
+        <ImageChoices control={control} error={error} />
+      )}
+    </>
+  );
+}

frontend/packages/client/src/components/ProposalCreate/StepOne/ImageChoiceUploader.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
-import { Loader } from 'components';
+import { FadeIn, Loader } from 'components';
 import { Bin, Upload } from 'components/Svg';
 import { useFileUploader } from 'hooks';
 import { MAX_FILE_SIZE } from 'const';
@@ -13,6 +13,13 @@ const IMAGE_STATUS = {
   toBeDeleted: 'to-be-deleted',
 };
 
+const initialState = {
+  imageUrl: null,
+  uploadStatus: null,
+  file: null,
+  text: '',
+};
+
 const UploadArea = ({ getRootProps, getInputProps, errorMessage }) => {
   return (
     <>
@@ -46,32 +53,23 @@ const UploadArea = ({ getRootProps, getInputProps, errorMessage }) => {
   );
 };
 
-// initial state when no image has been uploaded
-const initialState = {
-  imageUrl: null,
-  uploadStatus: null,
-  file: null,
-  text: '',
-};
-
 export default function ImageChoiceUploader({
   onImageUpdate,
   image: imageParam,
   letterLabel,
+  error: errorParam,
 } = {}) {
   const [errorMessage, setErrorMessage] = useState(null);
   // existing image and component receives props
+
   const { imageUrl, text } = imageParam;
-  const existingImage = {
-    imageUrl,
-    uploadStatus: IMAGE_STATUS.uploaded,
+
+  const [image, setImage] = useState({
+    imageUrl: imageUrl === '' ? null : imageUrl,
+    uploadStatus: imageUrl === '' ? null : IMAGE_STATUS.uploaded,
     file: null,
     text,
-  };
-
-  const [image, setImage] = useState(
-    imageParam.imageUrl === '' ? initialState : existingImage
-  );
+  });
 
   const { uploadFile, loading, error } = useFileUploader({
     useModalNotifications: false,
@@ -183,11 +181,22 @@ export default function ImageChoiceUploader({
   return (
     <div>
       {!image.imageUrl && (
-        <UploadArea
-          getRootProps={getRootProps}
-          getInputProps={getInputProps}
-          errorMessage={errorMessage}
-        />
+        <>
+          <UploadArea
+            getRootProps={getRootProps}
+            getInputProps={getInputProps}
+            errorMessage={errorMessage}
+          />
+          {errorParam?.choiceImgUrl?.message && (
+            <FadeIn>
+              <div className="pl-1 pt-2">
+                <p className="smaller-text has-text-red">
+                  {errorParam.choiceImgUrl.message}
+                </p>
+              </div>
+            </FadeIn>
+          )}
+        </>
       )}
       {(image?.uploadStatus === IMAGE_STATUS.notStarted ||
         image?.uploadStatus === IMAGE_STATUS.uploading) && (
@@ -253,6 +262,15 @@ export default function ImageChoiceUploader({
         }
         style={{ width: '100%' }}
       />
+      {errorParam?.value?.message && (
+        <FadeIn>
+          <div className="pl-1 pt-2">
+            <p className="smaller-text has-text-red">
+              {errorParam.value.message}
+            </p>
+          </div>
+        </FadeIn>
+      )}
     </div>
   );
 }

frontend/packages/client/src/components/ProposalCreate/StepOne/ImageChoices.js

@@ -1,28 +1,30 @@
 import React, { useEffect } from 'react';
-import { getProposalType } from 'utils';
+import { useFieldArray } from 'react-hook-form';
 import ImageChoiceUploader from './ImageChoiceUploader';
 
-const ImageChoices = ({ choices = [], onChoiceChange, initChoices } = {}) => {
+const ImageChoices = ({ error, control } = {}) => {
+  const [errorOptOne, errorOptTwo] = Array.isArray(error) ? error : [];
+
+  const {
+    fields: choices,
+    update,
+    append,
+  } = useFieldArray({
+    control,
+    name: 'choices',
+    focusAppend: true,
+  });
+
   useEffect(() => {
-    if (getProposalType(choices) !== 'image') {
-      initChoices([
-        {
-          id: 1,
-          value: '',
-          choiceImgUrl: '',
-        },
-        {
-          id: 2,
-          value: '',
-          choiceImgUrl: '',
-        },
-      ]);
+    if (choices.length < 2) {
+      const size = 2 - choices.length;
+      const toAdd = new Array(size).fill({ value: '', choiceImgUrl: '' });
+      append(toAdd);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [choices, append]);
 
   const onImageUpdate = (index) => (image) => {
-    onChoiceChange({ value: image.text, choiceImgUrl: image.imageUrl }, index);
+    update(index, { value: image.text, choiceImgUrl: image.imageUrl });
   };
 
   const [choiceA, choiceB] = choices;
@@ -44,6 +46,7 @@ const ImageChoices = ({ choices = [], onChoiceChange, initChoices } = {}) => {
             }}
             letterLabel="A"
             onImageUpdate={onImageUpdate(0)}
+            error={errorOptOne}
           />
         </div>
         <div className="column">
@@ -54,6 +57,7 @@ const ImageChoices = ({ choices = [], onChoiceChange, initChoices } = {}) => {
             }}
             letterLabel="B"
             onImageUpdate={onImageUpdate(1)}
+            error={errorOptTwo}
           />
         </div>
       </div>