diff --git a/web/components/core/activity.tsx b/web/components/core/activity.tsx index 5f60a9174..2b0f7b4e6 100644 --- a/web/components/core/activity.tsx +++ b/web/components/core/activity.tsx @@ -51,7 +51,7 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => { className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" > {activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"} - + ); @@ -271,10 +271,10 @@ const activityDetails: { href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`} target="_blank" rel="noopener noreferrer" - className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" + className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" > - {activity.new_value} - + {activity.new_value} + ); @@ -286,10 +286,10 @@ const activityDetails: { href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`} target="_blank" rel="noopener noreferrer" - className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" + className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" > - {activity.new_value} - + {activity.new_value} + ); @@ -301,10 +301,10 @@ const activityDetails: { href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`} target="_blank" rel="noopener noreferrer" - className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" + className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" > - {activity.old_value} - + {activity.old_value} + ); @@ -482,10 +482,10 @@ const activityDetails: { href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`} target="_blank" rel="noopener noreferrer" - className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" + className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" > - {activity.new_value} - + {activity.new_value} + ); @@ -497,10 +497,10 @@ const activityDetails: { href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`} target="_blank" rel="noopener noreferrer" - className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" + className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" > - {activity.new_value} - + {activity.new_value} + ); @@ -512,10 +512,10 @@ const activityDetails: { href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`} target="_blank" rel="noopener noreferrer" - className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" + className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" > - {activity.old_value} - + {activity.old_value} + ); 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/headers/project-issues.tsx b/web/components/headers/project-issues.tsx index 5b87b14c4..1b418d6f4 100644 --- a/web/components/headers/project-issues.tsx +++ b/web/components/headers/project-issues.tsx @@ -2,7 +2,7 @@ import { useCallback, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; -import { ArrowLeft, Circle, ExternalLink, Plus } from "lucide-react"; +import { ArrowLeft, Briefcase, Circle, ExternalLink, Plus } from "lucide-react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // components @@ -121,17 +121,23 @@ export const ProjectIssuesHeader: React.FC = observer(() => { - {renderEmoji(currentProjectDetails.emoji)} - - ) : currentProjectDetails?.icon_prop ? ( -
- {renderEmoji(currentProjectDetails.icon_prop)} -
+ currentProjectDetails ? ( + currentProjectDetails?.emoji ? ( + + {renderEmoji(currentProjectDetails.emoji)} + + ) : currentProjectDetails?.icon_prop ? ( +
+ {renderEmoji(currentProjectDetails.icon_prop)} +
+ ) : ( + + {currentProjectDetails?.name.charAt(0)} + + ) ) : ( - - {currentProjectDetails?.name.charAt(0)} + + ) } diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx index d2c91d47d..a335ef687 100644 --- a/web/components/issues/form.tsx +++ b/web/components/issues/form.tsx @@ -542,13 +542,13 @@ export const IssueForm: FC = observer((props) => { )} {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && ( <> - - {watch("parent") ? ( + {watch("parent") ? ( +
@@ -557,31 +557,30 @@ export const IssueForm: FC = observer((props) => { ${selectedParentIssue.sequence_id}`}
- ) : ( -
- - Add Parent -
- )} - - } - placement="bottom-start" - > - {watch("parent") ? ( - <> - setParentIssueListModalOpen(true)}> - Change parent issue - - setValue("parent", null)}> - Remove parent issue - - - ) : ( + + } + placement="bottom-start" + > setParentIssueListModalOpen(true)}> - Select Parent Issue + Change parent issue - )} - + setValue("parent", null)}> + Remove parent issue + + + ) : ( + + )} + = (props) => { key={`assignees-${member.id}`} isChecked={appliedFilters?.includes(member.id) ? true : false} onClick={() => handleUpdate(member.id)} - icon={} + icon={} title={member.display_name} /> ))} diff --git a/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx index 90873cb7b..19f0f139f 100644 --- a/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx +++ b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx @@ -49,7 +49,7 @@ export const FilterCreatedBy: React.FC = (props) => { key={`created-by-${member.id}`} isChecked={appliedFilters?.includes(member.id) ? true : false} onClick={() => handleUpdate(member.id)} - icon={} + icon={} title={member.display_name} /> ))} diff --git a/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx b/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx index 5d7a63097..16f05d90d 100644 --- a/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx +++ b/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx @@ -49,7 +49,7 @@ export const FilterMentions: React.FC = (props) => { key={`mentions-${member.id}`} isChecked={appliedFilters?.includes(member.id) ? true : false} onClick={() => handleUpdate(member.id)} - icon={} + icon={} title={member.display_name} /> ))} diff --git a/web/components/issues/issue-layouts/properties/assignee.tsx b/web/components/issues/issue-layouts/properties/assignee.tsx index f7a4f322b..c3b8002e6 100644 --- a/web/components/issues/issue-layouts/properties/assignee.tsx +++ b/web/components/issues/issue-layouts/properties/assignee.tsx @@ -117,8 +117,8 @@ export const IssuePropertyAssignee: React.FC = observer( ) : ( diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx index 3fd042c1d..952a8cce9 100644 --- a/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx @@ -78,7 +78,7 @@ export const IssueColumn: React.FC = ({
{properties.key && (
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx index 765e6d35c..a9aeeec75 100644 --- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx @@ -94,7 +94,7 @@ export const SpreadsheetView: React.FC = observer((props) => { {displayProperties.key && ( ID )} - Issue + Issue
{issues.map((issue, index) => ( diff --git a/web/components/issues/select/cycle.tsx b/web/components/issues/select/cycle.tsx index c931ec5d8..04e251f01 100644 --- a/web/components/issues/select/cycle.tsx +++ b/web/components/issues/select/cycle.tsx @@ -55,9 +55,9 @@ export const IssueCycleSelect: React.FC = observer((props query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase())); const label = selectedCycle ? ( -
- -
{selectedCycle.name}
+
+ +
{selectedCycle.name}
) : (
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/module.tsx b/web/components/issues/select/module.tsx index cb9d6252b..3174f32c1 100644 --- a/web/components/issues/select/module.tsx +++ b/web/components/issues/select/module.tsx @@ -55,9 +55,9 @@ export const IssueModuleSelect: React.FC = observer((pro query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase())); const label = selectedModule ? ( -
- - {selectedModule.name} +
+ + {selectedModule.name}
) : (
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/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx index 45c951150..09f9bc6a8 100644 --- a/web/components/modules/delete-module-modal.tsx +++ b/web/components/modules/delete-module-modal.tsx @@ -102,7 +102,7 @@ export const DeleteModuleModal: React.FC = observer((props) => {

Are you sure you want to delete module-{" "} - {data?.name}? All of the + {data?.name}? All of the data related to the module will be permanently removed. This action cannot be undone.

diff --git a/web/components/modules/select/lead.tsx b/web/components/modules/select/lead.tsx index 84da54748..ccff72a37 100644 --- a/web/components/modules/select/lead.tsx +++ b/web/components/modules/select/lead.tsx @@ -6,6 +6,7 @@ import { ProjectMemberService } from "services/project"; // ui import { Avatar, CustomSearchSelect } from "@plane/ui"; // icons +import { Combobox } from "@headlessui/react"; import { UserCircle } from "lucide-react"; // fetch-keys import { PROJECT_MEMBERS } from "constants/fetch-keys"; @@ -59,6 +60,16 @@ export const ModuleLeadSelect: React.FC = ({ value, onChange }) => { )}
} + footerOption={ + + + No Lead + + + } onChange={onChange} noChevron /> diff --git a/web/components/pages/single-page-detailed-item.tsx b/web/components/pages/single-page-detailed-item.tsx index 2ff00f2d5..d1cade380 100644 --- a/web/components/pages/single-page-detailed-item.tsx +++ b/web/components/pages/single-page-detailed-item.tsx @@ -58,8 +58,8 @@ export const SinglePageDetailedItem: React.FC = ({
- diff --git a/web/components/pages/single-page-list-item.tsx b/web/components/pages/single-page-list-item.tsx index 87d5bdab2..6f39f3e26 100644 --- a/web/components/pages/single-page-list-item.tsx +++ b/web/components/pages/single-page-list-item.tsx @@ -59,9 +59,9 @@ export const SinglePageListItem: React.FC = ({
-
- -

{truncateText(page.name, 75)}

+
+ +

{page.name}

{page.label_details.length > 0 && page.label_details.map((label) => (
= (props) => { Join Project?

- Are you sure you want to join the project {project?.name}? + Are you sure you want to join the project {project?.name}? Please click the 'Join Project' button below to continue.

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 b7f91a467..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); @@ -106,7 +133,7 @@ export const ProjectViewForm: React.FC = observer(({ handleFormSubmit, ha id="description" name="description" placeholder="Description" - className="resize-none text-sm" + className="h-24 w-full resize-none text-sm" hasError={Boolean(errors?.description)} value={value} onChange={onChange} @@ -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/components/views/view-list-item.tsx b/web/components/views/view-list-item.tsx index 7d9d010d4..7c35718b1 100644 --- a/web/components/views/view-list-item.tsx +++ b/web/components/views/view-list-item.tsx @@ -60,12 +60,12 @@ export const ProjectViewListItem: React.FC = observer((props) => {
-
+
-
-

{view.name}

+
+

{view.name}

{view?.description &&

{view.description}

}
diff --git a/web/components/workspace/member-select.tsx b/web/components/workspace/member-select.tsx index bae16de01..26b76845d 100644 --- a/web/components/workspace/member-select.tsx +++ b/web/components/workspace/member-select.tsx @@ -95,27 +95,37 @@ export const WorkspaceMemberSelect: FC = (props) => {
{filteredOptions ? ( filteredOptions.length > 0 ? ( - filteredOptions.map((workspaceMember: IWorkspaceMember) => ( + <> + {filteredOptions.map((workspaceMember: IWorkspaceMember) => ( + + `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${ + active && !selected ? "bg-custom-background-80" : "" + } ${selected ? "text-custom-text-100" : "text-custom-text-200"}` + } + > + {({ selected }) => ( + <> +
+ + {workspaceMember.member.display_name} +
+ {selected && } + + )} + + ))} - `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${ - active && !selected ? "bg-custom-background-80" : "" - } ${selected ? "text-custom-text-100" : "text-custom-text-200"}` - } + value="" + className="flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200" > - {({ selected }) => ( - <> -
- - {workspaceMember.member.display_name} -
- {selected && } - - )} + + No Lead + - )) + ) : (

No matching results

diff --git a/web/components/workspace/views/form.tsx b/web/components/workspace/views/form.tsx index f6c6de2d2..7f500969f 100644 --- a/web/components/workspace/views/form.tsx +++ b/web/components/workspace/views/form.tsx @@ -114,7 +114,7 @@ export const WorkspaceViewForm: React.FC = observer((props) => { value={value} placeholder="Description" onChange={onChange} - className="h-32 resize-none text-sm" + className="h-24 w-full resize-none text-sm" hasError={Boolean(errors?.description)} /> )} 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} ); };