Skip to content

Commit

Permalink
Simplifying ternaries
Browse files Browse the repository at this point in the history
  • Loading branch information
@7emansell
7emansell committed Nov 22, 2024
1 parent ee979fc commit 28e698d
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 104 deletions.
62 changes: 36 additions & 26 deletions src/components/MyAccount/NewSettings/StatusBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,35 +7,45 @@ type StatusBannerProps = {
statusMessage: string
}

const successContent = (
<Text marginBottom={0} color={"ui.black !important"}>
Your changes were saved.
</Text>
)

const generalFailureContent = (
<Text marginBottom={0} color={"ui.black !important"}>
Your changes were not saved.
</Text>
)

const specificFailureContent = (statusMessage: string) => {
return (
<Text marginBottom={0} color={"ui.black !important"}>
{statusMessage} Please try again or{" "}
<Link
sx={{
color: "ui.link.primary !important",
textDecorationColor: "ui.link.primary !important",
textDecoration: "underline",
}}
href="https://www.nypl.org/get-help/contact-us"
>
contact us
</Link>{" "}
for assistance.
</Text>
)
}

export const StatusBanner = ({ status, statusMessage }: StatusBannerProps) => {
const bannerContent = (
<div style={{ alignItems: "center" }}>
{status === "failure" ? (
statusMessage !== "" ? (
<Text marginBottom={0} color={"ui.black !important"}>
{statusMessage} Please try again or{" "}
<Link
sx={{
color: "ui.link.primary !important",
textDecorationColor: "ui.link.primary !important",
textDecoration: "underline",
}}
href="https://www.nypl.org/get-help/contact-us"
>
contact us
</Link>{" "}
for assistance.
</Text>
) : (
<Text marginBottom={0} color={"ui.black !important"}>
Your changes were not saved.
</Text>
)
) : (
<Text marginBottom={0} color={"ui.black !important"}>
Your changes were saved.
</Text>
)}
{status === "failure"
? statusMessage !== ""
? specificFailureContent(statusMessage)
: generalFailureContent
: successContent}
</div>
)

Expand Down
168 changes: 90 additions & 78 deletions src/components/MyAccount/NewSettings/UsernameForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,94 @@ const UsernameForm = ({ patron, usernameState }: UsernameFormProps) => {
}
}

const editUsernameField = (
<>
<Flex flexDir="row" alignItems="flex-start">
<TextInput
sx={{
width: { base: "87%", md: "300px" },
display: "flex",
flexDirection: "column-reverse",
label: {
fontWeight: "400",
color: error ? "ui.error.primary" : "ui.black",
},
}}
value={tempInput || ""}
id="username-input"
labelText="Must be 5-15 characters and use only letters (a-z) and numbers (0-9)"
showLabel
isInvalid={error && !validateUsername(tempInput)}
showHelperInvalidText={false}
onChange={handleInputChange}
isClearable
isClearableCallback={() => setError(true)}
/>
<Button
aria-label="Remove username"
buttonType="text"
id="remove-username-btn"
onClick={() => {
setTempInput(null)
setError(false)
}}
>
{" "}
<Icon name="actionDelete" size="large" />
</Button>
</Flex>
<Banner
sx={{ marginTop: "xs", width: "fill" }}
content="If you delete your username, you will have to use your barcode to log in to your account in the future."
type="warning"
/>
</>
)

const notEditingView = (
<Flex alignItems="center">
{input !== "" ? (
<>
<Text size="body1" sx={{ marginBottom: 0 }}>
{input}
</Text>
<EditButton
buttonId="edit-username-button"
onClick={() => setIsEditing(true)}
/>
</>
) : (
<AddButton
label="+ Add username"
onClick={() => {
setIsEditing(true)
setTempInput("")
}}
/>
)}
</Flex>
)

const editingView = (
<Flex
flexDir="column"
marginLeft={{ base: "l", lg: "unset" }}
marginTop={{ base: "xs", lg: "unset" }}
maxWidth={{ base: "600px", md: "320px" }}
>
{tempInput !== null ? (
editUsernameField
) : (
<AddButton
label="+ Add username"
onClick={() => {
setTempInput("")
}}
/>
)}
</Flex>
)

return (
<Flex
flexDir={{ base: "column", lg: "row" }}
Expand All @@ -110,85 +198,9 @@ const UsernameForm = ({ patron, usernameState }: UsernameFormProps) => {
{isLoading ? (
<SkeletonLoader contentSize={2} showImage={false} headingSize={0} />
) : isEditing ? (
<Flex
flexDir="column"
marginLeft={{ base: "l", lg: "unset" }}
marginTop={{ base: "xs", lg: "unset" }}
maxWidth={{ base: "600px", md: "320px" }}
>
{tempInput !== null ? (
<>
<Flex flexDir="row" alignItems="flex-start">
<TextInput
sx={{
width: { base: "87%", md: "300px" },
display: "flex",
flexDirection: "column-reverse",
label: {
fontWeight: "400",
color: error ? "ui.error.primary" : "ui.black",
},
}}
value={tempInput || ""}
id="username-input"
labelText="Must be 5-15 characters and use only letters (a-z) and numbers (0-9)"
showLabel
isInvalid={error && !validateUsername(tempInput)}
showHelperInvalidText={false}
onChange={handleInputChange}
isClearable
isClearableCallback={() => setError(true)}
/>
<Button
aria-label="Remove username"
buttonType="text"
id="remove-username-btn"
onClick={() => {
setTempInput(null)
setError(false)
}}
>
{" "}
<Icon name="actionDelete" size="large" />
</Button>
</Flex>
<Banner
sx={{ marginTop: "xs", width: "fill" }}
content="If you delete your username, you will have to use your barcode to log in to your account in the future."
type="warning"
/>
</>
) : (
<AddButton
label="+ Add username"
onClick={() => {
setTempInput("")
}}
/>
)}
</Flex>
editingView
) : (
<Flex alignItems="center">
{input !== "" ? (
<>
<Text size="body1" sx={{ marginBottom: 0 }}>
{input}
</Text>
<EditButton
buttonId="edit-username-button"
onClick={() => setIsEditing(true)}
/>
</>
) : (
<AddButton
label="+ Add username"
onClick={() => {
setIsEditing(true)
setTempInput("")
}}
/>
)}
</Flex>
notEditingView
)}

{isEditing && (
Expand Down

0 comments on commit 28e698d

Please sign in to comment.