past papers ##16

src/components/Ads/FrontPageAd.tsx

@@ -1,7 +1,9 @@
-import { Button, Flex, Heading, Stack, Text } from '@chakra-ui/react';
+import { Button, Center, Flex, Heading, Stack, Text } from '@chakra-ui/react';
 import { motion } from 'framer-motion';
+import Link from 'next/link';
 import router from 'next/router';
 import useTyperEffect from '~/hooks/useTyperEffect';
+import { ROUTING } from '../../lib/constant';
 
 // TODO: take data from props
 
@@ -11,6 +13,27 @@ export default function FrontPageAd() {
     speed: 40
   });
 
+  return (
+    <>
+      <Center mb={3}>
+        <Link href={ROUTING.past_papers}>
+          <Button
+            size={'sm'}
+            bgGradient={'linear(to-l, #7928CA, #FF0080)'}
+            _hover={{
+              bgGradient: 'linear(to-l, #7928CA, #FF0080)'
+            }}
+            onClick={() => {
+              router.push('/election');
+            }}
+            fontSize={'md'}>
+            📃 Browse Past Papers
+          </Button>
+        </Link>
+      </Center>
+    </>
+  );
+
   return (
     <Flex mx={'auto'} maxWidth={'950px'} my={4}>
       <Flex

src/components/pastpaper/PastPaper.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import { DeleteIcon, EditIcon } from '@chakra-ui/icons';
+import { CloseIcon, DeleteIcon, EditIcon, WarningIcon } from '@chakra-ui/icons';
 import {
   Avatar,
   Button,
@@ -25,17 +25,22 @@ import { BiDownArrow, BiUpArrow } from 'react-icons/bi';
 import { firebase } from '~/lib/firebase';
 import { PastPaperDocType } from '~/lib/pastpaper/types';
 import { fromFirebaseTimeStamp } from '~/lib/util';
+import AdminLayout from '../admin/layout';
 
 export default function PastPaper({
   model,
   onDelete,
   onDownVote,
-  onUpVote
+  onUpVote,
+  onEdit,
+  markAsSpam
 }: {
   model: PastPaperDocType;
   onDownVote: () => void;
   onUpVote: () => void;
   onDelete: () => void;
+  onEdit: () => void;
+  markAsSpam: () => void;
 }) {
   const [isUnder500] = useMediaQuery('(max-width: 500px)');
   const [user] = useAuthState(firebase.firebaseAuth);
@@ -44,11 +49,32 @@ export default function PastPaper({
   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);
+    const isAdmin = user.email === process.env.NEXT_PUBLIC_ADMIN_EMAIL;
+    // check if can edit post any more
+    const upVotesCount = (model.up_votes || []).length;
+    const downVotesCount = (model.down_votes || []).length;
+    const totalVotes = upVotesCount + downVotesCount;
+    const downVotesPercentage = (downVotesCount / totalVotes) * 100;
+    const isEditLocked = upVotesCount > 5 && downVotesPercentage < 50;
+    const isEditByUser = !isEditLocked && isAuthorizedUser;
+    setEdit(isEditByUser || isAdmin);
   }, [user, model]);
 
   const { onOpen, isOpen, onClose } = useDisclosure();
+  const [showImg, setShowImg] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (showImg) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+
+    // Clean up on unmount
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, [showImg]);
 
   return (
     <>
@@ -63,26 +89,90 @@ export default function PastPaper({
             <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={model.photo_url}
               alt="past_paper"
               width={'250'}
               height={'300'}
+              onClick={() => {
+                setShowImg(true);
+              }}
               style={{
                 objectFit: 'cover',
                 borderRadius: '0.2rem',
                 minWidth: '250px',
                 maxWidth: '250px',
                 maxHeight: '350px',
-                minHeight: '350px'
+                minHeight: '350px',
+                cursor: 'zoom-in',
+                filter: model.spam ? 'blur(5px)' : ''
               }}
               loading="lazy"
             />
+
+            <Tag position={'absolute'} variant={'solid'} colorScheme="gray" bottom={2} right={2}>
+              {model.exam_type}
+            </Tag>
+            {model.spam && (
+              <Text position={'absolute'} textAlign={'center'} color={'red.600'}>
+                This post mark as spam by community see on our own risk.
+                {user && (
+                  <>
+                    {user.uid === model.uploader_uid && (
+                      <> Consider uploading material with correct data.</>
+                    )}
+                  </>
+                )}
+              </Text>
+            )}
           </Center>
 
+          {showImg && (
+            <Flex
+              p={2}
+              position={'fixed'}
+              m={0}
+              backdropBlur={'xl'}
+              top={0}
+              bottom={0}
+              left={0}
+              overflowY={'auto'}
+              height={'full'}
+              right={0}
+              flexDir={'column'}
+              bg={'#111111e8'}
+              zIndex={999999}>
+              <Flex h={'full'} w={'full'} position={'relative'}>
+                <Button
+                  right={0}
+                  size={'sm'}
+                  top={0}
+                  position={'absolute'}
+                  colorScheme="purple"
+                  onClick={() => {
+                    setShowImg(false);
+                  }}>
+                  <CloseIcon />
+                </Button>
+                <img
+                  src={model.photo_url}
+                  alt="past_paper"
+                  width={'100%'}
+                  height={'auto'}
+                  onClick={() => {
+                    setShowImg(true);
+                  }}
+                  style={{
+                    objectFit: 'contain',
+                    borderRadius: '0.2rem'
+                  }}
+                  loading="lazy"
+                />
+              </Flex>
+            </Flex>
+          )}
+
           <Divider />
 
           <Flex alignItems={'center'} gap={2}>
@@ -107,7 +197,7 @@ export default function PastPaper({
                   onUpVote();
                 }}>
                 <BiDownArrow />
-                {model.up_votes?.length || 0}
+                {model.up_votes ? model.up_votes.length : 0}
               </Button>
               <Button
                 variant={'outline'}
@@ -117,7 +207,7 @@ export default function PastPaper({
                   onDownVote();
                 }}>
                 <BiUpArrow />
-                {model.down_votes?.length || 0}
+                {model.down_votes ? model.down_votes.length : 0}
               </Button>
             </Flex>
           </Flex>
@@ -136,7 +226,7 @@ export default function PastPaper({
 
             {canEdit && (
               <Flex gap={2} ml={'auto'}>
-                <Button size={'sm'} isDisabled={true}>
+                <Button size={'sm'} onClick={onEdit} isDisabled={false}>
                   <EditIcon />
                 </Button>
                 <Button colorScheme="red" size={'sm'} onClick={onOpen}>
@@ -167,6 +257,16 @@ export default function PastPaper({
               </Flex>
             )}
           </Flex>
+          <AdminLayout fallBack={<></>}>
+            <Button
+              colorScheme={model.spam ? 'green' : 'red'}
+              leftIcon={<WarningIcon />}
+              onClick={(e) => {
+                markAsSpam();
+              }}>
+              {model.spam ? 'Mark as not spam' : 'Mark as spam'}
+            </Button>
+          </AdminLayout>
         </Stack>
       </Flex>
     </>

src/components/pastpaper/PastPapersToast.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+import PastPaper from './PastPaper';
+import { HStack, useToast, Text, Flex, Stack, Button, useDisclosure } from '@chakra-ui/react';
+import { CloseIcon, InfoIcon } from '@chakra-ui/icons';
+import OneTap from '../OneTap';
+import { BiLeftArrow, BiRightArrow, BiRightArrowAlt } from 'react-icons/bi';
+import { ROUTING } from '~/lib/constant';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+
+export default function PastPaperToast() {
+  const toast = useToast();
+  const [show, setShow] = useState<boolean>(true);
+  const router = useRouter();
+  const toastId = 'past-paper-toast';
+
+  useEffect(() => {
+    if (router.pathname === ROUTING.past_papers || !show) return;
+    setShow(false);
+
+    toast({
+      id: toastId,
+      title: '📃 Past Papers',
+      description: 'View Past Papers',
+      duration: 1000 * 30,
+      position: 'bottom-right',
+      size: 'sm',
+      colorScheme: 'gray',
+      render: () => {
+        return (
+          <Flex
+            bg={'var(--bg-color)'}
+            border={'2px solid var(--card-color-dark)'}
+            p={2}
+            rounded={'md'}>
+            <HStack w={'full'}>
+              <Button
+                size={'sm'}
+                variant={'ghost'}
+                onClick={() => {
+                  toast.close(toastId);
+                }}>
+                <CloseIcon fontSize={'sm'} />
+              </Button>
+              <Stack w={'full'} spacing={1}>
+                <HStack>
+                  <InfoIcon />
+                  <Text>📃 Past Papers</Text>
+                </HStack>
+                <HStack>
+                  <Text fontSize={'sm'}>Browse Past Papers</Text>
+                </HStack>
+              </Stack>
+              <Link href={ROUTING.past_papers}>
+                <Button ml={'auto'} size={'sm'}>
+                  <BiRightArrowAlt />
+                </Button>
+              </Link>
+            </HStack>
+          </Flex>
+        );
+      },
+      isClosable: true
+    });
+  });
+  return <></>;
+}