thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

refactor: mobx store usage

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-09-20 21:30:12 +05:30
parent 3c3f0f7581
commit 95ae0f065a
8 changed files with 83 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/custom-attributes/attribute-display/relation.tsx
View File

@ -5,7 +5,7 @@ import { useRouter } from "next/router";
import useSWR from "swr";
// headless ui
import { Combobox, Transition } from "@headlessui/react";
import { Combobox } from "@headlessui/react";
// services
import cyclesService from "services/cycles.service";
import modulesService from "services/modules.service";

16
web/components/custom-attributes/attribute-forms/attribute-form.tsx
View File

@ -86,8 +86,7 @@ export const AttributeForm: React.FC<Props> = observer(({ attributeDetails, obje
const typeMetaData = CUSTOM_ATTRIBUTES_LIST[type];
const { customAttributes: customAttributesStore } = useMobxStore();
const { deleteEntityAttribute, updateEntityAttribute } = customAttributesStore;
const { customAttributes } = useMobxStore();
const {
control,
@ -100,7 +99,12 @@ export const AttributeForm: React.FC<Props> = observer(({ attributeDetails, obje
const handleUpdateAttribute = async (data: Partial<ICustomAttribute>) => {
if (!workspaceSlug || !attributeDetails.id || !objectId) return;
await updateEntityAttribute(workspaceSlug.toString(), objectId, attributeDetails.id, data);
await customAttributes.updateEntityAttribute(
workspaceSlug.toString(),
objectId,
attributeDetails.id,
data
);
};
const handleDeleteAttribute = async () => {
@ -108,9 +112,9 @@ export const AttributeForm: React.FC<Props> = observer(({ attributeDetails, obje
setIsRemoving(true);
await deleteEntityAttribute(workspaceSlug.toString(), objectId, attributeDetails.id).finally(
() => setIsRemoving(false)
);
await customAttributes
.deleteEntityAttribute(workspaceSlug.toString(), objectId, attributeDetails.id)
.finally(() => setIsRemoving(false));
};
useEffect(() => {

5
web/components/custom-attributes/attribute-forms/select-attribute/select-attribute-form.tsx
View File

@ -14,10 +14,9 @@ export const SelectAttributeForm: React.FC<FormComponentProps & { multiple?: boo
({ control, multiple = false, objectId = "", watch }) => {
const [optionToEdit, setOptionToEdit] = useState<ICustomAttribute | null>(null);
const { customAttributes: customAttributesStore } = useMobxStore();
const { entityAttributes } = customAttributesStore;
const { customAttributes } = useMobxStore();
const options = entityAttributes?.[objectId]?.[watch("id") ?? ""]?.children;
const options = customAttributes.entityAttributes?.[objectId]?.[watch("id") ?? ""]?.children;
return (
<div className="space-y-3">

45
web/components/custom-attributes/attributes-list/peek-overview-custom-attributes-list.tsx
View File

@ -34,19 +34,18 @@ export const PeekOverviewCustomAttributesList: React.FC<Props> = observer(
const router = useRouter();
const { workspaceSlug } = router.query;
const {
customAttributes: customAttributesStore,
customAttributeValues: customAttributeValuesStore,
} = useMobxStore();
const { entityAttributes, fetchEntityDetails } = customAttributesStore;
const { issueAttributeValues, fetchIssueAttributeValues, deleteAttributeValue } =
customAttributeValuesStore;
const { customAttributes, customAttributeValues } = useMobxStore();
const handleAttributeUpdate = (attributeId: string, value: string | string[] | undefined) => {
if (!issue || !workspaceSlug) return;
if (!value) {
deleteAttributeValue(workspaceSlug.toString(), projectId, issue.id, attributeId);
customAttributeValues.deleteAttributeValue(
workspaceSlug.toString(),
projectId,
issue.id,
attributeId
);
return;
}
@ -56,7 +55,7 @@ export const PeekOverviewCustomAttributesList: React.FC<Props> = observer(
},
};
customAttributeValuesStore.createAttributeValue(
customAttributeValues.createAttributeValue(
workspaceSlug.toString(),
issue.project,
issue.id,
@ -68,27 +67,37 @@ export const PeekOverviewCustomAttributesList: React.FC<Props> = observer(
useEffect(() => {
if (!issue?.entity) return;
if (!entityAttributes[issue.entity]) {
if (!customAttributes.entityAttributes[issue.entity]) {
if (!workspaceSlug) return;
fetchEntityDetails(workspaceSlug.toString(), issue.entity);
customAttributes.fetchEntityDetails(workspaceSlug.toString(), issue.entity);
}
}, [issue?.entity, entityAttributes, fetchEntityDetails, workspaceSlug]);
}, [customAttributes, issue?.entity, workspaceSlug]);
// fetch issue attribute values
useEffect(() => {
if (!issue) return;
if (!issueAttributeValues || !issueAttributeValues[issue.id]) {
if (
!customAttributeValues.issueAttributeValues ||
!customAttributeValues.issueAttributeValues[issue.id]
) {
if (!workspaceSlug) return;
fetchIssueAttributeValues(workspaceSlug.toString(), issue.project, issue.id);
customAttributeValues.fetchIssueAttributeValues(
workspaceSlug.toString(),
issue.project,
issue.id
);
}
}, [fetchIssueAttributeValues, issue, issueAttributeValues, workspaceSlug]);
}, [customAttributeValues, issue, workspaceSlug]);
if (!issue || !issue?.entity) return null;
if (!entityAttributes[issue.entity] || !issueAttributeValues?.[issue.id])
if (
!customAttributes.entityAttributes[issue.entity] ||
!customAttributeValues.issueAttributeValues?.[issue.id]
)
return (
<Loader className="space-y-4">
<Loader.Item height="30px" />
@ -100,9 +109,9 @@ export const PeekOverviewCustomAttributesList: React.FC<Props> = observer(
return (
<>
{Object.values(entityAttributes?.[issue.entity] ?? {}).map((attribute) => {
{Object.values(customAttributes.entityAttributes?.[issue.entity] ?? {}).map((attribute) => {
const typeMetaData = CUSTOM_ATTRIBUTES_LIST[attribute.type];
const attributeValue = issueAttributeValues?.[issue.id].find(
const attributeValue = customAttributeValues.issueAttributeValues?.[issue.id].find(
(a) => a.id === attribute.id
)?.prop_value;

45
web/components/custom-attributes/attributes-list/sidebar-custom-attributes-list.tsx
View File

@ -33,19 +33,18 @@ export const SidebarCustomAttributesList: React.FC<Props> = observer(({ issue, p
const router = useRouter();
const { workspaceSlug } = router.query;
const {
customAttributes: customAttributesStore,
customAttributeValues: customAttributeValuesStore,
} = useMobxStore();
const { entityAttributes, fetchEntityDetails } = customAttributesStore;
const { issueAttributeValues, fetchIssueAttributeValues, deleteAttributeValue } =
customAttributeValuesStore;
const { customAttributes, customAttributeValues } = useMobxStore();
const handleAttributeUpdate = (attributeId: string, value: string | string[] | undefined) => {
if (!issue || !workspaceSlug) return;
if (!value) {
deleteAttributeValue(workspaceSlug.toString(), projectId, issue.id, attributeId);
customAttributeValues.deleteAttributeValue(
workspaceSlug.toString(),
projectId,
issue.id,
attributeId
);
return;
}
@ -55,7 +54,7 @@ export const SidebarCustomAttributesList: React.FC<Props> = observer(({ issue, p
},
};
customAttributeValuesStore.createAttributeValue(
customAttributeValues.createAttributeValue(
workspaceSlug.toString(),
issue.project,
issue.id,
@ -67,27 +66,37 @@ export const SidebarCustomAttributesList: React.FC<Props> = observer(({ issue, p
useEffect(() => {
if (!issue?.entity) return;
if (!entityAttributes[issue.entity]) {
if (!customAttributes.entityAttributes[issue.entity]) {
if (!workspaceSlug) return;
fetchEntityDetails(workspaceSlug.toString(), issue.entity);
customAttributes.fetchEntityDetails(workspaceSlug.toString(), issue.entity);
}
}, [issue?.entity, entityAttributes, fetchEntityDetails, workspaceSlug]);
}, [customAttributes, issue?.entity, workspaceSlug]);
// fetch issue attribute values
useEffect(() => {
if (!issue) return;
if (!issueAttributeValues || !issueAttributeValues[issue.id]) {
if (
!customAttributeValues.issueAttributeValues ||
!customAttributeValues.issueAttributeValues[issue.id]
) {
if (!workspaceSlug) return;
fetchIssueAttributeValues(workspaceSlug.toString(), issue.project, issue.id);
customAttributeValues.fetchIssueAttributeValues(
workspaceSlug.toString(),
issue.project,
issue.id
);
}
}, [fetchIssueAttributeValues, issue, issueAttributeValues, workspaceSlug]);
}, [customAttributeValues, issue, workspaceSlug]);
if (!issue || !issue?.entity) return null;
if (!entityAttributes[issue.entity] || !issueAttributeValues?.[issue.id])
if (
!customAttributes.entityAttributes[issue.entity] ||
!customAttributeValues.issueAttributeValues?.[issue.id]
)
return (
<Loader className="space-y-4">
<Loader.Item height="30px" />
@ -99,9 +108,9 @@ export const SidebarCustomAttributesList: React.FC<Props> = observer(({ issue, p
return (
<div>
{Object.values(entityAttributes?.[issue.entity] ?? {}).map((attribute) => {
{Object.values(customAttributes.entityAttributes?.[issue.entity] ?? {}).map((attribute) => {
const typeMetaData = CUSTOM_ATTRIBUTES_LIST[attribute.type];
const attributeValue = issueAttributeValues?.[issue.id].find(
const attributeValue = customAttributeValues.issueAttributeValues?.[issue.id].find(
(a) => a.id === attribute.id
)?.prop_value;

6
web/components/custom-attributes/delete-object-modal.tsx
View File

@ -28,8 +28,7 @@ export const DeleteObjectModal: React.FC<Props> = observer(
const router = useRouter();
const { workspaceSlug } = router.query;
const { customAttributes: customAttributesStore } = useMobxStore();
const { deleteEntity } = customAttributesStore;
const { customAttributes } = useMobxStore();
const handleClose = () => {
onClose();
@ -40,7 +39,8 @@ export const DeleteObjectModal: React.FC<Props> = observer(
setIsDeleting(true);
await deleteEntity(workspaceSlug.toString(), objectToDelete.id)
await customAttributes
.deleteEntity(workspaceSlug.toString(), objectToDelete.id)
.then(async () => {
if (onSubmit) await onSubmit();
handleClose();

14
web/components/custom-attributes/objects-list.tsx
View File

@ -26,8 +26,7 @@ export const ObjectsList: React.FC<Props> = observer(({ handleEditObject, projec
const router = useRouter();
const { workspaceSlug } = router.query;
const { customAttributes: customAttributesStore } = useMobxStore();
const { entities, fetchEntities } = customAttributesStore;
const { customAttributes } = useMobxStore();
const handleDeleteObject = async (object: ICustomAttribute) => {
setObjectToDelete(object);
@ -37,8 +36,9 @@ export const ObjectsList: React.FC<Props> = observer(({ handleEditObject, projec
useEffect(() => {
if (!workspaceSlug) return;
if (!entities) fetchEntities(workspaceSlug.toString(), projectId);
}, [entities, fetchEntities, projectId, workspaceSlug]);
if (!customAttributes.entities)
customAttributes.fetchEntities(workspaceSlug.toString(), projectId);
}, [customAttributes, projectId, workspaceSlug]);
return (
<>
@ -54,9 +54,9 @@ export const ObjectsList: React.FC<Props> = observer(({ handleEditObject, projec
}}
/>
<div className="divide-y divide-custom-border-100">
{entities ? (
entities.length > 0 ? (
entities.map((entity) => (
{customAttributes.entities ? (
customAttributes.entities.length > 0 ? (
customAttributes.entities.map((entity) => (
<SingleObject
key={entity.id}
object={entity}

12
web/components/custom-attributes/objects-select.tsx
View File

@ -20,8 +20,7 @@ export const ObjectsSelect: React.FC<Props> = observer(({ onChange, projectId, v
const router = useRouter();
const { workspaceSlug } = router.query;
const { customAttributes: customAttributesStore } = useMobxStore();
const { entities, fetchEntities } = customAttributesStore;
const { customAttributes } = useMobxStore();
const options:
| {
@ -29,7 +28,7 @@ export const ObjectsSelect: React.FC<Props> = observer(({ onChange, projectId, v
query: string;
content: JSX.Element;
}[]
| undefined = entities?.map((entity) => ({
| undefined = customAttributes.entities?.map((entity) => ({
value: entity.id,
query: entity.display_name,
content: (
@ -53,10 +52,11 @@ export const ObjectsSelect: React.FC<Props> = observer(({ onChange, projectId, v
useEffect(() => {
if (!workspaceSlug) return;
if (!entities) fetchEntities(workspaceSlug.toString(), projectId);
}, [entities, fetchEntities, projectId, workspaceSlug]);
if (!customAttributes.entities)
customAttributes.fetchEntities(workspaceSlug.toString(), projectId);
}, [customAttributes, projectId, workspaceSlug]);
const selectedEntity = entities?.find((e) => e.id === value);
const selectedEntity = customAttributes.entities?.find((e) => e.id === value);
return (
<CustomSearchSelect