connected apis

glific · Jan 13, 2025 · c1aaa73 · c1aaa73
1 parent 3bf3219
commit c1aaa73
Show file tree

Hide file tree

Showing 6 changed files with 212 additions and 67 deletions.
diff --git a/src/containers/Form/FormLayout.tsx b/src/containers/Form/FormLayout.tsx
@@ -216,10 +216,10 @@ export const FormLayout = ({
           // Clearning unnecessary fields
           delete payloadBody.billingId;
         }
-
+        // TODO: Change this back
         updateItem({
           variables: {
-            [idKey]: idVal,
+            copyWaPollId: idVal,
             input: payloadBody,
           },
         });

diff --git a/src/containers/WaGroups/WaPolls/WaPollOptions/WaPollOptions.tsx b/src/containers/WaGroups/WaPolls/WaPollOptions/WaPollOptions.tsx
@@ -9,6 +9,7 @@ import EmojiEmotionsOutlinedIcon from '@mui/icons-material/EmojiEmotionsOutlined
 interface WaPollOptionsProps {
   form: { field: any; errors: any; touched: any; values: any; setFieldValue: any };
   options: string[];
+  isEditing: boolean;
 }
 
 const emojiStyles = {
@@ -18,32 +19,27 @@ const emojiStyles = {
   zIndex: 100,
 };
 
-export const WaPollOptions = ({ form: { values, setFieldValue, errors, touched } }: WaPollOptionsProps) => {
+export const WaPollOptions = ({ form: { values, setFieldValue, errors, touched }, isEditing }: WaPollOptionsProps) => {
   const handleAddOption = () => {
-    setFieldValue('options', [...values.options, '']);
+    setFieldValue('options', [...values.options, { name: '', id: values.options.length }]);
   };
 
-  const handleInput = (value: any, ind: any) => {
-    const newOptions = [...values.options];
-    newOptions[ind] = value;
+  const handleInput = (value: any, id: any) => {
+    const newOptions = values.options.map((option: any) => (option.id === id ? { ...option, name: value } : option));
     setFieldValue('options', newOptions);
   };
 
-  const handleEmojiAdd = (emoji: any, ind: number) => {
-    console.log(emoji);
+  const handleEmojiAdd = (emoji: any, id: number) => {
+    const newOptions = values.options.map((option: any) =>
+      option.id === id ? { ...option, name: option.name + emoji.native } : option
+    );
 
-    const newOptions = [...values.options];
-    const value = newOptions[ind] + emoji?.native;
-    newOptions[ind] = value;
     setFieldValue('options', newOptions);
   };
 
-  const handleRemoveClick = (index: any) => {
-    const newOptions = [...values.options];
-    setFieldValue(
-      'options',
-      newOptions.filter((_, ind: any) => ind !== index)
-    );
+  const handleRemoveClick = (id: any) => {
+    const newOptions = values.options.filter((option: any) => option.id !== id);
+    setFieldValue('options', newOptions);
   };
 
   return (
@@ -54,18 +50,22 @@ export const WaPollOptions = ({ form: { values, setFieldValue, errors, touched }
       <div className={styles.Options}>
         {values.options.map((option: any, ind: number) => (
           <PollOption
-            key={ind}
-            ind={ind}
+            key={option.id}
             option={option}
             options={values.options}
             handleInput={handleInput}
             handleRemoveClick={handleRemoveClick}
             handleEmojiAdd={handleEmojiAdd}
             errors={errors['options']}
             touched={touched['options']}
+            isEditing={isEditing}
           />
         ))}
-        {values.options.length < 10 && (
+        <FormHelperText error={true}>
+          {errors['options'] && typeof errors['options'] === 'string' && errors['options']}
+        </FormHelperText>
+
+        {values.options.length < 10 && !isEditing && (
           <Button variant="outlined" onClick={handleAddOption}>
             Add Option
           </Button>
@@ -76,41 +76,42 @@ export const WaPollOptions = ({ form: { values, setFieldValue, errors, touched }
 };
 
 interface PollOptionProps {
-  option: string;
-  ind: number;
+  option: any;
   options: any;
   errors: any;
   touched: any;
   handleInput: any;
   handleRemoveClick: any;
   handleEmojiAdd: any;
+  isEditing: boolean;
 }
 
 const PollOption = ({
   option,
-  ind,
   options,
   errors,
   touched,
   handleInput,
   handleRemoveClick,
   handleEmojiAdd,
+  isEditing,
 }: PollOptionProps) => {
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-  const hasError = errors && touched && errors[ind] && touched[ind];
+  const hasError = errors && typeof errors !== 'string' && touched && errors[option.id] && touched[option.id];
 
   return (
-    <FormControl key={ind} fullWidth error={hasError} color={hasError ? 'error' : 'primary'}>
+    <FormControl fullWidth error={hasError} color={hasError ? 'error' : 'primary'}>
       <div className={styles.OptionField}>
         <TextField
           className={styles.TextField}
           variant="outlined"
-          placeholder={`Option ${ind + 1}`}
-          value={option}
-          onChange={(event) => handleInput(event.target.value, ind)}
+          placeholder={`Option ${option.id + 1}`}
+          value={option?.name}
+          onChange={(event) => handleInput(event.target.value, option?.id)}
+          disabled={isEditing}
           slotProps={{
             input: {
-              endAdornment: (
+              endAdornment: !isEditing && (
                 <ClickAwayListener onClickAway={() => setShowEmojiPicker(false)}>
                   <IconButton
                     data-testid="emoji-picker"
@@ -130,17 +131,17 @@ const PollOption = ({
 
         {options.length !== 2 && (
           <CrossIcon
-            className={styles.RemoveIcon}
+            className={isEditing ? styles.Disabled : styles.RemoveIcon}
             title="Remove"
             data-testid="cross-icon"
-            onClick={() => handleRemoveClick(ind)}
+            onClick={() => handleRemoveClick(option.id)}
           />
         )}
         {showEmojiPicker && (
-          <EmojiPicker onEmojiSelect={(emoji: any) => handleEmojiAdd(emoji, ind)} displayStyle={emojiStyles} />
+          <EmojiPicker onEmojiSelect={(emoji: any) => handleEmojiAdd(emoji, option.id)} displayStyle={emojiStyles} />
         )}
       </div>
-      {hasError ? <FormHelperText>{errors[ind]}</FormHelperText> : null}
+      {hasError ? <FormHelperText>{errors[option.id]}</FormHelperText> : null}
     </FormControl>
   );
 };
diff --git a/src/containers/WaGroups/WaPolls/WaPolls.tsx b/src/containers/WaGroups/WaPolls/WaPolls.tsx
@@ -1,57 +1,110 @@
 import { Typography } from '@mui/material';
 import { Input } from 'components/UI/Form/Input/Input';
 import { FormLayout } from 'containers/Form/FormLayout';
-import { CREATE_COLLECTION, DELETE_COLLECTION, UPDATE_COLLECTION } from 'graphql/mutations/Collection';
-import { GET_COLLECTION } from 'graphql/queries/Collection';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
 import PollsIcon from 'assets/images/Polls.svg?react';
 import { Checkbox } from 'components/UI/Form/Checkbox/Checkbox';
 import styles from './WaPolls.module.css';
 import { WaPollOptions } from './WaPollOptions/WaPollOptions';
+import { COPY_POLL, CREATE_POLL, DELETE_POLL } from 'graphql/mutations/WaPolls';
+import { GET_POLL } from 'graphql/queries/WaPolls';
+import { useLocation, useParams } from 'react-router';
+
 const queries = {
-  getItemQuery: GET_COLLECTION,
-  createItemQuery: CREATE_COLLECTION,
-  updateItemQuery: UPDATE_COLLECTION,
-  deleteItemQuery: DELETE_COLLECTION,
+  getItemQuery: GET_POLL,
+  createItemQuery: CREATE_POLL,
+  deleteItemQuery: DELETE_POLL,
+  updateItemQuery: COPY_POLL,
 };
 const pollsIcon = <PollsIcon />;
+let idType = 'waPollId';
 
 export const WaPolls = () => {
-  const [title, setTitle] = useState<string>('');
+  const [label, setLabel] = useState<string>('');
   const [content, setContent] = useState<string>('');
-  const [options, setOptions] = useState(['', '']);
+  const [options, setOptions] = useState([
+    { id: 0, name: '' },
+    { id: 1, name: '' },
+  ]);
   const [allowMultiple, setAllowMultiple] = useState<boolean>(false);
-
   const { t } = useTranslation();
+  const params = useParams();
+  const location = useLocation();
+
+  let isEditing = false;
+  let isCopyState = false;
+  if (params.id) {
+    isEditing = true;
+  }
+  if (location.state === 'copy') {
+    console.log('copy state');
+    isCopyState = true;
+    isEditing = false;
+  }
+
   const states = {
-    title,
+    label,
     content,
     options,
     allowMultiple,
   };
 
   const setPayload = (payload: any) => {
-    console.log(payload);
-    return payload;
+    let payloadCopy = { ...payload };
+    const poll_content = JSON.stringify({
+      options: payload.options,
+      text: payload.content,
+    });
+    payloadCopy = {
+      ...payloadCopy,
+      poll_content,
+      allow_multiple_answer: payload.allowMultiple,
+    };
+    delete payloadCopy.options;
+    delete payloadCopy.content;
+    delete payloadCopy.allowMultiple;
+
+    if (isCopyState) {
+      idType = 'copyWaPollId';
+    }
+    return payloadCopy;
+  };
+  const setStates = (states: any) => {
+    const { label, pollContent, allowMultipleAnswer } = states;
+    const { text, options } = JSON.parse(pollContent);
+    let labelValue = label;
+    if (isCopyState) {
+      labelValue = `Copy of ${label}`;
+    }
+
+    setLabel(labelValue);
+    setAllowMultiple(allowMultipleAnswer);
+    setContent(text);
+    setOptions(options);
   };
-  const setStates = (payload: any) => {};
 
   const FormSchema = Yup.object().shape({
-    title: Yup.string().required(t('Title is required.')).max(50, t('Title is too long.')),
+    label: Yup.string().required(t('Title is required.')).max(50, t('Title is too long.')),
     content: Yup.string().required('Content is required.').max(150, 'Content is too long.'),
-    options: Yup.array().of(Yup.string().required('Required')).min(2, 'At least two options are required'),
+    options: Yup.array()
+      .of(Yup.object().shape({ name: Yup.string().required('Option is required.') }))
+      .test('unique-values', 'Values must be unique', (array: any) => {
+        const values = array.map((item: any) => item.name);
+        return new Set(values).size === values.length;
+      }),
   });
 
   const dialogMessage = "You won't be able to use this poll again.";
 
   const formFields = [
     {
       component: Input,
-      name: 'title',
+      name: 'label',
       type: 'text',
       label: t('Title'),
+      disabled: isEditing,
     },
 
     {
@@ -61,10 +114,12 @@ export const WaPolls = () => {
       label: 'Content',
       textArea: true,
       rows: 6,
+      disabled: isEditing,
     },
     {
       component: WaPollOptions,
       name: 'options',
+      isEditing,
     },
     {
       component: Checkbox,
@@ -75,6 +130,7 @@ export const WaPolls = () => {
         </Typography>
       ),
       darkCheckbox: true,
+      disabled: isEditing,
     },
   ];
 
@@ -86,13 +142,15 @@ export const WaPolls = () => {
       languageSupport={false}
       setStates={setStates}
       validationSchema={FormSchema}
-      listItemName="collection"
+      listItemName="waPoll"
       dialogMessage={dialogMessage}
       formFields={formFields}
       redirectionLink={'group/polls'}
-      listItem="polls"
+      listItem="waPoll"
       icon={pollsIcon}
       backLinkButton={`/group/polls`}
+      entityId={params.id}
+      idType={idType}
       {...queries}
     />
   );