first commit

services/web/frontend/js/features/project-list/hooks/use-project-tags.tsx

@@ -0,0 +1,11 @@
+import { useProjectListContext } from '@/features/project-list/context/project-list-context'
+import { useMemo } from 'react'
+
+export const useProjectTags = (projectId: string) => {
+  const { tags } = useProjectListContext()
+
+  return useMemo(
+    () => tags.filter(tag => tag.project_ids?.includes(projectId)),
+    [tags, projectId]
+  )
+}

services/web/frontend/js/features/project-list/hooks/use-select-color.ts

@@ -0,0 +1,39 @@
+import { useEffect } from 'react'
+import { useColorPickerContext } from '../context/color-picker-context'
+
+export default function useSelectColor(defaultColor?: string) {
+  const {
+    selectedColor,
+    setSelectedColor,
+    showCustomPicker,
+    setShowCustomPicker,
+    pickingCustomColor,
+    setPickingCustomColor,
+  } = useColorPickerContext()
+
+  useEffect(() => {
+    setSelectedColor(defaultColor)
+  }, [defaultColor, setSelectedColor])
+
+  const selectColor = (color: string) => {
+    setSelectedColor(color)
+  }
+
+  const openCustomPicker = () => {
+    setShowCustomPicker(true)
+  }
+
+  const closeCustomPicker = () => {
+    setShowCustomPicker(false)
+  }
+
+  return {
+    selectedColor,
+    selectColor,
+    showCustomPicker,
+    openCustomPicker,
+    closeCustomPicker,
+    pickingCustomColor,
+    setPickingCustomColor,
+  }
+}

services/web/frontend/js/features/project-list/hooks/use-sort.ts

@@ -0,0 +1,22 @@
+import { useProjectListContext } from '../context/project-list-context'
+import { Sort } from '../../../../../types/project/dashboard/api'
+import { SortingOrder } from '../../../../../types/sorting-order'
+
+const toggleSort = (order: SortingOrder): SortingOrder => {
+  return order === 'asc' ? 'desc' : 'asc'
+}
+
+function useSort() {
+  const { sort, setSort } = useProjectListContext()
+
+  const handleSort = (by: Sort['by']) => {
+    setSort(prev => ({
+      by,
+      order: prev.by === by ? toggleSort(sort.order) : sort.order,
+    }))
+  }
+
+  return { handleSort }
+}
+
+export default useSort

services/web/frontend/js/features/project-list/hooks/use-tag.tsx

@@ -0,0 +1,182 @@
+import { useState, useCallback } from 'react'
+import { useProjectListContext } from '../context/project-list-context'
+import { Tag } from '../../../../../app/src/Features/Tags/types'
+import CreateTagModal from '../components/modals/create-tag-modal'
+import { EditTagModal } from '../components/modals/edit-tag-modal'
+import DeleteTagModal from '../components/modals/delete-tag-modal'
+import { ManageTagModal } from '../components/modals/manage-tag-modal'
+import { find } from 'lodash'
+import { addProjectsToTag } from '../util/api'
+
+function useTag() {
+  const {
+    tags,
+    selectTag,
+    addTag,
+    updateTag,
+    deleteTag,
+    selectedProjects,
+    addProjectToTagInView,
+  } = useProjectListContext()
+  const [creatingTag, setCreatingTag] = useState<boolean>(false)
+  const [editingTag, setEditingTag] = useState<Tag>()
+  const [deletingTag, setDeletingTag] = useState<Tag>()
+
+  const handleSelectTag = useCallback(
+    (e: React.MouseEvent, tagId: string) => {
+      e.preventDefault()
+      selectTag(tagId)
+    },
+    [selectTag]
+  )
+
+  const openCreateTagModal = useCallback(() => {
+    setCreatingTag(true)
+  }, [setCreatingTag])
+
+  const onCreate = useCallback(
+    (tag: Tag) => {
+      setCreatingTag(false)
+      addTag(tag)
+      for (const selectedProject of selectedProjects) {
+        addProjectToTagInView(tag._id, selectedProject.id)
+      }
+      addProjectsToTag(
+        tag._id,
+        selectedProjects.map(project => project.id)
+      )
+    },
+    [addTag, selectedProjects, addProjectToTagInView]
+  )
+
+  const handleEditTag = useCallback(
+    (e, tagId) => {
+      e.preventDefault()
+      const tag = find(tags, ['_id', tagId])
+      if (tag) {
+        setEditingTag(tag)
+      }
+    },
+    [tags, setEditingTag]
+  )
+
+  const onUpdate = useCallback(
+    (tagId: string, newTagName: string, newTagColor?: string) => {
+      updateTag(tagId, newTagName, newTagColor)
+      setEditingTag(undefined)
+    },
+    [updateTag, setEditingTag]
+  )
+
+  const handleDeleteTag = useCallback(
+    (e, tagId) => {
+      e.preventDefault()
+      const tag = find(tags, ['_id', tagId])
+      if (tag) {
+        setDeletingTag(tag)
+      }
+    },
+    [tags, setDeletingTag]
+  )
+
+  const onDelete = useCallback(
+    tagId => {
+      deleteTag(tagId)
+      setDeletingTag(undefined)
+    },
+    [deleteTag, setDeletingTag]
+  )
+
+  const handleManageTag = useCallback(
+    (e, tagId) => {
+      e.preventDefault()
+      const tag = find(tags, ['_id', tagId])
+      if (tag) {
+        setEditingTag(tag)
+      }
+    },
+    [tags, setEditingTag]
+  )
+
+  const onManageEdit = useCallback(
+    (tagId: string, newTagName: string, newTagColor?: string) => {
+      updateTag(tagId, newTagName, newTagColor)
+      setEditingTag(undefined)
+    },
+    [updateTag, setEditingTag]
+  )
+
+  const onManageDelete = useCallback(
+    (tagId: string) => {
+      deleteTag(tagId)
+      setEditingTag(undefined)
+    },
+    [deleteTag, setEditingTag]
+  )
+
+  function CreateModal({
+    id,
+    disableCustomColor,
+  }: {
+    id: string
+    disableCustomColor?: boolean
+  }) {
+    return (
+      <CreateTagModal
+        id={id}
+        show={creatingTag}
+        onCreate={onCreate}
+        onClose={() => setCreatingTag(false)}
+        disableCustomColor={disableCustomColor}
+      />
+    )
+  }
+
+  function EditModal({ id }: { id: string }) {
+    return (
+      <EditTagModal
+        id={id}
+        tag={editingTag}
+        onEdit={onUpdate}
+        onClose={() => setEditingTag(undefined)}
+      />
+    )
+  }
+
+  function DeleteModal({ id }: { id: string }) {
+    return (
+      <DeleteTagModal
+        id={id}
+        tag={deletingTag}
+        onDelete={onDelete}
+        onClose={() => setDeletingTag(undefined)}
+      />
+    )
+  }
+
+  function ManageModal({ id }: { id: string }) {
+    return (
+      <ManageTagModal
+        id={id}
+        tag={editingTag}
+        onEdit={onManageEdit}
+        onDelete={onManageDelete}
+        onClose={() => setEditingTag(undefined)}
+      />
+    )
+  }
+
+  return {
+    handleSelectTag,
+    openCreateTagModal,
+    handleEditTag,
+    handleDeleteTag,
+    handleManageTag,
+    CreateTagModal: CreateModal,
+    EditTagModal: EditModal,
+    DeleteTagModal: DeleteModal,
+    ManageTagModal: ManageModal,
+  }
+}
+
+export default useTag