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

Continued implementing the new design;

Browse Source 
Added an average level calculator;
This commit is contained in:
Tiago Ribeiro
2023-05-31 14:01:12 +01:00
parent 4d37bf536a
commit 1e8e95da34
5 changed files with 38 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/index.tsx
View File

@@ -14,6 +14,9 @@ import useUser from "@/hooks/useUser";
import Sidebar from "@/components/Sidebar";
import Diagnostic from "@/components/Diagnostic";
import {ToastContainer} from "react-toastify";
import {capitalize} from "lodash";
import {Module} from "@/interfaces";
import clsx from "clsx";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -35,19 +38,17 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
}, sessionOptions);
export default function Home() {
const [showEndExam, setShowEndExam] = useState(false);
const [windowWidth, setWindowWidth] = useState(0);
const [showDiagnostics, setShowDiagnostics] = useState(false);
const {stats, isLoading} = useStats();
const {user} = useUser({redirectTo: "/login"});
useEffect(() => setShowEndExam(window.innerWidth <= 960), []);
useEffect(() => setWindowWidth(window.innerWidth), []);
useEffect(() => {
if (user) setShowDiagnostics(user.isFirstLogin);
}, [user]);
const calculateAverageLevel = () => {
return Object.keys(user!.levels).reduce((accumulator, current) => user!.levels[current as Module] + accumulator, 0) / 4;
};
if (user && showDiagnostics) {
return (
<>
@@ -80,11 +81,32 @@ export default function Home() {
</Head>
<ToastContainer />
{user && (
<main className="w-full h-full min-h-[100vh] flex flex-col bg-mti-gray text-black">
<main className="w-full h-[100vh] flex flex-col bg-mti-gray-light text-black">
<Navbar user={user} />
<div className="h-full w-full flex py-4 gap-2">
<div className="h-full w-full flex py-4 pb-8 gap-2">
<Sidebar path="/" />
<div className="w-5/6 mr-8 bg-white shadow-md rounded-2xl"></div>
<div className="w-5/6 h-full mr-8 bg-white shadow-md rounded-2xl p-12">
<section className="w-full flex gap-8">
<img src={user.profilePicture} alt={user.name} className="w-44 aspect-square rounded-3xl" />
<div className="flex flex-col gap-8 py-4 w-full">
<div className="flex justify-between w-full gap-8">
<div className="flex flex-col gap-2">
<h2 className="font-bold text-3xl">{user.name}</h2>
<span className="font-thin text-2xl text-neutral-500">{capitalize(user.type)}</span>
</div>
<div className="relative w-32 max-w-xs self-end h-10 rounded-full bg-gray-200 overflow-hidden flex items-center justify-center">
<div
style={{width: `${Math.round((calculateAverageLevel() * 100) / 9)}%`}}
className="absolute top-0 left-0 h-full overflow-hidden bg-mti-orange"
/>
<span className="z-10 justify-self-center text-white text-sm font-bold">
Level {calculateAverageLevel().toFixed(1)}
</span>
</div>
</div>
</div>
</section>
</div>
</div>
</main>
)}