Speedup render of eventProblems table

components/EventProblems.tsx

@@ -4,7 +4,7 @@ import { Course, Material, Section, Theme, eventItemSplit } from 'lib/material'
 import { EventFull, Event, Problem } from 'lib/types'
 import useSWR, { Fetcher } from 'swr'
 import Title from 'components/ui/Title'
-import { Avatar, Button, Card, Table, Timeline, Tooltip } from 'flowbite-react'
+import { Avatar, Button, Card, Table, Timeline } from 'flowbite-react'
 import { ListGroup } from 'flowbite-react';
 import { basePath } from 'lib/basePath'
 import { MdClose } from 'react-icons/md'
@@ -16,44 +16,52 @@ import { EventItem } from '@prisma/client';
 import useUsers from 'lib/hooks/useUsers';
 import { useProblems } from 'lib/hooks/useProblems';
 import useUsersOnEvent from 'lib/hooks/useUsersOnEvent';
+import { filter } from 'cypress/types/bluebird';
+import Tooltip from '@mui/material/Tooltip';
 
 type Props = {
     event: EventFull,
     material: Material,
 }
 
 
-
-
 // a table of eventItems vs users showing which users have completed which problems
 const EventProblems: React.FC<Props> = ({ material, event }) => {
   const { users, error: usersError } = useUsersOnEvent(event.id);
   const { problems, error: problemsError } = useProblems(event.id);
 
   if (usersError || problemsError) return <div>failed to load</div> 
   if (!users || !problems) return <div>loading...</div>
-  const students = users.filter((user) => user.status === 'STUDENT')
+  const students = users.filter((user) => user.status === 'STUDENT' && user.eventId === event.id)
 
+  const userProblems: { [key: string]: Problem[] } = {};
+  users.forEach((user) => {
+    const filteredProblems = problems.filter((problem) => problem.userEmail === user.userEmail);
+    if (filteredProblems) {userProblems[user.userEmail] = filteredProblems;}
+  });
+
   return (
     <Table className='border dark:border-gray-700'>
       <Table.Head>
         <Table.HeadCell>
             Problem
         </Table.HeadCell>
         { students?.map((user) => (
-          <Table.HeadCell key={user.userEmail} align="center">
-            <Tooltip className={'normal-case'} content={`${user?.user?.name} <${user?.userEmail}>`} placement="top">
+          <Table.HeadCell key={user.userEmail} align="center" className="p-0">
+            <Tooltip className={'normal-case'} title={`${user?.user?.name} <${user?.userEmail}>`} placement="top">
             <Avatar
               img={user?.user?.image || undefined}
               rounded={true}
-              size="sm"
+              size="xs"
             />
             </Tooltip>
           </Table.HeadCell>
         ))}
       </Table.Head>
       <Table.Body className="divide-y">
-        { event.EventGroup.map((eventGroup) => (
+        { event.EventGroup.filter(
+          (eventGroup) => eventGroup.EventItem.length > 0)
+            .map((eventGroup) => (
             <React.Fragment key={eventGroup.id}>
             <Table.Row className="" key={eventGroup.id}>
                 <Table.Cell className="">
@@ -67,21 +75,21 @@ const EventProblems: React.FC<Props> = ({ material, event }) => {
                 { section && section.problems.map((problem) => (
                     <React.Fragment key={problem}>
                     <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800" key={`${eventGroup.id}-${eventGroup.id}-${problem}`}>
-                    <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white" key={`title-${problem}${eventItem.section}`}>
+                    <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white p-1 m-0" key={`title-${problem}-${eventItem.section}`}>
                       {url ? (
                         <a href={`${url}#${problem}`}>{problem}</a>
                       ) : (
                         <span>{problem}</span>
                       )}
                     </Table.Cell>
                     { students?.map((user, i) => {
-                        const problemStruct = problems.find((p: Problem) => p.userEmail === user.userEmail && p.tag === problem)
+                        const problemStruct = userProblems[user.userEmail].find((p) => p.tag === problem)
                         const problemStr = `difficulty: ${problemStruct?.difficulty} notes: ${problemStruct?.notes}`
                         return (
-                          <Table.Cell key={`${user.userEmail}${problem}${eventItem.section}`} align='center' className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+                          <Table.Cell key={`${user.userEmail}-${problem}-${eventItem.section}-${problem}`} align='center' className="whitespace-nowrap font-medium text-gray-900 dark:text-white p-0">
                             {(problemStruct && problemStruct.complete) ? 
-                              <Tooltip content={problemStr} placement="top">✅</Tooltip> :
-                              '❌'
+                              <Tooltip title={problemStr} placement="top"><span>✅</span></Tooltip> :
+                              <span>❌</span>
                             }
                           </Table.Cell>
                         )

lib/pageTemplate.ts

@@ -16,9 +16,8 @@ export const pageTemplate: PageTemplate | undefined = (() => {
     try {
         const fileContents = fs.readFileSync(yamlTemplate, 'utf8');
         const data = yaml.load(fileContents) as PageTemplate;
-        console.log(data);
         return data
     } catch (e) {
-        console.log(e);
+        console.error(e);
       }
 })();

package.json

@@ -18,6 +18,9 @@
     "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
   },
   "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.7.1",
+    "@mui/material": "^5.2.5",
     "@next-auth/prisma-adapter": "^1.0.5",
     "@prisma/client": "^4.11.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",

pages/api/event/[eventId]/users.ts

@@ -6,6 +6,7 @@ import prisma from 'lib/prisma'
 import type { NextApiRequest, NextApiResponse } from 'next'
 import _, { sortBy } from "cypress/types/lodash"
 import { Prisma } from "@prisma/client"
+import useProfile from "lib/hooks/useProfile"
 
 export type UsersWithUserOnEvents = Prisma.UserOnEventGetPayload<{
   include: { user: true }
@@ -23,6 +24,7 @@ const EventUsers = async (
   const { method } = req;
   const session = await getServerSession(req, res, authOptions)
   const user = session?.user;
+  const userEmail = session?.user?.email
   const eventId = parseInt(req.query.eventId as string);
 
   if (!session) {
@@ -42,12 +44,21 @@ const EventUsers = async (
     return res.status(404).json({ error: 'Event not Found' })
   }
 
+  if (!userEmail || userEmail === undefined) {
+    return res.status(401).send({ error: "Not logged in" });
+  }
+
+  const currentUser = await prisma.user.findUnique({
+    where: { email: userEmail },
+  });
+
   const isInstructor = event?.UserOnEvent.some((userOnEvent) => userOnEvent?.user?.name === user?.name && userOnEvent.status === 'INSTRUCTOR')
+  const isAdmin = currentUser?.admin === true;
 
   let users: UsersWithUserOnEvents[] = []
   switch (method) {
     case 'GET':
-      if (isInstructor) {
+      if (isInstructor || isAdmin) {
         const onEvent = event?.UserOnEvent
         const emails = onEvent.map((userOnEvent) => userOnEvent?.userEmail || "")
         users = await prisma.userOnEvent.findMany({
@@ -59,7 +70,7 @@ const EventUsers = async (
       res.status(200).json({ users })
       break;
     case 'PUT':
-      if (!isInstructor) {
+      if (!isInstructor && !isAdmin) {
         return res.status(403).json({ error: 'Forbidden' });
       }
       users = req.body.users;

pages/event/[eventId].tsx

@@ -93,7 +93,6 @@ const Event: NextPage<EventProps> = ({ material, event, pageInfo}) => {
     { label: 'reject', value: 'REJECTED' },
   ]
 
-
   const eventView = (
     <>
       <Title text={event.name} />