Skip to content

Commit

Permalink
refactor: change code to use useMutate values instead of states
Browse files Browse the repository at this point in the history
  • Loading branch information
rpenido committed Jul 10, 2024
1 parent a7fe999 commit 9a23204
Showing 1 changed file with 23 additions and 28 deletions.
51 changes: 23 additions & 28 deletions src/library-authoring/create-library/CreateLibrary.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import React from 'react';
import { StudioFooter } from '@edx/frontend-component-footer';
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';
import {
Alert,
Container,
Expand All @@ -17,34 +17,47 @@ import FormikControl from '../../generic/FormikControl';
import FormikErrorFeedback from '../../generic/FormikErrorFeedback';
import { useOrganizationListData } from '../../generic/data/apiHooks';
import SubHeader from '../../generic/sub-header/SubHeader';
import type { CreateContentLibraryArgs } from './data/api';
import { useCreateLibraryV2 } from './data/apiHooks';
import messages from './messages';

const ErrorAlert = ({ error }: { error: any }) => (
<Alert variant="danger" className="mt-3">
{error?.message}
<br />
{error?.response?.data && JSON.stringify(error.response.data)}
</Alert>
);

const CreateLibrary = () => {
const intl = useIntl();
const navigate = useNavigate();

const [apiError, setApiError] = useState<React.ReactNode>();

const { noSpaceRule, specialCharsRule } = REGEX_RULES;
const validSlugIdRegex = /^[a-zA-Z\d]+(?:[\w-]*[a-zA-Z\d]+)*$/;

const {
mutateAsync,
mutate,
data,
isLoading,
isError,
error,
} = useCreateLibraryV2();

const {
data: organizationListData,
isLoading: isOrganizationListLoading,
} = useOrganizationListData();

if (data) {
navigate(`/library/${data.id}`);
}

return (
<>
<Header isHiddenMainMenu />
<Container size="xl" className="p-4 mt-3">
<SubHeader
title={<FormattedMessage {...messages.createLibrary} />}
title={intl.formatMessage(messages.createLibrary)}
/>
<Formik
initialValues={{
Expand All @@ -71,21 +84,7 @@ const CreateLibrary = () => {
),
})
}
onSubmit={async (values: CreateContentLibraryArgs) => {
setApiError(undefined);
try {
const data = await mutateAsync(values);
navigate(`/library/${data.id}`);
} catch (error: any) {
setApiError((
<>
{error.message}
<br />
{error.response?.data && JSON.stringify(error.response.data)}
</>
));
}
}}
onSubmit={(values) => mutate(values)}
>
{(formikProps) => (
<Form onSubmit={formikProps.handleSubmit}>
Expand Down Expand Up @@ -123,7 +122,7 @@ const CreateLibrary = () => {
type="submit"
variant="primary"
className="action btn-primary"
state={formikProps.isSubmitting ? 'disabled' : 'enabled'}
state={isLoading ? 'disabled' : 'enabled'}
disabledStates={['disabled']}
labels={{
enabled: intl.formatMessage(messages.createLibraryButton),
Expand All @@ -133,11 +132,7 @@ const CreateLibrary = () => {
</Form>
)}
</Formik>
{apiError && (
<Alert variant="danger" className="mt-3">
{apiError}
</Alert>
)}
{isError && (<ErrorAlert error={error} />)}
</Container>
<StudioFooter />
</>
Expand Down

0 comments on commit 9a23204

Please sign in to comment.