1
0

HerdView.tsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
  1. import './HerdView.scss'
  2. import BackButton from '@/components/button/BackButton'
  3. import Button from '@/components/button/Button'
  4. import ButtonSet from '@/components/ButtonSet'
  5. import Chip from '@/components/Chip'
  6. import CreateButton from '@/components/button/CreateButton'
  7. import DeleteButton from '@/components/button/DeleteButton'
  8. import { DndContext } from '@dnd-kit/core'
  9. import type { DragEndEvent } from '@dnd-kit/core'
  10. import FormGroup from '@/components/form/FormGroup'
  11. import FormInput from '@/components/form/FormInput'
  12. import LoadingIndicator from '@/components/LoadingIndicator'
  13. import Main from '@/components/Main'
  14. import Notice from '@/components/Notice'
  15. import Pagination from '@/components/Pagination'
  16. import Placeholder from '@/components/Placeholder'
  17. import ResetButton from '@/components/button/ResetButton'
  18. import Row from '@/components/Row'
  19. import SaveButton from '@/components/button/SaveButton'
  20. import SearchForm from '@/components/SearchForm'
  21. import SortableRow from '@/components/SortableRow'
  22. import type { SubmitHandler } from 'react-hook-form'
  23. import api from '@/api'
  24. import { useForm } from 'react-hook-form'
  25. import { CheckCircleIcon, CloudIcon, XCircleIcon, XMarkIcon } from '@heroicons/react/20/solid'
  26. import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
  27. import { useCallback, useEffect, useState } from 'react'
  28. import { useConnection, useRouteSearch, useSession } from '@/hooks'
  29. import { useNavigate, useParams } from 'react-router-dom'
  30. interface HerdUpdateFormData extends Pick<api.Herd, 'name'> {}
  31. interface TaskCreateFormData extends Pick<api.Task, 'description'> {}
  32. interface TaskUpdateFormData extends Pick<api.Task, 'description'> {}
  33. function useHerdUpdateForm() {
  34. const form = useForm<HerdUpdateFormData>({ mode: 'onBlur' })
  35. const inputs = {
  36. name: form.register('name', { validate: value => {
  37. if (value.length < 1) return 'Required'
  38. }}),
  39. }
  40. return { ...form, inputs }
  41. }
  42. function useTaskCreateForm() {
  43. const form = useForm<TaskCreateFormData>({ mode: 'onBlur' })
  44. const inputs = {
  45. description: form.register('description', { validate: value => {
  46. if (value.length < 1) return 'Required'
  47. }}),
  48. }
  49. return { ...form, inputs }
  50. }
  51. function useTaskUpdateForm() {
  52. const form = useForm<TaskUpdateFormData>({ mode: 'onBlur' })
  53. const inputs = {
  54. description: form.register('description', { validate: value => {
  55. if (value.length < 1) return 'Required'
  56. }}),
  57. }
  58. return { ...form, inputs }
  59. }
  60. export default function HerdView() {
  61. const { account } = useSession()
  62. const createTaskForm = useTaskCreateForm()
  63. const { id } = useParams()
  64. const navigate = useNavigate()
  65. const { options } = useConnection()
  66. const updateHerdForm = useHerdUpdateForm()
  67. const updateTaskForm = useTaskUpdateForm()
  68. const { limit, page, searchParams, setPage } = useRouteSearch()
  69. const [data, setData] = useState<api.GetHerdResponse>()
  70. const [taskData, setTaskData] = useState<api.SearchResponse<api.GetTaskResponse>>()
  71. const [busy, setBusy] = useState(false)
  72. const [editing, setEditing] = useState<string>()
  73. const [error, setError] = useState<Error>()
  74. const [loading, setLoading] = useState(false)
  75. const disableSorting = Boolean(searchParams.search)
  76. async function createTask(data: TaskCreateFormData) {
  77. if (busy) return
  78. try {
  79. setBusy(true)
  80. setError(undefined)
  81. await api.createTask(options, {
  82. task: {
  83. _herd: id || '',
  84. _account: account?._id || '',
  85. description: data.description,
  86. },
  87. })
  88. createTaskForm.reset({ description: '' })
  89. if (taskData && taskData.results.length >= limit) {
  90. // New task will be on a new page; change page to display it
  91. setPage(page + 1)
  92. } else {
  93. // Reload current page
  94. const taskRes = await api.searchTasks(options, id, searchParams)
  95. setTaskData(taskRes)
  96. }
  97. } catch (err) {
  98. setError(err as Error)
  99. } finally {
  100. setBusy(false)
  101. }
  102. }
  103. async function deleteHerd() {
  104. if (busy || !data) return
  105. try {
  106. setBusy(true)
  107. setError(undefined)
  108. await api.deleteHerd(options, data.herd._id)
  109. navigate('/')
  110. } catch (err) {
  111. setError(err as Error)
  112. } finally {
  113. setBusy(false)
  114. }
  115. }
  116. async function deleteTask(task: api.WithId<api.Task>) {
  117. if (busy) return
  118. try {
  119. setBusy(true)
  120. setError(undefined)
  121. await api.deleteTask(options, task._id)
  122. // Reload current page
  123. const taskRes = await api.searchTasks(options, id, searchParams)
  124. setTaskData(taskRes)
  125. } catch (err) {
  126. setError(err as Error)
  127. } finally {
  128. setBusy(false)
  129. }
  130. }
  131. async function moveTask({ active, over }: DragEndEvent) {
  132. if (busy || !taskData || !over || active.id === over.id) return
  133. const activeIdx = taskData.results.findIndex(({ task }) => task._id === active.id)
  134. const overIdx = taskData.results.findIndex(({ task }) => task._id === over.id)
  135. if (activeIdx < 0 || overIdx < 0) return
  136. const target = taskData.results[overIdx]
  137. try {
  138. setBusy(true)
  139. setError(undefined)
  140. const update = await api.moveTask(options, active.id.toString(), target.task.position)
  141. // Hot reorder tasks
  142. const results = activeIdx < overIdx
  143. // Task moved down
  144. ? [
  145. ...taskData.results.slice(0, overIdx + 1).filter(({ task }) => task._id !== update.task._id),
  146. update,
  147. ...taskData.results.slice(overIdx +1),
  148. ]
  149. // Task moved up
  150. : [
  151. ...taskData.results.slice(0, overIdx),
  152. update,
  153. ...taskData.results.slice(overIdx).filter(({ task }) => task._id !== update.task._id),
  154. ]
  155. setTaskData({ ...taskData, results })
  156. } catch (err) {
  157. setError(err as Error)
  158. } finally {
  159. setBusy(false)
  160. }
  161. }
  162. async function toggleTaskDone(task: api.WithId<api.Task>) {
  163. try {
  164. setBusy(true)
  165. setError(undefined)
  166. const update = await api.toggleTaskDone(options, task._id)
  167. const inPageTask = taskData?.results.find(({ task }) => task._id === update.task._id)
  168. if (inPageTask) inPageTask.task.done = update.task.done
  169. } catch (err) {
  170. setError(err as Error)
  171. } finally {
  172. setBusy(false)
  173. }
  174. }
  175. const reload = useCallback(async () => {
  176. if (id) {
  177. setError(undefined)
  178. setLoading(true)
  179. try {
  180. const res = await api.getHerd(options, id)
  181. setData(res)
  182. const taskRes = await api.searchTasks(options, id, searchParams)
  183. setTaskData(taskRes)
  184. } catch (err) {
  185. setError(err as Error)
  186. } finally {
  187. setLoading(false)
  188. }
  189. }
  190. }, [id, options, searchParams])
  191. function setTaskToEdit(task?: api.WithId<api.Task>) {
  192. if (task) {
  193. setEditing(task._id)
  194. updateTaskForm.reset({ description: task.description })
  195. } else {
  196. setEditing(undefined)
  197. }
  198. }
  199. async function updateHerd(data: HerdUpdateFormData) {
  200. if (busy) return
  201. try {
  202. setBusy(true)
  203. setError(undefined)
  204. const res = await api.updateHerd(options, id as string, {
  205. herd: data,
  206. })
  207. setData(res)
  208. } catch (err) {
  209. setError(err as Error)
  210. } finally {
  211. setBusy(false)
  212. }
  213. }
  214. function updateTask(task: api.WithId<api.Task>): SubmitHandler<TaskUpdateFormData> {
  215. return async function(data) {
  216. if (busy) return
  217. try {
  218. setBusy(true)
  219. setError(undefined)
  220. const update = await api.updateTask(options, task._id, { task: data })
  221. const inPageTask = taskData?.results.find(({ task }) => task._id === update.task._id)
  222. if (inPageTask) {
  223. inPageTask.task.description = update.task.description
  224. }
  225. setEditing(undefined)
  226. } catch (err) {
  227. setError(err as Error)
  228. } finally {
  229. setBusy(false)
  230. }
  231. }
  232. }
  233. useEffect(() => {
  234. reload()
  235. }, [reload])
  236. if (loading) return (
  237. <Main>
  238. <header>
  239. {id ? <h1>Loading Herd...</h1> : <h1>Create Herd</h1>}
  240. </header>
  241. <LoadingIndicator />
  242. </Main>
  243. )
  244. if (error) return (
  245. <Main>
  246. <header>
  247. {id ? <h1>Loading Herd...</h1> : <h1>Create Herd</h1>}
  248. <ButtonSet>
  249. <BackButton />
  250. </ButtonSet>
  251. </header>
  252. <Notice error={error} />
  253. </Main>
  254. )
  255. return data && (
  256. <Main>
  257. <header>
  258. <h1>{data.herd.name}</h1>
  259. <ButtonSet>
  260. <BackButton onClick={() => navigate('/')} />
  261. <DeleteButton onClick={deleteHerd} />
  262. </ButtonSet>
  263. </header>
  264. <SearchForm />
  265. <Notice error={error} />
  266. {taskData && (
  267. <>
  268. {taskData.metadata.totalCount > 0 ? (
  269. <DndContext onDragEnd={moveTask}>
  270. <SortableContext
  271. items={taskData.results.map(({ task }) => task._id)}
  272. strategy={verticalListSortingStrategy}
  273. >
  274. {taskData.results.map(({ task }, i) => (
  275. <SortableRow key={task._id} id={task._id} className={`task ${task.done ? 'done' : 'not-done'}`} disabled={disableSorting}>
  276. <div className="position">{i + 1 + ((page - 1) * limit)}</div>
  277. <div className="description">
  278. {editing === task._id ? (
  279. <form onSubmit={updateTaskForm.handleSubmit(updateTask(task))}>
  280. <Row className="edit-task">
  281. <FormInput>
  282. <input type="text" autoFocus {...updateTaskForm.inputs.description} />
  283. </FormInput>
  284. <ButtonSet>
  285. <SaveButton type="submit" className="mini" />
  286. <Button onClick={() => setTaskToEdit(undefined)} className="mini">
  287. <XMarkIcon />
  288. <span>Cancel</span>
  289. </Button>
  290. </ButtonSet>
  291. </Row>
  292. </form>
  293. ) : (
  294. <span onClick={() => setTaskToEdit(task)}>{task.description}</span>
  295. )}
  296. </div>
  297. <ButtonSet>
  298. {task.done ? (
  299. <Button className="positive mini fill" onClick={() => toggleTaskDone(task)}>
  300. <CheckCircleIcon />
  301. <span>Done</span>
  302. </Button>
  303. ) : (
  304. <Button className="negative mini" onClick={() => toggleTaskDone(task)}>
  305. <XCircleIcon />
  306. <span>Not done</span>
  307. </Button>
  308. )}
  309. <DeleteButton className="mini" onClick={() => deleteTask(task)} />
  310. </ButtonSet>
  311. </SortableRow>
  312. ))}
  313. </SortableContext>
  314. </DndContext>
  315. ) : (
  316. <Placeholder>
  317. <CloudIcon />
  318. <span>No tasks!</span>
  319. </Placeholder>
  320. )}
  321. <form onSubmit={createTaskForm.handleSubmit(createTask)}>
  322. <FormGroup name="Add a task">
  323. <FormInput>
  324. <Row>
  325. <input id="description" type="text" {...createTaskForm.inputs.description} />
  326. <ButtonSet>
  327. <CreateButton type="submit" className="fill" />
  328. </ButtonSet>
  329. </Row>
  330. <Chip className="mini" error={createTaskForm.formState.errors.description} />
  331. </FormInput>
  332. </FormGroup>
  333. </form>
  334. <Pagination totalCount={taskData.metadata.totalCount} />
  335. <form onSubmit={updateHerdForm.handleSubmit(updateHerd)}>
  336. <FormGroup name="Edit herd">
  337. <FormInput id="herd:name" label="Name">
  338. <input id="herd:name" type="text" {...updateHerdForm.inputs.name} />
  339. <Chip className="mini" error={updateHerdForm.formState.errors.name} />
  340. </FormInput>
  341. <ButtonSet>
  342. <SaveButton type="submit" className="fill" />
  343. <ResetButton type="reset" />
  344. </ButtonSet>
  345. </FormGroup>
  346. </form>
  347. </>
  348. )}
  349. </Main>
  350. )
  351. }