diff --git a/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx b/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx index 8512745..9b4a3a1 100644 --- a/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx +++ b/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx @@ -107,41 +107,46 @@ export const EmojiVariant = ({ ownPlaceholder, }: EmojiVariantProps) => { const { settings } = useQuizStore(); - const answers = useQuizViewStore((state) => state.answers); - const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state); + const { updateAnswer, deleteAnswer, updateOwnVariant, ownVariants } = useQuizViewStore(); const theme = useTheme(); const { t } = useTranslation(); + const customEmoji = ownVariants.find((v) => v.id === variant.id)?.variant.extendedText || ""; + const onVariantClick = async (event: MouseEvent) => { event.preventDefault(); - const variantId = variant.id; + if (isMulti) { - const currentAnswer = typeof answer !== "string" ? answer || [] : []; - - return updateAnswer( - questionId, - currentAnswer.includes(variantId) - ? currentAnswer?.filter((item) => item !== variantId) - : [...currentAnswer, variantId], - variant.points || 0 - ); - } - - updateAnswer(questionId, variant.id, variant.points || 0); - - if (answer === variant.id) { - deleteAnswer(questionId); + const currentAnswer = Array.isArray(answer) ? answer : []; + const newAnswer = currentAnswer.includes(variantId) + ? currentAnswer.filter((item) => item !== variantId) + : [...currentAnswer, variantId]; + updateAnswer(questionId, newAnswer, variant.points || 0); + } else { + if (answer === variant.id) { + deleteAnswer(questionId); + } else { + updateAnswer(questionId, variant.id, variant.points || 0); + } } }; + const handleEmojiSelect = (emoji: string) => { + // We store custom emoji in ownVariants store, with a specific field to differentiate + const currentOwnAnswer = ownVariants.find((v) => v.id === variant.id)?.variant.answer || ""; + updateOwnVariant(variant.id, currentOwnAnswer, emoji); + }; + + const isSelected = isMulti ? Array.isArray(answer) && answer.includes(variant.id) : answer === variant.id; + return ( {own ? ( - + ) : ( } icon={} sx={{ position: "absolute", top: "-162px", right: "12px" }} /> ) : ( } icon={} sx={{ position: "absolute", top: "-162px", right: "12px" }} diff --git a/lib/components/ViewPublicationPage/questions/Emoji/index.tsx b/lib/components/ViewPublicationPage/questions/Emoji/index.tsx index fc51532..1dac852 100644 --- a/lib/components/ViewPublicationPage/questions/Emoji/index.tsx +++ b/lib/components/ViewPublicationPage/questions/Emoji/index.tsx @@ -13,10 +13,11 @@ type EmojiProps = { export const Emoji = ({ currentQuestion }: EmojiProps) => { const answers = useQuizViewStore((state) => state.answers); - const { updateAnswer } = useQuizViewStore((state) => state); const theme = useTheme(); const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {}; + const selectedVariantId = Array.isArray(answer) ? answer[0] : answer; + if (moment.isMoment(answer)) throw new Error("Answer is Moment in Variant question"); return ( @@ -30,14 +31,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => { answer === id)} - onChange={({ target }) => - updateAnswer( - currentQuestion.id, - currentQuestion.content.variants[Number(target.value)].answer, - currentQuestion.content.variants[Number(target.value)].points || 0 - ) - } + value={selectedVariantId} sx={{ display: "flex", flexWrap: "wrap", diff --git a/lib/stores/quizView.ts b/lib/stores/quizView.ts index db71ba7..80a43e4 100644 --- a/lib/stores/quizView.ts +++ b/lib/stores/quizView.ts @@ -30,7 +30,7 @@ interface QuizViewStore { interface QuizViewActions { updateAnswer: (questionId: string, answer: string | string[] | Moment, points: number) => void; deleteAnswer: (questionId: string) => void; - updateOwnVariant: (id: string, answer: string) => void; + updateOwnVariant: (id: string, answer: string, extendedText?: string) => void; deleteOwnVariant: (id: string) => void; setCurrentQuizStep: (step: QuizStep) => void; } @@ -90,7 +90,7 @@ export const createQuizViewStore = () => } ); }, - updateOwnVariant(id, answer) { + updateOwnVariant(id, answer, extendedText) { set( (state) => { const index = state.ownVariants.findIndex((variant) => variant.id === id); @@ -101,13 +101,16 @@ export const createQuizViewStore = () => variant: { id: id, answer, - extendedText: "", + extendedText: extendedText || "", hints: "", originalImageUrl: "", }, }); } else { state.ownVariants[index].variant.answer = answer; + if (extendedText) { + state.ownVariants[index].variant.extendedText = extendedText; + } } }, false, diff --git a/lib/utils/sendQuestionAnswer.ts b/lib/utils/sendQuestionAnswer.ts index 4b018ac..2d34023 100644 --- a/lib/utils/sendQuestionAnswer.ts +++ b/lib/utils/sendQuestionAnswer.ts @@ -50,25 +50,17 @@ export async function sendQuestionAnswer( } case "emoji": { if (question.content.multi) { - const answer = questionAnswer.answer; - const ownVariant = Array.isArray(answer) - ? ownVariants[ownVariants.findIndex((variant) => answer.some((a: string) => a === variant.id))]?.variant || "" - : ownVariants[ownVariants.findIndex((variant) => variant.id === questionAnswer.answer)]?.variant || ""; + const answer = questionAnswer.answer as string[]; + let answerString = ``; - if (moment.isMoment(answer)) throw new Error("Answer is Moment in Variant question"); - - //Оставляем только выбранные варианты const selectedVariants = question.content.variants.filter((v) => answer.includes(v.id)); - let answerString = ``; - selectedVariants.forEach((e) => { - if (e.isOwn) { - if (question.content.own && selectedVariants.some((v) => v.isOwn)) { - answerString += `\`${e.extendedText} ${ownVariant?.answer ?? ""}\`,`; - } - } else { - answerString += `\`${e.extendedText} ${e.answer ?? ""}\`,`; - } + selectedVariants.forEach((variant) => { + const ownVariantData = ownVariants.find((v) => v.id === variant.id)?.variant; + const customEmoji = ownVariantData?.extendedText || ""; + const emojiToSend = customEmoji || variant.extendedText; + const textToSend = variant.isOwn ? ownVariantData?.answer || "" : variant.answer; + answerString += `\`${emojiToSend} ${textToSend}\`,`; }); answerString = answerString.slice(0, -1); @@ -80,12 +72,27 @@ export async function sendQuestionAnswer( }); } - const variant = question.content.variants.find((v) => v.id === questionAnswer.answer); - if (!variant) throw new Error(`Cannot find variant with id ${questionAnswer.answer} in question ${question.id}`); + // Fallback for old string format for single choice + const answer = questionAnswer.answer as string; + const variant = question.content.variants.find((v) => v.id === answer); + if (!variant) { + // This can happen if the answer is not set, so we don't throw an error, just send empty + return sendAnswer({ + questionId: question.id, + body: "", + qid: quizId, + }); + } + + const ownVariantData = ownVariants.find((v) => v.id === variant.id)?.variant; + const customEmoji = ownVariantData?.extendedText || ""; + const emojiToSend = customEmoji || variant.extendedText; + const textToSend = variant.isOwn ? ownVariantData?.answer || "" : variant.answer; + const body = `${emojiToSend} ${textToSend}`.trim(); return sendAnswer({ questionId: question.id, - body: variant.extendedText + " " + variant.answer, + body: body, qid: quizId, }); }