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

Updated the stats and record page

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-02 10:23:33 +01:00
parent b58957e38e
commit 0f0b7748d7
2 changed files with 56 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/record.tsx
View File

@@ -19,6 +19,8 @@ import Layout from "@/components/High/Layout";
import clsx from "clsx";
import {calculateBandScore} from "@/utils/score";
import {BsBook, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
import Select from "react-select";
import useGroups from "@/hooks/useGroups";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -40,12 +42,13 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
}, sessionOptions);
export default function History({user}: {user: User}) {
const [selectedUser, setSelectedUser] = useState<User>(user);
const [statsUserId, setStatsUserId] = useState<string | undefined>(user.id);
const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>();
const [filter, setFilter] = useState<"months" | "weeks" | "days">();
const {users, isLoading: isUsersLoading} = useUsers();
const {stats, isLoading: isStatsLoading} = useStats(selectedUser?.id);
const {users} = useUsers();
const {stats, isLoading: isStatsLoading} = useStats(statsUserId);
const {groups} = useGroups(user.id);
const setExams = useExamStore((state) => state.setExams);
const setShowSolutions = useExamStore((state) => state.setShowSolutions);
@@ -218,22 +221,25 @@ export default function History({user}: {user: User}) {
{user && (
<Layout user={user}>
<div className="w-full flex justify-between items-center">
<div className="w-fit">
{!isUsersLoading && user.type !== "student" && (
<>
<select
className="select w-full max-w-xs bg-white border border-mti-gray-platinum outline-none font-normal text-base"
onChange={(e) => setSelectedUser(users.find((x) => x.id === e.target.value)!)}>
{users.map((x) => (
<option key={x.id} selected={selectedUser.id === x.id} value={x.id}>
{x.name}
</option>
))}
</select>
</>
<div className="w-3/4">
{(user.type === "developer" || user.type === "owner") && (
<Select
options={users.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
onChange={(value) => setStatsUserId(value?.value)}
/>
)}
{(user.type === "admin" || user.type === "teacher") && groups.length > 0 && (
<Select
options={users
.filter((x) => groups.flatMap((y) => y.participants).includes(x.id))
.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
defaultValue={{value: user.id, label: `${user.name} - ${user.email}`}}
onChange={(value) => setStatsUserId(value?.value)}
/>
)}
</div>
<div className="flex gap-4">
<div className="flex gap-4 w-full justify-end">
<button
className={clsx(
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",