Global activity (#121)

Implement a global activity log and ability to search for a user's activity

Author: MeshanKhosla

.gitignore

@@ -38,3 +38,5 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+.vscode

src/components/activity/ActivityView.tsx

@@ -1,64 +1,54 @@
-import { Box, Button, Collapse, Flex, Spinner, Text, useDisclosure } from '@chakra-ui/react';
+import { Box, Button, Collapse, Flex, Spinner, useDisclosure } from '@chakra-ui/react';
 import { UserRole } from '@prisma/client';
 import { useSession } from 'next-auth/react';
 import { SessionUser } from '../../pages/api/auth/[...nextauth]';
-import { trpc } from '../../utils/trpc';
+import { TicketWithNames } from '../../server/trpc/router/ticket';
 import ActivityTable from './ActivityTable';
 
+interface ActivityViewProps {
+  helpedTickets: TicketWithNames[];
+  createdTickets: TicketWithNames[];
+}
+
 /**
  * Displays the activity log for the current user
  */
-const ActivityView = () => {
+const ActivityView = (props: ActivityViewProps) => {
+  const { helpedTickets, createdTickets } = props;
   const { data: session } = useSession();
   const user = session?.user as SessionUser;
   const { isOpen: isHelpedTableOpen, onToggle: toggleHelpedTable } = useDisclosure();
   const { isOpen: isCreatedTableOpen, onToggle: toggleCreatedTable } = useDisclosure();
 
-  const { data: userTickets, isLoading: isTicketsLoading } = trpc.ticket.getTicketsWithUserId.useQuery(
-    { userId: user.id, shouldSortByCreatedAt: true },
-    { refetchOnWindowFocus: false, enabled: !!user },
-  );
-
   return (
-    <>
-      <Flex ml={4} mr={4} mt={4} mb={10} flexDirection='column'>
-        <Text fontSize='3xl' fontWeight='semibold' mb={3}>
-          Activity Log
-        </Text>
-        {isTicketsLoading ? (
-          <Spinner />
-        ) : (
-          <>
-            <Flex>
-              <Button mr={4} onClick={toggleHelpedTable} hidden={user.role === UserRole.STUDENT}>
-                {isHelpedTableOpen ? 'Hide ' : 'Show '} helped tickets
-              </Button>
-              <Button onClick={toggleCreatedTable}>{isCreatedTableOpen ? 'Hide ' : 'Show '} created tickets</Button>
-            </Flex>
+    <Flex mr={4} flexDirection='column'>
+      <Flex>
+        <Button mr={4} onClick={toggleHelpedTable} hidden={user.role === UserRole.STUDENT}>
+          {isHelpedTableOpen ? 'Hide ' : 'Show '} helped tickets
+        </Button>
+        <Button onClick={toggleCreatedTable}>{isCreatedTableOpen ? 'Hide ' : 'Show '} created tickets</Button>
+      </Flex>
 
-            <Box hidden={user.role === UserRole.STUDENT}>
-              <Collapse in={isHelpedTableOpen} animateOpacity>
-                <ActivityTable
-                  tickets={userTickets?.helpedTickets ?? []}
-                  title='Your helped tickets'
-                  shouldShowCreatedBy={true}
-                />
-              </Collapse>
-            </Box>
+      <Box hidden={user.role === UserRole.STUDENT}>
+        <Collapse in={isHelpedTableOpen} animateOpacity>
+          <ActivityTable
+            tickets={helpedTickets}
+            title={`${helpedTickets.length} helped tickets`}
+            shouldShowCreatedBy={true}
+          />
+        </Collapse>
+      </Box>
 
-            <Box>
-              <Collapse in={isCreatedTableOpen} animateOpacity>
-                <ActivityTable
-                  tickets={userTickets?.createdTickets ?? []}
-                  title='Your created tickets'
-                  shouldShowCreatedBy={false}
-                />
-              </Collapse>
-            </Box>
-          </>
-        )}
-      </Flex>
-    </>
+      <Box>
+        <Collapse in={isCreatedTableOpen} animateOpacity>
+          <ActivityTable
+            tickets={createdTickets}
+            title={`${createdTickets.length} created tickets`}
+            shouldShowCreatedBy={false}
+          />
+        </Collapse>
+      </Box>
+    </Flex>
   );
 };
 

src/components/activity/GlobalLog.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import { Button, Flex, Input, Spinner, Text, useToast } from '@chakra-ui/react';
+import { trpc } from '../../utils/trpc';
+import { EMAIL_REGEX } from '../../utils/constants';
+import dynamic from 'next/dynamic';
+import { TicketWithNames } from '../../server/trpc/router/ticket';
+import Link from 'next/link';
+
+/** Allows staff to search for user's log */
+const GlobalLog = () => {
+  const ActivityView = dynamic(() => import('../../components/activity/ActivityView'));
+  const [email, setEmail] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [createdTickets, setCreatedTickets] = useState<TicketWithNames[] | undefined>();
+  const [helpedTickets, setHelpedTickets] = useState<TicketWithNames[] | undefined>();
+  const toast = useToast();
+  const { refetch: fetchTicketsWithEmail } = trpc.ticket.getTicketsWithUserEmail.useQuery(
+    { userEmail: email, shouldSortByCreatedAt: true },
+    { refetchOnWindowFocus: false, enabled: false },
+  );
+
+  const handleLookup = async () => {
+    if (!email.match(EMAIL_REGEX)) {
+      toast({
+        title: 'Invalid email',
+        description: 'Please enter a valid email',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top-right',
+      });
+      return;
+    }
+
+    setIsLoading(() => true);
+    const ticketData = await fetchTicketsWithEmail();
+    setIsLoading(() => false);
+
+    if (ticketData.data === null || ticketData.data === undefined) {
+      toast({
+        title: 'No user found',
+        description: 'Please enter a valid staff/student email',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top-right',
+      });
+      return;
+    }
+
+    setCreatedTickets(ticketData.data.createdTickets);
+    setHelpedTickets(ticketData.data.helpedTickets);
+  };
+
+  return (
+    <Flex mt={4} ml={4} mr={4} flexDirection='column'>
+      <Text fontSize='3xl' fontWeight='semibold' mb={3}>
+        Global Log
+      </Text>
+      <Text mb={3}>
+        <Link href='/activity/global'>Click here to view all tickets</Link> or search for a user log below
+      </Text>
+      <Input id='email' placeholder='Email' onChange={e => setEmail(e.target.value)} />
+      <Button mb={2} mt={2} colorScheme='yellow' disabled={!email.match(EMAIL_REGEX)} onClick={handleLookup}>
+        Search
+      </Button>
+      {isLoading && <Spinner />}
+      {createdTickets !== undefined && helpedTickets !== undefined && (
+        <ActivityView createdTickets={createdTickets} helpedTickets={helpedTickets} />
+      )}
+    </Flex>
+  );
+};
+
+export default GlobalLog;

src/components/activity/PersonalLog.tsx

@@ -0,0 +1,33 @@
+import { Flex, Spinner, Text } from '@chakra-ui/react';
+import { useSession } from 'next-auth/react';
+import dynamic from 'next/dynamic';
+import { trpc } from '../../utils/trpc';
+
+const PersonalLog = () => {
+  const ActivityView = dynamic(() => import('../../components/activity/ActivityView'));
+  const { data: session } = useSession();
+  const user = session?.user;
+
+  const { data: userTickets, isLoading: isTicketsLoading } = trpc.ticket.getTicketsWithUserId.useQuery(
+    { userId: user!.id, shouldSortByCreatedAt: true },
+    { refetchOnWindowFocus: false, enabled: !!user },
+  );
+
+  return (
+    <Flex ml={4} mr={4} flexDirection='column'>
+      <Text mt={4} fontSize='3xl' fontWeight='semibold' mb={3}>
+        Personal Log
+      </Text>
+      {isTicketsLoading ? (
+        <Spinner />
+      ) : (
+        <ActivityView
+          createdTickets={userTickets?.createdTickets ?? []}
+          helpedTickets={userTickets?.helpedTickets ?? []}
+        />
+      )}
+    </Flex>
+  );
+};
+
+export default PersonalLog;