feat(editor): ⚡️ Optimize graph navigation

apps/builder/contexts/GraphContext.tsx

@@ -57,9 +57,14 @@ export type Endpoint = {
 
 export type GroupsCoordinates = IdMap<Coordinates>
 
-const graphContext = createContext<{
+const groupsCoordinatesContext = createContext<{
   groupsCoordinates: GroupsCoordinates
   updateGroupCoordinates: (groupId: string, newCoord: Coordinates) => void
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+}>({})
+
+const graphContext = createContext<{
   graphPosition: Position
   setGraphPosition: Dispatch<SetStateAction<Position>>
   connectingIds: ConnectingIds | null
@@ -84,11 +89,9 @@ const graphContext = createContext<{
 
 export const GraphProvider = ({
   children,
-  groups,
   isReadOnly = false,
 }: {
   children: ReactNode
-  groups: Group[]
   isReadOnly?: boolean
 }) => {
   const [graphPosition, setGraphPosition] = useState(graphPositionDefaultValue)
@@ -97,24 +100,8 @@ export const GraphProvider = ({
   const [sourceEndpoints, setSourceEndpoints] = useState<IdMap<Endpoint>>({})
   const [targetEndpoints, setTargetEndpoints] = useState<IdMap<Endpoint>>({})
   const [openedBlockId, setOpenedBlockId] = useState<string>()
-  const [groupsCoordinates, setGroupsCoordinates] = useState<GroupsCoordinates>(
-    {}
-  )
   const [focusedGroupId, setFocusedGroupId] = useState<string>()
 
-  useEffect(() => {
-    setGroupsCoordinates(
-      groups.reduce(
-        (coords, block) => ({
-          ...coords,
-          [block.id]: block.graphCoordinates,
-        }),
-        {}
-      )
-    )
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [groups])
-
   const addSourceEndpoint = (endpoint: Endpoint) => {
     setSourceEndpoints((endpoints) => ({
       ...endpoints,
@@ -129,12 +116,6 @@ export const GraphProvider = ({
     }))
   }
 
-  const updateGroupCoordinates = (groupId: string, newCoord: Coordinates) =>
-    setGroupsCoordinates((groupsCoordinates) => ({
-      ...groupsCoordinates,
-      [groupId]: newCoord,
-    }))
-
   return (
     <graphContext.Provider
       value={{
@@ -150,8 +131,6 @@ export const GraphProvider = ({
         addTargetEndpoint,
         openedBlockId,
         setOpenedBlockId,
-        groupsCoordinates,
-        updateGroupCoordinates,
         isReadOnly,
         focusedGroupId,
         setFocusedGroupId,
@@ -163,3 +142,45 @@ export const GraphProvider = ({
 }
 
 export const useGraph = () => useContext(graphContext)
+
+export const GroupsCoordinatesProvider = ({
+  children,
+  groups,
+}: {
+  children: ReactNode
+  groups: Group[]
+  isReadOnly?: boolean
+}) => {
+  const [groupsCoordinates, setGroupsCoordinates] = useState<GroupsCoordinates>(
+    {}
+  )
+
+  useEffect(() => {
+    setGroupsCoordinates(
+      groups.reduce(
+        (coords, block) => ({
+          ...coords,
+          [block.id]: block.graphCoordinates,
+        }),
+        {}
+      )
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [groups])
+
+  const updateGroupCoordinates = (groupId: string, newCoord: Coordinates) =>
+    setGroupsCoordinates((groupsCoordinates) => ({
+      ...groupsCoordinates,
+      [groupId]: newCoord,
+    }))
+
+  return (
+    <groupsCoordinatesContext.Provider
+      value={{ groupsCoordinates, updateGroupCoordinates }}
+    >
+      {children}
+    </groupsCoordinatesContext.Provider>
+  )
+}
+
+export const useGroupsCoordinates = () => useContext(groupsCoordinatesContext)

apps/builder/contexts/TypebotContext/TypebotContext.tsx

@@ -102,11 +102,6 @@ export const TypebotContext = ({
   const { typebot, publishedTypebot, webhooks, isReadOnly, isLoading, mutate } =
     useFetchedTypebot({
       typebotId,
-      onError: (error) =>
-        showToast({
-          title: 'Error while fetching typebot',
-          description: error.message,
-        }),
     })
 
   const [
@@ -384,7 +379,7 @@ export const useFetchedTypebot = ({
   onError,
 }: {
   typebotId: string
-  onError: (error: Error) => void
+  onError?: (error: Error) => void
 }) => {
   const { data, error, mutate } = useSWR<
     {
@@ -397,7 +392,7 @@ export const useFetchedTypebot = ({
   >(`/api/typebots/${typebotId}`, fetcher, {
     dedupingInterval: env('E2E_TEST') === 'enabled' ? 0 : undefined,
   })
-  if (error) onError(error)
+  if (error && onError) onError(error)
   return {
     typebot: data?.typebot,
     webhooks: data?.webhooks,