From 89d603105df1a8a3eec624188a9d4678e00ddf0a Mon Sep 17 00:00:00 2001
From: Reuben Thomas <reubenthomas123@gmail.com>
Date: Tue, 9 Jan 2024 15:03:49 +1300
Subject: [PATCH] New search filter and cards

Add the link buttons back to the ig card

whoops

I changed the buttons because I have to

Help

help #2
---
 components/IGCard.tsx         | 72 +++++++++++++++++------------------
 components/IGSearchFilter.tsx | 49 +++++++++++++++++-------
 2 files changed, 70 insertions(+), 51 deletions(-)

diff --git a/components/IGCard.tsx b/components/IGCard.tsx
index 7394295..37bf3fc 100644
--- a/components/IGCard.tsx
+++ b/components/IGCard.tsx
@@ -21,7 +21,7 @@ import {
   VStack,
 } from '@chakra-ui/react'
 import React from 'react'
-import { FaTelegram, FaUserCircle } from 'react-icons/fa'
+import { FaTelegram, FaUser, FaUserCircle } from 'react-icons/fa'
 import Link from 'next/link'
 import ImageWithFallback from './ImageWithFallback'
 import { DEFAULT_PNG_NAME } from '../utils'
@@ -35,45 +35,28 @@ type LeftPaneProps = {
   imageKey: number
   imageSrc: string
   isInactive: boolean
+  inviteLink: string
+  primaryIGHead: User | null
 }
 
 const getContactButton = (contact: User | null, width?: string) => {
-  // const toast = useToast()
-  //
-  // const copyToClipboard = () => {
-  //   const nameToCopy = contact?.name || 'No contact found'
-  //   navigator.clipboard.writeText(nameToCopy)
-  //
-  //   // Show toast alert
-  //   toast({
-  //     title: 'Copied to clipboard!',
-  //     status: 'success',
-  //     duration: 3000,
-  //     isClosable: true,
-  //     position: 'bottom',
-  //   })
-  // }
-  //
-  // const isContactFound = contact !== null && contact.name !== undefined
-
   return (
     <Button
       overflow='hidden'
       textOverflow={'ellipsis'}
       leftIcon={<FaUserCircle />}
       variant='outline'
+      size='xs'
       colorScheme='facebook'
       minWidth={width || 'auto'}
       maxWidth={width || 'auto'}
       rounded='15px'
       style={{
         borderRadius: '0.5rem',
+        border: '1px solid #144a70',
         display: 'flex',
         alignItems: 'center',
       }}
-      // onClick={copyToClipboard}
-      // isDisabled={!isContactFound}
-      isDisabled={true}
     >
       <Text noOfLines={[1]} display='inline' as='b'>
         {contact?.name || 'No contact found'}
@@ -88,27 +71,36 @@ const getInviteLinkButton = (inviteLink: string, width?: string) => {
       <Button
         overflow='hidden'
         textOverflow={'ellipsis'}
+        leftIcon={<FaTelegram />}
+        variant='outline'
+        size='xs'
         colorScheme='telegram'
         minWidth={width || 'auto'}
         maxWidth={width || 'auto'}
         rounded='15px'
         style={{ borderRadius: '0.5rem', border: '1px solid #229ed9' }}
       >
-        <FaTelegram />
+        Invite Link
       </Button>
     </Link>
   )
 }
 
-const LeftPane: React.FC<LeftPaneProps> = ({ imageKey, imageSrc, isInactive }) => {
+const LeftPane: React.FC<LeftPaneProps> = ({
+  imageKey,
+  imageSrc,
+  isInactive,
+  inviteLink,
+  primaryIGHead,
+}) => {
   return (
-    <VStack borderRight='1px solid darkgrey' justifyContent='space-apart'>
-      <Center width='130px' flex={1}>
+    <VStack borderRight='1px solid darkgrey' align='center' justifyContent='space-apart'>
+      <Center width='110px' flex={1}>
         <ImageWithFallback
           key={imageKey}
           fallbackSrc={'orgs/' + DEFAULT_PNG_NAME}
-          width={300}
-          height={300}
+          width={120}
+          height={120}
           src={imageSrc}
           alt={imageSrc}
           style={{ objectFit: 'contain', padding: '12px' }}
@@ -133,6 +125,10 @@ const LeftPane: React.FC<LeftPaneProps> = ({ imageKey, imageSrc, isInactive }) =
           <></>
         )}
       </Center>
+      <Center width='90%'>{getContactButton(primaryIGHead, '95px')}</Center>
+      <Center width='90%' pb='7px'>
+        {getInviteLinkButton(inviteLink, '95px')}
+      </Center>
     </VStack>
   )
 }
@@ -160,10 +156,10 @@ const IGCard: React.FC<IGInfoProps> = ({ imageKey, ig_info }) => {
       <Box
         _hover={{ boxShadow: 'xl', transform: 'translateY(-3px)', cursor: 'pointer' }}
         transition='transform 0.3s, box-shadow 0.3s'
-        style={{ minWidth: '100%', minHeight: '15rem' }}
+        style={{ minWidth: '100%', minHeight: '10rem' }}
       >
         <Card
-          direction={{ base: 'column', sm: 'row' }}
+          direction={{ base: 'row', sm: 'row' }}
           overflow='hidden'
           variant='elevated'
           shadow='md'
@@ -171,7 +167,13 @@ const IGCard: React.FC<IGInfoProps> = ({ imageKey, ig_info }) => {
           style={{ height: '100%' }}
           border='1px solid darkgrey'
         >
-          <LeftPane imageKey={imageKey - 1} imageSrc={imageSrc} isInactive={ig_info.isInactive} />
+          <LeftPane
+            imageKey={imageKey - 1}
+            imageSrc={imageSrc}
+            isInactive={ig_info.isInactive}
+            inviteLink={inviteLink}
+            primaryIGHead={primaryIGHead}
+          />
           <Stack>
             <CardBody>
               <Heading fontSize={'2xl'} fontFamily={'body'}>
@@ -182,7 +184,7 @@ const IGCard: React.FC<IGInfoProps> = ({ imageKey, ig_info }) => {
                 pt='1vh'
                 css={{
                   display: '-webkit-box',
-                  WebkitLineClamp: 3,
+                  WebkitLineClamp: 4,
                   WebkitBoxOrient: 'vertical',
                   overflow: 'hidden',
                 }}
@@ -190,12 +192,6 @@ const IGCard: React.FC<IGInfoProps> = ({ imageKey, ig_info }) => {
                 {ig_info.description}
               </Text>
             </CardBody>
-            <CardFooter>
-              <ButtonGroup spacing='1'>
-                {getInviteLinkButton(inviteLink)}
-                {getContactButton(primaryIGHead)}
-              </ButtonGroup>
-            </CardFooter>
           </Stack>
         </Card>
       </Box>
diff --git a/components/IGSearchFilter.tsx b/components/IGSearchFilter.tsx
index 940f66f..b5691c2 100644
--- a/components/IGSearchFilter.tsx
+++ b/components/IGSearchFilter.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import {
   Box,
+  Card,
   Center,
   Checkbox,
   CheckboxGroup,
@@ -9,8 +10,10 @@ import {
   Input,
   InputGroup,
   InputLeftElement,
+  SimpleGrid,
   Stack,
   VStack,
+  useBreakpointValue,
 } from '@chakra-ui/react'
 import { SearchIcon } from '@chakra-ui/icons'
 import { DEFAULT_FILTERS } from '../pages/student-groups'
@@ -28,9 +31,39 @@ const IGSearchFilter: React.FC<IGSearchFilterProps> = ({
   onInactiveChange,
   interestGroupCategories,
 }) => {
+  const isGrid = useBreakpointValue({ base: true, md: false })
+
+  const CheckboxLayout = () => {
+    const checkboxes = Object.entries(interestGroupCategories).map((category) => (
+      <Checkbox onChange={onChange} key={category[0]} value={category[0]}>
+        {category[1]}
+      </Checkbox>
+    ))
+    if (isGrid) {
+      return (
+        <SimpleGrid columns={2} spacing={2} mt='0.5rem'>
+          {checkboxes}
+          <Checkbox onChange={onInactiveChange} value={'Inactive'}>
+            Inactive
+          </Checkbox>
+        </SimpleGrid>
+      )
+    } else {
+      return (
+        <HStack mt='0.5rem' spacing={[1, 5]}>
+          {checkboxes}
+          <Divider borderColor={'black'} border='1px' orientation='vertical' />
+          <Checkbox onChange={onInactiveChange} value={'Inactive'}>
+            Inactive
+          </Checkbox>
+        </HStack>
+      )
+    }
+  }
+
   return (
-    <VStack margin={'2rem'}>
-      <InputGroup>
+    <VStack width='100%' margin={'1rem'}>
+      <InputGroup width={{ base: '95%', sm: '95%', md: '60%' }}>
         <InputLeftElement pointerEvents='none' fontSize='1.3em' paddingTop={2}>
           <SearchIcon color='gray.600' />
         </InputLeftElement>
@@ -44,17 +77,7 @@ const IGSearchFilter: React.FC<IGSearchFilterProps> = ({
         />
       </InputGroup>
       <CheckboxGroup colorScheme='green' defaultValue={DEFAULT_FILTERS}>
-        <HStack mt='0.5rem' spacing={[1, 5]}>
-          {Object.entries(interestGroupCategories).map((category) => (
-            <Checkbox onChange={onChange} key={category[0]} value={category[0]}>
-              {category[1]}
-            </Checkbox>
-          ))}
-          <Divider borderColor={'black'} border='1px' orientation='vertical' />
-          <Checkbox onChange={onInactiveChange} value={'Inactive'}>
-            Inactive
-          </Checkbox>
-        </HStack>
+        <CheckboxLayout />
       </CheckboxGroup>
     </VStack>
   )