feat: calendar matchings (#173)

* feat: calendar matchings

* fix: build

* refactor: resolve pr comments

* fix: destrucure editorRef

---------

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

src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx

@@ -1,68 +1,35 @@
-import { background } from '@shared/messages';
+import createSchedule from '@pages/background/lib/createSchedule';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
-import type { UserSchedule } from '@shared/types/UserSchedule';
+import { Button } from '@views/components/common/Button/Button';
 import List from '@views/components/common/List/List';
 import ScheduleListItem from '@views/components/common/ScheduleListItem/ScheduleListItem';
 import Text from '@views/components/common/Text/Text';
 import useSchedules, { getActiveSchedule, switchSchedule } from '@views/hooks/useSchedules';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import AddSchedule from '~icons/material-symbols/add';
 
-/**
- * Props for the CalendarSchedules component.
- */
-export type Props = {
-    style?: React.CSSProperties;
-    dummySchedules?: UserSchedule[];
-    dummyActiveIndex?: number;
-};
-
 /**
  * Renders a component that displays a list of schedules.
  *
  * @param props - The component props.
  * @returns The rendered component.
  */
-export function CalendarSchedules({ style, dummySchedules, dummyActiveIndex }: Props) {
-    const [activeScheduleIndex, setActiveScheduleIndex] = useState(0);
-    const [newSchedule, setNewSchedule] = useState('');
-    const [activeSchedule, schedules] = useSchedules();
-
-    useEffect(() => {
-        const index = schedules.findIndex(schedule => schedule.id === activeSchedule.id);
-        if (index !== -1) {
-            setActiveScheduleIndex(index);
-        }
-    }, [activeSchedule, schedules]);
-
-    const handleKeyDown = event => {
-        if (event.code === 'Enter') {
-            background.createSchedule({ scheduleName: newSchedule }).then(() => {
-                setNewSchedule('');
-            });
-        }
-    };
-
-    const handleScheduleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setNewSchedule(e.target.value);
-    };
-
-    const fixBuildError = {
-        dummySchedules,
-        dummyActiveIndex,
-    };
-    console.log(fixBuildError);
+export function CalendarSchedules() {
+    const [, schedules] = useSchedules();
 
     return (
-        <div style={{ ...style }} className='items-center'>
+        <div className='min-w-full w-0 items-center'>
             <div className='m0 m-b-2 w-full flex justify-between'>
                 <Text variant='h3'>MY SCHEDULES</Text>
-                <div className='cursor-pointer items-center justify-center btn-transition -ml-1.5 hover:text-zinc-400'>
-                    <Text variant='h3'>
-                        <AddSchedule />
-                    </Text>
-                </div>
+                <Button
+                    variant='single'
+                    color='theme-black'
+                    className='h-fit p-0 btn'
+                    onClick={() => createSchedule('New Schedule')}
+                >
+                    <AddSchedule className='h-6 w-6' />
+                </Button>
             </div>
             <div className='flex flex-col space-y-2.5'>
                 <List
@@ -88,13 +55,6 @@ export function CalendarSchedules({ style, dummySchedules, dummyActiveIndex }: P
                         />
                     )}
                 </List>
-                <input
-                    type='text'
-                    placeholder='Enter new schedule'
-                    value={newSchedule}
-                    onChange={handleScheduleInputChange}
-                    onKeyDown={handleKeyDown}
-                />
             </div>
         </div>
     );