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

refactor: using label store to get labels

Browse Source
This commit is contained in:
Dakshesh Jain 2023-08-16 17:49:51 +05:30
parent f8ab0aa72b
commit e9c3a0642e
9 changed files with 307 additions and 306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/app/components/core/filters/filters-list.tsx
View File

@ -10,7 +10,7 @@ import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
// helpers
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
// types
import { IIssueFilterOptions, IIssueLabels, IState, IUserLite, TStateGroups } from "types";
import { IIssueFilterOptions, IState, IUserLite, TStateGroups, LabelLite } from "types";
// constants
import { STATE_GROUP_COLORS } from "constants/state";
@ -18,7 +18,7 @@ type Props = {
filters: Partial<IIssueFilterOptions>;
setFilters: (updatedFilter: Partial<IIssueFilterOptions>) => void;
clearAllFilters: (...args: any) => void;
labels: IIssueLabels[] | undefined;
labels: LabelLite[] | undefined;
members: IUserLite[] | undefined;
states: IState[] | undefined;
};

297
apps/app/components/core/views/board-view/board-header.tsx
View File

@ -1,18 +1,21 @@
import React from "react";
import React, { useEffect } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// services
import issuesService from "services/issues.service";
import projectService from "services/project.service";
// hooks
import useProjects from "hooks/use-projects";
// component
import { Avatar, Icon } from "components/ui";
// icons
import { ArrowsPointingInIcon, ArrowsPointingOutIcon, PlusIcon } from "@heroicons/react/24/outline";
import { PlusIcon } from "@heroicons/react/24/outline";
import { getPriorityIcon, getStateGroupIcon } from "components/icons";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
@ -20,7 +23,7 @@ import { renderEmoji } from "helpers/emoji.helper";
// types
import { IIssueViewProps, IState } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
import { PROJECT_MEMBERS } from "constants/fetch-keys";
type Props = {
currentState?: IState | null;
@ -32,162 +35,164 @@ type Props = {
viewProps: IIssueViewProps;
};
export const BoardHeader: React.FC<Props> = ({
currentState,
groupTitle,
addIssueToGroup,
isCollapsed,
setIsCollapsed,
disableUserActions,
viewProps,
}) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
export const BoardHeader: React.FC<Props> = observer(
({
currentState,
groupTitle,
addIssueToGroup,
isCollapsed,
setIsCollapsed,
disableUserActions,
viewProps,
}) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { groupedIssues, groupByProperty: selectedGroup } = viewProps;
const { groupedIssues, groupByProperty: selectedGroup } = viewProps;
const { data: issueLabels } = useSWR(
workspaceSlug && projectId && selectedGroup === "labels"
? PROJECT_ISSUE_LABELS(projectId.toString())
: null,
workspaceSlug && projectId && selectedGroup === "labels"
? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
: null
);
const { label: labelStore } = useMobxStore();
const { labels, loadLabels } = labelStore;
const { data: members } = useSWR(
workspaceSlug && projectId && selectedGroup === "created_by"
? PROJECT_MEMBERS(projectId.toString())
: null,
workspaceSlug && projectId && selectedGroup === "created_by"
? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
: null
);
const { data: members } = useSWR(
workspaceSlug && projectId && selectedGroup === "created_by"
? PROJECT_MEMBERS(projectId.toString())
: null,
workspaceSlug && projectId && selectedGroup === "created_by"
? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
: null
);
const { projects } = useProjects();
const { projects } = useProjects();
const getGroupTitle = () => {
let title = addSpaceIfCamelCase(groupTitle);
useEffect(() => {
if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId.toString());
}, [workspaceSlug, projectId, loadLabels]);
switch (selectedGroup) {
case "state":
title = addSpaceIfCamelCase(currentState?.name ?? "");
break;
case "labels":
title = issueLabels?.find((label) => label.id === groupTitle)?.name ?? "None";
break;
case "project":
title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
break;
case "created_by":
const member = members?.find((member) => member.member.id === groupTitle)?.member;
title = member?.display_name ?? "";
break;
}
const getGroupTitle = () => {
let title = addSpaceIfCamelCase(groupTitle);
return title;
};
switch (selectedGroup) {
case "state":
title = addSpaceIfCamelCase(currentState?.name ?? "");
break;
case "labels":
title = labels?.find((label) => label.id === groupTitle)?.name ?? "None";
break;
case "project":
title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
break;
case "created_by":
const member = members?.find((member) => member.member.id === groupTitle)?.member;
title = member?.display_name ?? "";
break;
}
const getGroupIcon = () => {
let icon;
return title;
};
switch (selectedGroup) {
case "state":
icon =
currentState && getStateGroupIcon(currentState.group, "16", "16", currentState.color);
break;
case "state_detail.group":
icon = getStateGroupIcon(groupTitle as any, "16", "16");
break;
case "priority":
icon = getPriorityIcon(groupTitle, "text-lg");
break;
case "project":
const project = projects?.find((p) => p.id === groupTitle);
icon =
project &&
(project.emoji !== null
? renderEmoji(project.emoji)
: project.icon_prop !== null
? renderEmoji(project.icon_prop)
: null);
break;
case "labels":
const labelColor =
issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
icon = (
<span
className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
style={{ backgroundColor: labelColor }}
/>
);
break;
case "created_by":
const member = members?.find((member) => member.member.id === groupTitle)?.member;
icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
const getGroupIcon = () => {
let icon;
break;
}
return icon;
};
return (
<div
className={`flex items-center justify-between px-1 ${
!isCollapsed ? "flex-col rounded-md bg-custom-background-90" : ""
}`}
>
<div className={`flex items-center ${isCollapsed ? "gap-1" : "flex-col gap-2"}`}>
<div
className={`flex cursor-pointer items-center gap-x-2 max-w-[316px] ${
!isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
}`}
>
<span className="flex items-center">{getGroupIcon()}</span>
<h2
className={`text-lg font-semibold truncate ${
selectedGroup === "created_by" ? "" : "capitalize"
}`}
style={{
writingMode: isCollapsed ? "horizontal-tb" : "vertical-rl",
}}
>
{getGroupTitle()}
</h2>
<span className={`${isCollapsed ? "ml-0.5" : ""} py-1 text-center text-sm`}>
{groupedIssues?.[groupTitle].length ?? 0}
</span>
</div>
</div>
<div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
<button
type="button"
className="grid h-7 w-7 place-items-center rounded p-1 text-custom-text-200 outline-none duration-300 hover:bg-custom-background-80"
onClick={() => {
setIsCollapsed((prevData) => !prevData);
}}
>
{isCollapsed ? (
<Icon
iconName="close_fullscreen"
className="text-base font-medium text-custom-text-900"
switch (selectedGroup) {
case "state":
icon =
currentState && getStateGroupIcon(currentState.group, "16", "16", currentState.color);
break;
case "state_detail.group":
icon = getStateGroupIcon(groupTitle as any, "16", "16");
break;
case "priority":
icon = getPriorityIcon(groupTitle, "text-lg");
break;
case "project":
const project = projects?.find((p) => p.id === groupTitle);
icon =
project &&
(project.emoji !== null
? renderEmoji(project.emoji)
: project.icon_prop !== null
? renderEmoji(project.icon_prop)
: null);
break;
case "labels":
const labelColor = labels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
icon = (
<span
className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
style={{ backgroundColor: labelColor }}
/>
) : (
<Icon iconName="open_in_full" className="text-base font-medium text-custom-text-900" />
)}
</button>
{!disableUserActions && selectedGroup !== "created_by" && (
);
break;
case "created_by":
const member = members?.find((member) => member.member.id === groupTitle)?.member;
icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
break;
}
return icon;
};
return (
<div
className={`flex items-center justify-between px-1 ${
!isCollapsed ? "flex-col rounded-md bg-custom-background-90" : ""
}`}
>
<div className={`flex items-center ${isCollapsed ? "gap-1" : "flex-col gap-2"}`}>
<div
className={`flex cursor-pointer items-center gap-x-2 max-w-[316px] ${
!isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
}`}
>
<span className="flex items-center">{getGroupIcon()}</span>
<h2
className={`text-lg font-semibold truncate ${
selectedGroup === "created_by" ? "" : "capitalize"
}`}
style={{
writingMode: isCollapsed ? "horizontal-tb" : "vertical-rl",
}}
>
{getGroupTitle()}
</h2>
<span className={`${isCollapsed ? "ml-0.5" : ""} py-1 text-center text-sm`}>
{groupedIssues?.[groupTitle].length ?? 0}
</span>
</div>
</div>
<div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
<button
type="button"
className="grid h-7 w-7 place-items-center rounded p-1 text-custom-text-200 outline-none duration-300 hover:bg-custom-background-80"
onClick={addIssueToGroup}
onClick={() => {
setIsCollapsed((prevData) => !prevData);
}}
>
<PlusIcon className="h-4 w-4" />
{isCollapsed ? (
<Icon
iconName="close_fullscreen"
className="text-base font-medium text-custom-text-900"
/>
) : (
<Icon
iconName="open_in_full"
className="text-base font-medium text-custom-text-900"
/>
)}
</button>
)}
{!disableUserActions && selectedGroup !== "created_by" && (
<button
type="button"
className="grid h-7 w-7 place-items-center rounded p-1 text-custom-text-200 outline-none duration-300 hover:bg-custom-background-80"
onClick={addIssueToGroup}
>
<PlusIcon className="h-4 w-4" />
</button>
)}
</div>
</div>
</div>
);
};
);
}
);

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

@ -1,9 +1,13 @@
import { useCallback, useState } from "react";
import { useCallback, useState, useEffect } from "react";
import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// react-beautiful-dnd
import { DropResult } from "react-beautiful-dnd";
// services
@ -37,7 +41,6 @@ import {
MODULE_DETAILS,
MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS,
PROJECT_ISSUE_LABELS,
STATES_LIST,
} from "constants/fetch-keys";
@ -46,10 +49,8 @@ type Props = {
disableUserActions?: boolean;
};
export const IssuesView: React.FC<Props> = ({
openIssuesListModal,
disableUserActions = false,
}) => {
export const IssuesView: React.FC<Props> = observer((props) => {
const { openIssuesListModal, disableUserActions = false } = props;
// create issue modal
const [createIssueModal, setCreateIssueModal] = useState(false);
const [createViewModal, setCreateViewModal] = useState<any>(null);
@ -75,6 +76,9 @@ export const IssuesView: React.FC<Props> = ({
const { user } = useUserAuth();
const { label: labelStore } = useMobxStore();
const { labels, loadLabels } = labelStore;
const { setToastAlert } = useToast();
const {
@ -99,15 +103,12 @@ export const IssuesView: React.FC<Props> = ({
);
const states = getStatesList(stateGroups);
const { data: labels } = useSWR(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
workspaceSlug && projectId
? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
: null
);
const { members } = useProjectMembers(workspaceSlug?.toString(), projectId?.toString());
useEffect(() => {
if (workspaceSlug && projectId) loadLabels(workspaceSlug as string, projectId as string);
}, [loadLabels, projectId, workspaceSlug]);
const handleDeleteIssue = useCallback(
(issue: IIssue) => {
setDeleteIssueModal(true);
@ -564,4 +565,4 @@ export const IssuesView: React.FC<Props> = ({
/>
</>
);
};
});

63
apps/app/components/core/views/list-view/single-list.tsx
View File

@ -1,11 +1,16 @@
import { useEffect } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// headless ui
import { Disclosure, Transition } from "@headlessui/react";
// services
import issuesService from "services/issues.service";
import projectService from "services/project.service";
// hooks
import useProjects from "hooks/use-projects";
@ -20,16 +25,9 @@ import { getPriorityIcon, getStateGroupIcon } from "components/icons";
import { addSpaceIfCamelCase } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
// types
import {
ICurrentUserResponse,
IIssue,
IIssueLabels,
IIssueViewProps,
IState,
UserAuth,
} from "types";
import { ICurrentUserResponse, IIssue, IIssueViewProps, IState, UserAuth } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
import { PROJECT_MEMBERS } from "constants/fetch-keys";
type Props = {
currentState?: IState | null;
@ -44,18 +42,20 @@ type Props = {
viewProps: IIssueViewProps;
};
export const SingleList: React.FC<Props> = ({
currentState,
groupTitle,
addIssueToGroup,
handleIssueAction,
openIssuesListModal,
removeIssue,
disableUserActions,
user,
userAuth,
viewProps,
}) => {
export const SingleList: React.FC<Props> = observer((props) => {
const {
currentState,
groupTitle,
addIssueToGroup,
handleIssueAction,
openIssuesListModal,
removeIssue,
disableUserActions,
user,
userAuth,
viewProps,
} = props;
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
@ -65,12 +65,8 @@ export const SingleList: React.FC<Props> = ({
const { groupByProperty: selectedGroup, groupedIssues } = viewProps;
const { data: issueLabels } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
workspaceSlug && projectId
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
: null
);
const { label: labelStore } = useMobxStore();
const { labels, loadLabels } = labelStore;
const { data: members } = useSWR(
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
@ -81,6 +77,10 @@ export const SingleList: React.FC<Props> = ({
const { projects } = useProjects();
useEffect(() => {
if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId.toString());
}, [workspaceSlug, projectId, loadLabels]);
const getGroupTitle = () => {
let title = addSpaceIfCamelCase(groupTitle);
@ -89,7 +89,7 @@ export const SingleList: React.FC<Props> = ({
title = addSpaceIfCamelCase(currentState?.name ?? "");
break;
case "labels":
title = issueLabels?.find((label) => label.id === groupTitle)?.name ?? "None";
title = labels?.find((label) => label.id === groupTitle)?.name ?? "None";
break;
case "project":
title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
@ -128,8 +128,7 @@ export const SingleList: React.FC<Props> = ({
: null);
break;
case "labels":
const labelColor =
issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
const labelColor = labels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
icon = (
<span
className="h-3 w-3 flex-shrink-0 rounded-full"
@ -252,4 +251,4 @@ export const SingleList: React.FC<Props> = ({
)}
</Disclosure>
);
};
});

71
apps/app/components/issues/sidebar-select/label.tsx
View File

@ -2,7 +2,9 @@ import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// react-hook-form
import { Controller, UseFormWatch, useForm } from "react-hook-form";
@ -10,8 +12,6 @@ import { Controller, UseFormWatch, useForm } from "react-hook-form";
import { TwitterPicker } from "react-color";
// headless ui
import { Listbox, Popover, Transition } from "@headlessui/react";
// services
import issuesService from "services/issues.service";
// hooks
import useUser from "hooks/use-user";
// ui
@ -25,9 +25,7 @@ import {
XMarkIcon,
} from "@heroicons/react/24/outline";
// types
import { IIssue, IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
import { IIssue, LabelForm } from "types";
type Props = {
issueDetails: IIssue | undefined;
@ -38,19 +36,13 @@ type Props = {
uneditable: boolean;
};
const defaultValues: Partial<IIssueLabels> = {
const defaultValues: Partial<LabelForm> = {
name: "",
color: "#ff0000",
};
export const SidebarLabelSelect: React.FC<Props> = ({
issueDetails,
issueControl,
watchIssue,
submitChanges,
isNotAllowed,
uneditable,
}) => {
export const SidebarLabelSelect: React.FC<Props> = observer((props) => {
const { issueDetails, issueControl, watchIssue, submitChanges, isNotAllowed, uneditable } = props;
const [createLabelForm, setCreateLabelForm] = useState(false);
const router = useRouter();
@ -64,33 +56,38 @@ export const SidebarLabelSelect: React.FC<Props> = ({
watch,
control: labelControl,
setFocus,
} = useForm<Partial<IIssueLabels>>({
} = useForm<LabelForm>({
defaultValues,
});
const { user } = useUser();
const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
workspaceSlug && projectId
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
: null
);
const { label: labelStore } = useMobxStore();
const {
labels,
loadLabels,
createLabel,
getLabelById,
getLabelChildren,
isLabelsLoading: isLoading,
} = labelStore;
const handleNewLabel = async (formData: Partial<IIssueLabels>) => {
if (!workspaceSlug || !projectId || isSubmitting) return;
useEffect(() => {
if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId.toString());
}, [workspaceSlug, projectId, loadLabels]);
await issuesService
.createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
.then((res) => {
const handleNewLabel = async (formData: LabelForm) => {
if (!workspaceSlug || !projectId || isSubmitting || !user) return;
await createLabel(workspaceSlug.toString(), projectId.toString(), formData, user).then(
(res: any) => {
reset(defaultValues);
issueLabelMutate((prevData: any) => [...(prevData ?? []), res], false);
submitChanges({ labels_list: [...(issueDetails?.labels ?? []), res.id] });
setCreateLabelForm(false);
});
}
);
};
useEffect(() => {
@ -110,7 +107,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
<div className="basis-1/2">
<div className="flex flex-wrap gap-1">
{watchIssue("labels_list")?.map((labelId) => {
const label = issueLabels?.find((l) => l.id === labelId);
const label = getLabelById(labelId);
if (label)
return (
@ -168,12 +165,10 @@ export const SidebarLabelSelect: React.FC<Props> = ({
>
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-custom-background-80 py-1 text-xs shadow-lg border border-custom-border-100 focus:outline-none">
<div className="py-1">
{issueLabels ? (
issueLabels.length > 0 ? (
issueLabels.map((label: IIssueLabels) => {
const children = issueLabels?.filter(
(l) => l.parent === label.id
);
{!isLoading ? (
labels.length > 0 ? (
labels.map((label) => {
const children = getLabelChildren(label.id);
if (children.length === 0) {
if (!label.parent)
@ -346,4 +341,4 @@ export const SidebarLabelSelect: React.FC<Props> = ({
)}
</div>
);
};
});

54
apps/app/components/issues/view-select/label.tsx
View File

@ -1,11 +1,11 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// services
import issuesService from "services/issues.service";
// component
import { CreateLabelModal } from "components/labels";
// ui
@ -13,9 +13,7 @@ import { CustomSearchSelect, Tooltip } from "components/ui";
// icons
import { PlusIcon, TagIcon } from "@heroicons/react/24/outline";
// types
import { ICurrentUserResponse, IIssue, IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
import { ICurrentUserResponse, IIssue } from "types";
type Props = {
issue: IIssue;
@ -28,29 +26,31 @@ type Props = {
isNotAllowed: boolean;
};
export const ViewLabelSelect: React.FC<Props> = ({
issue,
partialUpdateIssue,
position = "left",
selfPositioned = false,
tooltipPosition = "top",
user,
isNotAllowed,
customButton = false,
}) => {
export const ViewLabelSelect: React.FC<Props> = observer((props) => {
const {
issue,
partialUpdateIssue,
position = "left",
selfPositioned = false,
tooltipPosition = "top",
user,
isNotAllowed,
customButton = false,
} = props;
const [labelModal, setLabelModal] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { data: issueLabels } = useSWR<IIssueLabels[]>(
projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
workspaceSlug && projectId
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
: null
);
const { label: labelStore } = useMobxStore();
const { labels, loadLabels, getLabelById } = labelStore;
const options = issueLabels?.map((label) => ({
useEffect(() => {
if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId.toString());
}, [workspaceSlug, projectId, loadLabels]);
const options = labels?.map((label) => ({
value: label.id,
query: label.name,
content: (
@ -74,7 +74,7 @@ export const ViewLabelSelect: React.FC<Props> = ({
issue.labels.length > 0
? issue.labels
.map((labelId) => {
const label = issueLabels?.find((l) => l.id === labelId);
const label = getLabelById(labelId);
return label?.name ?? "";
})
@ -90,7 +90,7 @@ export const ViewLabelSelect: React.FC<Props> = ({
{issue.labels.length > 0 ? (
<>
{issue.labels.slice(0, 4).map((labelId, index) => {
const label = issueLabels?.find((l) => l.id === labelId);
const label = getLabelById(labelId);
return (
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
@ -154,4 +154,4 @@ export const ViewLabelSelect: React.FC<Props> = ({
/>
</>
);
};
});

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

@ -4,6 +4,10 @@ import { useRouter } from "next/router";
import useSWR from "swr";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// react-hook-form
import { useForm } from "react-hook-form";
// services
@ -20,9 +24,8 @@ import { checkIfArraysHaveSameElements } from "helpers/array.helper";
import { getStatesList } from "helpers/state.helper";
// types
import { IQuery, IView } from "types";
import issuesService from "services/issues.service";
// fetch-keys
import { PROJECT_ISSUE_LABELS, STATES_LIST } from "constants/fetch-keys";
import { STATES_LIST } from "constants/fetch-keys";
type Props = {
handleFormSubmit: (values: IView) => Promise<void>;
@ -37,13 +40,9 @@ const defaultValues: Partial<IView> = {
description: "",
};
export const ViewForm: React.FC<Props> = ({
handleFormSubmit,
handleClose,
status,
data,
preLoadedData,
}) => {
export const ViewForm: React.FC<Props> = observer((props) => {
const { handleFormSubmit, handleClose, status, data, preLoadedData } = props;
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
@ -69,16 +68,16 @@ export const ViewForm: React.FC<Props> = ({
);
const states = getStatesList(stateGroups);
const { data: labels } = useSWR(
workspaceSlug && projectId && (filters?.labels ?? []).length > 0
? PROJECT_ISSUE_LABELS(projectId.toString())
: null,
workspaceSlug && projectId && (filters?.labels ?? []).length > 0
? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
: null
);
const { label: labelStore } = useMobxStore();
const { labels, loadLabels } = labelStore;
const { members } = useProjectMembers(workspaceSlug?.toString(), projectId?.toString());
useEffect(() => {
if (workspaceSlug && projectId && (filters?.labels ?? []).length > 0)
loadLabels(workspaceSlug.toString(), projectId.toString());
}, [workspaceSlug, projectId, loadLabels, filters]);
const handleCreateUpdateView = async (formData: IView) => {
await handleFormSubmit(formData);
@ -211,4 +210,4 @@ export const ViewForm: React.FC<Props> = ({
</div>
</form>
);
};
});

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

@ -1,13 +1,16 @@
import { useState } from "react";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// services
import stateService from "services/state.service";
import projectService from "services/project.service";
import issuesService from "services/issues.service";
// components
import { DueDateFilterModal } from "components/core";
// ui
@ -20,7 +23,7 @@ import { checkIfArraysHaveSameElements } from "helpers/array.helper";
// types
import { IIssueFilterOptions, IQuery } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATES_LIST } from "constants/fetch-keys";
import { PROJECT_MEMBERS, STATES_LIST } from "constants/fetch-keys";
// constants
import { PRIORITIES } from "constants/project";
import { DUE_DATES } from "constants/due-dates";
@ -32,17 +35,17 @@ type Props = {
height?: "sm" | "md" | "rg" | "lg";
};
export const SelectFilters: React.FC<Props> = ({
filters,
onSelect,
direction = "right",
height = "md",
}) => {
export const SelectFilters: React.FC<Props> = observer((props) => {
const { filters, onSelect, direction = "right", height = "md" } = props;
const [isDueDateFilterModalOpen, setIsDueDateFilterModalOpen] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { label: labelStore } = useMobxStore();
const { labels, loadLabels } = labelStore;
const { data: states } = useSWR(
workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
workspaceSlug && projectId
@ -58,12 +61,9 @@ export const SelectFilters: React.FC<Props> = ({
: null
);
const { data: issueLabels } = useSWR(
projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
workspaceSlug && projectId
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId.toString())
: null
);
useEffect(() => {
if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId.toString());
}, [workspaceSlug, projectId, loadLabels]);
return (
<>
@ -160,9 +160,9 @@ export const SelectFilters: React.FC<Props> = ({
{
id: "labels",
label: "Labels",
value: issueLabels,
value: labels,
hasChildren: true,
children: issueLabels?.map((label) => ({
children: labels?.map((label) => ({
id: label.id,
label: (
<div className="flex items-center gap-2">
@ -216,4 +216,4 @@ export const SelectFilters: React.FC<Props> = ({
/>
</>
);
};
});

24
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View File

@ -4,6 +4,10 @@ import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// react-hook-form
import { useForm } from "react-hook-form";
// headless ui
@ -16,7 +20,6 @@ import StrictModeDroppable from "components/dnd/StrictModeDroppable";
// services
import projectService from "services/project.service";
import pagesService from "services/pages.service";
import issuesService from "services/issues.service";
// hooks
import useToast from "hooks/use-toast";
import useUser from "hooks/use-user";
@ -56,13 +59,12 @@ import { copyTextToClipboard, truncateText } from "helpers/string.helper";
import { orderArrayBy } from "helpers/array.helper";
// types
import type { NextPage } from "next";
import { IIssueLabels, IPage, IPageBlock, IProjectMember } from "types";
import { IPage, IPageBlock, IProjectMember } from "types";
// fetch-keys
import {
PAGE_BLOCKS_LIST,
PAGE_DETAILS,
PROJECT_DETAILS,
PROJECT_ISSUE_LABELS,
USER_PROJECT_VIEW,
} from "constants/fetch-keys";
@ -80,6 +82,9 @@ const SinglePage: NextPage = () => {
const { user } = useUser();
const { label: labelStore } = useMobxStore();
const { labels, loadLabels } = labelStore;
const { handleSubmit, reset, watch, setValue } = useForm<IPage>({
defaultValues: { name: "" },
});
@ -115,13 +120,6 @@ const SinglePage: NextPage = () => {
: null
);
const { data: labels } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
workspaceSlug && projectId
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
: null
);
const { data: memberDetails } = useSWR(
workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
workspaceSlug && projectId
@ -129,6 +127,10 @@ const SinglePage: NextPage = () => {
: null
);
useEffect(() => {
if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId.toString());
}, [workspaceSlug, projectId, loadLabels]);
const updatePage = async (formData: IPage) => {
if (!workspaceSlug || !projectId || !pageId) return;
@ -691,4 +693,4 @@ const SinglePage: NextPage = () => {
);
};
export default SinglePage;
export default observer(SinglePage);