first commit

services/web/frontend/js/features/history/hooks/use-add-or-remove-labels.ts

@@ -0,0 +1,66 @@
+import { useHistoryContext } from '../context/history-context'
+import {
+  isAnyVersionMatchingSelection,
+  isLabel,
+  loadLabels,
+} from '../utils/label'
+import { Label } from '../services/types/label'
+
+function useAddOrRemoveLabels() {
+  const {
+    updatesInfo,
+    setUpdatesInfo,
+    labels,
+    setLabels,
+    selection,
+    resetSelection,
+  } = useHistoryContext()
+
+  const addOrRemoveLabel = (
+    label: Label,
+    labelsHandler: (label: Label[]) => Label[]
+  ) => {
+    const tempUpdates = [...updatesInfo.updates]
+    for (const [i, update] of tempUpdates.entries()) {
+      if (update.toV === label.version) {
+        tempUpdates[i] = {
+          ...update,
+          labels: labelsHandler(update.labels),
+        }
+        break
+      }
+    }
+
+    setUpdatesInfo({ ...updatesInfo, updates: tempUpdates })
+
+    if (labels) {
+      const nonPseudoLabels = labels.filter(isLabel)
+      const processedNonPseudoLabels = labelsHandler(nonPseudoLabels)
+      const newLabels = loadLabels(processedNonPseudoLabels, tempUpdates)
+      setLabels(newLabels)
+
+      return newLabels
+    }
+    return null
+  }
+
+  const addUpdateLabel = (label: Label) => {
+    const labelHandler = (labels: Label[]) => labels.concat(label)
+    addOrRemoveLabel(label, labelHandler)
+  }
+
+  const removeUpdateLabel = (label: Label) => {
+    const labelHandler = (labels: Label[]) =>
+      labels.filter(({ id }) => id !== label.id)
+    const newLabels = addOrRemoveLabel(label, labelHandler)
+
+    // removing all labels from current selection should reset the selection
+    if (isAnyVersionMatchingSelection(newLabels, selection)) {
+      resetSelection()
+    }
+  }
+
+  return { addUpdateLabel, removeUpdateLabel }
+}
+
+export default useAddOrRemoveLabels

services/web/frontend/js/features/history/hooks/use-dropdown-active-item.tsx

@@ -0,0 +1,43 @@
+import { Dispatch, SetStateAction, useCallback, useState } from 'react'
+import { LoadedUpdate, Version } from '../services/types/update'
+
+type DropdownItem = LoadedUpdate | Version
+type WhichDropDownType = 'moreOptions' | 'compare' | null
+
+export type ActiveDropdownValue = {
+  item: DropdownItem | null
+  isOpened: boolean
+  whichDropDown: WhichDropDownType
+}
+
+export type ActiveDropdown = {
+  activeDropdownItem: ActiveDropdownValue
+  setActiveDropdownItem: Dispatch<SetStateAction<ActiveDropdownValue>>
+  closeDropdownForItem: (
+    item: DropdownItem,
+    whichDropDown: WhichDropDownType
+  ) => void
+}
+
+function useDropdownActiveItem(): ActiveDropdown {
+  const [activeDropdownItem, setActiveDropdownItem] =
+    useState<ActiveDropdownValue>({
+      item: null,
+      isOpened: false,
+      whichDropDown: null,
+    })
+
+  const closeDropdownForItem = useCallback(
+    (item: DropdownItem, whichDropDown: WhichDropDownType) =>
+      setActiveDropdownItem({ item, isOpened: false, whichDropDown }),
+    [setActiveDropdownItem]
+  )
+
+  return {
+    activeDropdownItem,
+    setActiveDropdownItem,
+    closeDropdownForItem,
+  }
+}
+
+export default useDropdownActiveItem