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"; import useSWR from "swr";
// headless ui // headless ui
import { Combobox, Transition } from "@headlessui/react"; import { Combobox } from "@headlessui/react";
// services // services
import cyclesService from "services/cycles.service"; import cyclesService from "services/cycles.service";
import modulesService from "services/modules.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 typeMetaData = CUSTOM_ATTRIBUTES_LIST[type];
const { customAttributes: customAttributesStore } = useMobxStore(); const { customAttributes } = useMobxStore();
const { deleteEntityAttribute, updateEntityAttribute } = customAttributesStore;
const { const {
control, control,
@ -100,7 +99,12 @@ export const AttributeForm: React.FC<Props> = observer(({ attributeDetails, obje
const handleUpdateAttribute = async (data: Partial<ICustomAttribute>) => { const handleUpdateAttribute = async (data: Partial<ICustomAttribute>) => {
if (!workspaceSlug || !attributeDetails.id || !objectId) return; 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 () => { const handleDeleteAttribute = async () => {
@ -108,9 +112,9 @@ export const AttributeForm: React.FC<Props> = observer(({ attributeDetails, obje
setIsRemoving(true); setIsRemoving(true);
await deleteEntityAttribute(workspaceSlug.toString(), objectId, attributeDetails.id).finally( await customAttributes
() => setIsRemoving(false) .deleteEntityAttribute(workspaceSlug.toString(), objectId, attributeDetails.id)
); .finally(() => setIsRemoving(false));
}; };
useEffect(() => { 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 }) => { ({ control, multiple = false, objectId = "", watch }) => {
const [optionToEdit, setOptionToEdit] = useState<ICustomAttribute | null>(null); const [optionToEdit, setOptionToEdit] = useState<ICustomAttribute | null>(null);
const { customAttributes: customAttributesStore } = useMobxStore(); const { customAttributes } = useMobxStore();
const { entityAttributes } = customAttributesStore;
const options = entityAttributes?.[objectId]?.[watch("id") ?? ""]?.children; const options = customAttributes.entityAttributes?.[objectId]?.[watch("id") ?? ""]?.children;
return ( return (
<div className="space-y-3"> <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 router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
const { const { customAttributes, customAttributeValues } = useMobxStore();
customAttributes: customAttributesStore,
customAttributeValues: customAttributeValuesStore,
} = useMobxStore();
const { entityAttributes, fetchEntityDetails } = customAttributesStore;
const { issueAttributeValues, fetchIssueAttributeValues, deleteAttributeValue } =
customAttributeValuesStore;
const handleAttributeUpdate = (attributeId: string, value: string | string[] | undefined) => { const handleAttributeUpdate = (attributeId: string, value: string | string[] | undefined) => {
if (!issue || !workspaceSlug) return; if (!issue || !workspaceSlug) return;
if (!value) { if (!value) {
deleteAttributeValue(workspaceSlug.toString(), projectId, issue.id, attributeId); customAttributeValues.deleteAttributeValue(
workspaceSlug.toString(),
projectId,
issue.id,
attributeId
);
return; return;
} }
@ -56,7 +55,7 @@ export const PeekOverviewCustomAttributesList: React.FC<Props> = observer(
}, },
}; };
customAttributeValuesStore.createAttributeValue( customAttributeValues.createAttributeValue(
workspaceSlug.toString(), workspaceSlug.toString(),
issue.project, issue.project,
issue.id, issue.id,
@ -68,27 +67,37 @@ export const PeekOverviewCustomAttributesList: React.FC<Props> = observer(
useEffect(() => { useEffect(() => {
if (!issue?.entity) return; if (!issue?.entity) return;
if (!entityAttributes[issue.entity]) { if (!customAttributes.entityAttributes[issue.entity]) {
if (!workspaceSlug) return; 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 // fetch issue attribute values
useEffect(() => { useEffect(() => {
if (!issue) return; if (!issue) return;
if (!issueAttributeValues || !issueAttributeValues[issue.id]) { if (
!customAttributeValues.issueAttributeValues ||
!customAttributeValues.issueAttributeValues[issue.id]
) {
if (!workspaceSlug) return; 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 (!issue || !issue?.entity) return null;
if (!entityAttributes[issue.entity] || !issueAttributeValues?.[issue.id]) if (
!customAttributes.entityAttributes[issue.entity] ||
!customAttributeValues.issueAttributeValues?.[issue.id]
)
return ( return (
<Loader className="space-y-4"> <Loader className="space-y-4">
<Loader.Item height="30px" /> <Loader.Item height="30px" />
@ -100,9 +109,9 @@ export const PeekOverviewCustomAttributesList: React.FC<Props> = observer(
return ( return (
<> <>
{Object.values(entityAttributes?.[issue.entity] ?? {}).map((attribute) => { {Object.values(customAttributes.entityAttributes?.[issue.entity] ?? {}).map((attribute) => {
const typeMetaData = CUSTOM_ATTRIBUTES_LIST[attribute.type]; 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 (a) => a.id === attribute.id
)?.prop_value; )?.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 router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
const { const { customAttributes, customAttributeValues } = useMobxStore();
customAttributes: customAttributesStore,
customAttributeValues: customAttributeValuesStore,
} = useMobxStore();
const { entityAttributes, fetchEntityDetails } = customAttributesStore;
const { issueAttributeValues, fetchIssueAttributeValues, deleteAttributeValue } =
customAttributeValuesStore;
const handleAttributeUpdate = (attributeId: string, value: string | string[] | undefined) => { const handleAttributeUpdate = (attributeId: string, value: string | string[] | undefined) => {
if (!issue || !workspaceSlug) return; if (!issue || !workspaceSlug) return;
if (!value) { if (!value) {
deleteAttributeValue(workspaceSlug.toString(), projectId, issue.id, attributeId); customAttributeValues.deleteAttributeValue(
workspaceSlug.toString(),
projectId,
issue.id,
attributeId
);
return; return;
} }
@ -55,7 +54,7 @@ export const SidebarCustomAttributesList: React.FC<Props> = observer(({ issue, p
}, },
}; };
customAttributeValuesStore.createAttributeValue( customAttributeValues.createAttributeValue(
workspaceSlug.toString(), workspaceSlug.toString(),
issue.project, issue.project,
issue.id, issue.id,
@ -67,27 +66,37 @@ export const SidebarCustomAttributesList: React.FC<Props> = observer(({ issue, p
useEffect(() => { useEffect(() => {
if (!issue?.entity) return; if (!issue?.entity) return;
if (!entityAttributes[issue.entity]) { if (!customAttributes.entityAttributes[issue.entity]) {
if (!workspaceSlug) return; 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 // fetch issue attribute values
useEffect(() => { useEffect(() => {
if (!issue) return; if (!issue) return;
if (!issueAttributeValues || !issueAttributeValues[issue.id]) { if (
!customAttributeValues.issueAttributeValues ||
!customAttributeValues.issueAttributeValues[issue.id]
) {
if (!workspaceSlug) return; 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 (!issue || !issue?.entity) return null;
if (!entityAttributes[issue.entity] || !issueAttributeValues?.[issue.id]) if (
!customAttributes.entityAttributes[issue.entity] ||
!customAttributeValues.issueAttributeValues?.[issue.id]
)
return ( return (
<Loader className="space-y-4"> <Loader className="space-y-4">
<Loader.Item height="30px" /> <Loader.Item height="30px" />
@ -99,9 +108,9 @@ export const SidebarCustomAttributesList: React.FC<Props> = observer(({ issue, p
return ( return (
<div> <div>
{Object.values(entityAttributes?.[issue.entity] ?? {}).map((attribute) => { {Object.values(customAttributes.entityAttributes?.[issue.entity] ?? {}).map((attribute) => {
const typeMetaData = CUSTOM_ATTRIBUTES_LIST[attribute.type]; 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 (a) => a.id === attribute.id
)?.prop_value; )?.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 router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
const { customAttributes: customAttributesStore } = useMobxStore(); const { customAttributes } = useMobxStore();
const { deleteEntity } = customAttributesStore;
const handleClose = () => { const handleClose = () => {
onClose(); onClose();
@ -40,7 +39,8 @@ export const DeleteObjectModal: React.FC<Props> = observer(
setIsDeleting(true); setIsDeleting(true);
await deleteEntity(workspaceSlug.toString(), objectToDelete.id) await customAttributes
.deleteEntity(workspaceSlug.toString(), objectToDelete.id)
.then(async () => { .then(async () => {
if (onSubmit) await onSubmit(); if (onSubmit) await onSubmit();
handleClose(); 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 router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
const { customAttributes: customAttributesStore } = useMobxStore(); const { customAttributes } = useMobxStore();
const { entities, fetchEntities } = customAttributesStore;
const handleDeleteObject = async (object: ICustomAttribute) => { const handleDeleteObject = async (object: ICustomAttribute) => {
setObjectToDelete(object); setObjectToDelete(object);
@ -37,8 +36,9 @@ export const ObjectsList: React.FC<Props> = observer(({ handleEditObject, projec
useEffect(() => { useEffect(() => {
if (!workspaceSlug) return; if (!workspaceSlug) return;
if (!entities) fetchEntities(workspaceSlug.toString(), projectId); if (!customAttributes.entities)
}, [entities, fetchEntities, projectId, workspaceSlug]); customAttributes.fetchEntities(workspaceSlug.toString(), projectId);
}, [customAttributes, projectId, workspaceSlug]);
return ( return (
<> <>
@ -54,9 +54,9 @@ export const ObjectsList: React.FC<Props> = observer(({ handleEditObject, projec
}} }}
/> />
<div className="divide-y divide-custom-border-100"> <div className="divide-y divide-custom-border-100">
{entities ? ( {customAttributes.entities ? (
entities.length > 0 ? ( customAttributes.entities.length > 0 ? (
entities.map((entity) => ( customAttributes.entities.map((entity) => (
<SingleObject <SingleObject
key={entity.id} key={entity.id}
object={entity} 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 router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
const { customAttributes: customAttributesStore } = useMobxStore(); const { customAttributes } = useMobxStore();
const { entities, fetchEntities } = customAttributesStore;
const options: const options:
| { | {
@ -29,7 +28,7 @@ export const ObjectsSelect: React.FC<Props> = observer(({ onChange, projectId, v
query: string; query: string;
content: JSX.Element; content: JSX.Element;
}[] }[]
| undefined = entities?.map((entity) => ({ | undefined = customAttributes.entities?.map((entity) => ({
value: entity.id, value: entity.id,
query: entity.display_name, query: entity.display_name,
content: ( content: (
@ -53,10 +52,11 @@ export const ObjectsSelect: React.FC<Props> = observer(({ onChange, projectId, v
useEffect(() => { useEffect(() => {
if (!workspaceSlug) return; if (!workspaceSlug) return;
if (!entities) fetchEntities(workspaceSlug.toString(), projectId); if (!customAttributes.entities)
}, [entities, fetchEntities, projectId, workspaceSlug]); 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 ( return (
<CustomSearchSelect <CustomSearchSelect