I would like to make my careepage.tsx onsubmit button more efficient. Since there are several sections. I didn’t want to do all sections with one if request. How can I work more efficiently so that it is faster. and also how can I retrieve the sections when I retry?
carerpage model.tsx
export interface CallToActionSection {
id: string;
type: 'call-to-action';
order: number;
callToAction: { headline: string; text: string; experienceLevel: string; buttonText: string };
}
export interface IntroSection {
id: string;
type: 'intro';
order: number;
intro: { headline: string; text: string };
}
export interface OpenerSection {
id: string;
type: 'opener';
order: number;
opener: { headline: string; text: string; buttonText: string };
}
export interface CareerPage {
id: number;
slugPath: string;
sections?: Array<OpenerSection | IntroSection | CallToActionSection>;
Intro.tsx
interface Props {
name: string;
}
export const Intro: React.FC<Props> = ({ name }) => {
return (
<FinalGridContainer>
<FinalGridItem>
<Typography variant="h3" innerPadding="horizontal">
Intro
</Typography>
<TextInput
label="headline"
name={${name}.intro.headline}
/>
<TextInput
label="Text"
name={${name}.intro.text}
/>
</FinalGridItem>
</FinalGridContainer>
);
};
careerpage.tsx
import { Intro } from '../components/Intro/Intro';
import useCareerPage from '../hooks/useCareerPage';
import { CareerPage } from '../models/career-page';
type Values = Partial<CareerPage>;
export default function CareerPages() {
const { careerPage, careerPageLoading, careerPageError, createCareerPage, updateCareerPage } = useCareerPage();
const initialValues = useMemo(() => {
return { ...careerPage } as Values;
}, [careerPage]);
const onSubmit = useCallback(
(values: Values) => {
values.sections = values.sections || [];
values.sections.forEach((section) => {
if ('callToAction' in section && section.callToAction) {
section.type = 'call-to-action';
}
if ('intro' in section && section.intro) {
section.type = 'intro';
}
});
if (careerPage) {
return updateCareerPage(careerPage.id, values);
}
return createCareerPage(values);
},
[careerPage, createCareerPage, updateCareerPage]
);
return (
<>
<Head>
<title key="title">Karriereseite :: Karriereseite bearbeiten</title>
<meta key="robots" name="robots" content="noindex, nofollow" />
</Head>
<FinalContainer>
<Typography variant="h2">Career Page</Typography>
{careerPageLoading ? <Skeleton /> : null}
{careerPageError ? <Typography variant="body1">{careerPageError}</Typography> : null}
{!careerPageLoading ? (
<Form<Values> initialValues={initialValues} onSubmit={onSubmit}>
<Intro name="sections.0" />
<Stack spacing={2} direction="row">
<SubmitButton>
{careerPage ? 'Save' : 'New create'}
</SubmitButton>
</Stack>
</Form>
) : null}
</FinalContainer>
</>
);
}