Skip to content

Instantly share code, notes, and snippets.

@ace411
Last active August 18, 2022 17:43
Show Gist options
  • Save ace411/d6f70506d4ed48d77bd7390df63ef714 to your computer and use it in GitHub Desktop.
Save ace411/d6f70506d4ed48d77bd7390df63ef714 to your computer and use it in GitHub Desktop.
Bryntum Gantt and React + Apollo GraphQL
import { BryntumGantt } from '@bryntum/gantt-react'
import useGanttConfig from './GanttConfig'
import './App.scss'
const App = () => {
const ganttConfig = useGanttConfig()
return (
<>
<BryntumGantt {...ganttConfig} />
</>
)
}
export default App
import { gql, useMutation } from '@apollo/client'
import { useEffect, useState } from 'react'
const useGanttConfig = () => {
const [dependencies, setDependencies] = useState([])
const [tasks, setTasks] = useState([])
useEffect(() => {
const getSchedule = async () => {
const response = await fetch(process.env.REACT_APP_GRAPHQL_SERVER, {
method: 'POST',
headers: new Headers({
'content-type': 'application/json',
}),
body: JSON.stringify({
query: `
query TaskQuery {
dependencies {
fromTask
toTask
id
}
tasks {
percentDone
durationUnit
startDate
duration
name
id
}
}`,
}),
})
if (response.ok) {
const { data } = await response.json()
const { dependencies, tasks } = data
setDependencies(dependencies)
setTasks(tasks)
}
}
if (dependencies.length === 0 && tasks.length === 0) {
getSchedule()
}
}, [dependencies, tasks])
const [updateTask] = useMutation(gql`
mutation UpdateTask(
$id: Int
$name: String
$duration: Int
$percentDone: Int
) {
updateTask(
id: $id
name: $name
duration: $duration
percentDone: $percentDone
)
}
`)
return {
tasks,
dependencies,
barMargin: 10,
viewPreset: 'hourAndDay',
onDataChange: ({ action, records }) => {
if (action === 'update') {
const { name, duration, id, percentDone } = records[0]
if (
typeof percentDone !== 'undefined' &&
typeof duration !== 'undefined' &&
typeof name !== 'undefined' &&
typeof id !== 'undefined'
) {
updateTask({
variables: { name, duration, id, percentDone },
onCompleted: (data) => {
const { updateTask } = data
console.log(updateTask ? 'Task updated' : 'Task not updated')
},
})
}
}
},
}
}
export default useGanttConfig
import React from 'react'
import ReactDOM from 'react-dom'
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
import App from './App'
const client = new ApolloClient({
uri: process.env.REACT_APP_GRAPHQL_SERVER,
cache: new InMemoryCache(),
})
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById('container'),
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment