♻️ (editor) Migrate from react-draggable to @use-gesture

Closes #168

apps/builder/src/features/editor/components/EditorSettingsForm.tsx

@@ -10,19 +10,20 @@ import {
 import { MouseIcon, LaptopIcon } from '@/components/icons'
 import { useUser } from '@/features/account'
 import { GraphNavigation } from 'db'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 
-export const EditorSettingsForm = () => {
-  const { user, saveUser } = useUser()
-  const [value, setValue] = useState<string>(
-    user?.graphNavigation ?? GraphNavigation.TRACKPAD
-  )
+type Props = {
+  defaultGraphNavigation: GraphNavigation
+}
 
-  useEffect(() => {
-    if (user?.graphNavigation === value) return
+export const EditorSettingsForm = ({ defaultGraphNavigation }: Props) => {
+  const { saveUser } = useUser()
+  const [value, setValue] = useState<string>(defaultGraphNavigation)
+
+  const changeEditorNavigation = (value: string) => {
+    setValue(value)
     saveUser({ graphNavigation: value as GraphNavigation }).then()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value])
+  }
 
   const options = [
     {
@@ -43,7 +44,7 @@ export const EditorSettingsForm = () => {
   return (
     <Stack spacing={6}>
       <Heading size="md">Editor Navigation</Heading>
-      <RadioGroup onChange={setValue} value={value}>
+      <RadioGroup onChange={changeEditorNavigation} value={value}>
         <HStack spacing={4} w="full" align="stretch">
           {options.map((option) => (
             <VStack

apps/builder/src/features/editor/components/EditorSettingsModal.tsx

@@ -1,3 +1,4 @@
+import { useUser } from '@/features/account'
 import {
   Modal,
   ModalBody,
@@ -14,13 +15,17 @@ type Props = {
 }
 
 export const EditorSettingsModal = ({ isOpen, onClose }: Props) => {
+  const { user } = useUser()
+
   return (
     <Modal isOpen={isOpen} onClose={onClose} size="xl">
       <ModalOverlay />
       <ModalContent>
         <ModalCloseButton />
         <ModalBody pt="12" pb="8" px="8">
-          <EditorSettingsForm />
+          {user?.graphNavigation && (
+            <EditorSettingsForm defaultGraphNavigation={user.graphNavigation} />
+          )}
         </ModalBody>
       </ModalContent>
     </Modal>