2
0
Files
bot/apps/builder/src/features/graph/providers/GroupsCoordinateProvider.tsx
Baptiste Arnaud f8f98adc1c (editor) Improve edges responsiveness
Also fixed a ton of useEffects should make everything a bit more reactive.

Closes #307
2023-02-28 15:38:28 +01:00

62 lines
1.4 KiB
TypeScript

import { Group } from 'models'
import {
ReactNode,
useState,
useEffect,
useContext,
createContext,
useCallback,
} from 'react'
import { GroupsCoordinates, Coordinates } from './GraphProvider'
const groupsCoordinatesContext = createContext<{
groupsCoordinates: GroupsCoordinates
updateGroupCoordinates: (groupId: string, newCoord: Coordinates) => void
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
}>({})
export const GroupsCoordinatesProvider = ({
children,
groups,
}: {
children: ReactNode
groups: Group[]
isReadOnly?: boolean
}) => {
const [groupsCoordinates, setGroupsCoordinates] = useState<GroupsCoordinates>(
{}
)
useEffect(() => {
setGroupsCoordinates(
groups.reduce(
(coords, group) => ({
...coords,
[group.id]: group.graphCoordinates,
}),
{}
)
)
}, [groups])
const updateGroupCoordinates = useCallback(
(groupId: string, newCoord: Coordinates) =>
setGroupsCoordinates((groupsCoordinates) => ({
...groupsCoordinates,
[groupId]: newCoord,
})),
[]
)
return (
<groupsCoordinatesContext.Provider
value={{ groupsCoordinates, updateGroupCoordinates }}
>
{children}
</groupsCoordinatesContext.Provider>
)
}
export const useGroupsCoordinates = () => useContext(groupsCoordinatesContext)