diff --git a/web/components/command-palette/command-k.tsx b/web/components/command-palette/command-k.tsx index 382acd19e..59a455e98 100644 --- a/web/components/command-palette/command-k.tsx +++ b/web/components/command-palette/command-k.tsx @@ -11,9 +11,7 @@ import { Dialog, Transition } from "@headlessui/react"; // services import { WorkspaceService } from "services/workspace.service"; import { IssueService } from "services/issue"; -import { InboxService } from "services/inbox.service"; // hooks -import useProjectDetails from "hooks/use-project-details"; import useDebounce from "hooks/use-debounce"; import useUser from "hooks/use-user"; import useToast from "hooks/use-toast"; @@ -30,13 +28,13 @@ import { Icon } from "components/ui"; import { Loader, ToggleSwitch, Tooltip } from "@plane/ui"; // icons import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons"; -import { InboxIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; +import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; // helpers import { copyTextToClipboard } from "helpers/string.helper"; // types import { IIssue, IWorkspaceSearchResults } from "types"; // fetch-keys -import { INBOX_LIST, ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys"; +import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys"; type Props = { deleteIssue: () => void; @@ -47,7 +45,6 @@ type Props = { // services const workspaceService = new WorkspaceService(); const issueService = new IssueService(); -const inboxService = new InboxService(); export const CommandK: React.FC = ({ deleteIssue, isPaletteOpen, setIsPaletteOpen }) => { const [placeholder, setPlaceholder] = useState("Type a command or search..."); @@ -80,7 +77,6 @@ export const CommandK: React.FC = ({ deleteIssue, isPaletteOpen, setIsPal const { setToastAlert } = useToast(); const { user } = useUser(); - const { projectDetails } = useProjectDetails(); const { data: issueDetails } = useSWR( workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null, @@ -89,11 +85,6 @@ export const CommandK: React.FC = ({ deleteIssue, isPaletteOpen, setIsPal : null ); - const { data: inboxList } = useSWR( - workspaceSlug && projectId ? INBOX_LIST(projectId as string) : null, - workspaceSlug && projectId ? () => inboxService.getInboxes(workspaceSlug as string, projectId as string) : null - ); - const updateIssue = useCallback( async (formData: Partial) => { if (!workspaceSlug || !projectId || !issueId) return; @@ -569,22 +560,6 @@ export const CommandK: React.FC = ({ deleteIssue, isPaletteOpen, setIsPal D - {projectDetails && projectDetails.inbox_view && ( - - { - setIsPaletteOpen(false); - redirect(`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`); - }} - className="focus:outline-none" - > -
- - Open inbox -
- - - )} )} diff --git a/web/components/command-palette/command-pallette.tsx b/web/components/command-palette/command-pallette.tsx index 3b90f2699..4b2168137 100644 --- a/web/components/command-palette/command-pallette.tsx +++ b/web/components/command-palette/command-pallette.tsx @@ -41,7 +41,7 @@ export const CommandPalette: React.FC = observer(() => { const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false); const router = useRouter(); - const { workspaceSlug, projectId, issueId, inboxId, cycleId, moduleId } = router.query; + const { workspaceSlug, projectId, issueId, cycleId, moduleId } = router.query; const { user } = useUser(); @@ -176,7 +176,6 @@ export const CommandPalette: React.FC = observer(() => { setIsIssueModalOpen(false)} - fieldsToShow={inboxId ? ["name", "description", "priority"] : ["all"]} prePopulateData={ cycleId ? { cycle: cycleId.toString() } : moduleId ? { module: moduleId.toString() } : undefined } diff --git a/web/components/headers/index.ts b/web/components/headers/index.ts index 89eb35766..2bd01abe2 100644 --- a/web/components/headers/index.ts +++ b/web/components/headers/index.ts @@ -1,6 +1,7 @@ export * from "./cycle-issues"; export * from "./global-issues"; export * from "./module-issues"; +export * from "./project-inbox"; export * from "./project-issues"; export * from "./project-view-issues"; export * from "./project-views"; diff --git a/web/components/headers/project-inbox.tsx b/web/components/headers/project-inbox.tsx new file mode 100644 index 000000000..a45eca0fd --- /dev/null +++ b/web/components/headers/project-inbox.tsx @@ -0,0 +1,21 @@ +import { useState } from "react"; + +// components +import { CreateInboxIssueModal } from "components/inbox"; +// ui +import { Button } from "@plane/ui"; +// icons +import { Plus } from "lucide-react"; + +export const ProjectInboxHeader = () => { + const [createIssueModal, setCreateIssueModal] = useState(false); + + return ( + <> + setCreateIssueModal(false)} /> + + + ); +}; diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx index ea6004fe3..265be968e 100644 --- a/web/components/headers/project-issues.tsx +++ b/web/components/headers/project-issues.tsx @@ -23,7 +23,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; - const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore(); + const { issueFilter: issueFilterStore, project: projectStore, inbox: inboxStore } = useMobxStore(); const activeLayout = issueFilterStore.userDisplayFilters.layout; @@ -91,6 +91,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => { ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) : undefined; + const inboxDetails = projectId ? inboxStore.inboxesList?.[projectId.toString()]?.[0] : undefined; + return ( <> { } /> - {/* TODO: add inbox redirection here */} - {projectDetails?.inbox_view && ( - // - + {projectId && inboxStore.isInboxEnabled(projectId.toString()) && ( + - diff --git a/web/components/inbox/action-headers.tsx b/web/components/inbox/actions-header.tsx similarity index 62% rename from web/components/inbox/action-headers.tsx rename to web/components/inbox/actions-header.tsx index d51ec0302..a5e05edac 100644 --- a/web/components/inbox/action-headers.tsx +++ b/web/components/inbox/actions-header.tsx @@ -1,44 +1,31 @@ import { useEffect, useState } from "react"; import { useRouter } from "next/router"; -import { mutate } from "swr"; +import { observer } from "mobx-react-lite"; import DatePicker from "react-datepicker"; import { Popover } from "@headlessui/react"; + +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; // contexts import { useProjectMyMembership } from "contexts/project-member.context"; -// services -import { InboxService } from "services/inbox.service"; // hooks -import useInboxView from "hooks/use-inbox-view"; -import useUserAuth from "hooks/use-user-auth"; import useToast from "hooks/use-toast"; // components import { AcceptIssueModal, DeclineIssueModal, - DeleteIssueModal, + DeleteInboxIssueModal, FiltersDropdown, SelectDuplicateInboxIssueModal, } from "components/inbox"; // ui import { Button } from "@plane/ui"; // icons -import { InboxIcon, StackedLayersHorizontalIcon } from "components/icons"; -import { - ChevronDownIcon, - ChevronUpIcon, - CheckCircleIcon, - ClockIcon, - XCircleIcon, - TrashIcon, -} from "@heroicons/react/24/outline"; +import { CheckCircle2, ChevronDown, ChevronUp, Clock, FileStack, Inbox, Trash2, XCircle } from "lucide-react"; // types -import type { IInboxIssueDetail, TInboxStatus } from "types"; -// fetch-keys -import { INBOX_ISSUE_DETAILS } from "constants/fetch-keys"; +import type { TInboxStatus } from "types"; -const inboxService = new InboxService(); - -export const InboxActionHeader = () => { +export const InboxActionsHeader = observer(() => { const [date, setDate] = useState(new Date()); const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false); const [acceptIssueModal, setAcceptIssueModal] = useState(false); @@ -48,42 +35,24 @@ export const InboxActionHeader = () => { const router = useRouter(); const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query; - const { user } = useUserAuth(); + const { inboxIssues: inboxIssuesStore, inboxIssueDetails: inboxIssueDetailsStore, user: userStore } = useMobxStore(); + + const user = userStore?.currentUser; + const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : null; + const { memberRole } = useProjectMyMembership(); - const { issues: inboxIssues, mutate: mutateInboxIssues } = useInboxView(); const { setToastAlert } = useToast(); const markInboxStatus = async (data: TInboxStatus) => { - if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId) return; + if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId || !issuesList) return; - mutate( - INBOX_ISSUE_DETAILS(inboxId as string, inboxIssueId as string), - (prevData) => { - if (!prevData) return prevData; - - return { - ...prevData, - issue_inbox: [{ ...prevData.issue_inbox[0], ...data }], - }; - }, - false - ); - mutateInboxIssues( - (prevData: any) => - (prevData ?? []).map((i: any) => - i.bridge_id === inboxIssueId ? { ...i, issue_inbox: [{ ...i.issue_inbox[0], ...data }] } : i - ), - false - ); - - await inboxService - .markInboxStatus( + await inboxIssueDetailsStore + .updateIssueStatus( workspaceSlug.toString(), projectId.toString(), inboxId.toString(), - inboxIssues?.find((inboxIssue: any) => inboxIssue.bridge_id === inboxIssueId)?.bridge_id!, - data, - user + issuesList.find((inboxIssue: any) => inboxIssue.issue_inbox[0].id === inboxIssueId)?.issue_inbox[0].id!, + data ) .catch(() => setToastAlert({ @@ -91,15 +60,11 @@ export const InboxActionHeader = () => { title: "Error!", message: "Something went wrong while updating inbox status. Please try again.", }) - ) - .finally(() => { - mutate(INBOX_ISSUE_DETAILS(inboxId as string, inboxIssueId as string)); - mutateInboxIssues(); - }); + ); }; - const issue = inboxIssues?.find((issue: any) => issue.bridge_id === inboxIssueId); - const currentIssueIndex = inboxIssues?.findIndex((issue: any) => issue.bridge_id === inboxIssueId) ?? 0; + const issue = issuesList?.find((issue) => issue.issue_inbox[0].id === inboxIssueId); + const currentIssueIndex = issuesList?.findIndex((issue) => issue.issue_inbox[0].id === inboxIssueId) ?? 0; useEffect(() => { if (!issue?.issue_inbox[0].snoozed_till) return; @@ -117,48 +82,46 @@ export const InboxActionHeader = () => { return ( <> - setSelectDuplicateIssue(false)} - value={ - inboxIssues?.find((inboxIssue: any) => inboxIssue.bridge_id === inboxIssueId)?.issue_inbox[0].duplicate_to - } - onSubmit={(dupIssueId: string) => { - markInboxStatus({ - status: 2, - duplicate_to: dupIssueId, - }).finally(() => setSelectDuplicateIssue(false)); - }} - /> - setAcceptIssueModal(false)} - data={inboxIssues?.find((i: any) => i.bridge_id === inboxIssueId)} - onSubmit={async () => { - await markInboxStatus({ - status: 1, - }).finally(() => setAcceptIssueModal(false)); - }} - /> - setDeclineIssueModal(false)} - data={inboxIssues?.find((i: any) => i.bridge_id === inboxIssueId)} - onSubmit={async () => { - await markInboxStatus({ - status: -1, - }).finally(() => setDeclineIssueModal(false)); - }} - /> - setDeleteIssueModal(false)} - data={inboxIssues?.find((i: any) => i.bridge_id === inboxIssueId)} - /> + {issue && ( + <> + setSelectDuplicateIssue(false)} + value={issue?.issue_inbox[0].duplicate_to} + onSubmit={(dupIssueId) => { + markInboxStatus({ + status: 2, + duplicate_to: dupIssueId, + }).finally(() => setSelectDuplicateIssue(false)); + }} + /> + setAcceptIssueModal(false)} + onSubmit={async () => { + await markInboxStatus({ + status: 1, + }).finally(() => setAcceptIssueModal(false)); + }} + /> + setDeclineIssueModal(false)} + onSubmit={async () => { + await markInboxStatus({ + status: -1, + }).finally(() => setDeclineIssueModal(false)); + }} + /> + setDeleteIssueModal(false)} /> + + )}
- +

Inbox

@@ -174,7 +137,7 @@ export const InboxActionHeader = () => { document.dispatchEvent(e); }} > - +
- {currentIssueIndex + 1}/{inboxIssues?.length ?? 0} + {currentIssueIndex + 1}/{issuesList?.length ?? 0}
@@ -195,11 +158,7 @@ export const InboxActionHeader = () => {
- @@ -239,7 +198,7 @@ export const InboxActionHeader = () => {
); -}; +}); diff --git a/web/components/inbox/filters-dropdown.tsx b/web/components/inbox/filters-dropdown.tsx index 9220db899..cd7cf8093 100644 --- a/web/components/inbox/filters-dropdown.tsx +++ b/web/components/inbox/filters-dropdown.tsx @@ -1,34 +1,53 @@ -// hooks -import useInboxView from "hooks/use-inbox-view"; +import { useRouter } from "next/router"; +import { observer } from "mobx-react-lite"; + +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; // ui import { MultiLevelDropdown } from "components/ui"; // icons import { PriorityIcon } from "components/icons"; +// types +import { IInboxFilterOptions } from "types"; // constants import { PRIORITIES } from "constants/project"; import { INBOX_STATUS } from "constants/inbox"; -export const FiltersDropdown: React.FC = () => { - const { filters, setFilters, filtersLength } = useInboxView(); +export const FiltersDropdown: React.FC = observer(() => { + const router = useRouter(); + const { workspaceSlug, projectId, inboxId } = router.query; + + const { inboxFilters: inboxFiltersStore } = useMobxStore(); + + const filters = inboxId ? inboxFiltersStore.inboxFilters[inboxId.toString()]?.filters : undefined; + + let filtersLength = 0; + Object.keys(filters ?? {}).forEach((key) => { + const filterKey = key as keyof IInboxFilterOptions; + + if (filters?.[filterKey] && Array.isArray(filters[filterKey])) filtersLength += (filters[filterKey] ?? []).length; + }); return (
{ - const key = option.key as keyof typeof filters; + if (!workspaceSlug || !projectId || !inboxId) return; - const valueExists = (filters[key] as any[])?.includes(option.value); + const key = option.key as keyof IInboxFilterOptions; + const currentValue: any[] = filters?.[key] ?? []; - if (valueExists) { - setFilters({ - [option.key]: ((filters[key] ?? []) as any[])?.filter((val) => val !== option.value), + const valueExists = currentValue.includes(option.value); + + if (valueExists) + inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), { + [option.key]: currentValue.filter((val) => val !== option.value), }); - } else { - setFilters({ - [option.key]: [...((filters[key] ?? []) as any[]), option.value], + else + inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), { + [option.key]: [...currentValue, option.value], }); - } }} direction="right" height="rg" @@ -76,4 +95,4 @@ export const FiltersDropdown: React.FC = () => { )}
); -}; +}); diff --git a/web/components/inbox/filters-list.tsx b/web/components/inbox/filters-list.tsx index 7d07fb8d4..75657d47b 100644 --- a/web/components/inbox/filters-list.tsx +++ b/web/components/inbox/filters-list.tsx @@ -1,34 +1,69 @@ -// hooks -import useInboxView from "hooks/use-inbox-view"; +import { useRouter } from "next/router"; +import { observer } from "mobx-react-lite"; + +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; // icons import { XMarkIcon } from "@heroicons/react/24/outline"; import { PriorityIcon } from "components/icons"; // helpers import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; // types -import { TIssuePriorities } from "types"; +import { IInboxFilterOptions, TIssuePriorities } from "types"; // constants import { INBOX_STATUS } from "constants/inbox"; -export const InboxFiltersList = () => { - const { filters, setFilters, clearAllFilters, filtersLength } = useInboxView(); +export const InboxFiltersList = observer(() => { + const router = useRouter(); + const { workspaceSlug, projectId, inboxId } = router.query; - if (filtersLength <= 0) return <>; + const { inboxFilters: inboxFiltersStore } = useMobxStore(); + + const filters = inboxId ? inboxFiltersStore.inboxFilters[inboxId.toString()]?.filters : undefined; + + const handleUpdateFilter = (filter: Partial) => { + if (!workspaceSlug || !projectId || !inboxId) return; + + inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), filter); + }; + + const handleClearAllFilters = () => { + if (!workspaceSlug || !projectId || !inboxId) return; + + const newFilters: IInboxFilterOptions = {}; + Object.keys(filters ?? {}).forEach((key) => { + newFilters[key as keyof IInboxFilterOptions] = null; + }); + + inboxFiltersStore.updateInboxFilters( + workspaceSlug.toString(), + projectId.toString(), + inboxId.toString(), + newFilters + ); + }; + + let filtersLength = 0; + Object.keys(filters ?? {}).forEach((key) => { + const filterKey = key as keyof IInboxFilterOptions; + + if (filters?.[filterKey] && Array.isArray(filters[filterKey])) filtersLength += (filters[filterKey] ?? []).length; + }); + + if (!filters || filtersLength <= 0) return null; return (
{Object.keys(filters).map((key) => { - const filterKey = key as keyof typeof filters; + const filterKey = key as keyof IInboxFilterOptions; - if (filters[filterKey] !== null) + if (filters[filterKey]) return (
- - {replaceUnderscoreIfSnakeCase(key)}: - + {replaceUnderscoreIfSnakeCase(key)}: {filters[filterKey] === null || (filters[filterKey]?.length ?? 0) <= 0 ? ( None ) : ( @@ -57,7 +92,7 @@ export const InboxFiltersList = () => { type="button" className="cursor-pointer" onClick={() => - setFilters({ + handleUpdateFilter({ priority: filters.priority?.filter((p) => p !== priority), }) } @@ -69,7 +104,7 @@ export const InboxFiltersList = () => {
); -}; +}); diff --git a/web/components/inbox/index.ts b/web/components/inbox/index.ts index a96cf4446..ef1a9e92d 100644 --- a/web/components/inbox/index.ts +++ b/web/components/inbox/index.ts @@ -1,5 +1,5 @@ export * from "./modals"; -export * from "./action-headers"; +export * from "./actions-header"; export * from "./filters-dropdown"; export * from "./filters-list"; export * from "./issue-activity"; diff --git a/web/components/inbox/issue-card.tsx b/web/components/inbox/issue-card.tsx index 468eba908..a223e7c09 100644 --- a/web/components/inbox/issue-card.tsx +++ b/web/components/inbox/issue-card.tsx @@ -5,18 +5,11 @@ import Link from "next/link"; import { Tooltip } from "@plane/ui"; // icons import { PriorityIcon } from "components/icons"; -import { - CalendarDaysIcon, - CheckCircleIcon, - ClockIcon, - DocumentDuplicateIcon, - ExclamationTriangleIcon, - XCircleIcon, -} from "@heroicons/react/24/outline"; +import { AlertTriangle, Calendar, CheckCircle2, Clock, Copy, XCircle } from "lucide-react"; // helpers import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; // types -import type { IInboxIssue } from "types"; +import { IInboxIssue } from "types"; // constants import { INBOX_STATUS } from "constants/inbox"; @@ -34,7 +27,7 @@ export const InboxIssueCard: React.FC = (props) => { const issueStatus = issue.issue_inbox[0].status; return ( - +
= (props) => { tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`} >
- + {renderShortDateWithYearFormat(issue.created_at ?? "")}
@@ -85,29 +78,29 @@ export const InboxIssueCard: React.FC = (props) => { > {issueStatus === -2 ? ( <> - + Pending ) : issueStatus === -1 ? ( <> - + Declined ) : issueStatus === 0 ? ( <> - + {new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date() ? "Snoozed date passed" : "Snoozed"} ) : issueStatus === 1 ? ( <> - + Accepted ) : ( <> - + Duplicate )} diff --git a/web/components/inbox/issues-list-sidebar.tsx b/web/components/inbox/issues-list-sidebar.tsx index cf89ccb39..305f4980e 100644 --- a/web/components/inbox/issues-list-sidebar.tsx +++ b/web/components/inbox/issues-list-sidebar.tsx @@ -1,31 +1,35 @@ import { useRouter } from "next/router"; +import { observer } from "mobx-react-lite"; -// hooks -import useInboxView from "hooks/use-inbox-view"; +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; // components import { InboxIssueCard, InboxFiltersList } from "components/inbox"; // ui import { Loader } from "@plane/ui"; -export const IssuesListSidebar = () => { +export const InboxIssuesListSidebar = observer(() => { const router = useRouter(); - const { inboxIssueId } = router.query; + const { inboxId, inboxIssueId } = router.query; - const { issues: inboxIssues, filtersLength } = useInboxView(); + const { inboxIssues: inboxIssuesStore } = useMobxStore(); + + const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : undefined; return (
- {inboxIssues ? ( - inboxIssues.length > 0 ? ( + {issuesList ? ( + issuesList.length > 0 ? (
- {inboxIssues.map((issue: any) => ( - + {issuesList.map((issue) => ( + ))}
) : (
- {filtersLength > 0 && "No issues found for the selected filters. Try changing the filters."} + {/* TODO: add filtersLength logic here */} + {/* {filtersLength > 0 && "No issues found for the selected filters. Try changing the filters."} */}
) ) : ( @@ -38,4 +42,4 @@ export const IssuesListSidebar = () => { )}
); -}; +}); diff --git a/web/components/inbox/main-content.tsx b/web/components/inbox/main-content.tsx index 844717964..6cc17abe6 100644 --- a/web/components/inbox/main-content.tsx +++ b/web/components/inbox/main-content.tsx @@ -1,71 +1,52 @@ import { useCallback, useEffect } from "react"; - import Router, { useRouter } from "next/router"; - -import useSWR, { mutate } from "swr"; - -// react hook form +import { observer } from "mobx-react-lite"; +import useSWR from "swr"; import { useForm } from "react-hook-form"; +import { AlertTriangle, CheckCircle2, Clock, Copy, ExternalLink, Inbox, XCircle } from "lucide-react"; + +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; // contexts import { useProjectMyMembership } from "contexts/project-member.context"; -// services -import { InboxService } from "services/inbox.service"; -// hooks -import useInboxView from "hooks/use-inbox-view"; -import useUserAuth from "hooks/use-user-auth"; // components import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction } from "components/issues"; import { InboxIssueActivity } from "components/inbox"; // ui import { Loader } from "@plane/ui"; -// icons -import { - ArrowTopRightOnSquareIcon, - CheckCircleIcon, - ClockIcon, - DocumentDuplicateIcon, - ExclamationTriangleIcon, - InboxIcon, - XCircleIcon, -} from "@heroicons/react/24/outline"; // helpers import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; // types -import type { IInboxIssue, IIssue, IUser } from "types"; -// fetch-keys -import { INBOX_ISSUES, INBOX_ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys"; +import { IInboxIssue, IIssue } from "types"; const defaultValues: Partial = { name: "", description_html: "", - estimate_point: null, assignees_list: [], priority: "low", target_date: new Date().toString(), labels_list: [], }; -const inboxService = new InboxService(); - -export const InboxMainContent: React.FC = () => { +export const InboxMainContent: React.FC = observer(() => { const router = useRouter(); const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query; - const { user } = useUserAuth(); + const { inboxIssues: inboxIssuesStore, inboxIssueDetails: inboxIssueDetailsStore, user: userStore } = useMobxStore(); + + const user = userStore.currentUser; + const { memberRole } = useProjectMyMembership(); - const { params, issues: inboxIssues } = useInboxView(); const { reset, control, watch } = useForm({ defaultValues, }); - const { data: issueDetails, mutate: mutateIssueDetails } = useSWR( - workspaceSlug && projectId && inboxId && inboxIssueId - ? INBOX_ISSUE_DETAILS(inboxId.toString(), inboxIssueId.toString()) - : null, + useSWR( + workspaceSlug && projectId && inboxId && inboxIssueId ? `INBOX_ISSUE_DETAILS_${inboxIssueId.toString()}` : null, workspaceSlug && projectId && inboxId && inboxIssueId ? () => - inboxService.getInboxIssueById( + inboxIssueDetailsStore.fetchIssueDetails( workspaceSlug.toString(), projectId.toString(), inboxId.toString(), @@ -74,59 +55,29 @@ export const InboxMainContent: React.FC = () => { : null ); + const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : undefined; + const issueDetails = inboxIssueId ? inboxIssueDetailsStore.issueDetails[inboxIssueId.toString()] : undefined; + const submitChanges = useCallback( async (formData: Partial) => { if (!workspaceSlug || !projectId || !inboxIssueId || !inboxId || !issueDetails) return; - mutateIssueDetails((prevData: any) => { - if (!prevData) return prevData; - - return { - ...prevData, - ...formData, - }; - }, false); - mutate( - INBOX_ISSUES(inboxId.toString(), params), - (prevData) => - (prevData ?? []).map((i) => { - if (i.bridge_id === inboxIssueId) { - return { - ...i, - ...formData, - }; - } - - return i; - }), - false + await inboxIssueDetailsStore.updateIssue( + workspaceSlug.toString(), + projectId.toString(), + inboxId.toString(), + issueDetails.issue_inbox[0].id, + formData ); - - const payload = { issue: { ...formData } }; - - await inboxService - .patchInboxIssue( - workspaceSlug.toString(), - projectId.toString(), - inboxId.toString(), - issueDetails.issue_inbox[0].id, - payload, - user as IUser - ) - .then(() => { - mutateIssueDetails(); - mutate(INBOX_ISSUES(inboxId.toString(), params)); - mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id)); - }); }, - [workspaceSlug, inboxIssueId, projectId, mutateIssueDetails, inboxId, user, issueDetails, params] + [workspaceSlug, inboxIssueId, projectId, inboxId, issueDetails, inboxIssueDetailsStore] ); const onKeyDown = useCallback( (e: KeyboardEvent) => { - if (!inboxIssues || !inboxIssueId) return; + if (!issuesList || !inboxIssueId) return; - const currentIssueIndex = inboxIssues.findIndex((issue: any) => issue.bridge_id === inboxIssueId); + const currentIssueIndex = issuesList.findIndex((issue) => issue.issue_inbox[0].id === inboxIssueId); switch (e.key) { case "ArrowUp": @@ -135,8 +86,8 @@ export const InboxMainContent: React.FC = () => { query: { inboxIssueId: currentIssueIndex === 0 - ? inboxIssues[inboxIssues.length - 1].bridge_id - : inboxIssues[currentIssueIndex - 1].bridge_id, + ? issuesList[issuesList.length - 1].issue_inbox[0].id + : issuesList[currentIssueIndex - 1].issue_inbox[0].id, }, }); break; @@ -145,9 +96,9 @@ export const InboxMainContent: React.FC = () => { pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`, query: { inboxIssueId: - currentIssueIndex === inboxIssues.length - 1 - ? inboxIssues[0].bridge_id - : inboxIssues[currentIssueIndex + 1].bridge_id, + currentIssueIndex === issuesList.length - 1 + ? issuesList[0].issue_inbox[0].id + : issuesList[currentIssueIndex + 1].issue_inbox[0].id, }, }); break; @@ -155,7 +106,7 @@ export const InboxMainContent: React.FC = () => { break; } }, - [workspaceSlug, projectId, inboxIssueId, inboxId, inboxIssues] + [workspaceSlug, projectId, inboxIssueId, inboxId, issuesList] ); useEffect(() => { @@ -183,16 +134,13 @@ export const InboxMainContent: React.FC = () => {
- - {inboxIssues && inboxIssues.length > 0 ? ( + + {issuesList && issuesList.length > 0 ? ( - {inboxIssues?.length} issues found. Select an issue from the sidebar to view its details. + {issuesList?.length} issues found. Select an issue from the sidebar to view its details. ) : ( - - No issues found. Use 
C
shortcut - to create a new issue - + No issues found )}
@@ -223,17 +171,17 @@ export const InboxMainContent: React.FC = () => { > {issueStatus === -2 ? ( <> - +

This issue is still pending.

) : issueStatus === -1 ? ( <> - +

This issue has been declined.

) : issueStatus === 0 ? ( <> - + {new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (

This issue was snoozed till{" "} @@ -248,12 +196,12 @@ export const InboxMainContent: React.FC = () => { ) : issueStatus === 1 ? ( <> - +

This issue has been accepted.

) : issueStatus === 2 ? ( <> - +

This issue has been marked as a duplicate of { rel="noreferrer" className="underline flex items-center gap-2" > - this issue + this issue .

@@ -286,7 +234,7 @@ export const InboxMainContent: React.FC = () => {
-
+
{ )} ); -}; +}); diff --git a/web/components/inbox/modals/accept-issue-modal.tsx b/web/components/inbox/modals/accept-issue-modal.tsx index bca83a3ec..569061bdf 100644 --- a/web/components/inbox/modals/accept-issue-modal.tsx +++ b/web/components/inbox/modals/accept-issue-modal.tsx @@ -1,7 +1,6 @@ import React, { useState } from "react"; - -// headless ui import { Dialog, Transition } from "@headlessui/react"; + // icons import { CheckCircleIcon } from "@heroicons/react/24/outline"; // ui @@ -10,18 +9,18 @@ import { Button } from "@plane/ui"; import type { IInboxIssue } from "types"; type Props = { + data: IInboxIssue; isOpen: boolean; - handleClose: () => void; - data: IInboxIssue | undefined; + onClose: () => void; onSubmit: () => Promise; }; -export const AcceptIssueModal: React.FC = ({ isOpen, handleClose, data, onSubmit }) => { +export const AcceptIssueModal: React.FC = ({ isOpen, onClose, data, onSubmit }) => { const [isAccepting, setIsAccepting] = useState(false); - const onClose = () => { + const handleClose = () => { setIsAccepting(false); - handleClose(); + onClose(); }; const handleAccept = () => { @@ -32,7 +31,7 @@ export const AcceptIssueModal: React.FC = ({ isOpen, handleClose, data, o return ( - + = ({ isOpen, handleClose, data, o

- + +
+
+ + + +
+
+ + + ); +}); diff --git a/web/components/inbox/modals/decline-issue-modal.tsx b/web/components/inbox/modals/decline-issue-modal.tsx index 48786da55..35309815f 100644 --- a/web/components/inbox/modals/decline-issue-modal.tsx +++ b/web/components/inbox/modals/decline-issue-modal.tsx @@ -1,7 +1,6 @@ import React, { useState } from "react"; - -// headless ui import { Dialog, Transition } from "@headlessui/react"; + // icons import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; // ui @@ -10,18 +9,18 @@ import { Button } from "@plane/ui"; import type { IInboxIssue } from "types"; type Props = { + data: IInboxIssue; isOpen: boolean; - handleClose: () => void; - data: IInboxIssue | undefined; + onClose: () => void; onSubmit: () => Promise; }; -export const DeclineIssueModal: React.FC = ({ isOpen, handleClose, data, onSubmit }) => { +export const DeclineIssueModal: React.FC = ({ isOpen, onClose, data, onSubmit }) => { const [isDeclining, setIsDeclining] = useState(false); - const onClose = () => { + const handleClose = () => { setIsDeclining(false); - handleClose(); + onClose(); }; const handleDecline = () => { @@ -32,7 +31,7 @@ export const DeclineIssueModal: React.FC = ({ isOpen, handleClose, data, return ( - + = ({ isOpen, handleClose, data,

-
); -}; +}); diff --git a/web/components/inbox/modals/index.ts b/web/components/inbox/modals/index.ts index 2b45346d2..12ce68578 100644 --- a/web/components/inbox/modals/index.ts +++ b/web/components/inbox/modals/index.ts @@ -1,4 +1,5 @@ export * from "./accept-issue-modal"; +export * from "./create-issue-modal"; export * from "./decline-issue-modal"; export * from "./delete-issue-modal"; export * from "./select-duplicate"; diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx index a9832c205..07b55ae38 100644 --- a/web/components/issues/form.tsx +++ b/web/components/issues/form.tsx @@ -33,14 +33,6 @@ import { RichTextEditorWithRef } from "@plane/rich-text-editor"; const defaultValues: Partial = { project: "", name: "", - description: { - type: "doc", - content: [ - { - type: "paragraph", - }, - ], - }, description_html: "

", estimate_point: null, state: "", diff --git a/web/components/issues/modal.tsx b/web/components/issues/modal.tsx index 31d19354d..c3ea7bfda 100644 --- a/web/components/issues/modal.tsx +++ b/web/components/issues/modal.tsx @@ -5,12 +5,10 @@ import { Dialog, Transition } from "@headlessui/react"; // services import { ModuleService } from "services/module.service"; import { IssueService, IssueDraftService } from "services/issue"; -import { InboxService } from "services/inbox.service"; // hooks import useUser from "hooks/use-user"; import useIssuesView from "hooks/use-issues-view"; import useToast from "hooks/use-toast"; -import useInboxView from "hooks/use-inbox-view"; import useProjects from "hooks/use-projects"; import useMyIssues from "hooks/my-issues/use-my-issues"; import useLocalStorage from "hooks/use-local-storage"; @@ -29,12 +27,9 @@ import { CYCLE_DETAILS, MODULE_DETAILS, VIEW_ISSUES, - INBOX_ISSUES, PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS, GLOBAL_VIEW_ISSUES, } from "constants/fetch-keys"; -// constants -import { INBOX_ISSUE_SOURCE } from "constants/inbox"; export interface IssuesModalProps { data?: IIssue | null; @@ -60,7 +55,6 @@ export interface IssuesModalProps { } const moduleService = new ModuleService(); -const inboxService = new InboxService(); const issueService = new IssueService(); const issueDraftService = new IssueDraftService(); @@ -81,19 +75,16 @@ export const CreateUpdateIssueModal: React.FC = ({ const [prePopulateData, setPreloadedData] = useState>({}); const router = useRouter(); - const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId, inboxId } = router.query; + const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId } = router.query; const { displayFilters, params } = useIssuesView(); const { ...viewGanttParams } = params; - const { params: inboxParams } = useInboxView(); const { user } = useUser(); const { projects } = useProjects(); const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString()); - const globalViewParams = {}; - const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } = useLocalStorage( "draftedIssue", {} @@ -235,43 +226,6 @@ export const CreateUpdateIssueModal: React.FC = ({ }); }; - const addIssueToInbox = async (formData: Partial) => { - if (!workspaceSlug || !activeProject || !inboxId) return; - - const payload = { - issue: { - name: formData.name, - description: formData.description, - description_html: formData.description_html, - priority: formData.priority, - }, - source: INBOX_ISSUE_SOURCE, - }; - - await inboxService - .createInboxIssue(workspaceSlug.toString(), activeProject.toString(), inboxId.toString(), payload, user) - .then((res) => { - setToastAlert({ - type: "success", - title: "Success!", - message: "Issue created successfully.", - }); - - router.push( - `/${workspaceSlug}/projects/${activeProject}/inbox/${inboxId}?inboxIssueId=${res.issue_inbox[0].id}` - ); - - mutate(INBOX_ISSUES(inboxId.toString(), inboxParams)); - }) - .catch(() => { - setToastAlert({ - type: "error", - title: "Error!", - message: "Issue could not be created. Please try again.", - }); - }); - }; - const workspaceIssuesPath = [ { params: { @@ -315,45 +269,43 @@ export const CreateUpdateIssueModal: React.FC = ({ const createIssue = async (payload: Partial) => { if (!workspaceSlug || !activeProject) return; - if (inboxId) await addIssueToInbox(payload); - else - await issueService - .createIssues(workspaceSlug as string, activeProject ?? "", payload, user) - .then(async (res) => { - mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params)); - if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle); - if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module); + await issueService + .createIssues(workspaceSlug as string, activeProject ?? "", payload, user) + .then(async (res) => { + mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params)); + if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle); + if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module); - if (displayFilters.layout === "gantt_chart") - mutate(ganttFetchKey, { - start_target_date: true, - order_by: "sort_order", - }); - if (groupedIssues) mutateMyIssues(); - - setToastAlert({ - type: "success", - title: "Success!", - message: "Issue created successfully.", + if (displayFilters.layout === "gantt_chart") + mutate(ganttFetchKey, { + start_target_date: true, + order_by: "sort_order", }); + if (groupedIssues) mutateMyIssues(); - if (payload.assignees_list?.some((assignee) => assignee === user?.id)) - mutate(USER_ISSUE(workspaceSlug as string)); - - if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent)); - - if (globalViewId) mutate(GLOBAL_VIEW_ISSUES(globalViewId.toString())); - - if (currentWorkspaceIssuePath) mutate(GLOBAL_VIEW_ISSUES(workspaceSlug.toString())); - }) - .catch(() => { - setToastAlert({ - type: "error", - title: "Error!", - message: "Issue could not be created. Please try again.", - }); + setToastAlert({ + type: "success", + title: "Success!", + message: "Issue created successfully.", }); + if (payload.assignees_list?.some((assignee) => assignee === user?.id)) + mutate(USER_ISSUE(workspaceSlug as string)); + + if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent)); + + if (globalViewId) mutate(GLOBAL_VIEW_ISSUES(globalViewId.toString())); + + if (currentWorkspaceIssuePath) mutate(GLOBAL_VIEW_ISSUES(workspaceSlug.toString())); + }) + .catch(() => { + setToastAlert({ + type: "error", + title: "Error!", + message: "Issue could not be created. Please try again.", + }); + }); + if (!createMore) onFormSubmitClose(); }; diff --git a/web/components/ui/dropdowns/custom-search-select.tsx b/web/components/ui/dropdowns/custom-search-select.tsx index 939961f48..b72cced4c 100644 --- a/web/components/ui/dropdowns/custom-search-select.tsx +++ b/web/components/ui/dropdowns/custom-search-select.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; -// react-poppper +// react-popper import { usePopper } from "react-popper"; // headless ui import { Combobox } from "@headlessui/react"; @@ -58,9 +58,7 @@ export const CustomSearchSelect = ({ }); const filteredOptions = - query === "" - ? options - : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase())); + query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase())); const props: any = { value, @@ -105,9 +103,7 @@ export const CustomSearchSelect = ({ } ${buttonClassName}`} > {label} - {!noChevron && !disabled && ( -
) : ( - + )} )} diff --git a/web/components/ui/dropdowns/custom-select.tsx b/web/components/ui/dropdowns/custom-select.tsx index 5e77a155d..cee441f66 100644 --- a/web/components/ui/dropdowns/custom-select.tsx +++ b/web/components/ui/dropdowns/custom-select.tsx @@ -55,9 +55,7 @@ const CustomSelect = ({ ref={setReferenceElement} type="button" className={`flex items-center justify-between gap-1 w-full text-xs ${ - disabled - ? "cursor-not-allowed text-custom-text-200" - : "cursor-pointer hover:bg-custom-background-80" + disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80" } ${customButtonClassName}`} > {customButton} @@ -71,15 +69,11 @@ const CustomSelect = ({ className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${ input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs" } ${ - disabled - ? "cursor-not-allowed text-custom-text-200" - : "cursor-pointer hover:bg-custom-background-80" + disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80" } ${buttonClassName}`} > {label} - {!noChevron && !disabled && ( -