DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Calendar Schedule component finished, fix: list didn't allow updates when adding a new schedule (#115)

Browse Source 
* Temporarily uninstalling husky cause github desktop has issues with it

* Cleaned up some code. Removed unnecessary state value on injected popup

* Should've fixed popup alignment issue. Still need to integrate course schedule with calendar. Still debugging.

* Updated CalendarGridStories

* Fix: change to ExampleCourse from exampleCourse

* setCourse and calendar header need work

* Update as part of merge

* Fix: fixed build errors

* Fix: Added Todo

* Chore: Cleaned up useFlattenedCourseSchedule hook

* fix: List now keeps track of state when existing items are switched, while adding new items to the end

* Added back husky

* Update src/views/components/calendar/Calendar/Calendar.tsx

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* refactor: added type-safety, destructuring, etc. ready for re-review

* refactor: got rid of ts-ignore in openNewTabFromContentScript

* Update src/views/components/calendar/CalendarHeader/CalenderHeader.tsx

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* refactor: using path aliasing

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* refactor: using path aliasing

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* refactor: using satisfies instead of as

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* refactor: using satisfies instead of as

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* style: reformatted spacing

* style: eslint import order

* refactor: added new constructor for UserSchedule to avoid passing down null values to child props

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
This commit is contained in:
Som Gupta
2024-02-29 20:15:45 -06:00
committed by doprz
parent 3a48859ddd
commit a99a55788a
15 changed files with 899 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/components/common/List/List.tsx
View File

@@ -1,6 +1,6 @@
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import type { ReactElement } from 'react';
import React, { useCallback, useState } from 'react';
import React, { useCallback, useEffect,useState } from 'react';
/*
* Ctrl + f dragHandleProps on PopupCourseBlock.tsx for example implementation of drag handle (two lines of code)
@@ -19,9 +19,9 @@ export interface ListProps {
gap: number; // Impacts the spacing between items in the list
}
function initial(draggableElements: any[] = []) {
function initial(count: number, draggableElements: any[] = []) {
return draggableElements.map((element, index) => ({
id: `id:${index}`,
id: `id:${index + count}`,
content: element as ReactElement,
}));
}
@@ -83,8 +83,17 @@ const Row: React.FC<RowProps> = React.memo(({ data: { items, gap }, index, style
* <List draggableElements={elements} />
*/
const List: React.FC<ListProps> = ({ draggableElements, itemHeight, listHeight, listWidth, gap = 12 }: ListProps) => {
const [items, setItems] = useState(() => initial(draggableElements));
const [items, setItems] = useState(() => initial(0, draggableElements));
useEffect(() => {
setItems((prevItems) => {
const prevItemIds = prevItems.map(item => item.id);
const newElements = draggableElements.filter((_, index) => !prevItemIds.includes(`id:${index}`));
const newItems = initial(prevItems.length, newElements);
return [...prevItems, ...newItems];
});
}, [draggableElements]);
const onDragEnd = useCallback(
result => {
if (!result.destination) {
@@ -113,8 +122,7 @@ const List: React.FC<ListProps> = ({ draggableElements, itemHeight, listHeight,
const transform = style?.transform;
if (snapshot.isDragging && transform) {
console.log(transform);
let [, _x, y] = transform.match(/translate\(([-\d]+)px, ([-\d]+)px\)/) || [];
let [, , y] = transform.match(/translate\(([-\d]+)px, ([-\d]+)px\)/) || [];
style.transform = `translate3d(0px, ${y}px, 0px)`; // Apply constrained y value
}

10
src/views/components/common/ScheduleListItem/ScheduleListItem.tsx
View File

@@ -12,14 +12,15 @@ export type Props = {
active?: boolean;
name: string;
dragHandleProps?: any;
onClick?: (index) => void;
};
/**
* This is a reusable dropdown component that can be used to toggle the visiblity of information
*/
export default function ScheduleListItem(props: Props) {
const { dragHandleProps } = props;
console.log(props);
const { dragHandleProps, onClick } = props;
return (
<div style={{ ...props.style }} className='items-center'>
<li className='w-100% flex cursor-pointer items-center self-stretch justify-left text-ut-burntorange'>
@@ -31,7 +32,10 @@ export default function ScheduleListItem(props: Props) {
<DragIndicatorIcon className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
</div>
<div className='inline-flex items-center justify-center gap-1.5'>
<div className='h-5.5 w-5.5 flex items-center justify-center border-2px border-current rounded-full btn-transition group-active:scale-95'>
<div
className='h-5.5 w-5.5 flex items-center justify-center border-2px border-current rounded-full btn-transition group-active:scale-95'
onClick={onClick}
>
<div
className={clsx(
'bg-current h-3 w-3 rounded-full transition tansform scale-100 ease-out-expo duration-250',