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

Bug fixes to training, added a spinner to record while it loads, made changes to speaking as requested

Browse Source
This commit is contained in:
Carlos Mesquita
2024-08-05 21:44:14 +01:00
parent 309dfba583
commit a4a40b9145
5 changed files with 92 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Exercises/Speaking.tsx
View File

@@ -21,6 +21,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
const [audioURL, setAudioURL] = useState<string>();
const [isLoading, setIsLoading] = useState(false);
const [isPromptsModalOpen, setIsPromptsModalOpen] = useState(false);
const [inputText, setInputText] = useState("");
const hasExamEnded = useExamStore((state) => state.hasExamEnded);
@@ -93,6 +94,27 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
});
};
const handleNoteWriting = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const newText = e.target.value;
const words = newText.match(/\S+/g);
const wordCount = words ? words.length : 0;
if (wordCount <= 100) {
setInputText(newText);
} else {
let count = 0;
let lastIndex = 0;
const matches = newText.matchAll(/\S+/g);
for (const match of matches) {
count++;
if (count > 100) break;
lastIndex = match.index! + match[0].length;
}
setInputText(newText.slice(0, lastIndex));
}
};
return (
<div className="flex flex-col h-full w-full gap-9">
<Modal title="Prompts" className="!w-96 aspect-square" isOpen={isPromptsModalOpen} onClose={() => setIsPromptsModalOpen(false)}>
@@ -112,7 +134,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
<div className="flex flex-col gap-0">
<span className="font-semibold">{title}</span>
{prompts.length > 0 && (
<span className="font-semibold">You should talk for at least 30 seconds for your answer to be valid.</span>
<span className="font-semibold">You should talk for at least 1 minute and 30 seconds for your answer to be valid.</span>
)}
</div>
{!video_url && (
@@ -138,6 +160,20 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
</div>
</div>
{prompts && prompts.length > 0 && (
<div className="w-full h-full flex flex-col gap-4">
<textarea
onContextMenu={(e) => e.preventDefault()}
className="w-full h-full min-h-[200px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
onChange={handleNoteWriting}
value={inputText}
placeholder="Write your notes here..."
spellCheck={false}
/>
<span className="text-base self-end text-mti-gray-cool">Word Count: {(inputText.match(/\S+/g) || []).length}/100</span>
</div>
)}
<ReactMediaRecorder
audio
onStop={(blob) => setMediaBlob(blob)}

28
src/components/StatGridItem.tsx
View File

@@ -78,6 +78,7 @@ interface StatsGridItemProps {
users: User[];
training?: boolean,
selectedTrainingExams?: string[];
maxTrainingExams?: number;
setSelectedTrainingExams?: React.Dispatch<React.SetStateAction<string[]>>;
setExams: (exams: Exam[]) => void;
setShowSolutions: (show: boolean) => void;
@@ -106,7 +107,8 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
renderPdfIcon,
width = undefined,
height = undefined,
examNumber = undefined
examNumber = undefined,
maxTrainingExams = undefined
}) => {
const router = useRouter();
const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
@@ -132,16 +134,22 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
const { timeSpent, inactivity, session } = stats[0];
const selectExam = () => {
if (training && !isDisabled && typeof setSelectedTrainingExams !== "undefined" && typeof timestamp == "string") {
if (training && !isDisabled && typeof maxTrainingExams !== "undefined" && typeof setSelectedTrainingExams !== "undefined" && typeof timestamp == "string") {
setSelectedTrainingExams(prevExams => {
const index = prevExams.indexOf(timestamp);
if (index !== -1) {
const uniqueExams = [...new Set(stats.map(stat => `${stat.module}-${stat.date}`))];
const indexes = uniqueExams.map(exam => prevExams.indexOf(exam)).filter(index => index !== -1);
if (indexes.length > 0) {
const newExams = [...prevExams];
indexes.sort((a, b) => b - a).forEach(index => {
newExams.splice(index, 1);
});
return newExams;
} else {
return [...prevExams, timestamp];
if (prevExams.length + uniqueExams.length <= maxTrainingExams) {
return [...prevExams, ...uniqueExams];
} else {
return prevExams;
}
}
});
} else {
@@ -219,7 +227,10 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
</div>
<div className="w-full flex flex-col gap-1">
<div className="grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2">
<div className={clsx(
"grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2",
examNumber !== undefined && "pr-10"
)}>
{aggregatedLevels.map(({ module, level }) => (
<ModuleBadge key={module} module={module} level={level} />
))}
@@ -244,8 +255,9 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
correct / total >= 0.7 && "hover:border-mti-purple",
correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
correct / total < 0.3 && "hover:border-mti-rose",
typeof selectedTrainingExams !== "undefined" && typeof timestamp === "string" && selectedTrainingExams.includes(timestamp) && "border-2 border-slate-600",
typeof selectedTrainingExams !== "undefined" && typeof timestamp === "string" && selectedTrainingExams.some(exam => exam.includes(timestamp)) && "border-2 border-slate-600",
)}
onClick={examNumber === undefined ? selectExam : undefined}
style={{
...(width !== undefined && { width }),
...(height !== undefined && { height }),

3
src/components/TrainingContent/TrainingScore.tsx
View File

@@ -17,9 +17,10 @@ const TrainingScore: React.FC<TrainingScoreProps> = ({
const scores = trainingContent.exams.map(exam => exam.score);
const highestScore = Math.max(...scores);
const lowestScore = Math.min(...scores);
const averageScore = scores.length > 0
let averageScore = scores.length > 0
? scores.reduce((sum, score) => sum + score, 0) / scores.length
: 0;
averageScore = Math.round(averageScore);
const containerClasses = clsx(
"flex flex-row mb-4",

20
src/pages/record.tsx
View File

@@ -21,7 +21,6 @@ import { uuidv4 } from "@firebase/util";
import { usePDFDownload } from "@/hooks/usePDFDownload";
import useRecordStore from "@/stores/recordStore";
import useTrainingContentStore from "@/stores/trainingContentStore";
import Button from "@/components/Low/Button";
import StatsGridItem from "@/components/StatGridItem";
@@ -148,10 +147,12 @@ export default function History({ user }: { user: User }) {
const handleTrainingContentSubmission = () => {
if (groupedStats) {
const allStats = Object.keys(filterStatsByDate(groupedStats));
const selectedStats = selectedTrainingExams.reduce<Record<string, Stat[]>>((accumulator, timestamp) => {
if (allStats.includes(timestamp)) {
accumulator[timestamp] = filterStatsByDate(groupedStats)[timestamp];
const groupedStatsByDate = filterStatsByDate(groupedStats);
const allStats = Object.keys(groupedStatsByDate);
const selectedStats = selectedTrainingExams.reduce<Record<string, Stat[]>>((accumulator, moduleAndTimestamp) => {
const timestamp = moduleAndTimestamp.split("-")[1];
if (allStats.includes(timestamp) && !accumulator.hasOwnProperty(timestamp)) {
accumulator[timestamp] = groupedStatsByDate[timestamp];
}
return accumulator;
}, {});
@@ -177,6 +178,7 @@ export default function History({ user }: { user: User }) {
training={training}
selectedTrainingExams={selectedTrainingExams}
setSelectedTrainingExams={setSelectedTrainingExams}
maxTrainingExams={MAX_TRAINING_EXAMS}
setExams={setExams}
setShowSolutions={setShowSolutions}
setUserSolutions={setUserSolutions}
@@ -323,7 +325,8 @@ export default function History({ user }: { user: User }) {
)}
{(training && (
<div className="flex flex-row">
<div className="font-semibold text-2xl mr-4">Select up to 10 exams {`(${selectedTrainingExams.length}/${MAX_TRAINING_EXAMS})`}</div>
<div className="font-semibold text-2xl mr-4">Select up to 10 exercises
{`(${selectedTrainingExams.length}/${MAX_TRAINING_EXAMS})`}</div>
<button
className={clsx(
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light ml-4 disabled:cursor-not-allowed",
@@ -385,6 +388,11 @@ export default function History({ user }: { user: User }) {
{groupedStats && Object.keys(groupedStats).length === 0 && !isStatsLoading && (
<span className="font-semibold ml-1">No record to display...</span>
)}
{isStatsLoading && (
<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
<span className="loading loading-infinity w-32 bg-mti-green-light" />
</div>
)}
</Layout>
)}
</>

4
src/pages/training/[id]/index.tsx
View File

@@ -182,7 +182,7 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
{trainingContent.exams.map((exam, examIndex) => (
<StatsGridItem
key={`exam-${examIndex}`}
width='350px'
width='380px'
height='150px'
examNumber={examIndex + 1}
stats={exam.stats || []}
@@ -302,7 +302,7 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
</div>
<h3 className="text-lg font-semibold">Detailed Breakdown</h3>
</div>
<ul className="flex flex-col flex-grow space-y-4 pb-2 max-h-[350px] overflow-y-auto scrollbar-hide">
<ul className="flex flex-col flex-grow space-y-4 pb-2 overflow-y-auto scrollbar-hide">
{trainingContent.exams.map((exam, index) => (
<li key={index} className="border rounded-lg bg-white">
<Dropdown title={