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

Library items are working again

Browse Source
This commit is contained in:
DrMint 2021-12-31 17:20:39 +01:00
parent 99ffb1ccc7
commit 177b9c7927
11 changed files with 377 additions and 376 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
next.config.js
View File

@ -2,7 +2,7 @@
module.exports = {
reactStrictMode: true,
i18n: {
locales: ['en', 'fr', 'ja', 'pt-br', 'pt-pt'],
locales: ['en', 'fr', 'ja', 'es'],
defaultLocale: 'en',
},
images: {

51
src/components/Chronology/ChronologyItem.tsx
View File

@ -1,51 +0,0 @@
import styles from "styles/Chronology/ChronologyItemDisplay.module.css";
import {
ChronologyItem,
ChronologyItemsEvent,
} from "queries/chronology/overview";
export default function ChronologyItemDisplay(pageProps: ChronologyItem) {
function generateAnchor(year: number, month: number, day:number, event?: number): string {
let result: string = "";
result += year;
if (month) result += '-' + month;
if (day) result += '-' + day;
return result;
}
function generateDate(displayed_date: string, year: number, month: number, day:number) {
let result: string = "";
if (displayed_date) {
result += displayed_date;
} else {
result += year;
}
if (month) result += '/' + month;
if (day) result += '/' + day;
return result;
}
return (
<div id={generateAnchor(item.attributes.year, item.attributes.month, item.attributes.day)}>
<h2>{generateDate(item.attributes.displayed_date, item.attributes.year, item.attributes.month, item.attributes.day)}</h2>
{item.attributes.events.map((event: ChronologyItemsEvent) => (
<div key={"chronoEvent" + event.id}>
<h3>
{event.translations.length ? event.translations[0].title : ""}
</h3>
<p>
{event.translations.length
? event.translations[0].description
: ""}
<em> {event.translations.length ? event.translations[0].note : ""}</em>
</p>
<p>
<em>{event.source.data ? event.source.data.attributes.name : ""}</em>
</p>
</div>
))}
</div>
);
}

14
src/components/Chronology/ChronologyItemComponent.tsx
View File

@ -2,7 +2,6 @@ import styles from "styles/Chronology/ChronologyItemComponent.module.css";
import {
ChronologyItem,
ChronologyItemsEvent,
ChronologyItemsEventTranslation,
} from "queries/chronology/overview";
export type ChronologyItemComponentProps = {
@ -54,7 +53,7 @@ export default function ChronologyItemComponent(
if (month) {
result += lut[month - 1];
if (day) {
result += " " + day.toString().padStart(2, "0");
result += " " + day;
}
}
@ -89,7 +88,7 @@ export default function ChronologyItemComponent(
{props.item.attributes.events.map((event: ChronologyItemsEvent) => (
<div className={styles.event} key={event.id}>
{event.translations.map(
(translation: ChronologyItemsEventTranslation) => (
(translation) => (
<>
{translation.title ? <h3>{translation.title}</h3> : ""}
@ -100,12 +99,15 @@ export default function ChronologyItemComponent(
}
>
{translation.description}
</p>
) : (
""
)}
{translation.note ? <em>{"Notes: " + translation.note}</em> : ""}
{translation.note ? (
<em>{"Notes: " + translation.note}</em>
) : (
""
)}
</>
)
)}
@ -113,7 +115,7 @@ export default function ChronologyItemComponent(
<p className={styles.source}>
{event.source.data
? "(" + event.source.data.attributes.name + ")"
: ""}
: "(WARNING: NO SOURCE!)"}
</p>
</div>
))}

23
src/components/Chronology/ChronologyYearComponent.tsx
View File

@ -1,21 +1,28 @@
import styles from "styles/Chronology/ChronologyYearComponent.module.css";
import {
ChronologyItem
} from "queries/chronology/overview";
import { ChronologyItem } from "queries/chronology/overview";
import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent";
type ChronologyYearComponentProps = {
items: ChronologyItem[];
}
items: ChronologyItem[];
};
export default function ChronologyYearComponent(props: ChronologyYearComponentProps) {
export default function ChronologyYearComponent(
props: ChronologyYearComponentProps
) {
return (
<div className={styles.chronologyYear} id={props.items.length > 1 ? props.items[0].attributes.year.toString() : undefined}>
<div
className={styles.chronologyYear}
id={
props.items.length > 1
? props.items[0].attributes.year.toString()
: undefined
}
>
{props.items.map((item: ChronologyItem, index: number) => (
<ChronologyItemComponent
key={index}
item={item}
displayYear={index===0}
displayYear={index === 0}
/>
))}
</div>

7
src/pages/chronology/overview.tsx
View File

@ -3,7 +3,6 @@ import ContentPanel from "components/Panels/ContentPanel";
import SubPanel from "components/Panels/SubPanel";
import ReturnButton from "components/Panels/ReturnButton";
import NavOption from "components/Panels/NavOption";
import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent";
import ChronologyYearComponent from "components/Chronology/ChronologyYearComponent";
import {
getChronologyItems,
@ -20,12 +19,8 @@ type Props = {
export default function ChronologyOverview(props: Props): JSX.Element {
let previousYear = -1;
let chronologyItemYearGroups: ChronologyItem[][] = [];
// Group by year the Chronology items
let chronologyItemYearGroups: ChronologyItem[][] = [];
props.chronologyItems.map((item: ChronologyItem) => {
if (!chronologyItemYearGroups.hasOwnProperty(item.attributes.year)) {
chronologyItemYearGroups[item.attributes.year] = [item];

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

@ -1,15 +1,16 @@
import { useRouter } from "next/router";
import SubPanel from "components/Panels/SubPanel";
import ContentPanel from "components/Panels/ContentPanel";
import { getAssetURL } from "queries/helpers";
import {
getLibraryItem,
getRecursiveSlugs,
getBreadcrumbs,
getLibraryItemsSkeleton,
LibraryItem,
Subitem,
LibrarySubItem
} from "queries/library/[...slug]";
import Image from "next/image";
import Link from "next/link";
import { GetStaticProps } from "next";
type Props = {
libraryItem: LibraryItem;
@ -20,28 +21,33 @@ export default function Library(props: Props): JSX.Element {
return (
<>
<ContentPanel>
<h1>{props.libraryItem.title}</h1>
<h2>{props.libraryItem.subtitle}</h2>
<h1>{props.libraryItem.attributes.title}</h1>
<h2>{props.libraryItem.attributes.subtitle}</h2>
<Image
src={getAssetURL(props.libraryItem.thumbnail.id)}
alt={props.libraryItem.thumbnail.title}
width={props.libraryItem.thumbnail.width}
height={props.libraryItem.thumbnail.height}
src={getAssetURL(
props.libraryItem.attributes.thumbnail.data.attributes.url
)}
alt={
props.libraryItem.attributes.thumbnail.data.attributes
.alternativeText
}
width={props.libraryItem.attributes.thumbnail.data.attributes.width}
height={props.libraryItem.attributes.thumbnail.data.attributes.height}
/>
{props.libraryItem.subitems.map((subitem: Subitem) => (
{props.libraryItem.attributes.subitems.data.map((subitem: LibrarySubItem) => (
<Link
href={router.asPath + "/" + subitem.subitem_id.slug}
key={subitem.subitem_id.id}
href={router.asPath + "/" + subitem.attributes.slug}
key={subitem.id}
passHref
>
<div>
{subitem.subitem_id.thumbnail ? (
{subitem.attributes.thumbnail.data ? (
<Image
src={getAssetURL(subitem.subitem_id.thumbnail.id)}
alt={subitem.subitem_id.thumbnail.title}
width={subitem.subitem_id.thumbnail.width}
height={subitem.subitem_id.thumbnail.height}
src={getAssetURL(subitem.attributes.thumbnail.data.attributes.url)}
alt={subitem.attributes.thumbnail.data.attributes.alternativeText}
width={subitem.attributes.thumbnail.data.attributes.width}
height={subitem.attributes.thumbnail.data.attributes.height}
/>
) : (
""
@ -49,27 +55,31 @@ export default function Library(props: Props): JSX.Element {
</div>
</Link>
))}
</ContentPanel>
</>
);
}
export async function getStaticProps({ params }) {
return {
props: {
libraryItem: await getLibraryItem(params.slug),
},
};
export const getStaticProps: GetStaticProps = async (context) => {
console.log(context.params);
if (context.params && Array.isArray(context.params.slug) && context.locale) {
return {
props: {
libraryItem: (await getLibraryItem(context.params.slug, context.locale)),
},
};
}
return {props: {}};
}
export async function getStaticPaths() {
const paths = await getAllSlugs();
const paths = (await getAllSlugs());
/*
paths.map((item) => {
console.log(item.params.slug);
});
*/
return {
paths,
@ -78,11 +88,19 @@ export async function getStaticPaths() {
}
async function getAllSlugs() {
return (await getRecursiveSlugs()).map((item) => {
return {
params: {
slug: item,
},
};
});
type Path = {
params: {
slug: string[];
}
}
const data = (await getLibraryItemsSkeleton());
const paths:Path[] = [];
data.map((item) => {
const breadcrumbs = getBreadcrumbs([], item);
breadcrumbs.map((breadcrumb) => {
paths.push({params: {slug: breadcrumb}})
})
})
return paths;
}

30
src/pages/library/index.tsx
View File

@ -2,7 +2,7 @@ import { GetStaticProps } from "next";
import SubPanel from "components/Panels/SubPanel";
import ContentPanel from "components/Panels/ContentPanel";
import { LibraryItem, getLibraryItems } from "queries/library/index";
import { getAssetURL } from "queries/helpers";
import { BasicDate, getAssetURL } from "queries/helpers";
import Image from "next/image";
import Link from "next/link";
@ -26,25 +26,19 @@ export default function Library(props: Props): JSX.Element {
<ContentPanel>
{props.libraryItems.map((item: LibraryItem) => (
<Link href={"/library/" + item.slug} key={item.id} passHref>
<Link href={"/library/" + item.attributes.slug} key={item.id} passHref>
<div>
<p>
{item.subitem_of.length > 0
? prettyTitleSubtitle(
item.subitem_of[0].item_id.title,
item.subitem_of[0].item_id.subtitle
) + " • "
: ""}
{prettyTitleSubtitle(item.title, item.subtitle)}
{prettyTitleSubtitle(item.attributes.title, item.attributes.subtitle)}
</p>
<p>{item.release_date}</p>
<p>{prettyDate(item.attributes.release_date)}</p>
{item.thumbnail ? (
{item.attributes.thumbnail.data ? (
<Image
src={getAssetURL(item.thumbnail.id)}
alt={item.thumbnail.title}
width={item.thumbnail.width}
height={item.thumbnail.height}
src={getAssetURL(item.attributes.thumbnail.data.attributes.url)}
alt={item.attributes.thumbnail.data.attributes.alternativeText}
width={item.attributes.thumbnail.data.attributes.width}
height={item.attributes.thumbnail.data.attributes.height}
/>
) : (
""
@ -60,7 +54,7 @@ export default function Library(props: Props): JSX.Element {
export const getStaticProps: GetStaticProps = async (context) => {
return {
props: {
libraryItems: await getLibraryItems(),
libraryItems: await getLibraryItems(context.locale),
},
};
};
@ -70,3 +64,7 @@ function prettyTitleSubtitle(title: string, subtitle: string): string {
if (subtitle !== null) result += " - " + subtitle;
return result;
}
function prettyDate(date: BasicDate): string {
return date.year + "/" + date.month + "/" + date.day;
}

51
src/queries/chronology/overview.ts
View File

@ -1,41 +1,30 @@
import { queryGraphQL } from "queries/helpers";
import { Source } from "queries/helpers";
export type ChronologyItem = {
id: string;
attributes: ChronologyItemAttributes;
attributes: {
year: number;
month: number;
day: number;
displayed_date: string;
events: ChronologyItemsEvent[];
};
};
export type ChronologyItemAttributes = {
year: number;
month: number;
day: number;
displayed_date: string;
events: ChronologyItemsEvent[];
}
export type ChronologyItemsEvent = {
id: string;
source: Source
translations: ChronologyItemsEventTranslation[];
source: Source;
translations: {
title: string;
description: string;
note: string;
status: string;
}[];
};
export type ChronologyItemsEventTranslation = {
title: string;
description: string;
note: string;
status: string;
}
export type Source = {
data: {
attributes: {
name: string;
}
}
}
export async function getChronologyItems(
language_code: String | undefined
language_code: string | undefined
): Promise<ChronologyItem[]> {
return (
await queryGraphQL(
@ -58,7 +47,7 @@ export async function getChronologyItems(
}
}
}
translations(filters: { language: { code: { eq: "` + language_code + `" } } }) {
translations(filters: { language: { code: { eq: "${language_code}" } } }) {
title
description
note
@ -84,14 +73,14 @@ export type ChronologyEraAttributes = {
starting_year: number;
ending_year: number;
title: ChronologyEraTranslation[];
}
};
export type ChronologyEraTranslation = {
title: string;
};
export async function getChronologyEras(
language_code: String | undefined
language_code: string | undefined
): Promise<ChronologyEra[]> {
return (
await queryGraphQL(
@ -104,7 +93,7 @@ export async function getChronologyEras(
slug
starting_year
ending_year
title (filters: {language: {code: {eq: "` + language_code + `"}}}){
title (filters: {language: {code: {eq: "${language_code}"}}}){
title
}
}

70
src/queries/helpers.ts
View File

@ -1,16 +1,3 @@
/*
export const queryGraphQL = async (query: string) => {
const res = await fetch(
process.env.URL_GRAPHQL +
"?access_token=" +
process.env.ACCESS_TOKEN +
"&query=" +
query
);
return (await res.json()).data;
};
*/
export const queryGraphQL = async (query: String) => {
const res = await fetch(process.env.URL_GRAPHQL, {
method: "POST",
@ -25,7 +12,6 @@ export const queryGraphQL = async (query: String) => {
return (await res.json()).data;
};
export const queryGraphQLSystem = async (query: string) => {
const res = await fetch(
process.env.URL_GRAPHQL_SYSTEM +
@ -37,13 +23,53 @@ export const queryGraphQLSystem = async (query: string) => {
return (await res.json()).data;
};
export type AssetImage = {
id: string;
title: string;
width: number;
height: number;
export function getAssetURL(url: string): string {
return process.env.NEXT_PUBLIC_URL_CMS + url;
}
export type Source = {
data: {
attributes: {
name: string;
};
};
};
export function getAssetURL(id: string): string {
return "https://cms.accords-library.com/assets/" + id;
}
export type UploadImage = {
data: {
attributes: {
name: string;
alternativeText: string;
caption: string;
width: number;
height: number;
url: string;
};
};
};
export type BasicPrice = {
amount: number;
currency: BasicCurrency;
};
export type BasicCurrency = {
data: {
attributes: {
symbol: string;
code: string;
};
};
};
export type BasicSize = {
width: number;
height: number;
thickness: number;
};
export type BasicDate = {
year: number;
month: number;
day: number;
};

303
src/queries/library/[...slug].ts
View File

@ -1,51 +1,45 @@
import { queryGraphQL, AssetImage } from "queries/helpers";
import { BasicDate, BasicPrice, BasicSize, queryGraphQL, UploadImage } from "queries/helpers";
export type LibraryItem = {
title: string;
subtitle: string;
slug: string;
thumbnail: AssetImage;
subitems: Subitem[];
export type LibraryItemSkeleton = {
attributes: {
slug: string;
subitems: {
data: LibraryItemSkeleton[];
};
};
};
export type Subitem = {
subitem_id: LibrarySubitem;
};
export type LibrarySubitem = {
id: string;
title: string;
subtitle: string;
slug: string;
thumbnail: AssetImage;
};
export async function getLibraryItem(slug: string[]) {
export async function getLibraryItemsSkeleton(): Promise<
LibraryItemSkeleton[]
> {
return (
await queryGraphQL(
`
{
compendium_items(filter: {_and: [` + getFilterForItem(slug) + `]}) {
title
subtitle
slug
thumbnail {
id
title
width
height
}
subitems {
subitem_id {
id
title
subtitle
libraryItems(filters: { root_item: { eq: true } }) {
data {
attributes {
slug
thumbnail {
id
title
width
height
subitems {
data {
attributes {
slug
subitems {
data {
attributes {
slug
subitems {
data {
attributes {
slug
}
}
}
}
}
}
}
}
}
}
}
@ -53,118 +47,133 @@ export async function getLibraryItem(slug: string[]) {
}
`
)
).compendium_items[0];
).libraryItems.data;
}
export async function getRecursiveSlugs() {
const yetToExploreSlugs = level0Filtering(
(
await queryGraphQL(
`
{
compendium_items(
filter: { _and: [{ not_sold_separately: { _eq: false } }] }
) {
subitem_of {
item_id {
virtual_set
}
}
slug
}
}
`
)
).compendium_items
);
export function getBreadcrumbs(
parentBreadcrumb: string[],
data: LibraryItemSkeleton
) {
const result: string[][] = [];
while (yetToExploreSlugs.length > 0) {
const slug = yetToExploreSlugs.pop();
if (slug !== undefined) {
const subitems = levelnFiltering((await queryGraphQL(
`
{
compendium_items(filter: {_and: [` + getFilterForSubitemsOf(slug) + `]}) {
const itemBreadcrumb = [...parentBreadcrumb, data.attributes.slug];
result.push(itemBreadcrumb);
data.attributes.subitems.data.map((subitem) => {
result.push(...getBreadcrumbs(itemBreadcrumb, subitem));
});
return result;
}
export type LibraryItem = {
id: string;
attributes: {
title: string;
subtitle: string;
slug: string;
thumbnail: UploadImage;
release_date: BasicDate;
price: BasicPrice;
size: BasicSize;
description: {
description: string;
};
subitems: {
data: LibrarySubItem[];
};
};
};
export type LibrarySubItem = {
id: string;
attributes: {
title: string;
subtitle: string;
slug: string;
thumbnail: UploadImage;
}
}
export async function getLibraryItem(
slug: string[],
language_code: string | undefined
): Promise<LibraryItem> {
return (
await queryGraphQL(
`
{
libraryItems(
filters: {slug: {eq: "${slug.pop()}"}}
) {
data {
id
attributes {
title
subtitle
slug
thumbnail {
data {
attributes {
name
alternativeText
caption
width
height
url
}
}
}
release_date {
year
month
day
}
price {
amount
currency {
data {
attributes {
symbol
code
}
}
}
}
size {
width
height
thickness
}
descriptions(filters: { language: { code: { eq: "${language_code}" } } }) {
description
}
subitems {
data {
id
attributes {
slug
title
subtitle
thumbnail {
data {
attributes {
name
alternativeText
caption
width
height
url
}
}
}
}
}
}
}
}
`
)
).compendium_items
);
result.push(slug);
subitems.map((subitemSlug) => {
const newSlug = [...slug];
newSlug.push(subitemSlug);
yetToExploreSlugs.push(newSlug);
});
}
}
return result;
}
export function getFilterForSubitemsOf(slug: string[]) {
let filter = "";
slug.map((segment, index) => {
const depth = slug.length - index;
filter += "{ subitem_of: { item_id: ".repeat(depth);
filter += '{ slug: { _eq: "' + segment + '" } } ';
filter += "} } ".repeat(depth);
filter += ",";
});
return filter;
}
export function getFilterForItem(slug: string[]) {
let filter = "";
slug.map((segment, index) => {
const depth = slug.length - index - 1;
filter += "{ subitem_of: { item_id: ".repeat(depth);
filter += '{ slug: { _eq: "' + segment + '" } } ';
filter += "} } ".repeat(depth);
filter += ",";
});
return filter;
}
function level0Filtering(data: SlugLvl0[]): string[][] {
// Remove element if their parent item is a virtual_set
let result: string[][] = [];
data.map((item: SlugLvl0) => {
if (item.subitem_of.length > 0) {
if (item.subitem_of[0].item_id.virtual_set === false) {
result.push([item.slug]);
}
}
} else {
result.push([item.slug]);
}
});
return result;
`
)
).libraryItems.data[0];
}
function levelnFiltering(data: SlugLvln[]): string[] {
let result: string[] = [];
data.map((item: SlugLvln) => {
result.push(item.slug);
});
return result;
}
type SlugLvl0 = {
subitem_of: SlugLvl0Subitem_of[];
slug: string;
};
type SlugLvl0Subitem_of = {
item_id: SlugLvl0Subitem;
};
type SlugLvl0Subitem = {
virtual_set: boolean;
};
type SlugLvln = {
slug: string;
};

118
src/queries/library/index.ts
View File

@ -1,72 +1,80 @@
import { queryGraphQL, AssetImage } from "queries/helpers";
import { UploadImage, queryGraphQL, BasicPrice, BasicDate, BasicSize } from "queries/helpers";
export type LibraryItem = {
id: string;
subitem_of: Subitem_of[];
title: string;
subtitle: string;
slug: string;
thumbnail: AssetImage;
release_date: string;
type: "Text" | "Video" | "Games" | "Soundtrack" | "Audiobooks" | "Other";
attributes: {
title: string;
subtitle: string;
slug: string;
thumbnail: UploadImage;
release_date: BasicDate;
price: BasicPrice;
size: BasicSize;
description: {
description: string;
};
};
};
export type Subitem_of = {
item_id: LibrarySubitem;
};
export type LibrarySubitem = {
title: string;
subtitle: string;
virtual_set: boolean;
};
export async function getLibraryItems() {
return filterGetLibraryItems((await queryGraphQL(
export async function getLibraryItems(
language_code: string | undefined
): Promise<LibraryItem[]> {
return (
await queryGraphQL(
`
{
compendium_items(
filter: { _and: [{ not_sold_separately: { _eq: false } }] }
sort: "title"
libraryItems(
filters: { root_item: { eq: true } }
pagination: { limit: -1 }
sort: ["slug:asc"]
) {
id
subitem_of {
item_id {
data {
id
attributes {
title
subtitle
virtual_set
slug
thumbnail {
data {
attributes {
name
alternativeText
caption
width
height
url
}
}
}
release_date {
year
month
day
}
price {
amount
currency {
data {
attributes {
symbol
code
}
}
}
}
size {
width
height
thickness
}
descriptions(filters: { language: { code: { eq: "${language_code}" } } }) {
description
}
}
}
title
subtitle
slug
thumbnail {
id
title
width
height
}
release_date
type
}
}
`
)
).compendium_items);
).libraryItems.data;
}
function filterGetLibraryItems(data: LibraryItem[]): LibraryItem[] {
// Remove element if their parent item is a virtual_set
let result: LibraryItem[] = [];
data.map((item: LibraryItem) => {
if (item.subitem_of.length > 0) {
if (item.subitem_of[0].item_id.virtual_set === false) {
result.push(item);
}
} else {
result.push(item);
}
});
return result;
}