github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: fetch states only when the dropdown is opened (#1684)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-07-26 23:20:44 +05:30 committed by GitHub
parent fd9dcfa2ec
commit d6f3c2515a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 51 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/app/components/automation/auto-close-automation.tsx
View File

@ -37,8 +37,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
? () => stateService.getStates(workspaceSlug as string, projectId as string)
: null
);
const states = getStatesList(stateGroups ?? {});
const states = getStatesList(stateGroups);
const options = states
?.filter((state) => state.group === "cancelled")
@ -53,14 +52,14 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
),
}));
const multipleOptions = options.length > 1;
const multipleOptions = (options ?? []).length > 1;
const defaultState = stateGroups && stateGroups.cancelled ? stateGroups.cancelled[0].id : null;
const selectedOption = states?.find(
(s) => s.id === projectDetails?.default_state ?? defaultState
);
const currentDefaultState = states.find((s) => s.id === defaultState);
const currentDefaultState = states?.find((s) => s.id === defaultState);
const initialValues: Partial<IProject> = {
close_in: 1,

2
apps/app/components/command-palette/issue/change-issue-state.tsx
View File

@ -34,7 +34,7 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, use
? () => stateService.getStates(workspaceSlug as string, projectId as string)
: null
);
const states = getStatesList(stateGroups ?? {});
const states = getStatesList(stateGroups);
const submitChanges = useCallback(
async (formData: Partial<IIssue>) => {

2
apps/app/components/core/views/all-views.tsx
View File

@ -75,7 +75,7 @@ export const AllViews: React.FC<Props> = ({
? () => stateService.getStates(workspaceSlug as string, projectId as string)
: null
);
const states = getStatesList(stateGroups ?? {});
const states = getStatesList(stateGroups);
const handleTrashBox = useCallback(
(isDragging: boolean) => {

17
apps/app/components/core/views/issues-view.tsx
View File

@ -29,7 +29,7 @@ import { PlusIcon } from "@heroicons/react/24/outline";
import { getStatesList } from "helpers/state.helper";
import { orderArrayBy } from "helpers/array.helper";
// types
import { IIssue, IIssueFilterOptions } from "types";
import { IIssue, IIssueFilterOptions, IState } from "types";
// fetch-keys
import {
CYCLE_DETAILS,
@ -96,7 +96,7 @@ export const IssuesView: React.FC<Props> = ({
? () => stateService.getStates(workspaceSlug as string, projectId as string)
: null
);
const states = getStatesList(stateGroups ?? {});
const states = getStatesList(stateGroups);
const { data: labels } = useSWR(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
@ -184,7 +184,10 @@ export const IssuesView: React.FC<Props> = ({
// dragged item(or issue)
if (selectedGroup === "priority") draggedItem.priority = destinationGroup;
else if (selectedGroup === "state") draggedItem.state = destinationGroup;
else if (selectedGroup === "state") {
draggedItem.state = destinationGroup;
draggedItem.state_detail = states?.find((s) => s.id === destinationGroup) as IState;
}
}
const sourceGroup = source.droppableId; // source group id
@ -200,8 +203,8 @@ export const IssuesView: React.FC<Props> = ({
(prevData) => {
if (!prevData) return prevData;
const sourceGroupArray = prevData[sourceGroup];
const destinationGroupArray = groupedByIssues[destinationGroup];
const sourceGroupArray = [...groupedByIssues[sourceGroup]];
const destinationGroupArray = [...groupedByIssues[destinationGroup]];
sourceGroupArray.splice(source.index, 1);
destinationGroupArray.splice(destination.index, 0, draggedItem);
@ -229,7 +232,9 @@ export const IssuesView: React.FC<Props> = ({
user
)
.then((response) => {
const sourceStateBeforeDrag = states.find((state) => state.name === source.droppableId);
const sourceStateBeforeDrag = states?.find(
(state) => state.name === source.droppableId
);
if (
sourceStateBeforeDrag?.group !== "completed" &&

4
apps/app/components/issues/select/state.tsx
View File

@ -34,7 +34,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
? () => stateService.getStates(workspaceSlug as string, projectId)
: null
);
const states = getStatesList(stateGroups ?? {});
const states = getStatesList(stateGroups);
const options = states?.map((state) => ({
value: state.id,
@ -48,7 +48,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
}));
const selectedOption = states?.find((s) => s.id === value);
const currentDefaultState = states.find((s) => s.default);
const currentDefaultState = states?.find((s) => s.default);
return (
<CustomSearchSelect

2
apps/app/components/issues/sidebar-select/state.tsx
View File

@ -41,7 +41,7 @@ export const SidebarStateSelect: React.FC<Props> = ({
? () => stateService.getStates(workspaceSlug as string, projectId as string)
: null
);
const states = getStatesList(stateGroups ?? {});
const states = getStatesList(stateGroups);
const selectedState = states?.find((s) => s.id === value);

11
apps/app/components/issues/view-select/state.tsx
View File

@ -52,7 +52,7 @@ export const ViewStateSelect: React.FC<Props> = ({
? () => stateService.getStates(workspaceSlug as string, issue.project)
: null
);
const states = getStatesList(stateGroups ?? {});
const states = getStatesList(stateGroups);
const options = states?.map((state) => ({
value: state.id,
@ -88,11 +88,13 @@ export const ViewStateSelect: React.FC<Props> = ({
className={className}
value={issue.state}
onChange={(data: string) => {
const oldState = states?.find((s) => s.id === issue.state);
const newState = states?.find((s) => s.id === data);
partialUpdateIssue(
{
state: data,
priority: issue.priority,
target_date: issue.target_date,
state_detail: newState,
},
issue
);
@ -109,9 +111,6 @@ export const ViewStateSelect: React.FC<Props> = ({
user
);
const oldState = states.find((s) => s.id === issue.state);
const newState = states.find((s) => s.id === data);
if (oldState?.group !== "completed" && newState?.group !== "completed") {
trackEventServices.trackIssueMarkedAsDoneEvent(
{

2
apps/app/components/views/form.tsx
View File

@ -67,7 +67,7 @@ export const ViewForm: React.FC<Props> = ({
? () => stateService.getStates(workspaceSlug as string, projectId as string)
: null
);
const states = getStatesList(stateGroups ?? {});
const states = getStatesList(stateGroups);
const { data: labels } = useSWR(
workspaceSlug && projectId && (filters.labels ?? []).length > 0

4
apps/app/components/views/select-filters.tsx
View File

@ -49,7 +49,7 @@ export const SelectFilters: React.FC<Props> = ({
? () => stateService.getStates(workspaceSlug as string, projectId as string)
: null
);
const statesList = getStatesList(states ?? {});
const statesList = getStatesList(states);
const { data: members } = useSWR(
projectId ? PROJECT_MEMBERS(projectId as string) : null,
@ -103,7 +103,7 @@ export const SelectFilters: React.FC<Props> = ({
label: "State",
value: statesList,
hasChildren: true,
children: statesList.map((state) => ({
children: statesList?.map((state) => ({
id: state.id,
label: (
<div className="flex items-center gap-2">

15
apps/app/helpers/state.helper.ts
View File

@ -1,16 +1,25 @@
// types
import { IState, IStateResponse } from "types";
export const orderStateGroups = (unorderedStateGroups: IStateResponse) =>
Object.assign(
export const orderStateGroups = (
unorderedStateGroups: IStateResponse | undefined
): IStateResponse | undefined => {
if (!unorderedStateGroups) return undefined;
return Object.assign(
{ backlog: [], unstarted: [], started: [], completed: [], cancelled: [] },
unorderedStateGroups
);
};
export const getStatesList = (stateGroups: IStateResponse | undefined): IState[] | undefined => {
if (!stateGroups) return undefined;
export const getStatesList = (stateGroups: any): IState[] => {
// order the unordered state groups first
const orderedStateGroups = orderStateGroups(stateGroups);
if (!orderedStateGroups) return undefined;
// extract states from the groups and return them
return Object.keys(orderedStateGroups)
.map((group) => [...orderedStateGroups[group].map((state: IState) => state)])

15
apps/app/hooks/use-issues-view.tsx
View File

@ -125,21 +125,22 @@ const useIssuesView = () => {
? () => stateService.getStates(workspaceSlug as string, projectId as string)
: null
);
const statesList = getStatesList(states ?? {});
const activeStatesList = statesList.filter(
const statesList = getStatesList(states);
const activeStatesList = statesList?.filter(
(state) => state.group === "started" || state.group === "unstarted"
);
const backlogStatesList = statesList.filter((state) => state.group === "backlog");
const backlogStatesList = statesList?.filter((state) => state.group === "backlog");
const stateIds =
filters && filters?.type === "active"
? activeStatesList.map((state) => state.id)
? activeStatesList?.map((state) => state.id)
: filters?.type === "backlog"
? backlogStatesList.map((state) => state.id)
: statesList.map((state) => state.id);
? backlogStatesList?.map((state) => state.id)
: statesList?.map((state) => state.id);
const filteredStateIds =
filters && filters?.state ? stateIds.filter((s) => filters.state?.includes(s)) : stateIds;
(filters && filters?.state ? stateIds?.filter((s) => filters.state?.includes(s)) : stateIds) ??
[];
const emptyStatesObject: { [key: string]: [] } = {};
for (let i = 0; i < filteredStateIds.length; i++) {

8
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
View File

@ -49,8 +49,8 @@ const StatesSettings: NextPage = () => {
? () => stateService.getStates(workspaceSlug as string, projectId as string)
: null
);
const orderedStateGroups = orderStateGroups(states ?? {});
const statesList = getStatesList(orderedStateGroups ?? {});
const orderedStateGroups = orderStateGroups(states);
const statesList = getStatesList(orderedStateGroups);
return (
<>
@ -79,7 +79,7 @@ const StatesSettings: NextPage = () => {
<p className="text-custom-text-200">Manage the states of this project.</p>
</div>
<div className="col-span-12 space-y-8 sm:col-span-7">
{states && projectDetails ? (
{states && projectDetails && orderedStateGroups ? (
Object.keys(orderedStateGroups).map((key) => {
if (orderedStateGroups[key].length !== 0)
return (
@ -114,7 +114,7 @@ const StatesSettings: NextPage = () => {
key={state.id}
index={index}
state={state}
statesList={statesList}
statesList={statesList ?? []}
handleEditState={() => setSelectedState(state.id)}
handleDeleteState={() => setSelectDeleteState(state.id)}
user={user}