Replaced ternary operations with && when applicable

This commit is contained in:
DrMint 2022-03-11 00:13:47 +01:00
parent 6c0b0a0083
commit 252a1af799
11 changed files with 107 additions and 190 deletions

View File

@ -199,7 +199,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
</div> </div>
{/* Sub panel */} {/* Sub panel */}
{subPanel ? ( {subPanel && (
<div <div
className={`${subPanelClass} border-r-[1px] mobile:bottom-20 mobile:border-r-0 mobile:border-l-[1px] border-black border-dotted top-0 bottom-0 right-0 left-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots className={`${subPanelClass} border-r-[1px] mobile:bottom-20 mobile:border-r-0 mobile:border-l-[1px] border-black border-dotted top-0 bottom-0 right-0 left-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
${ ${
@ -212,8 +212,6 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
> >
{subPanel} {subPanel}
</div> </div>
) : (
""
)} )}
{/* Main panel */} {/* Main panel */}

View File

@ -64,15 +64,13 @@ export default function ChronologyItemComponent(
props.item.attributes.day props.item.attributes.day
)} )}
> >
{props.displayYear ? ( {props.displayYear && (
<p className="text-lg mt-[-.2em] font-bold"> <p className="text-lg mt-[-.2em] font-bold">
{generateYear( {generateYear(
props.item.attributes.displayed_date, props.item.attributes.displayed_date,
props.item.attributes.year props.item.attributes.year
)} )}
</p> </p>
) : (
""
)} )}
<p className="col-start-1 text-dark text-sm"> <p className="col-start-1 text-dark text-sm">
@ -108,7 +106,7 @@ export default function ChronologyItemComponent(
{translation.title ? <h3>{translation.title}</h3> : ""} {translation.title ? <h3>{translation.title}</h3> : ""}
</div> </div>
{translation.description ? ( {translation.description && (
<p <p
className={ className={
event.translations.length > 1 event.translations.length > 1
@ -118,8 +116,6 @@ export default function ChronologyItemComponent(
> >
{translation.description} {translation.description}
</p> </p>
) : (
""
)} )}
{translation.note ? ( {translation.note ? (
<em>{"Notes: " + translation.note}</em> <em>{"Notes: " + translation.note}</em>

View File

@ -53,7 +53,7 @@ export default function ThumbnailHeader(
</div> </div>
<div className="grid grid-flow-col gap-8"> <div className="grid grid-flow-col gap-8">
{content.type ? ( {content.type && (
<div className="grid place-items-center place-content-start gap-2"> <div className="grid place-items-center place-content-start gap-2">
<h3 className="text-xl">{langui.type}</h3> <h3 className="text-xl">{langui.type}</h3>
<Button> <Button>
@ -62,19 +62,15 @@ export default function ThumbnailHeader(
: prettySlug(content.type.data.attributes.slug)} : prettySlug(content.type.data.attributes.slug)}
</Button> </Button>
</div> </div>
) : (
""
)} )}
{content.categories.data.length > 0 ? ( {content.categories.data.length > 0 && (
<div className="grid place-items-center place-content-start gap-2"> <div className="grid place-items-center place-content-start gap-2">
<h3 className="text-xl">{langui.categories}</h3> <h3 className="text-xl">{langui.categories}</h3>
{content.categories.data.map((category) => ( {content.categories.data.map((category) => (
<Button key={category.id}>{category.attributes.name}</Button> <Button key={category.id}>{category.attributes.name}</Button>
))} ))}
</div> </div>
) : (
""
)} )}
</div> </div>
{content.titles.length > 0 && content.titles[0].description && ( {content.titles.length > 0 && content.titles[0].description && (

View File

@ -54,7 +54,7 @@ export default function ContentTOCLine(
? content.attributes.range[0].starting_page ? content.attributes.range[0].starting_page
: ""} : ""}
</p> </p>
{content.attributes.content.data ? ( {content.attributes.content.data && (
<Chip className="justify-self-end thin:hidden"> <Chip className="justify-self-end thin:hidden">
{content.attributes.content.data.attributes.type.data.attributes {content.attributes.content.data.attributes.type.data.attributes
.titles.length > 0 .titles.length > 0
@ -65,8 +65,6 @@ export default function ContentTOCLine(
.attributes.slug .attributes.slug
)} )}
</Chip> </Chip>
) : (
""
)} )}
</div> </div>
<div <div
@ -78,24 +76,20 @@ export default function ContentTOCLine(
subdirectory_arrow_right subdirectory_arrow_right
</span> </span>
{content.attributes.scan_set.length > 0 ? ( {content.attributes.scan_set.length > 0 && (
<Button <Button
href={`/contents/${content.attributes.content.data.attributes.slug}/scans/`} href={`/contents/${content.attributes.content.data.attributes.slug}/scans/`}
> >
{langui.view_scans} {langui.view_scans}
</Button> </Button>
) : (
""
)} )}
{content.attributes.content.data ? ( {content.attributes.content.data && (
<Button <Button
href={`/contents/${content.attributes.content.data.attributes.slug}`} href={`/contents/${content.attributes.content.data.attributes.slug}`}
> >
{langui.open_content} {langui.open_content}
</Button> </Button>
) : (
""
)} )}
{content.attributes.scan_set.length === 0 && {content.attributes.scan_set.length === 0 &&

View File

@ -33,14 +33,12 @@ export default function LibraryContentPreview(
)} )}
<div className="linearbg-obi fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2"> <div className="linearbg-obi fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
<div className="grid grid-flow-col gap-1 overflow-hidden place-content-start"> <div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
{item.type.data ? ( {item.type.data && (
<Chip> <Chip>
{item.type.data.attributes.titles.length > 0 {item.type.data.attributes.titles.length > 0
? item.type.data.attributes.titles[0].title ? item.type.data.attributes.titles[0].title
: prettySlug(item.type.data.attributes.slug)} : prettySlug(item.type.data.attributes.slug)}
</Chip> </Chip>
) : (
""
)} )}
</div> </div>
<div> <div>

View File

@ -44,12 +44,10 @@ export default function LibraryItemsPreview(
)} )}
<div className="linearbg-obi fine:drop-shadow-shade-lg fine:absolute place-items-start bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2"> <div className="linearbg-obi fine:drop-shadow-shade-lg fine:absolute place-items-start bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
{item.metadata && item.metadata.length > 0 ? ( {item.metadata && item.metadata.length > 0 && (
<div className="flex flex-row gap-1"> <div className="flex flex-row gap-1">
<Chip>{prettyItemSubType(item.metadata[0])}</Chip> <Chip>{prettyItemSubType(item.metadata[0])}</Chip>
</div> </div>
) : (
""
)} )}
<div> <div>
@ -65,36 +63,31 @@ export default function LibraryItemsPreview(
))} ))}
</div> </div>
{item.release_date || item.price ? ( {item.release_date ||
<div className="grid grid-flow-col w-full"> (item.price && (
{item.release_date ? ( <div className="grid grid-flow-col w-full">
<p className="mobile:text-xs text-sm"> {item.release_date && (
<span className="material-icons !text-base translate-y-[.15em] mr-1"> <p className="mobile:text-xs text-sm">
event <span className="material-icons !text-base translate-y-[.15em] mr-1">
</span> event
{prettyDate(item.release_date)} </span>
</p> {prettyDate(item.release_date)}
) : ( </p>
"" )}
)} {item.price && props.currencies && (
{item.price && props.currencies ? ( <p className="mobile:text-xs text-sm justify-self-end">
<p className="mobile:text-xs text-sm justify-self-end"> <span className="material-icons !text-base translate-y-[.15em] mr-1">
<span className="material-icons !text-base translate-y-[.15em] mr-1"> shopping_cart
shopping_cart </span>
</span> {prettyPrice(
{prettyPrice( item.price,
item.price, props.currencies,
props.currencies, appLayout.currency
appLayout.currency )}
)} </p>
</p> )}
) : ( </div>
"" ))}
)}
</div>
) : (
""
)}
</div> </div>
</div> </div>
</Link> </Link>

View File

@ -10,10 +10,8 @@ export default function PanelHeader(props: PanelHeaderProps): JSX.Element {
return ( return (
<> <>
<div className="w-full grid place-items-center"> <div className="w-full grid place-items-center">
{props.icon ? ( {props.icon && (
<span className="material-icons !text-4xl mb-3">{props.icon}</span> <span className="material-icons !text-4xl mb-3">{props.icon}</span>
) : (
""
)} )}
<h2 className="text-2xl">{props.title}</h2> <h2 className="text-2xl">{props.title}</h2>
{props.description ? <p>{props.description}</p> : ""} {props.description ? <p>{props.description}</p> : ""}

View File

@ -192,10 +192,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
}`} }`}
> >
<p> <p>
{langui.licensing_notice ? ( {langui.licensing_notice && (
<Markdown>{langui.licensing_notice}</Markdown> <Markdown>{langui.licensing_notice}</Markdown>
) : (
""
)} )}
</p> </p>
<a <a
@ -210,10 +208,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
</div> </div>
</a> </a>
<p> <p>
{langui.copyright_notice ? ( {langui.copyright_notice && (
<Markdown>{langui.copyright_notice}</Markdown> <Markdown>{langui.copyright_notice}</Markdown>
) : (
""
)} )}
</p> </p>
<div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8"> <div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">

View File

@ -44,28 +44,22 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
<HorizontalLine /> <HorizontalLine />
{content.text_set.length > 0 ? ( {content.text_set.length > 0 && (
<Button href={`/contents/${content.slug}/read/`}> <Button href={`/contents/${content.slug}/read/`}>
{langui.read_content} {langui.read_content}
</Button> </Button>
) : (
""
)} )}
{content.audio_set.length > 0 ? ( {content.audio_set.length > 0 && (
<Button href={`/contents/${content.slug}/listen/`}> <Button href={`/contents/${content.slug}/listen/`}>
{langui.listen_content} {langui.listen_content}
</Button> </Button>
) : (
""
)} )}
{content.video_set.length > 0 ? ( {content.video_set.length > 0 && (
<Button href={`/contents/${content.slug}/watch/`}> <Button href={`/contents/${content.slug}/watch/`}>
{langui.watch_content} {langui.watch_content}
</Button> </Button>
) : (
""
)} )}
</div> </div>
</ContentPanel> </ContentPanel>

View File

@ -47,7 +47,7 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
horizontalLine horizontalLine
/> />
{content.text_set.length > 0 ? ( {content.text_set.length > 0 && (
<div className="grid gap-5"> <div className="grid gap-5">
<h2 className="text-xl"> <h2 className="text-xl">
{content.text_set[0].source_language.data.attributes.code === {content.text_set[0].source_language.data.attributes.code ===
@ -140,8 +140,6 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
</div> </div>
)} )}
</div> </div>
) : (
""
)} )}
</SubPanel> </SubPanel>
); );
@ -159,10 +157,8 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
<HorizontalLine /> <HorizontalLine />
{content.text_set.length > 0 ? ( {content.text_set.length > 0 && (
<Markdawn text={content.text_set[0].text} /> <Markdawn text={content.text_set[0].text} />
) : (
""
)} )}
</div> </div>
</ContentPanel> </ContentPanel>

View File

@ -70,15 +70,13 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
onClick={() => appLayout.setSubPanelOpen(false)} onClick={() => appLayout.setSubPanelOpen(false)}
/> />
{item.gallery.data.length > 0 ? ( {item.gallery.data.length > 0 && (
<NavOption <NavOption
title={langui.gallery} title={langui.gallery}
url="#gallery" url="#gallery"
border border
onClick={() => appLayout.setSubPanelOpen(false)} onClick={() => appLayout.setSubPanelOpen(false)}
/> />
) : (
""
)} )}
<NavOption <NavOption
@ -88,21 +86,17 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
onClick={() => appLayout.setSubPanelOpen(false)} onClick={() => appLayout.setSubPanelOpen(false)}
/> />
{item.subitems.data.length > 0 ? ( {item.subitems.data.length > 0 && (
<NavOption <NavOption
title={isVariantSet ? langui.variants : langui.subitems} title={isVariantSet ? langui.variants : langui.subitems}
url={isVariantSet ? "#variants" : "#subitems"} url={isVariantSet ? "#variants" : "#subitems"}
border border
onClick={() => appLayout.setSubPanelOpen(false)} onClick={() => appLayout.setSubPanelOpen(false)}
/> />
) : (
""
)} )}
{item.contents.data.length > 0 ? ( {item.contents.data.length > 0 && (
<NavOption title={langui.contents} url="#contents" border /> <NavOption title={langui.contents} url="#contents" border />
) : (
""
)} )}
</div> </div>
</SubPanel> </SubPanel>
@ -134,7 +128,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
<InsetBox id="summary" className="grid place-items-center"> <InsetBox id="summary" className="grid place-items-center">
<div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-8"> <div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-8">
{item.subitem_of.data.length > 0 ? ( {item.subitem_of.data.length > 0 && (
<div className="grid place-items-center"> <div className="grid place-items-center">
<p>{langui.subitem_of}</p> <p>{langui.subitem_of}</p>
<Button <Button
@ -147,26 +141,18 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
)} )}
</Button> </Button>
</div> </div>
) : (
""
)} )}
<div className="grid place-items-center"> <div className="grid place-items-center">
<h1 className="text-3xl">{item.title}</h1> <h1 className="text-3xl">{item.title}</h1>
{item.subtitle ? ( {item.subtitle && <h2 className="text-2xl">{item.subtitle}</h2>}
<h2 className="text-2xl">{item.subtitle}</h2>
) : (
""
)}
</div> </div>
{item.descriptions.length > 0 ? ( {item.descriptions.length > 0 && (
<p className="text-justify">{item.descriptions[0].description}</p> <p className="text-justify">{item.descriptions[0].description}</p>
) : (
""
)} )}
</div> </div>
</InsetBox> </InsetBox>
{item.gallery.data.length > 0 ? ( {item.gallery.data.length > 0 && (
<div id="gallery" className="grid place-items-center gap-8 w-full"> <div id="gallery" className="grid place-items-center gap-8 w-full">
<h2 className="text-2xl">{langui.gallery}</h2> <h2 className="text-2xl">{langui.gallery}</h2>
<div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"> <div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
@ -186,15 +172,13 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
))} ))}
</div> </div>
</div> </div>
) : (
""
)} )}
<InsetBox id="details" className="grid place-items-center"> <InsetBox id="details" className="grid place-items-center">
<div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8"> <div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
<h2 className="text-2xl text-center">{langui.details}</h2> <h2 className="text-2xl text-center">{langui.details}</h2>
<div className="grid grid-flow-col w-full place-content-between"> <div className="grid grid-flow-col w-full place-content-between">
{item.metadata.length > 0 ? ( {item.metadata.length > 0 && (
<div className="grid place-items-center place-content-start"> <div className="grid place-items-center place-content-start">
<h3 className="text-xl">{langui.type}</h3> <h3 className="text-xl">{langui.type}</h3>
<div className="grid grid-flow-col gap-1"> <div className="grid grid-flow-col gap-1">
@ -203,20 +187,16 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
<Chip>{prettyItemSubType(item.metadata[0])}</Chip> <Chip>{prettyItemSubType(item.metadata[0])}</Chip>
</div> </div>
</div> </div>
) : (
""
)} )}
{item.release_date ? ( {item.release_date && (
<div className="grid place-items-center place-content-start"> <div className="grid place-items-center place-content-start">
<h3 className="text-xl">{langui.release_date}</h3> <h3 className="text-xl">{langui.release_date}</h3>
<p>{prettyDate(item.release_date)}</p> <p>{prettyDate(item.release_date)}</p>
</div> </div>
) : (
""
)} )}
{item.price ? ( {item.price && (
<div className="grid place-items-center text-center place-content-start"> <div className="grid place-items-center text-center place-content-start">
<h3 className="text-xl">{langui.price}</h3> <h3 className="text-xl">{langui.price}</h3>
<p> <p>
@ -234,11 +214,9 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
</p> </p>
)} )}
</div> </div>
) : (
""
)} )}
</div> </div>
{item.size ? ( {item.size && (
<> <>
<h3 className="text-xl">{langui.size}</h3> <h3 className="text-xl">{langui.size}</h3>
<div className="grid grid-flow-col w-full place-content-between"> <div className="grid grid-flow-col w-full place-content-between">
@ -256,7 +234,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
<p>{convertMmToInch(item.size.height)} in</p> <p>{convertMmToInch(item.size.height)} in</p>
</div> </div>
</div> </div>
{item.size.thickness ? ( {item.size.thickness && (
<div className="flex flex-row flex-wrap place-items-start gap-4"> <div className="flex flex-row flex-wrap place-items-start gap-4">
<p className="font-bold">{langui.thickness}:</p> <p className="font-bold">{langui.thickness}:</p>
<div> <div>
@ -264,84 +242,68 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
<p>{convertMmToInch(item.size.thickness)} in</p> <p>{convertMmToInch(item.size.thickness)} in</p>
</div> </div>
</div> </div>
) : (
""
)} )}
</div> </div>
</> </>
) : (
""
)} )}
{item.metadata.length > 0 && {item.metadata.length > 0 &&
item.metadata[0].__typename !== "ComponentMetadataGroup" && item.metadata[0].__typename !== "ComponentMetadataGroup" &&
item.metadata[0].__typename !== "ComponentMetadataOther" ? ( item.metadata[0].__typename !== "ComponentMetadataOther" && (
<> <>
<h3 className="text-xl">{langui.type_information}</h3> <h3 className="text-xl">{langui.type_information}</h3>
<div className="grid grid-cols-2 w-full place-content-between"> <div className="grid grid-cols-2 w-full place-content-between">
{item.metadata[0].__typename === "ComponentMetadataBooks" ? ( {item.metadata[0].__typename ===
<> "ComponentMetadataBooks" && (
<div className="flex flex-row place-content-start gap-4"> <>
<p className="font-bold">{langui.pages}:</p> <div className="flex flex-row place-content-start gap-4">
<p>{item.metadata[0].page_count}</p> <p className="font-bold">{langui.pages}:</p>
</div> <p>{item.metadata[0].page_count}</p>
</div>
<div className="flex flex-row place-content-start gap-4"> <div className="flex flex-row place-content-start gap-4">
<p className="font-bold">{langui.binding}:</p> <p className="font-bold">{langui.binding}:</p>
<p> <p>
{item.metadata[0].binding_type === {item.metadata[0].binding_type ===
Enum_Componentmetadatabooks_Binding_Type.Paperback Enum_Componentmetadatabooks_Binding_Type.Paperback
? langui.paperback ? langui.paperback
: item.metadata[0].binding_type === : item.metadata[0].binding_type ===
Enum_Componentmetadatabooks_Binding_Type.Hardcover Enum_Componentmetadatabooks_Binding_Type.Hardcover
? langui.hardcover ? langui.hardcover
: ""} : ""}
</p>
</div>
<div className="flex flex-row place-content-start gap-4">
<p className="font-bold">{langui.page_order}:</p>
<p>
{item.metadata[0].page_order ===
Enum_Componentmetadatabooks_Page_Order.LeftToRight
? langui.left_to_right
: item.metadata[0].page_order ===
Enum_Componentmetadatabooks_Page_Order.RightToLeft
? langui.right_to_left
: ""}
</p>
</div>
<div className="flex flex-row place-content-start gap-4">
<p className="font-bold">{langui.languages}:</p>
{item.metadata[0].languages.data.map((lang) => (
<p key={lang.attributes.code}>
{lang.attributes.name}
</p> </p>
))} </div>
</div>
</> <div className="flex flex-row place-content-start gap-4">
) : item.metadata[0].__typename === <p className="font-bold">{langui.page_order}:</p>
"ComponentMetadataAudio" ? ( <p>
<></> {item.metadata[0].page_order ===
) : item.metadata[0].__typename === Enum_Componentmetadatabooks_Page_Order.LeftToRight
"ComponentMetadataVideo" ? ( ? langui.left_to_right
<></> : item.metadata[0].page_order ===
) : item.metadata[0].__typename === Enum_Componentmetadatabooks_Page_Order.RightToLeft
"ComponentMetadataGame" ? ( ? langui.right_to_left
<></> : ""}
) : ( </p>
"" </div>
)}
</div> <div className="flex flex-row place-content-start gap-4">
</> <p className="font-bold">{langui.languages}:</p>
) : ( {item.metadata[0].languages.data.map((lang) => (
"" <p key={lang.attributes.code}>
)} {lang.attributes.name}
</p>
))}
</div>
</>
)}
</div>
</>
)}
</div> </div>
</InsetBox> </InsetBox>
{item.subitems.data.length > 0 ? ( {item.subitems.data.length > 0 && (
<div <div
id={isVariantSet ? "variants" : "subitems"} id={isVariantSet ? "variants" : "subitems"}
className="grid place-items-center gap-8 w-full" className="grid place-items-center gap-8 w-full"
@ -358,11 +320,9 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
))} ))}
</div> </div>
</div> </div>
) : (
""
)} )}
{item.contents.data.length > 0 ? ( {item.contents.data.length > 0 && (
<div id="contents" className="w-full grid place-items-center gap-8"> <div id="contents" className="w-full grid place-items-center gap-8">
<h2 className="text-2xl">{langui.contents}</h2> <h2 className="text-2xl">{langui.contents}</h2>
<div className="grid gap-4 w-full"> <div className="grid gap-4 w-full">
@ -376,8 +336,6 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
))} ))}
</div> </div>
</div> </div>
) : (
""
)} )}
</div> </div>
</ContentPanel> </ContentPanel>