Skip to content

Commit

Permalink
refactor Prompt for organization field
Browse files Browse the repository at this point in the history
  • Loading branch information
@JeromeBu
JeromeBu committed Dec 11, 2024
1 parent def2f0e commit 36b6fed
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 104 deletions.
58 changes: 2 additions & 56 deletions web/src/ui/pages/account/Account.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import { declareComponentKeys } from "i18nifty";
import { useCore, useCoreState } from "core";
import { Input } from "@codegouvfr/react-dsfr/Input";
import { z } from "zod";
import { AutocompleteFreeSoloInput } from "ui/shared/AutocompleteFreeSoloInput";
import { Button } from "@codegouvfr/react-dsfr/Button";
import { OrganizationField } from "../../shared/PromptForOrganization";
import type { PageRoute } from "./route";
import { LoadingFallback } from "ui/shared/LoadingFallback";
import CircularProgress from "@mui/material/CircularProgress";
Expand Down Expand Up @@ -56,7 +56,6 @@ function AccountReady(props: { className?: string }) {
const { t } = useTranslation({ Account });

const {
allOrganizations,
email,
organization,
aboutAndIsPublic,
Expand Down Expand Up @@ -135,13 +134,6 @@ function AccountReady(props: { className?: string }) {

const { classes, cx, css } = useStyles();

const { getOrganizationFullName } = useGetOrganizationFullName();

console.log({
"organization.value": organization.value,
organizationInputValue
});

return (
<div className={cx(fr.cx("fr-container"), className)}>
<div className={classes.oidcInfos}>
Expand Down Expand Up @@ -177,53 +169,7 @@ function AccountReady(props: { className?: string }) {
</a>
)}

<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between"
}}
>
<AutocompleteFreeSoloInput
className={classes.organizationInput}
options={allOrganizations}
getOptionLabel={organization =>
getOrganizationFullName(organization)
}
value={organization.value ?? ""}
onValueChange={value => {
setOrganizationInputValue(value);
}}
dsfrInputProps={{
"label": t("organization"),
"disabled": organization.isBeingUpdated
}}
disabled={organization.isBeingUpdated}
/>
{organizationInputValue &&
organization.value !== organizationInputValue && (
<>
<Button
className={fr.cx("fr-ml-2w")}
onClick={() =>
userAccountManagement.updateField({
"fieldName": "organization",
"value": organizationInputValue
})
}
disabled={
organization.value === organizationInputValue ||
organization.isBeingUpdated
}
>
{t("update")}
</Button>
{organization.isBeingUpdated && (
<CircularProgress size={30} />
)}
</>
)}
</div>
<OrganizationField firstTime={false} />
</div>
<>
<h2>{t("about title")}</h2>
Expand Down
107 changes: 59 additions & 48 deletions web/src/ui/shared/PromptForOrganization.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,23 @@ import { useCore, useCoreState } from "../../core";
import { AutocompleteFreeSoloInput } from "./AutocompleteFreeSoloInput";
import { LoadingFallback } from "./LoadingFallback";

export const PromptForOrganization = ({ firstTime }: { firstTime?: boolean }) => {
type PromptForOrganizationProps = {
firstTime?: boolean;
};

export const PromptForOrganization = ({ firstTime }: PromptForOrganizationProps) => {
const { t } = useTranslation({ PromptForOrganization });

return (
<div className={fr.cx("fr-container", "fr-py-6w")}>
<h1 className={fr.cx("fr-h1")}>{t("title")}</h1>
<p>{t("organization is required")}</p>
<OrganizationField firstTime={firstTime} />
</div>
);
};

export const OrganizationField = ({ firstTime }: PromptForOrganizationProps) => {
const { t } = useTranslation({ PromptForOrganization });
const { classes } = useStyles();
const { userAccountManagement } = useCore().functions;
Expand All @@ -28,54 +44,49 @@ export const PromptForOrganization = ({ firstTime }: { firstTime?: boolean }) =>
const { allOrganizations, organization } = userAccountManagementState;

return (
<div className={fr.cx("fr-container", "fr-py-6w")}>
<h1 className={fr.cx("fr-h1")}>{t("title")}</h1>
<p>{t("organization is required")}</p>

<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between"
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between"
}}
>
<AutocompleteFreeSoloInput
className={classes.organizationInput}
options={allOrganizations}
getOptionLabel={organization => getOrganizationFullName(organization)}
value={organization.value ?? ""}
onValueChange={value => {
setOrganizationInputValue(value);
}}
dsfrInputProps={{
"label": t("organization"),
"disabled": organization.isBeingUpdated
}}
>
<AutocompleteFreeSoloInput
className={classes.organizationInput}
options={allOrganizations}
getOptionLabel={organization => getOrganizationFullName(organization)}
value={organization.value ?? ""}
onValueChange={value => {
setOrganizationInputValue(value);
}}
dsfrInputProps={{
"label": t("organization"),
"disabled": organization.isBeingUpdated
}}
disabled={organization.isBeingUpdated}
/>
{(firstTime ||
(organizationInputValue &&
organization.value !== organizationInputValue)) && (
<>
<Button
className={fr.cx("fr-ml-2w")}
onClick={() =>
userAccountManagement.updateField({
"fieldName": "organization",
"value": organizationInputValue
})
}
disabled={
organization.value === organizationInputValue ||
organization.isBeingUpdated
}
>
{t("update")}
</Button>
{organization.isBeingUpdated && <CircularProgress size={30} />}
</>
)}
</div>
disabled={organization.isBeingUpdated}
/>
{(firstTime ||
(organizationInputValue &&
organization.value !== organizationInputValue)) && (
<>
<Button
className={fr.cx("fr-ml-2w")}
onClick={() =>
userAccountManagement.updateField({
"fieldName": "organization",
"value": organizationInputValue
})
}
disabled={
organization.value === organizationInputValue ||
organization.isBeingUpdated
}
>
{t("update")}
</Button>
{organization.isBeingUpdated && <CircularProgress size={30} />}
</>
)}
</div>
);
};
Expand Down

0 comments on commit 36b6fed

Please sign in to comment.