ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Poll: Quiz creation fixes (#2073)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-10-17 17:34:56 +02:00
parent 24890b17bb
commit 65c4015dcc
2 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/middle/composer/PollModal.scss
View File

@ -73,7 +73,7 @@
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
.error { .poll-error {
font-size: smaller; font-size: smaller;
color: var(--color-error); color: var(--color-error);
margin: -1rem 0 1rem 0.25rem; margin: -1rem 0 1rem 0.25rem;

28
src/components/middle/composer/PollModal.tsx
View File

@ -48,7 +48,7 @@ const PollModal: FC<OwnProps> = ({
const [isMultipleAnswers, setIsMultipleAnswers] = useState(false); const [isMultipleAnswers, setIsMultipleAnswers] = useState(false);
const [isQuizMode, setIsQuizMode] = useState(isQuiz || false); const [isQuizMode, setIsQuizMode] = useState(isQuiz || false);
const [solution, setSolution] = useState<string>(''); const [solution, setSolution] = useState<string>('');
const [correctOption, setCorrectOption] = useState<string>(); const [correctOption, setCorrectOption] = useState<number | undefined>();
const [hasErrors, setHasErrors] = useState<boolean>(false); const [hasErrors, setHasErrors] = useState<boolean>(false);
const lang = useLang(); const lang = useLang();
@ -68,7 +68,7 @@ const PollModal: FC<OwnProps> = ({
setIsMultipleAnswers(false); setIsMultipleAnswers(false);
setIsQuizMode(isQuiz || false); setIsQuizMode(isQuiz || false);
setSolution(''); setSolution('');
setCorrectOption(''); setCorrectOption(undefined);
setHasErrors(false); setHasErrors(false);
} }
}, [isQuiz, isOpen]); }, [isQuiz, isOpen]);
@ -120,7 +120,7 @@ const PollModal: FC<OwnProps> = ({
return; return;
} }
if (isQuizMode && (!correctOption || !optionsTrimmed[Number(correctOption)])) { if (isQuizMode && (correctOption === undefined || !optionsTrimmed[correctOption])) {
setHasErrors(true); setHasErrors(true);
return; return;
} }
@ -129,7 +129,7 @@ const PollModal: FC<OwnProps> = ({
.map((text, index) => ({ .map((text, index) => ({
text: text.trim(), text: text.trim(),
option: String(index), option: String(index),
...(String(index) === correctOption && { correct: true }), ...(index === correctOption && { correct: true }),
})); }));
const payload: ApiNewPoll = { const payload: ApiNewPoll = {
@ -146,7 +146,7 @@ const PollModal: FC<OwnProps> = ({
const { text, entities } = (solution && parseMessageInput(solution.substring(0, MAX_SOLUTION_LENGTH))) || {}; const { text, entities } = (solution && parseMessageInput(solution.substring(0, MAX_SOLUTION_LENGTH))) || {};
payload.quiz = { payload.quiz = {
correctAnswers: [correctOption], correctAnswers: [String(correctOption)],
...(text && { solution: text }), ...(text && { solution: text }),
...(entities && { solutionEntities: entities }), ...(entities && { solutionEntities: entities }),
}; };
@ -180,6 +180,15 @@ const PollModal: FC<OwnProps> = ({
const newOptions = [...options]; const newOptions = [...options];
newOptions.splice(index, 1); newOptions.splice(index, 1);
setOptions(newOptions); setOptions(newOptions);
if (correctOption !== undefined) {
if (correctOption === index) {
setCorrectOption(undefined);
} else if (index < correctOption) {
setCorrectOption(correctOption - 1);
}
}
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (!optionsListRef.current) { if (!optionsListRef.current) {
return; return;
@ -187,10 +196,10 @@ const PollModal: FC<OwnProps> = ({
optionsListRef.current.classList.toggle('overflown', optionsListRef.current.scrollHeight > MAX_LIST_HEIGHT); optionsListRef.current.classList.toggle('overflown', optionsListRef.current.scrollHeight > MAX_LIST_HEIGHT);
}); });
}, [options]); }, [correctOption, options]);
const handleCorrectOptionChange = useCallback((newValue: string) => { const handleCorrectOptionChange = useCallback((newValue: string) => {
setCorrectOption(newValue); setCorrectOption(Number(newValue));
}, [setCorrectOption]); }, [setCorrectOption]);
const handleIsAnonymousChange = useCallback((e: ChangeEvent<HTMLInputElement>) => { const handleIsAnonymousChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
@ -288,8 +297,8 @@ const PollModal: FC<OwnProps> = ({
function renderQuizNoOptionError() { function renderQuizNoOptionError() {
const optionsTrimmed = options.map((o) => o.trim()).filter((o) => o.length); const optionsTrimmed = options.map((o) => o.trim()).filter((o) => o.length);
return isQuizMode && (!correctOption || !optionsTrimmed[Number(correctOption)]) && ( return isQuizMode && (correctOption === undefined || !optionsTrimmed[correctOption]) && (
<p className="error">{lang('lng_polls_choose_correct')}</p> <p className="poll-error">{lang('lng_polls_choose_correct')}</p>
); );
} }
@ -313,6 +322,7 @@ const PollModal: FC<OwnProps> = ({
<RadioGroup <RadioGroup
name="correctOption" name="correctOption"
options={renderRadioOptions()} options={renderRadioOptions()}
selected={String(correctOption)}
onChange={handleCorrectOptionChange} onChange={handleCorrectOptionChange}
/> />
) : ( ) : (