past papers

Zain-ul-din · Jul 2, 2024 · 5ae8114 · 5ae8114
1 parent 59534d0
commit 5ae8114
Show file tree

Hide file tree

Showing 10 changed files with 460 additions and 126 deletions.
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "react-to-print": "^2.14.12",
     "react-use-scroll-position": "^2.0.0",
+    "react-webcam": "^7.2.0",
     "redis-om": "^0.3.6",
     "rehype-raw": "^6.1.1",
     "tesseract.js": "^4.0.5",

diff --git a/src/components/pastpaper/PastPaper.tsx b/src/components/pastpaper/PastPaper.tsx
@@ -7,14 +7,48 @@ import {
   Divider,
   Flex,
   HStack,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
   Stack,
+  Tag,
   Text,
+  useDisclosure,
   useMediaQuery
 } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+import { useAuthState } from 'react-firebase-hooks/auth';
 import { BiDownArrow, BiUpArrow } from 'react-icons/bi';
+import { firebase } from '~/lib/firebase';
+import { PastPaperDocType } from '~/lib/pastpaper/types';
+import { fromFirebaseTimeStamp } from '~/lib/util';
 
-export default function PastPaper() {
+export default function PastPaper({
+  model,
+  onDelete,
+  onDownVote,
+  onUpVote
+}: {
+  model: PastPaperDocType;
+  onDownVote: () => void;
+  onUpVote: () => void;
+  onDelete: () => void;
+}) {
   const [isUnder500] = useMediaQuery('(max-width: 500px)');
+  const [user] = useAuthState(firebase.firebaseAuth);
+  const [canEdit, setEdit] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!user) return setEdit(false);
+    const isAuthorizedUser = user.uid === model.uploader_uid;
+    const isAdmin = user.uid === process.env.NEXT_PUBLIC_ADMIN_EMAIL;
+    setEdit(isAuthorizedUser || isAdmin);
+  }, [user, model]);
+
+  const { onOpen, isOpen, onClose } = useDisclosure();
 
   return (
     <>
@@ -25,12 +59,15 @@ export default function PastPaper() {
         mb={4}
         border={'1px solid var(--border-color)'}>
         <Stack spacing={3}>
-          <Center flexDir={'column'} gap={2}>
-            <Text fontSize={'lg'} textAlign={'center'} maxW={'250px'} noOfLines={2}>
-              Object Oriented Programming
+          <Center flexDir={'column'} gap={2} position={'relative'}>
+            <Text fontSize={'sm'} textAlign={'center'} maxW={'250px'} noOfLines={2}>
+              {model.subject_name}
             </Text>
+            <Tag position={'absolute'} variant={'solid'} colorScheme="gray" bottom={2} right={2}>
+              {model.exam_type}
+            </Tag>
             <img
-              src="https://firebasestorage.googleapis.com/v0/b/ecommerce-50bbb.appspot.com/o/past_paper_images%2F5191d8e0-044e-4091-a763-cd1482da0fec?alt=media&token=0769eab1-6a3f-40b4-abc4-29986e6f4e15"
+              src={model.photo_url}
               alt="past_paper"
               width={'250'}
               height={'300'}
@@ -50,23 +87,37 @@ export default function PastPaper() {
 
           <Flex alignItems={'center'} gap={2}>
             <HStack>
-              <Avatar size={'sm'} />
+              <Avatar size={'sm'} src={model.visibility ? model.uploader.photoURL || '' : ''} />
               <Stack spacing={-1}>
                 <Text noOfLines={1} maxWidth={'250px'}>
-                  Lorem ipsum
+                  {model.uploader.displayName}
                 </Text>
-                <Text fontSize={'xs'}>Repo: 200</Text>
+                {/* <Text fontSize={'xs'}>Exam: {model.exam_type}</Text> */}
+
+                {/* <Text fontSize={'xs'}>Repo: 200</Text> */}
               </Stack>
             </HStack>
 
             <Flex ml={'auto'} gap={2}>
-              <Button variant={'outline'} colorScheme="red" size={'sm'}>
+              <Button
+                variant={'outline'}
+                colorScheme="red"
+                size={'sm'}
+                onClick={() => {
+                  onUpVote();
+                }}>
                 <BiDownArrow />
-                200
+                {model.up_votes?.length || 0}
               </Button>
-              <Button variant={'outline'} colorScheme="green" size={'sm'}>
+              <Button
+                variant={'outline'}
+                colorScheme="green"
+                size={'sm'}
+                onClick={() => {
+                  onDownVote();
+                }}>
                 <BiUpArrow />
-                100
+                {model.down_votes?.length || 0}
               </Button>
             </Flex>
           </Flex>
@@ -80,17 +131,41 @@ export default function PastPaper() {
               noOfLines={2}
               fontStyle={'italic'}
               color={'var(--muted-text)'}>
-              Uploaded at {new Date().toDateString()}
+              Uploaded at {fromFirebaseTimeStamp(model.upload_at as any).toDateString()}
             </Text>
 
-            <Flex gap={2} ml={'auto'}>
-              <Button size={'sm'}>
-                <EditIcon />
-              </Button>
-              <Button colorScheme="red" size={'sm'}>
-                <DeleteIcon />
-              </Button>
-            </Flex>
+            {canEdit && (
+              <Flex gap={2} ml={'auto'}>
+                <Button size={'sm'} isDisabled={true}>
+                  <EditIcon />
+                </Button>
+                <Button colorScheme="red" size={'sm'} onClick={onOpen}>
+                  <DeleteIcon />
+                </Button>
+                <Modal onClose={onClose} isOpen={isOpen} isCentered>
+                  <ModalOverlay />
+                  <ModalContent m={4}>
+                    <ModalHeader>Are you sure to delete?</ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody>
+                      <Center py={6}>
+                        <HStack spacing={12}>
+                          <Button
+                            colorScheme="red"
+                            onClick={() => {
+                              onDelete();
+                              onClose();
+                            }}>
+                            Confirm
+                          </Button>
+                          <Button onClick={onClose}>Cancel</Button>
+                        </HStack>
+                      </Center>
+                    </ModalBody>
+                  </ModalContent>
+                </Modal>
+              </Flex>
+            )}
           </Flex>
         </Stack>
       </Flex>