devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated part of the correction display for Writing

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-01-16 23:00:58 +00:00
parent d0b0dfb16f
commit f85a1f5601
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Solutions/Writing.tsx
View File

@@ -12,19 +12,26 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const formatSolution = (solution: string, errors: {correction: string | null; misspelled: string}[]) => { const formatSolution = (solution: string, errors: {correction: string | null; misspelled: string}[]) => {
const errorRegex = new RegExp(errors.map((x) => `(${x.misspelled})`).join("|")); const misspelled = errors.map((x) => x.misspelled);
console.log({misspelled});
const errorRegex = new RegExp(errors.map((x) => `(${x.misspelled})`).join("|"), "g");
console.log(errorRegex.global);
return ( return (
<> <>
{reactStringReplace(solution, errorRegex, (match) => { {solution.split(" ").map((word) => {
const correction = errors.find((x) => x.misspelled === match)?.correction; if (!misspelled.includes(word)) return <>{word} </>;
const correction = errors.find((x) => x.misspelled === word)?.correction;
return ( return (
<span <>
data-tip={correction ? correction : undefined} <span
className={clsx("text-mti-red-light font-medium underline underline-offset-2", correction && "tooltip")}> key={word}
{match} data-tip={correction ? correction : undefined}
</span> className={clsx("text-mti-red-light font-medium underline underline-offset-2", correction && "tooltip")}>
{word}
</span>{" "}
</>
); );
})} })}
</> </>