Skip to content

Commit

Permalink
chore: use new cycle and module store. (#3172)
Browse files Browse the repository at this point in the history
* chore: use new cycle and module store.

* chore: minor improvements.
  • Loading branch information
prateekshourya29 authored Dec 18, 2023
1 parent cad2706 commit 9595493
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 75 deletions.
47 changes: 31 additions & 16 deletions web/components/headers/cycle-issues.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { useCallback, useState } from "react";
import React, { useCallback, useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
import { useApplication, useLabel, useProject, useProjectState, useUser } from "hooks/store";
import { useApplication, useCycle, useLabel, useProject, useProjectState, useUser } from "hooks/store";
import useLocalStorage from "hooks/use-local-storage";
// components
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
Expand All @@ -23,6 +23,30 @@ import { EFilterType } from "store_legacy/issues/types";
import { EProjectStore } from "store_legacy/command-palette.store";
import { EUserProjectRoles } from "constants/project";

const CycleDropdownOption: React.FC<{ cycleId: string }> = ({ cycleId }) => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store hooks
const { getCycleById } = useCycle();
// derived values
const cycle = getCycleById(cycleId);

if (!cycle) return null;

return (
<CustomMenu.MenuItem
key={cycle.id}
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)}
>
<div className="flex items-center gap-1.5">
<ContrastIcon className="h-3 w-3" />
{truncateText(cycle.name, 40)}
</div>
</CustomMenu.MenuItem>
);
};

export const CycleIssuesHeader: React.FC = observer(() => {
// states
const [analyticsModal, setAnalyticsModal] = useState(false);
Expand All @@ -35,11 +59,11 @@ export const CycleIssuesHeader: React.FC = observer(() => {
};
// store hooks
const {
cycle: cycleStore,
projectIssuesFilter: projectIssueFiltersStore,
projectMember: { projectMembers },
cycleIssuesFilter: { issueFilters, updateFilters },
} = useMobxStore();
const { projectAllCycles, getCycleById } = useCycle();
const {
commandPalette: { toggleCreateIssueModal },
eventTracker: { setTrackElement },
Expand Down Expand Up @@ -105,9 +129,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
[workspaceSlug, projectId, cycleId, updateFilters]
);

const cyclesList = cycleStore.projectCycles;
const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined;

// derived values
const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
const canUserCreateIssue =
currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);

Expand Down Expand Up @@ -157,16 +180,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
width="auto"
placement="bottom-start"
>
{cyclesList?.map((cycle) => (
<CustomMenu.MenuItem
key={cycle.id}
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)}
>
<div className="flex items-center gap-1.5">
<ContrastIcon className="h-3 w-3" />
{truncateText(cycle.name, 40)}
</div>
</CustomMenu.MenuItem>
{projectAllCycles?.map((cycleId) => (
<CycleDropdownOption key={cycleId} cycleId={cycleId} />
))}
</CustomMenu>
}
Expand Down
45 changes: 30 additions & 15 deletions web/components/headers/module-issues.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
import { useApplication, useLabel, useProject, useProjectState, useUser } from "hooks/store";
import { useApplication, useLabel, useModule, useProject, useProjectState, useUser } from "hooks/store";
import useLocalStorage from "hooks/use-local-storage";
// components
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
Expand All @@ -24,6 +24,30 @@ import { EFilterType } from "store_legacy/issues/types";
import { EProjectStore } from "store_legacy/command-palette.store";
import { EUserProjectRoles } from "constants/project";

const ModuleDropdownOption: React.FC<{ moduleId: string }> = ({ moduleId }) => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store hooks
const { getModuleById } = useModule();
// derived values
const moduleDetail = getModuleById(moduleId);

if (!moduleDetail) return null;

return (
<CustomMenu.MenuItem
key={moduleDetail.id}
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/modules/${moduleDetail.id}`)}
>
<div className="flex items-center gap-1.5">
<DiceIcon className="h-3 w-3" />
{truncateText(moduleDetail.name, 40)}
</div>
</CustomMenu.MenuItem>
);
};

export const ModuleIssuesHeader: React.FC = observer(() => {
// states
const [analyticsModal, setAnalyticsModal] = useState(false);
Expand All @@ -36,10 +60,10 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
};
// store hooks
const {
module: moduleStore,
projectMember: { projectMembers },
moduleIssuesFilter: { issueFilters, updateFilters },
} = useMobxStore();
const { projectModules, getModuleById } = useModule();
const {
commandPalette: { toggleCreateIssueModal },
eventTracker: { setTrackElement },
Expand Down Expand Up @@ -105,9 +129,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
[workspaceSlug, projectId, moduleId, updateFilters]
);

const modulesList = projectId ? moduleStore.modules[projectId.toString()] : undefined;
const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined;

// derived values
const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : undefined;
const canUserCreateIssue =
currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);

Expand Down Expand Up @@ -157,16 +180,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
width="auto"
placement="bottom-start"
>
{modulesList?.map((module) => (
<CustomMenu.MenuItem
key={module.id}
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`)}
>
<div className="flex items-center gap-1.5">
<DiceIcon className="h-3 w-3" />
{truncateText(module.name, 40)}
</div>
</CustomMenu.MenuItem>
{projectModules?.map((moduleId) => (
<ModuleDropdownOption moduleId={moduleId} />
))}
</CustomMenu>
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ export const CycleLayoutRoot: React.FC = observer(() => {
};
// store hooks
const {
cycle: cycleStore,
cycleIssues: { loader, getIssues, fetchIssues },
cycleIssuesFilter: { issueFilters, fetchFilters },
} = useMobxStore();
Expand Down
37 changes: 18 additions & 19 deletions web/components/issues/select/cycle.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { useState } from "react";
import { observer } from "mobx-react-lite";
import { usePopper } from "react-popper";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import { useCycle } from "hooks/store";
// ui
import { Combobox } from "@headlessui/react";
// icons
Expand All @@ -28,28 +28,27 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
placement: "bottom-start",
});

const { cycle: cycleStore } = useMobxStore();
const { projectAllCycles, fetchAllCycles, getCycleById } = useCycle();

const fetchCycles = () => {
if (workspaceSlug && projectId) cycleStore.fetchCycles(workspaceSlug, projectId, "all");
if (workspaceSlug && projectId) fetchAllCycles(workspaceSlug, projectId);
};

const cycles = cycleStore.projectCycles;
const selectedCycle = value ? getCycleById(value) : null;

const selectedCycle = cycles ? cycles?.find((i) => i.id === value) : undefined;

const options = cycles?.map((cycle) => ({
value: cycle.id,
query: cycle.name,
content: (
<div className="flex items-center gap-1.5 truncate">
<span className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
<ContrastIcon />
</span>
<span className="flex-grow truncate">{cycle.name}</span>
</div>
),
}));
const options = projectAllCycles?.map((cycleId) => {
const cycleDetail = getCycleById(cycleId);
return {
value: cycleId,
query: cycleDetail?.name ?? "",
content: (
<div className="flex items-center gap-1.5">
<ContrastIcon className="h-3 w-3" />
{cycleDetail?.name}
</div>
),
};
});

const filteredOptions =
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
Expand Down
48 changes: 24 additions & 24 deletions web/components/issues/sidebar-select/module.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import React, { useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { mutate } from "swr";
// mobx store
// hooks
import { useModule } from "hooks/store";
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { CustomSearchSelect, DiceIcon, Spinner, Tooltip } from "@plane/ui";
Expand All @@ -25,9 +26,9 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
const { workspaceSlug, projectId } = router.query;
// mobx store
const {
module: { projectModules },
moduleIssues: { removeIssueFromModule, addIssueToModule },
} = useMobxStore();
const { projectModules, getModuleById } = useModule();

const [isUpdating, setIsUpdating] = useState(false);

Expand Down Expand Up @@ -63,21 +64,25 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
});
};

const options = projectModules?.map((module) => ({
value: module.id,
query: module.name,
content: (
<div className="flex items-center gap-1.5 truncate">
<span className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
<DiceIcon />
</span>
<span className="flex-grow truncate">{module.name}</span>
</div>
),
}));
const options = projectModules?.map((moduleId) => {
const moduleDetail = getModuleById(moduleId);
return {
value: moduleId,
query: moduleDetail?.name ?? "",
content: (
<div className="flex items-center gap-1.5 truncate">
<span className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
<DiceIcon />
</span>
<span className="flex-grow truncate">{moduleDetail?.name}</span>
</div>
),
};
});

// derived values
const issueModule = issueDetail?.issue_module;

const selectedModule = issueModule?.module ? getModuleById(issueModule?.module) : null;
const disableSelect = disabled || isUpdating;

return (
Expand All @@ -88,16 +93,13 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
value === issueModule?.module_detail.id
? handleRemoveIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
: handleModuleChange
? handleModuleChange(value)
: handleModuleStoreChange(value);
? handleModuleChange(value)
: handleModuleStoreChange(value);
}}
options={options}
customButton={
<div>
<Tooltip
position="left"
tooltipContent={`${projectModules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}`}
>
<Tooltip position="left" tooltipContent={`${selectedModule?.name ?? "No module"}`}>
<button
type="button"
className={`flex w-full items-center rounded bg-custom-background-80 px-2.5 py-0.5 text-xs ${
Expand All @@ -110,9 +112,7 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
}`}
>
<span className="flex-shrink-0">{issueModule && <DiceIcon className="h-3.5 w-3.5" />}</span>
<span className="truncate">
{projectModules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
</span>
<span className="truncate">{selectedModule?.name ?? "No module"}</span>
</span>
</button>
</Tooltip>
Expand Down

0 comments on commit 9595493

Please sign in to comment.