feat: fix drag

icssc · Nov 20, 2024 · 3814d1c · 3814d1c
1 parent 9a26f62
commit 3814d1c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 22 deletions.
diff --git a/apps/antalmanac/src/components/SharedRoot.tsx b/apps/antalmanac/src/components/SharedRoot.tsx
@@ -10,7 +10,6 @@ import loadingGif from './RightPane/CoursePane/SearchForm/Gifs/loading.gif';
 
 import { CoursePaneRoot } from '$components/RightPane/CoursePane/CoursePaneRoot';
 import { getLocalStorageUserId } from '$lib/localStorage';
-import { useScheduleManagementStore } from '$stores/ScheduleManagementStore';
 import { useThemeStore } from '$stores/SettingsStore';
 import { useTabStore } from '$stores/TabStore';
 
@@ -222,26 +221,6 @@ export default function ScheduleManagement() {
      */
     const ref = useRef<HTMLDivElement>();
 
-    const setScheduleManagementWidth = useScheduleManagementStore((state) => state.setScheduleManagementWidth);
-
-    useEffect(() => {
-        const element = ref.current;
-
-        if (!element) return;
-
-        const observer = new ResizeObserver(([entry]) => {
-            if (entry.contentRect) {
-                setScheduleManagementWidth(entry.contentRect.width);
-            }
-        });
-
-        observer.observe(element);
-
-        return () => {
-            observer.disconnect();
-        };
-    }, [setScheduleManagementWidth]);
-
     const value = isMobile ? activeTab : activeTab - 1 >= 0 ? activeTab - 1 : 0;
 
     // Save the current scroll position to the store.

diff --git a/apps/antalmanac/src/routes/Home.tsx b/apps/antalmanac/src/routes/Home.tsx
@@ -10,6 +10,7 @@ import NotificationSnackbar from '$components/NotificationSnackbar';
 import PatchNotes from '$components/PatchNotes';
 import ScheduleManagement from '$components/SharedRoot';
 import { Tutorial } from '$components/Tutorial';
+import { useScheduleManagementStore } from '$stores/ScheduleManagementStore';
 
 function MobileHome() {
     return (
@@ -22,6 +23,23 @@ function MobileHome() {
 
 function DesktopHome() {
     const theme = useTheme();
+    const setScheduleManagementWidth = useScheduleManagementStore((state) => state.setScheduleManagementWidth);
+
+    const handleDrag = (sizes: number[]) => {
+        if (!window.innerWidth) {
+            return;
+        }
+
+        /**
+         * Sizes is a two element array containing the size of each side (in percentages)
+         *
+         * @example [25, 75]
+         */
+        const [_, scheduleManagementPercentage] = sizes;
+        const scheduleManagementWidth = window.innerWidth * scheduleManagementPercentage * 0.01;
+
+        setScheduleManagementWidth(scheduleManagementWidth);
+    };
 
     return (
         <>
@@ -30,7 +48,7 @@ function DesktopHome() {
 
                 <Split
                     sizes={[45, 55]}
-                    minSize={100}
+                    minSize={400}
                     expandToMin={false}
                     gutterSize={10}
                     gutterAlign="center"
@@ -43,6 +61,7 @@ function DesktopHome() {
                         backgroundColor: theme.palette.primary.main,
                         width: '10px',
                     })}
+                    onDrag={handleDrag}
                 >
                     <Stack direction="column">
                         <Calendar isMobile={false} />