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

Updated the code to use the new desired levels

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-12 14:05:48 +01:00
parent 6fe8a678ea
commit e864e16064
3 changed files with 39 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Diagnostic.tsx
View File

@@ -27,6 +27,7 @@ export default function Diagnostic({onFinish}: Props) {
const [focus, setFocus] = useState<"academic" | "general">();
const [isInsert, setIsInsert] = useState(false);
const [levels, setLevels] = useState({reading: 0, listening: 0, writing: 0, speaking: 0});
const [desiredLevels, setDesiredLevels] = useState({reading: 9, listening: 9, writing: 9, speaking: 9});
const router = useRouter();
@@ -47,7 +48,7 @@ export default function Diagnostic({onFinish}: Props) {
const updateUser = (callback: () => void) => {
axios
.patch("/api/users/update", {focus, levels, isFirstLogin: false})
.patch("/api/users/update", {focus, levels, desiredLevels, isFirstLogin: false})
.then(callback)
.catch(() => {
toast.error("Something went wrong, please try again later!", {toastId: "user-update-error"});

1
src/interfaces/user.ts
View File

@@ -9,6 +9,7 @@ export interface User {
isFirstLogin: boolean;
focus: "academic" | "general";
levels: {[key in Module]: number};
desiredLevels: {[key in Module]: number};
type: Type;
}

44
src/pages/index.tsx
View File

@@ -156,11 +156,18 @@ export default function Home() {
</div>
<div className="flex justify-between w-full">
<span className="font-extrabold text-sm">Reading</span>
<span className="text-sm font-normal text-mti-gray-dim">86%</span>
<span className="text-sm font-normal text-mti-gray-dim">
Level {user.levels.reading} / Level {user.desiredLevels.reading}
</span>
</div>
</div>
<div className="pl-14">
<ProgressBar color="blue" label="" percentage={86} className="w-full h-2" />
<ProgressBar
color="blue"
label=""
percentage={Math.round((user.levels.reading * 100) / user.desiredLevels.reading)}
className="w-full h-2"
/>
</div>
</div>
<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
@@ -170,11 +177,18 @@ export default function Home() {
</div>
<div className="flex justify-between w-full">
<span className="font-extrabold text-sm">Writing</span>
<span className="text-sm font-normal text-mti-gray-dim">91%</span>
<span className="text-sm font-normal text-mti-gray-dim">
Level {user.levels.writing} / Level {user.desiredLevels.writing}
</span>
</div>
</div>
<div className="pl-14">
<ProgressBar color="blue" label="" percentage={91} className="w-full h-2" />
<ProgressBar
color="blue"
label=""
percentage={Math.round((user.levels.writing * 100) / user.desiredLevels.writing)}
className="w-full h-2"
/>
</div>
</div>
<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
@@ -184,11 +198,18 @@ export default function Home() {
</div>
<div className="flex justify-between w-full">
<span className="font-extrabold text-sm">Listening</span>
<span className="text-sm font-normal text-mti-gray-dim">56%</span>
<span className="text-sm font-normal text-mti-gray-dim">
Level {user.levels.listening} / Level {user.desiredLevels.listening}
</span>
</div>
</div>
<div className="pl-14">
<ProgressBar color="blue" label="" percentage={56} className="w-full h-2" />
<ProgressBar
color="blue"
label=""
percentage={Math.round((user.levels.listening * 100) / user.desiredLevels.listening)}
className="w-full h-2"
/>
</div>
</div>
<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
@@ -198,11 +219,18 @@ export default function Home() {
</div>
<div className="flex justify-between w-full">
<span className="font-extrabold text-sm">Speaking</span>
<span className="text-sm font-normal text-mti-gray-dim">26%</span>
<span className="text-sm font-normal text-mti-gray-dim">
Level {user.levels.speaking} / Level {user.desiredLevels.speaking}
</span>
</div>
</div>
<div className="pl-14">
<ProgressBar color="blue" label="" percentage={26} className="w-full h-2" />
<ProgressBar
color="blue"
label=""
percentage={Math.round((user.levels.speaking * 100) / user.desiredLevels.speaking)}
className="w-full h-2"
/>
</div>
</div>
</div>