Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Using the new datamodel for library content

This commit is contained in:
DrMint 2022-02-07 05:03:51 +01:00
parent 7fb48b2544
commit ddc6c1b491
9 changed files with 636 additions and 871 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Button.tsx
View File

@ -10,7 +10,7 @@ export default function Button(props: ButtonProps): JSX.Element {
const button = (
<div
className={
"grid place-content-center place-items-center border-[1px] border-dark text-dark rounded-full cursor-pointer px-4 py-2 transition-colors hover:text-light hover:bg-dark" +
"grid place-content-center place-items-center border-[1px] border-dark text-dark rounded-full cursor-pointer px-4 pt-[0.4rem] pb-[0.5rem] transition-colors hover:text-light hover:bg-dark" +
" " +
props.className
}

2
src/components/Chip.tsx
View File

@ -7,7 +7,7 @@ export default function Chip(props: ChipProps): JSX.Element {
return (
<div
className={
"grid place-content-center place-items-center text-xs py-0.5 px-1.5 border-[1px] rounded-full opacity-70" +
"grid place-content-center place-items-center text-xs pb-[0.14rem] px-1.5 border-[1px] rounded-full opacity-70" +
" " +
props.className
}

2
src/components/Panels/MainPanel.tsx
View File

@ -21,7 +21,7 @@ export default function MainPanel(): JSX.Element {
</Link>
<div className="relative mt-5">
{router.locale ? (
<Button className="absolute right-0 top-[-1.3em] text-xs py-0.5 px-2.5">
<Button className="absolute right-0 top-[-1.3em] text-xs !py-0.5 !px-2.5">
{router.locale.toUpperCase()}
</Button>
) : (

92
src/graphql/operation.graphql
View File

@ -285,62 +285,11 @@ query getLibraryItem($slug: String, $language_code: String) {
}
}
}
contents {
contents(pagination: { limit: -1 }) {
data {
id
attributes {
slug
title(filters: { language: { code: { eq: $language_code } } }) {
title
}
type {
data {
attributes {
slug
}
}
}
categories {
data {
id
attributes {
name
short
}
}
}
scan_set {
data {
id
attributes {
slug
}
}
}
text_set {
data {
id
attributes {
slug
}
}
}
audio_set {
data {
id
attributes {
slug
}
}
}
video_set {
data {
id
attributes {
slug
}
}
}
range {
__typename
... on ComponentRangePageRange {
@ -352,6 +301,45 @@ query getLibraryItem($slug: String, $language_code: String) {
ending_time
}
}
scan_set {
id
}
content {
data {
attributes {
slug
categories {
data {
id
attributes {
short
}
}
}
type {
data {
attributes {
slug
}
}
}
titles(
filters: { language: { code: { eq: $language_code } } }
) {
title
}
text_set {
id
}
video_set {
id
}
audio_set {
id
}
}
}
}
}
}
}

132
src/graphql/operations-types.ts
View File

@ -49,6 +49,15 @@ export enum Enum_Componentmetadatavideo_Resolution {
QuadHd_2160p = "QuadHD_2160p",
}
export enum Enum_Componenttranslationschronologyitem_Status {
Incomplete = 'Incomplete',
Draft = 'Draft',
Review = 'Review',
Done = 'Done'
}
// __________________________________________________________________
export type GetErasQueryVariables = Exact<{
language_code: InputMaybe<Scalars["String"]>;
}>;
@ -98,10 +107,7 @@ export type GetChronologyItemsQuery = {
__typename: "SourceEntityResponse";
data: {
__typename: "SourceEntity";
attributes: {
__typename: "Source";
name: string;
};
attributes: { __typename: "Source"; name: string };
};
};
translations: Array<{
@ -109,7 +115,7 @@ export type GetChronologyItemsQuery = {
title: string;
description: string;
note: string;
status: string;
status: Enum_Componenttranslationschronologyitem_Status;
}>;
}>;
};
@ -435,71 +441,13 @@ export type GetLibraryItemQuery = {
}>;
};
contents: {
__typename: "LibraryContentRelationResponseCollection";
__typename: "RangedContentRelationResponseCollection";
data: Array<{
__typename: "LibraryContentEntity";
__typename: "RangedContentEntity";
id: string;
attributes: {
__typename: "LibraryContent";
__typename: "RangedContent";
slug: string;
title: Array<{
__typename: "ComponentTranslationsLibraryContent";
title: string;
}>;
type: {
__typename: "ContentTypeEntityResponse";
data: {
__typename: "ContentTypeEntity";
attributes: {
__typename: "ContentType";
slug: string;
};
};
};
categories: {
__typename: "CategoryRelationResponseCollection";
data: Array<{
__typename: "CategoryEntity";
id: string;
attributes: {
__typename: "Category";
name: string;
short: string;
};
}>;
};
scan_set: {
__typename: "ScanSetEntityResponse";
data: {
__typename: "ScanSetEntity";
id: string;
attributes: { __typename: "ScanSet"; slug: string };
};
};
text_set: {
__typename: "TextSetEntityResponse";
data: {
__typename: "TextSetEntity";
id: string;
attributes: { __typename: "TextSet"; slug: string };
};
};
audio_set: {
__typename: "AudioSetEntityResponse";
data: {
__typename: "AudioSetEntity";
id: string;
attributes: { __typename: "AudioSet"; slug: string };
};
};
video_set: {
__typename: "VideoSetEntityResponse";
data: {
__typename: "VideoSetEntity";
id: string;
attributes: { __typename: "VideoSet"; slug: string };
};
};
range: Array<
| {
__typename: "ComponentRangePageRange";
@ -511,10 +459,60 @@ export type GetLibraryItemQuery = {
starting_time: any;
ending_time: any;
}
| { __typename: "ComponentRangeGameAspect" }
| { __typename: "ComponentRangeOther" }
| { __typename: "Error" }
>;
scan_set: Array<{
__typename: "ComponentSetsScanSet";
id: string;
}>;
content: {
__typename: "ContentEntityResponse";
data: {
__typename: "ContentEntity";
attributes: {
__typename: "Content";
slug: string;
categories: {
__typename: "CategoryRelationResponseCollection";
data: Array<{
__typename: "CategoryEntity";
id: string;
attributes: {
__typename: "Category";
short: string;
};
}>;
};
type: {
__typename: "ContentTypeEntityResponse";
data: {
__typename: "ContentTypeEntity";
attributes: {
__typename: "ContentType";
slug: string;
};
};
};
titles: Array<{
__typename: "ComponentTranslationsTitle";
title: string;
}>;
text_set: Array<{
__typename: "ComponentSetsTextSet";
id: string;
}>;
video_set: Array<{
__typename: "ComponentSetsVideoSet";
id: string;
}>;
audio_set: Array<{
__typename: "ComponentSetsAudioSet";
id: string;
}>;
};
};
};
};
}>;
};

4
src/graphql/operations.ts
View File

@ -5,10 +5,6 @@ import {
GetChronologyItemsQueryVariables,
GetErasQuery,
GetErasQueryVariables,
GetLibraryContentQuery,
GetLibraryContentQueryVariables,
GetLibraryContentsSlugsQuery,
GetLibraryContentsSlugsQueryVariables,
GetLibraryItemQuery,
GetLibraryItemQueryVariables,
GetLibraryItemsPreviewQuery,

1189
src/graphql/schema.graphql
View File

File diff suppressed because it is too large Load Diff

57
src/pages/library/[slug].tsx
View File

@ -12,6 +12,7 @@ import {
getAssetURL,
prettyDate,
prettyPrice,
prettySlug,
} from "queries/helpers";
import SubPanel from "components/Panels/SubPanel";
import ReturnButton from "components/PanelComponents/ReturnButton";
@ -240,14 +241,24 @@ export default function Library(props: Props): JSX.Element {
>
<div className="grid gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_9em] ">
<a href={`#${content.attributes.slug}`}>
<h3>{content.attributes.title[0].title}</h3>
<h3>
{content.attributes.content.data
? content.attributes.content.data.attributes
.titles[0].title
: prettySlug(
content.attributes.slug,
libraryItem.attributes.slug
)}
</h3>
</a>
<div className="grid grid-flow-col gap-1">
{content.attributes.categories.data.map((category) => (
{content.attributes.content.data?.attributes.categories.data.map(
(category) => (
<Chip key={category.id}>
{category.attributes.short}
</Chip>
))}
)
)}
</div>
<p className="border-b-2 h-4 w-full border-black border-dotted opacity-30"></p>
<p>
@ -256,18 +267,25 @@ export default function Library(props: Props): JSX.Element {
? content.attributes.range[0].starting_page
: ""}
</p>
{content.attributes.content.data ? (
<Chip className="place-self-end">
{content.attributes.type.data.attributes.slug}
{
content.attributes.content.data.attributes.type.data
.attributes.slug
}
</Chip>
) : (
""
)}
</div>
<div className="grid grid-flow-col place-content-start place-items-center gap-2">
<span className="material-icons text-dark">
subdirectory_arrow_right
</span>
{content.attributes.scan_set.data ? (
{content.attributes.scan_set.length > 0 ? (
<Button
href={`/scans/${content.attributes.scan_set.data.attributes.slug}`}
href={`content/${content.attributes.content.data.attributes.slug}/scans/`}
>
View scan
</Button>
@ -275,9 +293,10 @@ export default function Library(props: Props): JSX.Element {
""
)}
{content.attributes.text_set.data ? (
{content.attributes.content.data?.attributes.text_set
.length > 0 ? (
<Button
href={`/read/${content.attributes.text_set.data.attributes.slug}`}
href={`content/${content.attributes.content.data.attributes.slug}/read/`}
>
Read content
</Button>
@ -285,9 +304,10 @@ export default function Library(props: Props): JSX.Element {
""
)}
{content.attributes.audio_set.data ? (
{content.attributes.content.data?.attributes.audio_set
.length > 0 ? (
<Button
href={`/listen/${content.attributes.audio_set.data.attributes.slug}`}
href={`content/${content.attributes.content.data.attributes.slug}/listen/`}
>
Listen content
</Button>
@ -295,9 +315,10 @@ export default function Library(props: Props): JSX.Element {
""
)}
{content.attributes.video_set.data ? (
{content.attributes.content.data?.attributes.video_set
.length > 0 ? (
<Button
href={`/watch/${content.attributes.video_set.data.attributes.slug}`}
href={`content/${content.attributes.content.data.attributes.slug}/watch/`}
>
View content
</Button>
@ -305,10 +326,14 @@ export default function Library(props: Props): JSX.Element {
""
)}
{!content.attributes.scan_set.data &&
!content.attributes.text_set.data &&
!content.attributes.audio_set.data &&
!content.attributes.video_set.data
{content.attributes.scan_set.length === 0 &&
(!content.attributes.content.data ||
(content.attributes.content.data.attributes.text_set
.length === 0 &&
content.attributes.content.data.attributes.audio_set
.length === 0 &&
content.attributes.content.data.attributes.video_set
.length === 0))
? "The content is not available"
: ""}
</div>

13
src/queries/helpers.ts
View File

@ -20,10 +20,21 @@ export function prettyPrice(
pricePicker: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"]
): string {
return (
pricePicker.currency.data.attributes.symbol + pricePicker.amount.toLocaleString()
pricePicker.currency.data.attributes.symbol +
pricePicker.amount.toLocaleString()
);
}
export function prettySlug(slug: string, parentSlug?: string): string {
if (parentSlug && slug.startsWith(parentSlug))
slug = slug.substring(parentSlug.length + 1);
let words = slug.split("-");
words = words.map(
(word) => (word = word.charAt(0).toUpperCase() + word.substring(1))
);
return words.join(" ");
}
export function convertMmToInch(mm: number): string {
return (mm * 0.03937008).toPrecision(3);
}