Skip to content

Commit

Permalink
Merge pull request #20 from Zain-ul-din/production
Browse files Browse the repository at this point in the history
Production
  • Loading branch information
Zain-ul-din authored Oct 1, 2023
2 parents 111e142 + 00747a0 commit 0645425
Show file tree
Hide file tree
Showing 12 changed files with 652 additions and 54 deletions.
11 changes: 7 additions & 4 deletions src/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import {
Card,
useMediaQuery,
Center,
Heading
Heading,
Divider
} from '@chakra-ui/react';

import SocialButton from './design/SocialButton';
Expand Down Expand Up @@ -129,6 +130,7 @@ const FooterLinks = () => {
<>
<Flex
gap={isUnder600 ? '1.5rem' : '4rem'}
columnGap={'1rem'}
maxWidth={'1200px'}
margin={'1rem auto'}
justifyContent={'center'}
Expand All @@ -147,6 +149,7 @@ const FooterLinks = () => {
_hover={{ textDecoration: 'underline' }}>
{val.toUpperCase()}
</Text>
<Divider />
</Link>
);
})}
Expand Down Expand Up @@ -184,7 +187,7 @@ type GithubApiResponse = typeof githubApiResponseSample;

import NextImage from 'next/image';
import Link from 'next/link';
import handleGlowBlob from '~/lib/glow';


const GithubContributors = ({ url }: { url: string }) => {
const [contributors, setContributors] = useState<Array<GithubApiResponse>>([]);
Expand All @@ -193,8 +196,8 @@ const GithubContributors = ({ url }: { url: string }) => {

useEffect(() => {
axios.get(url).then((res) => setContributors(res.data));
}, []);

}, [url]);
return (
<>
{contributors
Expand Down
20 changes: 13 additions & 7 deletions src/components/Timetable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -92,13 +92,19 @@ export default function Timetable({ metaData, timetableData }: IProps) {
<Btn
style={{ margin: '0rem 1rem 0rem 1rem', padding: '0.4rem' }}
onClick={(e) => {
navigator.clipboard.writeText(window.location.href);
toast({
title: 'link copied',
position: 'top',
status: 'success',
duration: 1000
});
navigator.share({
title: 'LGU Timetable',
text: `LGU Timetable - ${metaData}`,
url: window.location.href
})

// navigator.clipboard.writeText(window.location.href);
// toast({
// title: 'link copied',
// position: 'top',
// status: 'success',
// duration: 1000
// });
}}>
Share{' '}
<b
Expand Down
133 changes: 94 additions & 39 deletions src/components/TimetableSelection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ export default function TimetableSelection({ metaData }: { metaData: any }) {
);
}

import { useContext, useEffect, useState } from 'react';
import { Fragment, useContext, useEffect, useRef, useState } from 'react';
import { ChevronDownIcon } from '@chakra-ui/icons';
import { Flex, Text, Button, useMediaQuery } from '@chakra-ui/react';
import { Flex, Text, Button, useMediaQuery, Input, Divider } from '@chakra-ui/react';
import { MenuStyle, TabStyle, Transitions } from '~/styles/Style';
import {
getDocs,
Expand All @@ -51,6 +51,7 @@ import { timetableHistoryCol } from '~/lib/firebase';
import { ITimetableHistory, TimetableInput } from '~/types/typedef';
import { removeDuplicateTimetableHistory } from '~/lib/util';
import Link from 'next/link';
import Fuse from 'fuse.js';

function Selection({ metaData }: { metaData: any }): JSX.Element {
const [userInput, setUserInput] = useState<TimetableInput>({
Expand Down Expand Up @@ -86,7 +87,7 @@ function Selection({ metaData }: { metaData: any }): JSX.Element {
}, [user]);

const [isUnder400] = useMediaQuery('(max-width: 400px)');

return (
<>
<Transitions.SlideFade in={true}>
Expand All @@ -100,7 +101,8 @@ function Selection({ metaData }: { metaData: any }): JSX.Element {
borderBottomWidth={'0.05px'}
borderColor={'gray.500'}
flexDir={'column'}
className={oxygen.className}>
className={oxygen.className}
>
{history.length > 0 && (
<Flex marginY={'1rem'} flexDirection={'column'}>
<HistoryDropDown menuItems={removeDuplicateTimetableHistory(history)} />
Expand Down Expand Up @@ -233,36 +235,88 @@ type onClickCallBack = (
function DropDown({
defautlSelectedItem,
menuItems,
onClick
onClick,
useInitialFocus
}: {
defautlSelectedItem: string;
menuItems: Array<string> | null;
onClick: onClickCallBack;
useInitialFocus?: boolean
}): JSX.Element {
const [selectedItem, setSelectedItem]: [string, React.Dispatch<React.SetStateAction<string>>] =
useState<string>(defautlSelectedItem);

const [filterItems, setFilterItems] = useState<string[]>(menuItems as string[])
const searchRef = useRef<any>(null)
const [query, setQuery] = useState<string>('')

const fuse = new Fuse(menuItems as string[], {
threshold: 0.3
});

//const lastElementRef = useRef<any>(null);


return (
<Transitions.SlideFade in={true}>
<MenuStyle.Menu preventOverflow={true}>
<MenuStyle.Menu preventOverflow={true} initialFocusRef={useInitialFocus ? searchRef : undefined}>
<MenuStyle.MenuButton
as={Button}
rightIcon={<ChevronDownIcon />}
textOverflow={'clip'}
fontSize={{ base: 'xs', sm: 'md', lg: 'md' }}>
fontSize={{ base: 'xs', sm: 'md', lg: 'md' }}
>
{selectedItem}
</MenuStyle.MenuButton>
<MenuStyle.MenuList className="dropDown" overflowY={'scroll'} maxH={'80'}>
{menuItems &&
menuItems?.map(
<MenuStyle.MenuList className="dropDown" overflowY={'scroll'} maxH={'80'}
onScroll={(e)=> {
if((e as any).target.scrollTop > 5) {
(searchRef.current as HTMLElement).style.bottom ='0';
(searchRef.current as HTMLElement).style.top ='';
}
else {
(searchRef.current as HTMLElement).style.top ='0';
(searchRef.current as HTMLElement).style.bottom ='';
}
}}
maxW={'98vw'}
m={'0.5rem'}
>
<Input
value={query}
ref={searchRef}
placeholder='search' w={'95%'}
m={'0.5rem'}
onChange={(e)=> {
var val = e.target.value
setQuery(val)
const results = fuse.search(e.target.value);
setFilterItems(results.map((val) => val.item));
if (e.target.value == '') setFilterItems(menuItems as string[]);
searchRef.current.scrollIntoView({behavior : 'smooth'})
}}
position={'fixed'}
left={'0'}
right={'0'}
/>
{filterItems &&
filterItems?.map(
(item: string, idx: number): JSX.Element => (
<MenuStyle.MenuItem
onClick={(e) => onClick(item, setSelectedItem)}
key={idx}>
{item}
</MenuStyle.MenuItem>
<Fragment key={idx}>
<MenuStyle.MenuItem
onClick={(e) => {
setQuery('')
setFilterItems(menuItems as string[])
onClick(item, setSelectedItem)
}}
marginTop={idx == 0 ? '3rem' : 'initial'}
>
{item}
</MenuStyle.MenuItem>
<Divider />
</Fragment>
)
)}
)}
</MenuStyle.MenuList>
</MenuStyle.Menu>
</Transitions.SlideFade>
Expand All @@ -280,32 +334,33 @@ function HistoryDropDown({ menuItems }: { menuItems: Array<ITimetableHistory> })
fontSize={{ base: 'xs', sm: 'md', lg: 'md' }}>
{'Previous Selection History'}
</MenuStyle.MenuButton>
<MenuStyle.MenuList className="dropDown" overflowY={'scroll'} maxH={'80'}>
<MenuStyle.MenuList className="dropDown" overflowY={'scroll'} maxH={'80'} maxW={'98vw'} m={'0.5rem'}>
{menuItems &&
menuItems?.map(
(
{ payload, email, createdAt, docId }: any,
idx: number
): JSX.Element => (
<Link
key={idx}
href={`/timetable/${payload.fall?.replace('/', '-')} ${
(
{ payload, email, createdAt, docId }: any,
idx: number
): JSX.Element => (
<Link
key={idx}
href={`/timetable/${payload.fall?.replace('/', '-')} ${
payload.semester
} ${payload.section}`}
onClick={() => {
const historyDoc = doc(timetableHistoryCol, docId);
updateDoc(historyDoc, {
clickCount: increment(1)
});
}}>
<MenuStyle.MenuItem>
{`${payload.fall?.replace('/', '-')} ${
payload.semester
} ${payload.section}`}
onClick={() => {
const historyDoc = doc(timetableHistoryCol, docId);
updateDoc(historyDoc, {
clickCount: increment(1)
});
}}>
<MenuStyle.MenuItem>
{`${payload.fall?.replace('/', '-')} ${
payload.semester
} ${payload.section}`}
</MenuStyle.MenuItem>
</Link>
)
)}
} ${payload.section}`}
</MenuStyle.MenuItem>
<Divider />
</Link>
)
)}
</MenuStyle.MenuList>
</MenuStyle.Menu>
</Transitions.SlideFade>
Expand Down
109 changes: 109 additions & 0 deletions src/components/clash_resolver/CourseCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import { AddIcon, DeleteIcon, LinkIcon } from "@chakra-ui/icons";
import { Alert, AlertIcon, Box, Button, Flex, Text } from "@chakra-ui/react";
import Link from "next/link";
import { memo, useEffect } from "react";
import { ROUTING } from "~/lib/constant";
import { LectureTimeObjectType, SubjectObjectVal } from "~/types/typedef";

const CourseCard = (
{ name, onAdd, onRemove, subject }:
{
name: string,
subject: SubjectObjectVal,
onAdd?: (subjName: string) => void,
onRemove: (subjName: string) => void
}
)=> {


useEffect(()=> {
console.log("re-render due to onAdd")
}, [onAdd])

useEffect(()=> {
console.log("re-render due to onRemove")
}, [onRemove])

useEffect(()=> {
console.log("re-render due to subject")
}, [subject])

useEffect(()=> {
console.log("re-render due to name")
}, [name])


return <Flex bg={'gray.700'} p={2} rounded={'md'} flexDir={'column'} gap={2} border={'1px solid var(--border-color)'}>
<Flex gap={4}>
<Link href={ROUTING.timetable+"/"+subject.url_id} target="_blank">
<Text _hover={{
textDecoration: 'underline'
}}>
<LinkIcon fontSize={'sm'} style={{
transform: 'translateY(-1px)'
}}/> {name}
</Text>
</Link>
{!subject.isInCart ?
<>{onAdd && <Button size={'xs'} onClick={()=> onAdd(name)} colorScheme="green"
isDisabled={Object.entries(subject.conflicts).length>0}
>
<AddIcon />
</Button>}</>
:
<Button size={'xs'} onClick={()=> onRemove(name)} colorScheme="red">
<DeleteIcon />
</Button>}
</Flex>

<Flex>
{Object.entries(subject.conflicts).length == 0 ?
<Alert status="success" variant={'top-accent'}>
<AlertIcon />
No conflicts found
</Alert>:
<>
<Flex flexDir={'column'} gap={5}>
{Object.entries(subject.conflicts).map(([subjName, lectures], i)=>{
return <Flex key={i} bg={'red.400'} p={1} rounded={'md'}
flexDir={'column'}
>
CONFLICT WITH:
<Box fontWeight={'bold'}>{subjName}</Box>
{' '}
At:
{lectures.map((l,i)=>{
return <Flex key={i} bg={'red.700'} p={0.5} px={2} fontWeight={'extrabold'}>
- {l.day}
<Text display={'inline-block'} mx={2}>
<TimeRenderer
time={l.time}
/>
</Text>
</Flex>
})}
</Flex>
})}
</Flex>
</>}
</Flex>
</Flex>
}

const TimeRenderer = ({ time }: { time: LectureTimeObjectType }) => {
return <>
{time.startTime.hours.toString().padStart(2,'0')}:{time.startTime.minutes.toString().padStart(2,'0')}
{' - '}
{time.endTime.hours.toString().padStart(2,'0')}:{time.endTime.minutes.toString().padStart(2,'0')}
</>
}

const CourseCardMemo = memo(CourseCard, (acc, curr)=> {
if(JSON.stringify(acc.subject) == JSON.stringify(curr.subject))
return true;
return false;
});

export default CourseCardMemo;


Loading

2 comments on commit 0645425

@vercel
Copy link

@vercel vercel bot commented on 0645425 Oct 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 0645425 Oct 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.