From e96f059f655cb7dbf208066a7af9e86e4c5753c6 Mon Sep 17 00:00:00 2001 From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com> Date: Tue, 14 Nov 2023 18:33:01 +0530 Subject: [PATCH] fix: bugs (#2761) * fix: semicolon on estimate settings page * refactor: project settings automations store implementation * fix: active cycle stuck on infinite loading * fix: removed delete project option from sidebar * fix: discloser not opening when navigating to project * fix: clear filter not working & filter appearing even if nothing is selected * refactor: select label store implementation * refactor: select state store implementation --- .../cycles/active-cycle-details.tsx | 2 +- web/components/issues/select/label.tsx | 29 +++++------ web/components/issues/select/state.tsx | 26 +++++----- web/components/project/sidebar-list-item.tsx | 42 ++-------------- web/components/views/form.tsx | 39 ++++++++++++--- .../[projectId]/settings/automations.tsx | 49 +++++++------------ .../[projectId]/settings/estimates.tsx | 2 +- 7 files changed, 87 insertions(+), 102 deletions(-) diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx index ea7ffa748..63acb8510 100644 --- a/web/components/cycles/active-cycle-details.tsx +++ b/web/components/cycles/active-cycle-details.tsx @@ -80,7 +80,7 @@ export const ActiveCycleDetails: React.FC = observer((props workspaceSlug && projectId ? () => cycleStore.fetchCycles(workspaceSlug, projectId, "current") : null ); - const activeCycle = cycleStore.cycles?.[projectId]?.active || null; + const activeCycle = cycleStore.cycles?.[projectId]?.current || null; const cycle = activeCycle ? activeCycle[0] : null; const issues = (cycleStore?.active_cycle_issues as any) || null; diff --git a/web/components/issues/select/label.tsx b/web/components/issues/select/label.tsx index a85b073eb..c378a81a1 100644 --- a/web/components/issues/select/label.tsx +++ b/web/components/issues/select/label.tsx @@ -3,16 +3,13 @@ import { useRouter } from "next/router"; import useSWR from "swr"; import { Combobox, Transition } from "@headlessui/react"; import { usePopper } from "react-popper"; -// services -import { IssueLabelService } from "services/issue"; +import { observer } from "mobx-react-lite"; +// store +import { useMobxStore } from "lib/mobx/store-provider"; // ui import { IssueLabelsList } from "components/ui"; // icons import { Check, Component, Plus, Search, Tag } from "lucide-react"; -// types -import type { IIssueLabels } from "types"; -// fetch-keys -import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys"; type Props = { setIsOpen: React.Dispatch>; @@ -22,15 +19,19 @@ type Props = { label?: JSX.Element; }; -const issueLabelService = new IssueLabelService(); +export const IssueLabelSelect: React.FC = observer((props) => { + const { setIsOpen, value, onChange, projectId, label } = props; -export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, projectId, label }) => { // states const [query, setQuery] = useState(""); const router = useRouter(); const { workspaceSlug } = router.query; + const { + project: { labels, fetchProjectLabels }, + } = useMobxStore(); + const [referenceElement, setReferenceElement] = useState(null); const [popperElement, setPopperElement] = useState(null); @@ -38,11 +39,11 @@ export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, placement: "bottom-start", }); - const { data: issueLabels } = useSWR( - projectId ? PROJECT_ISSUE_LABELS(projectId) : null, - workspaceSlug && projectId - ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId) - : null + const issueLabels = labels?.[projectId] || []; + + useSWR( + workspaceSlug && projectId ? `PROJECT_ISSUE_LABELS_${projectId.toUpperCase()}` : null, + workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId) : null ); const filteredOptions = @@ -202,4 +203,4 @@ export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, )} ); -}; +}); diff --git a/web/components/issues/select/state.tsx b/web/components/issues/select/state.tsx index 051106acb..acefa0c74 100644 --- a/web/components/issues/select/state.tsx +++ b/web/components/issues/select/state.tsx @@ -1,14 +1,13 @@ import React from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; -// services -import { ProjectStateService } from "services/project"; +import { observer } from "mobx-react-lite"; +// store +import { useMobxStore } from "lib/mobx/store-provider"; // ui import { CustomSearchSelect, DoubleCircleIcon, StateGroupIcon } from "@plane/ui"; // icons import { Plus } from "lucide-react"; -// fetch keys -import { STATES_LIST } from "constants/fetch-keys"; type Props = { setIsOpen: React.Dispatch>; @@ -17,19 +16,24 @@ type Props = { projectId: string; }; -// services -const projectStateService = new ProjectStateService(); +export const IssueStateSelect: React.FC = observer((props) => { + const { setIsOpen, value, onChange, projectId } = props; -export const IssueStateSelect: React.FC = ({ setIsOpen, value, onChange, projectId }) => { // states const router = useRouter(); const { workspaceSlug } = router.query; - const { data: states } = useSWR( - workspaceSlug && projectId ? STATES_LIST(projectId) : null, - workspaceSlug && projectId ? () => projectStateService.getStates(workspaceSlug as string, projectId) : null + const { + projectState: { states: projectStates, fetchProjectStates }, + } = useMobxStore(); + + useSWR( + workspaceSlug && projectId ? `STATES_LIST_${projectId.toUpperCase()}` : null, + workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId) : null ); + const states = projectStates?.[projectId] || []; + const options = states?.map((state) => ({ value: state.id, query: state.name, @@ -74,4 +78,4 @@ export const IssueStateSelect: React.FC = ({ setIsOpen, value, onChange, noChevron /> ); -}; +}); diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx index 02014ed50..622fc8dd1 100644 --- a/web/components/project/sidebar-list-item.tsx +++ b/web/components/project/sidebar-list-item.tsx @@ -5,18 +5,7 @@ import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd"; import { Disclosure, Transition } from "@headlessui/react"; import { observer } from "mobx-react-lite"; // icons -import { - MoreVertical, - PenSquare, - LinkIcon, - Star, - Trash2, - FileText, - Settings, - Share2, - LogOut, - ChevronDown, -} from "lucide-react"; +import { MoreVertical, PenSquare, LinkIcon, Star, FileText, Settings, Share2, LogOut, ChevronDown } from "lucide-react"; // hooks import useToast from "hooks/use-toast"; // helpers @@ -27,7 +16,7 @@ import { IProject } from "types"; import { useMobxStore } from "lib/mobx/store-provider"; // components import { CustomMenu, Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui"; -import { LeaveProjectModal, DeleteProjectModal, PublishProjectModal } from "components/project"; +import { LeaveProjectModal, PublishProjectModal } from "components/project"; type Props = { project: IProject; @@ -71,6 +60,7 @@ const navigation = (workspaceSlug: string, projectId: string) => [ ]; export const ProjectSidebarListItem: React.FC = observer((props) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { project, provided, snapshot, handleCopyText, shortContextMenu = false } = props; // store const { project: projectStore, theme: themeStore } = useMobxStore(); @@ -81,7 +71,6 @@ export const ProjectSidebarListItem: React.FC = observer((props) => { const { setToastAlert } = useToast(); // states const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false); - const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false); const [publishModalOpen, setPublishModal] = useState(false); const isAdmin = project.member_role === 20; @@ -121,21 +110,11 @@ export const ProjectSidebarListItem: React.FC = observer((props) => { setLeaveProjectModal(false); }; - const handleDeleteProjectClick = () => { - setDeleteProjectModal(true); - }; - - const handleDeleteProjectModalClose = () => { - setDeleteProjectModal(false); - router.push(`/${workspaceSlug}/projects`); - }; - return ( <> setPublishModal(false)} /> - - + {({ open }) => ( <>
= observer((props) => { )} - {!isCollapsed && ( -

{project.name}

- )} + {!isCollapsed &&

{project.name}

}
{!isCollapsed && ( = observer((props) => { )} - - {!shortContextMenu && isAdmin && ( - - - - Delete project - - - )} )} diff --git a/web/components/views/form.tsx b/web/components/views/form.tsx index b8c54d8a7..69557a7c1 100644 --- a/web/components/views/form.tsx +++ b/web/components/views/form.tsx @@ -9,7 +9,7 @@ import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components // ui import { Button, Input, TextArea } from "@plane/ui"; // types -import { IProjectView } from "types"; +import { IProjectView, IIssueFilterOptions } from "types"; // constants import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue"; @@ -43,7 +43,34 @@ export const ProjectViewForm: React.FC = observer(({ handleFormSubmit, ha defaultValues, }); - const selectedFilters = watch("query_data"); + const selectedFilters: IIssueFilterOptions = {}; + Object.entries(watch("query_data") ?? {}).forEach(([key, value]) => { + if (!value) return; + + if (Array.isArray(value) && value.length === 0) return; + + selectedFilters[key as keyof IIssueFilterOptions] = value; + }); + + // for removing filters from a key + const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => { + if (!value) return; + + const newValues = selectedFilters?.[key] ?? []; + + if (Array.isArray(value)) { + value.forEach((val) => { + if (newValues.includes(val)) newValues.splice(newValues.indexOf(val), 1); + }); + } else { + if (selectedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1); + } + + setValue("query_data", { + ...selectedFilters, + [key]: newValues, + }); + }; const handleCreateUpdateView = async (formData: IProjectView) => { await handleFormSubmit(formData); @@ -153,10 +180,10 @@ export const ProjectViewForm: React.FC = observer(({ handleFormSubmit, ha {}} - labels={projectStore.projectLabels ?? undefined} - members={projectMembers?.map((m) => m.member) ?? undefined} - states={projectStateStore.projectStates ?? undefined} + handleRemoveFilter={handleRemoveFilter} + labels={projectStore.projectLabels ?? []} + members={projectMembers?.map((m) => m.member) ?? []} + states={projectStateStore.projectStates ?? []} /> )} diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx index db070d6c6..7889deb5a 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx @@ -1,14 +1,12 @@ import React, { ReactElement } from "react"; import { useRouter } from "next/router"; -import useSWR from "swr"; -// services -import { ProjectService, ProjectMemberService } from "services/project"; +import { observer } from "mobx-react-lite"; +// store +import { useMobxStore } from "lib/mobx/store-provider"; // layouts import { AppLayout } from "layouts/app-layout"; import { ProjectSettingLayout } from "layouts/settings-layout"; // hooks -import useUserAuth from "hooks/use-user-auth"; -import useProjectDetails from "hooks/use-project-details"; import useToast from "hooks/use-toast"; // components import { AutoArchiveAutomation, AutoCloseAutomation } from "components/automation"; @@ -16,45 +14,32 @@ import { ProjectSettingHeader } from "components/headers"; // types import { NextPageWithLayout } from "types/app"; import { IProject } from "types"; -// constant -import { USER_PROJECT_VIEW } from "constants/fetch-keys"; -// services -const projectService = new ProjectService(); -const projectMemberService = new ProjectMemberService(); - -const AutomationSettingsPage: NextPageWithLayout = () => { +const AutomationSettingsPage: NextPageWithLayout = observer(() => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; - const { user } = useUserAuth(); const { setToastAlert } = useToast(); - const { projectDetails } = useProjectDetails(); - - const { data: memberDetails } = useSWR( - workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null, - workspaceSlug && projectId - ? () => projectMemberService.projectMemberMe(workspaceSlug.toString(), projectId.toString()) - : null - ); + // store + const { + user: { currentProjectRole }, + project: { currentProjectDetails: projectDetails, updateProject }, + } = useMobxStore(); const handleChange = async (formData: Partial) => { if (!workspaceSlug || !projectId || !projectDetails) return; - await projectService - .updateProject(workspaceSlug as string, projectId as string, formData, user) - .then(() => {}) - .catch(() => { - setToastAlert({ - type: "error", - title: "Error!", - message: "Something went wrong. Please try again.", - }); + await updateProject(workspaceSlug.toString(), projectId.toString(), formData).catch(() => { + setToastAlert({ + type: "error", + title: "Error!", + message: "Something went wrong. Please try again.", }); + }); }; - const isAdmin = memberDetails?.role === 20; + const isAdmin = currentProjectRole === 20; return (
@@ -65,7 +50,7 @@ const AutomationSettingsPage: NextPageWithLayout = () => {
); -}; +}); AutomationSettingsPage.getLayout = function getLayout(page: ReactElement) { return ( diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx index 0afc3399b..152bbc522 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx @@ -17,7 +17,7 @@ const EstimatesSettingsPage: NextPageWithLayout = () => ( EstimatesSettingsPage.getLayout = function getLayout(page: ReactElement) { return ( } withProjectWrapper> - {page}; + {page} ); };