Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(web): warning occurs when re-referring to an item referenced earlier #1264

Merged
merged 4 commits into from
Oct 24, 2024
Merged

fix(web): warning occurs when re-referring to an item referenced earlier #1264

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c4f0ca6
fix: ref detatch wrong behavior
Oct 16, 2024
cdfa0ab
Merge remote-tracking branch 'origin/main' into fix-web/ref-detatch
Oct 16, 2024
1f1f6ae
Merge branch 'main' into fix-web/ref-detatch
yk-eukarya Oct 16, 2024
16acb4d
Merge branch 'main' into fix-web/ref-detatch
caichi-t Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion web/src/components/molecules/Common/Form/GroupItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,11 @@ type Props = {
disableMoveDown?: boolean;
onGetAsset: (assetId: string) => Promise<string | undefined>;
onGroupGet: (id: string) => Promise<Group | undefined>;
onCheckItemReference?: (value: string, correspondingFieldId: string) => Promise<boolean>;
onCheckItemReference?: (
itemId: string,
correspondingFieldId: string,
groupId?: string,
) => Promise<boolean>;
};

const GroupItem: React.FC<Props> = ({
Expand Down
6 changes: 5 additions & 1 deletion web/src/components/molecules/Common/MultiValueField/MultiValueGroup/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,11 @@ type Props = {
setUploadModalVisibility?: (visible: boolean) => void;
onGetAsset: (assetId: string) => Promise<string | undefined>;
onGroupGet: (id: string) => Promise<Group | undefined>;
onCheckItemReference?: (value: string, correspondingFieldId: string) => Promise<boolean>;
onCheckItemReference?: (
itemId: string,
correspondingFieldId: string,
groupId?: string,
) => Promise<boolean>;
};

const MultiValueGroup: React.FC<Props> = ({
Expand Down
6 changes: 5 additions & 1 deletion web/src/components/molecules/Content/Details/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,11 @@ type Props = {
onAddItemToRequestModalOpen: () => void;
onGetAsset: (assetId: string) => Promise<string | undefined>;
onGroupGet: (id: string) => Promise<Group | undefined>;
onCheckItemReference: (value: string, correspondingFieldId: string) => Promise<boolean>;
onCheckItemReference: (
itemId: string,
correspondingFieldId: string,
groupId?: string,
) => Promise<boolean>;
onNavigateToRequest: (id: string) => void;
};

Expand Down
21 changes: 16 additions & 5 deletions web/src/components/molecules/Content/Form/ReferenceFormItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Button from "@reearth-cms/components/atoms/Button";
import Icon from "@reearth-cms/components/atoms/Icon";
import LinkItemModal from "@reearth-cms/components/molecules/Content/LinkItemModal";
import ReferenceItem from "@reearth-cms/components/molecules/Content/ReferenceItem";
import { CorrespondingField } from "@reearth-cms/components/molecules/Schema/types";
import { useT } from "@reearth-cms/i18n";

import { FormItem } from "../../types";
Expand All @@ -15,10 +16,12 @@ type Props = {
value?: string;
disabled?: boolean;
loading?: boolean;
correspondingFieldId: string;
fieldId: string;
itemGroupId?: string;
formItemsData?: FormItem[];
correspondingField?: CorrespondingField;
modelId?: string;
titleFieldId?: string | null;
formItemsData?: FormItem[];
linkItemModalTitle?: string;
linkItemModalTotalCount?: number;
linkItemModalPage?: number;
Expand All @@ -27,7 +30,11 @@ type Props = {
onSearchTerm?: (term?: string) => void;
onLinkItemTableReload?: () => void;
onLinkItemTableChange?: (page: number, pageSize: number) => void;
onCheckItemReference?: (value: string, correspondingFieldId: string) => Promise<boolean>;
onCheckItemReference?: (
itemId: string,
correspondingFieldId: string,
groupId?: string,
) => Promise<boolean>;
Comment on lines +33 to +37
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider adding error handling for reference checking.

The onCheckItemReference function might benefit from explicit error handling to gracefully handle network failures or invalid states.

   onCheckItemReference?: (
     itemId: string,
     correspondingFieldId: string,
     groupId?: string,
-  ) => Promise<boolean>;
+  ) => Promise<{ success: boolean; error?: string }>;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
onCheckItemReference?: (
itemId: string,
correspondingFieldId: string,
groupId?: string,
) => Promise<boolean>;
onCheckItemReference?: (
itemId: string,
correspondingFieldId: string,
groupId?: string,
) => Promise<{ success: boolean; error?: string }>;

onChange?: (value?: string) => void;
};

Expand All @@ -36,7 +43,9 @@ const ReferenceFormItem: React.FC<Props> = ({
value,
disabled,
loading,
correspondingFieldId,
fieldId,
itemGroupId,
correspondingField,
modelId,
titleFieldId,
formItemsData,
Expand Down Expand Up @@ -111,7 +120,9 @@ const ReferenceFormItem: React.FC<Props> = ({
<LinkItemModal
visible={visible}
loading={!!loading}
correspondingFieldId={correspondingFieldId}
fieldId={fieldId}
itemGroupId={itemGroupId}
correspondingField={correspondingField}
linkedItemsModalList={linkedItemsModalList}
linkedItem={value}
linkItemModalTitle={linkItemModalTitle}
Expand Down
6 changes: 5 additions & 1 deletion web/src/components/molecules/Content/Form/fields/ComplexFieldComponents/GroupField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,11 @@ type GroupFieldProps = {
setUploadModalVisibility?: (visible: boolean) => void;
onGetAsset: (assetId: string) => Promise<string | undefined>;
onGroupGet: (id: string) => Promise<Group | undefined>;
onCheckItemReference?: (value: string, correspondingFieldId: string) => Promise<boolean>;
onCheckItemReference?: (
itemId: string,
correspondingFieldId: string,
groupId?: string,
) => Promise<boolean>;
};

const GroupField: React.FC<GroupFieldProps> = ({
Expand Down
14 changes: 10 additions & 4 deletions web/src/components/molecules/Content/Form/fields/ComplexFieldComponents/ReferenceField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,11 @@ type ReferenceFieldProps = {
onSearchTerm?: (term?: string) => void;
onLinkItemTableReload?: () => void;
onLinkItemTableChange?: (page: number, pageSize: number) => void;
onCheckItemReference?: (value: string, correspondingFieldId: string) => Promise<boolean>;
onCheckItemReference?: (
itemId: string,
correspondingFieldId: string,
groupId?: string,
) => Promise<boolean>;
};

const ReferenceField: React.FC<ReferenceFieldProps> = ({
Expand Down Expand Up @@ -55,18 +59,20 @@ const ReferenceField: React.FC<ReferenceFieldProps> = ({
label={<FieldTitle title={field.title} isUnique={field.unique} isTitle={false} />}>
<ReferenceFormItem
key={field.id}
linkedItemsModalList={linkedItemsModalList}
disabled={disabled}
loading={loading}
correspondingFieldId={field.id}
fieldId={field.id}
itemGroupId={itemGroupId}
formItemsData={formItemsData}
correspondingField={field.typeProperty?.correspondingField}
modelId={field.typeProperty?.modelId}
titleFieldId={field.typeProperty?.schema?.titleFieldId}
onReferenceModelUpdate={onReferenceModelUpdate}
linkItemModalTitle={linkItemModalTitle}
linkedItemsModalList={linkedItemsModalList}
linkItemModalTotalCount={linkItemModalTotalCount}
linkItemModalPage={linkItemModalPage}
linkItemModalPageSize={linkItemModalPageSize}
onReferenceModelUpdate={onReferenceModelUpdate}
onSearchTerm={onSearchTerm}
onLinkItemTableReload={onLinkItemTableReload}
onLinkItemTableChange={onLinkItemTableChange}
Expand Down
6 changes: 5 additions & 1 deletion web/src/components/molecules/Content/Form/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,11 @@ type Props = {
onAddItemToRequestModalOpen: () => void;
onGetAsset: (assetId: string) => Promise<string | undefined>;
onGroupGet: (id: string) => Promise<Group | undefined>;
onCheckItemReference: (value: string, correspondingFieldId: string) => Promise<boolean>;
onCheckItemReference: (
itemId: string,
correspondingFieldId: string,
groupId?: string,
) => Promise<boolean>;
onNavigateToRequest: (id: string) => void;
};

Expand Down
40 changes: 29 additions & 11 deletions web/src/components/molecules/Content/LinkItemModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
} from "@reearth-cms/components/atoms/ProTable";
import Search from "@reearth-cms/components/atoms/Search";
import ResizableProTable from "@reearth-cms/components/molecules/Common/ResizableProTable";
import { CorrespondingField } from "@reearth-cms/components/molecules/Schema/types";
import { useT } from "@reearth-cms/i18n";
import { dateTimeFormat } from "@reearth-cms/utils/format";

Expand All @@ -21,7 +22,9 @@ import useHooks from "./hooks";
type Props = {
visible: boolean;
loading: boolean;
correspondingFieldId: string;
fieldId: string;
itemGroupId?: string;
correspondingField?: CorrespondingField;
linkedItemsModalList?: FormItem[];
linkedItem?: string;
linkItemModalTitle?: string;
Expand All @@ -33,13 +36,19 @@ type Props = {
onLinkItemTableChange: (page: number, pageSize: number) => void;
onLinkItemModalCancel: () => void;
onChange?: (value: string) => void;
onCheckItemReference: (value: string, correspondingFieldId: string) => Promise<boolean>;
onCheckItemReference: (
itemId: string,
correspondingFieldId: string,
groupId?: string,
) => Promise<boolean>;
caichi-t marked this conversation as resolved.
Show resolved Hide resolved
};

const LinkItemModal: React.FC<Props> = ({
visible,
loading,
correspondingFieldId,
fieldId,
itemGroupId,
correspondingField,
linkedItemsModalList,
linkedItem,
linkItemModalTitle,
Expand Down Expand Up @@ -70,16 +79,27 @@ const LinkItemModal: React.FC<Props> = ({
[onLinkItemTableReload],
);

const handleChange = useCallback(
(value: string) => {
onChange?.(value);
onLinkItemModalCancel();
},
[onChange, onLinkItemModalCancel],
);

const handleClick = useCallback(
async (link: boolean, item: FormItem) => {
if (!link) {
onChange?.("");
onLinkItemModalCancel();
handleChange("");
return;
}

const isReferenced = await onCheckItemReference(item.id, correspondingFieldId);
if (!correspondingField) {
handleChange(item.id);
return;
}

const isReferenced = await onCheckItemReference(item.id, fieldId, itemGroupId);
if (isReferenced) {
confirm({
title: t("This item has been referenced"),
Expand All @@ -88,16 +108,14 @@ const LinkItemModal: React.FC<Props> = ({
),
icon: <Icon icon="exclamationCircle" />,
onOk() {
onChange?.(item.id);
onLinkItemModalCancel();
handleChange(item.id);
},
});
} else {
onChange?.(item.id);
onLinkItemModalCancel();
handleChange(item.id);
}
},
[confirm, correspondingFieldId, onChange, onCheckItemReference, onLinkItemModalCancel, t],
[confirm, correspondingField, fieldId, handleChange, itemGroupId, onCheckItemReference, t],
);

const columns: StretchColumn<FormItem>[] = useMemo(
Expand Down
12 changes: 9 additions & 3 deletions web/src/components/organisms/Project/Content/ContentDetails/hooks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -567,13 +567,19 @@ export default () => {
});

const handleCheckItemReference = useCallback(
async (value: string, correspondingFieldId: string) => {
async (itemId: string, correspondingFieldId: string, groupId?: string) => {
const initialValue = groupId
? initialFormValues[groupId][correspondingFieldId]
: initialFormValues[correspondingFieldId];
if (initialValue === itemId) {
return false;
}
const res = await checkIfItemIsReferenced({
variables: { itemId: value ?? "", correspondingFieldId },
variables: { itemId, correspondingFieldId },
});
return res.data?.isItemReferenced ?? false;
},
[checkIfItemIsReferenced],
[checkIfItemIsReferenced, initialFormValues],
);

return {
Expand Down