Skip to content

Commit

Permalink
Merged in feature/GFW-1677-fix-change-lang-on-templates (pull request…
Browse files Browse the repository at this point in the history
… #494)

Urgent: Handle changing lang on templates (medium)

Approved-by: Milad Dehghani
Approved-by: Ri
  • Loading branch information
kev2480 committed Feb 10, 2023
2 parents 58ad506 + e2038a6 commit 8f1fba3
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 8 deletions.
25 changes: 23 additions & 2 deletions src/pages/template-edit/TemplateEdit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
usePatchV3GfwTemplatesTemplateId,
usePatchV3TemplatesTemplateIdStatus
} from "generated/core/coreComponents";
import { ChildQuestionModel } from "generated/core/coreSchemas";
import { useInvalidateGetTemplates } from "hooks/querys/templates/useGetTemplates";
import { useAccessToken } from "hooks/useAccessToken";
import { useHistory, useParams } from "react-router-dom";
Expand All @@ -27,13 +28,33 @@ export const getFormBody = (data: FormFields) => {
}

if (question.type === "audio") {
const currentChild = question.childQuestions || [];
const currentChild = question.childQuestions || ([] as ChildQuestionModel[]);
// @ts-ignore
const hasAudioIndex = currentChild?.findIndex?.((item: any) => item?.name?.includes?.("-description"));
// @ts-ignore
if (currentChild.length === 0) {
const newAudioQuestion = { ...AUDIO_CHILD_QUESTION, name: `${question.name}-description` };
const label = AUDIO_CHILD_QUESTION.label;
label[data.defaultLanguage as keyof typeof label] = "Description";

const newAudioQuestion = { ...AUDIO_CHILD_QUESTION, label, name: `${question.name}-description` };
// @ts-ignore
question.childQuestions = [newAudioQuestion];
}

// @ts-ignore
if (currentChild?.[hasAudioIndex]) {
// @ts-ignore
const q = currentChild[hasAudioIndex];

const label = q.label;
label[data.defaultLanguage as keyof typeof label] = "Description";

// @ts-ignore
currentChild[hasAudioIndex] = {
...q,
label
};
}
}
});
return newData;
Expand Down
36 changes: 31 additions & 5 deletions src/pages/template-edit/components/TemplateForm.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Input from "components/ui/Form/Input";
import { FormProvider, useForm } from "react-hook-form";
import { FormProvider, useForm, useWatch } from "react-hook-form";
import { FormattedMessage, useIntl } from "react-intl";
import { FC } from "react";
import { FC, useEffect, useState } from "react";
import { TemplateModel } from "generated/core/coreSchemas";
import { LOCALES_MAPPED_TO_SELECT } from "constants/locales";
import Select from "components/ui/Form/Select";
Expand Down Expand Up @@ -103,15 +103,41 @@ const TemplateForm: FC<IParams> = ({ template, backLink = "", onSubmit }) => {
const formHook = useForm<FormFields>({ defaultValues: template, resolver: yupResolver(templateSchema) });
const { httpAuthHeader } = useAccessToken();
const { data: areasData } = useGetV3GfwAreasUser({ headers: httpAuthHeader });
const [previousDefaultLang, setPreviousDefaultLang] = useState(template?.defaultLanguage || "en");

const {
register,
handleSubmit,
setValue,
getValues,
control,
formState: { isDirty, isSubmitting, errors }
} = formHook;

const defaultLanguage = useWatch({ control, name: "defaultLanguage" });
const name = useWatch({ control, name: "name" });

useEffect(() => {
if (defaultLanguage) {
const newLangs = [defaultLanguage];
setValue("languages", newLangs, { shouldDirty: true });

const newName: any = {};

newName[defaultLanguage as keyof typeof name] = name?.[previousDefaultLang as keyof typeof name];

if (!name?.[defaultLanguage as keyof typeof name]) {
//@ts-ignore
setValue(`name.${defaultLanguage}`, "", { shouldDirty: true });
}

setValue(`name`, newName, { shouldDirty: true });

setPreviousDefaultLang(defaultLanguage);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultLanguage]);

const handleAddQuestion = (e: React.MouseEvent<HTMLButtonElement>) => {
const questions = getValues("questions") || [];
const defaultLanguage = getValues("defaultLanguage") || "en";
Expand Down Expand Up @@ -158,17 +184,17 @@ const TemplateForm: FC<IParams> = ({ template, backLink = "", onSubmit }) => {
<Input
id="name"
// @ts-ignore - todo how to figure out variable register
registered={register(`name.${template?.defaultLanguage}`)}
registered={register(`name.${defaultLanguage}`)}
htmlInputProps={{
type: "text",
label: intl.formatMessage({ id: "template.edit.name" }),
placeholder: intl.formatMessage({ id: "template.edit.name.placeholder" })
}}
key={template?.defaultLanguage}
key={defaultLanguage}
alternateLabelStyle
largeLabel
// @ts-ignore
error={errors.name && errors.name[`${template?.defaultLanguage}`]}
error={errors.name && errors.name[`${defaultLanguage}`]}
/>
<Select
id="areas"
Expand Down
31 changes: 30 additions & 1 deletion src/pages/template-edit/components/TemplateQuestion.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Select from "components/ui/Form/Select";
import Toggle from "components/ui/Form/Toggle";
import { CHILD_QUESTION, CONDITIONAL_QUESTION_TYPES, QUESTION_TYPES } from "constants/templates";
import { QuestionModel } from "generated/core/coreSchemas";
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import { useFormContext, useWatch } from "react-hook-form";
import { FormattedMessage, useIntl } from "react-intl";
import { FormFields } from "./TemplateForm";
Expand All @@ -25,6 +25,7 @@ type TemplateQuestionProps = {
type valuesType = { [key: string]: { label: string; value: number }[] };

const TemplateQuestion = ({ question, defaultLanguage = "", onDelete, index }: TemplateQuestionProps) => {
const [previousDefaultLang, setPreviousDefaultLang] = useState(defaultLanguage);
const formattedQuestionName = `${question.name.replace(/-/g, " ")}:`;
//@ts-ignore todo figure out key issue here.
const responseOptions = question.values as valuesType;
Expand Down Expand Up @@ -156,6 +157,34 @@ const TemplateQuestion = ({ question, defaultLanguage = "", onDelete, index }: T
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isConditional]);

useEffect(() => {
// Remove old lang data
const currentQuestionTitle = getValues(`questions.${index}.label`);

const newTitle: any = {};

newTitle[defaultLanguage as keyof typeof currentQuestionTitle] =
currentQuestionTitle[previousDefaultLang as keyof typeof currentQuestionTitle];

setValue(`questions.${index}.label`, newTitle, { shouldDirty: true });

// Check values (select etc..)
const currentQuestionValues = getValues(`questions.${index}.values`);

if (currentQuestionValues?.[previousDefaultLang as keyof typeof currentQuestionValues]) {
const newValues: any = {};

newValues[defaultLanguage as keyof typeof currentQuestionValues] =
currentQuestionValues[previousDefaultLang as keyof typeof currentQuestionValues];

setValue(`questions.${index}.values`, newValues, { shouldDirty: true });
}

setPreviousDefaultLang(defaultLanguage);

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultLanguage]);

return (
<>
<HeaderCard className="my-10">
Expand Down

0 comments on commit 8f1fba3

Please sign in to comment.