Skip to content

Commit

Permalink
Merge pull request #820 from syucream/fix/entryform-state
Browse files Browse the repository at this point in the history 
Simplify EntityForm state
  • Loading branch information
@userlocalhost
userlocalhost authored May 8, 2023
2 parents 237db0a + d6a2c06 commit b681014
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 82 deletions.
11 changes: 10 additions & 1 deletion frontend/src/components/entry/EntryForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,15 @@ test("should render a component with essential props", function () {
schema: { id: 0, name: "testEntity" },
attrs: {},
};
const entity = {
id: 2,
name: "bbb",
note: "",
isToplevel: false,
attrs: [],
webhooks: [],
};

const setIsAnchorLink = () => {
/* do nothing */
};
Expand All @@ -27,7 +36,7 @@ test("should render a component with essential props", function () {
});
return (
<EntryForm
entryInfo={entryInfo}
entity={entity}
setIsAnchorLink={setIsAnchorLink}
control={control}
setValue={setValue}
Expand Down
36 changes: 17 additions & 19 deletions frontend/src/components/entry/EntryForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import { Control, Controller } from "react-hook-form";
import { UseFormSetValue } from "react-hook-form/dist/types/form";
import { useLocation } from "react-router-dom";

import { EntityDetail } from "../../apiclient/autogenerated";

import { AttributeValueField } from "components/entry/entryForm/AttributeValueField";
import { Schema } from "components/entry/entryForm/EntryFormSchema";

Expand Down Expand Up @@ -47,15 +49,14 @@ const RequiredLabel = styled(Typography)(({}) => ({
}));

export interface EntryFormProps {
// TODO simplify props more
entryInfo: Schema;
entity: EntityDetail;
setIsAnchorLink: Dispatch<SetStateAction<boolean>>;
control: Control<Schema>;
setValue: UseFormSetValue<Schema>;
}

export const EntryForm: FC<EntryFormProps> = ({
entryInfo,
entity,
setIsAnchorLink,
control,
setValue,
Expand All @@ -82,14 +83,14 @@ export const EntryForm: FC<EntryFormProps> = ({
<ArrowDropDownIcon sx={{ color: "black", padding: "0 4px" }} />
</AnchorLinkButton>
</Box>
{Object.entries(entryInfo.attrs).map(([attrId, attrValue]) => (
<Box key={attrId} m="8px">
{entity.attrs.map(({ id, name }) => (
<Box key={id} m="8px">
<AnchorLinkButton
href={`#attrs-${attrValue.schema.name}`}
href={`#attrs-${name}`}
onClick={() => setIsAnchorLink(true)}
>
<Typography sx={{ color: "black", padding: "0 4px" }}>
{attrValue.schema.name}
{name}
</Typography>
<ArrowDropDownIcon sx={{ color: "black" }} />
</AnchorLinkButton>
Expand Down Expand Up @@ -134,30 +135,27 @@ export const EntryForm: FC<EntryFormProps> = ({
/>
</TableCell>
</TableRow>
{Object.entries(entryInfo.attrs)
.sort((a, b) => a[1].index - b[1].index)
.map(([attrId, attrValue]) => (
<TableRow key={attrId}>
{entity.attrs
.sort((a, b) => a.index - b.index)
.map(({ id, name, type, isMandatory }) => (
<TableRow key={id}>
<TableCell>
<Box display="flex" alignItems="center">
{/* an anchor link adjusted fixed headers etc. */}
<Link
id={`attrs-${attrValue.schema.name}`}
id={`attrs-${name}`}
sx={{ marginTop: "-500px", paddingTop: "500px" }}
/>
<Typography flexGrow={1}>
{attrValue.schema.name}
</Typography>
{attrValue.isMandatory && (
<RequiredLabel>必須</RequiredLabel>
)}
<Typography flexGrow={1}>{name}</Typography>
{isMandatory && <RequiredLabel>必須</RequiredLabel>}
</Box>
</TableCell>
<TableCell>
<AttributeValueField
control={control}
setValue={setValue}
attrInfo={attrValue}
type={type}
schemaId={id}
/>
</TableCell>
</TableRow>
Expand Down
25 changes: 4 additions & 21 deletions frontend/src/components/entry/entryForm/AttributeValueField.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { DjangoContext } from "../../../services/DjangoContext";
import { ReactHookFormTestWrapper } from "../../../services/ReactHookFormTestWrapper";

import { AttributeValueField } from "./AttributeValueField";
import { EditableEntryAttrValue } from "./EditableEntry";
import { Schema } from "./EntryFormSchema";

beforeAll(() => {
Expand Down Expand Up @@ -120,16 +119,8 @@ attributes.forEach((attribute) => {
<AttributeValueField
control={control}
setValue={setValue}
attrInfo={{
index: 0,
value: attrValue as EditableEntryAttrValue,
type: attrType,
isMandatory: false,
schema: {
id: 9999,
name: "hoge",
},
}}
type={attrType}
schemaId={9999}
/>
)}
/>
Expand Down Expand Up @@ -157,16 +148,8 @@ arrayAttributes.forEach((arrayAttribute) => {
<AttributeValueField
control={control}
setValue={setValue}
attrInfo={{
index: 0,
value: attrValue as EditableEntryAttrValue,
type: attrType,
isMandatory: false,
schema: {
id: 9999,
name: "hoge",
},
}}
type={attrType}
schemaId={9999}
/>
)}
/>
Expand Down
52 changes: 20 additions & 32 deletions frontend/src/components/entry/entryForm/AttributeValueField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { UseFormSetValue } from "react-hook-form/dist/types/form";

import { BooleanAttributeValueField } from "./BooleanAttributeValueField";
import { DateAttributeValueField } from "./DateAttributeValueField";
import { EditableEntryAttrs } from "./EditableEntry";
import { Schema } from "./EntryFormSchema";
import { GroupAttributeValueField } from "./GroupAttributeValueField";
import {
Expand All @@ -21,57 +20,49 @@ import {
import { DjangoContext } from "services/DjangoContext";

interface Props {
attrInfo: EditableEntryAttrs;
control: Control<Schema>;
setValue: UseFormSetValue<Schema>;
type: number;
schemaId: number;
}

export const AttributeValueField: FC<Props> = ({
attrInfo,
control,
setValue,
type,
schemaId,
}) => {
const djangoContext = DjangoContext.getInstance();

switch (attrInfo.type) {
switch (type) {
case djangoContext?.attrTypeValue.string:
return (
<StringAttributeValueField
control={control}
attrId={attrInfo.schema.id}
/>
);
return <StringAttributeValueField control={control} attrId={schemaId} />;

case djangoContext?.attrTypeValue.text:
return (
<StringAttributeValueField
control={control}
attrId={attrInfo.schema.id}
attrId={schemaId}
multiline
/>
);

case djangoContext?.attrTypeValue.date:
return (
<DateAttributeValueField
attrId={attrInfo.schema.id}
attrId={schemaId}
control={control}
setValue={setValue}
/>
);

case djangoContext?.attrTypeValue.boolean:
return (
<BooleanAttributeValueField
attrId={attrInfo.schema.id}
control={control}
/>
);
return <BooleanAttributeValueField attrId={schemaId} control={control} />;

case djangoContext?.attrTypeValue.object:
return (
<ObjectAttributeValueField
attrId={attrInfo.schema.id}
attrId={schemaId}
control={control}
setValue={setValue}
/>
Expand All @@ -80,7 +71,7 @@ export const AttributeValueField: FC<Props> = ({
case djangoContext?.attrTypeValue.group:
return (
<GroupAttributeValueField
attrId={attrInfo.schema.id}
attrId={schemaId}
control={control}
setValue={setValue}
/>
Expand All @@ -89,7 +80,7 @@ export const AttributeValueField: FC<Props> = ({
case djangoContext?.attrTypeValue.role:
return (
<RoleAttributeValueField
attrId={attrInfo.schema.id}
attrId={schemaId}
control={control}
setValue={setValue}
/>
Expand All @@ -98,7 +89,7 @@ export const AttributeValueField: FC<Props> = ({
case djangoContext?.attrTypeValue.named_object:
return (
<NamedObjectAttributeValueField
attrId={attrInfo.schema.id}
attrId={schemaId}
control={control}
setValue={setValue}
/>
Expand All @@ -107,7 +98,7 @@ export const AttributeValueField: FC<Props> = ({
case djangoContext?.attrTypeValue.array_object:
return (
<ObjectAttributeValueField
attrId={attrInfo.schema.id}
attrId={schemaId}
control={control}
setValue={setValue}
multiple
Expand All @@ -117,7 +108,7 @@ export const AttributeValueField: FC<Props> = ({
case djangoContext?.attrTypeValue.array_group:
return (
<GroupAttributeValueField
attrId={attrInfo.schema.id}
attrId={schemaId}
control={control}
setValue={setValue}
multiple
Expand All @@ -127,7 +118,7 @@ export const AttributeValueField: FC<Props> = ({
case djangoContext?.attrTypeValue.array_role:
return (
<RoleAttributeValueField
attrId={attrInfo.schema.id}
attrId={schemaId}
control={control}
setValue={setValue}
multiple
Expand All @@ -136,16 +127,13 @@ export const AttributeValueField: FC<Props> = ({

case djangoContext?.attrTypeValue.array_string:
return (
<ArrayStringAttributeValueField
control={control}
attrId={attrInfo.schema.id}
/>
<ArrayStringAttributeValueField control={control} attrId={schemaId} />
);

case djangoContext?.attrTypeValue.array_named_object:
return (
<ArrayNamedObjectAttributeValueField
attrId={attrInfo.schema.id}
attrId={schemaId}
control={control}
setValue={setValue}
/>
Expand All @@ -154,14 +142,14 @@ export const AttributeValueField: FC<Props> = ({
case djangoContext?.attrTypeValue.array_named_object_boolean:
return (
<ArrayNamedObjectAttributeValueField
attrId={attrInfo.schema.id}
attrId={schemaId}
control={control}
setValue={setValue}
withBoolean
/>
);

default:
throw new Error(`Unknown attribute type: ${attrInfo.type}`);
throw new Error(`Unknown attribute type: ${type}`);
}
};
18 changes: 9 additions & 9 deletions frontend/src/pages/EditEntryPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ export const EditEntryPage: FC<Props> = ({
const history = useHistory();
const { enqueueSubmitResult } = useFormNotification("エントリ", willCreate);

const [entryInfo, setEntryInfo] = useState<Schema>();
const [isAnchorLink, setIsAnchorLink] = useState<boolean>(false);
const [initialized, setInitialized] = useState(false);

const {
formState: { isValid, isDirty, isSubmitting, isSubmitSuccessful },
Expand All @@ -72,13 +72,13 @@ export const EditEntryPage: FC<Props> = ({
useEffect(() => {
if (willCreate) {
if (!entity.loading && entity.value != null) {
const _entryInfo = formalizeEntryInfo(
const entryInfo = formalizeEntryInfo(
undefined,
entity.value,
excludeAttrs
);
reset(_entryInfo);
setEntryInfo(_entryInfo);
reset(entryInfo);
setInitialized(true);
}
} else {
if (
Expand All @@ -87,13 +87,13 @@ export const EditEntryPage: FC<Props> = ({
!entry.loading &&
entry.value != null
) {
const _entryInfo = formalizeEntryInfo(
const entryInfo = formalizeEntryInfo(
entry.value,
entity.value,
excludeAttrs
);
reset(_entryInfo);
setEntryInfo(_entryInfo);
reset(entryInfo);
setInitialized(true);
}
}
}, [willCreate, entity.value, entry.value]);
Expand Down Expand Up @@ -175,9 +175,9 @@ export const EditEntryPage: FC<Props> = ({
/>
</PageHeader>

{entryInfo && (
{initialized && entity.value != null && (
<EntryForm
entryInfo={entryInfo}
entity={entity.value}
setIsAnchorLink={setIsAnchorLink}
control={control}
setValue={setValue}
Expand Down

0 comments on commit b681014

Please sign in to comment.