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

Changed the graphql connection for the new cms

This commit is contained in:
DrMint 2021-12-23 23:20:47 +01:00
parent 69d86ecd6c
commit c6715a5c6a
10 changed files with 552 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
next.config.js
View File

@ -2,7 +2,10 @@
module.exports = { module.exports = {
reactStrictMode: true, reactStrictMode: true,
i18n: { i18n: {
locales: ['en', 'fr', 'jp', 'pt-br', 'pt-pt'], locales: ['en', 'fr', 'ja', 'pt-br', 'pt-pt'],
defaultLocale: 'en', defaultLocale: 'en',
} },
images: {
domains: ['strapi.accords-library.com'],
},
} }

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

@ -1,49 +1,49 @@
import type { NextPage } from "next";
import { GetStaticProps } from "next"; import { GetStaticProps } from "next";
import ContentPanel from "components/Panels/ContentPanel"; import ContentPanel from "components/Panels/ContentPanel";
import SubPanel from "components/Panels/SubPanel"; import SubPanel from "components/Panels/SubPanel";
import ReturnButton from "components/Panels/ReturnButton"; import ReturnButton from "components/Panels/ReturnButton";
import NavOption from "components/Panels/NavOption"; import NavOption from "components/Panels/NavOption";
import { getChronologyEras, getChronologyItems } from "queries/queries"; import {
getChronologyItems,
getChronologyEras,
ChronologyItem,
ChronologyEra,
} from "queries/chronology/overview";
const ChronologyOverview: NextPage = (props) => { type Props = {
chronologyItems: ChronologyItem[];
chronologyEras: ChronologyEra[];
};
export default function ChronologyOverview(props: Props): JSX.Element {
return ( return (
<> <>
<SubPanel> <SubPanel>
<ReturnButton url="/chronology" title="Chronology" /> <ReturnButton url="/chronology" title="Chronology" />
<hr /> <hr />
{props.chronologyEras.map((era: any) => ( {console.log(props.chronologyEras)}
{props.chronologyEras.map((era: ChronologyEra) => (
<NavOption <NavOption
key={era.id} key={era.id}
url={"#" + era.slug} url={"#" + era.attributes.slug}
title={era.translations[0].title} title={era.attributes.title[0].title ? era.attributes.title[0].title : ''}
subtitle={era.starting_year + " → " + era.ending_year} subtitle={era.attributes.starting_year + " → " + era.attributes.ending_year}
border={true} border={true}
/> />
))} ))}
</SubPanel> </SubPanel>
<ContentPanel>
{props.chronologyItems.map((item: any) => (
<div key={item.id}>
{item.year} - {" "}
{item.translations[0].title}
</div>
))}
</ContentPanel>
</> </>
); );
}; }
export default ChronologyOverview;
export const getStaticProps: GetStaticProps = async (context) => { export const getStaticProps: GetStaticProps = async (context) => {
return { return {
props: { props: {
chronologyItems: await getChronologyItems(context.locale), /*chronologyItems: await getChronologyItems(context.locale),*/
chronologyEras: await getChronologyEras(context.locale), chronologyEras: await getChronologyEras(context.locale),
}, },
}; };

16
src/pages/library.tsx
View File

@ -1,16 +0,0 @@
import type { NextPage } from "next";
import Head from "next/head";
const Home: NextPage = () => {
return (
<>
<Head>
<title>Library</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.png" />
</Head>
</>
);
};
export default Home;

88
src/pages/library/[...slug].tsx Normal file
View File

@ -0,0 +1,88 @@
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,
LibraryItem,
Subitem,
} from "queries/library/[...slug]";
import Image from "next/image";
import Link from "next/link";
type Props = {
libraryItem: LibraryItem;
};
export default function Library(props: Props): JSX.Element {
const router = useRouter();
return (
<>
<ContentPanel>
<h1>{props.libraryItem.title}</h1>
<h2>{props.libraryItem.subtitle}</h2>
<Image
src={getAssetURL(props.libraryItem.thumbnail.id)}
alt={props.libraryItem.thumbnail.title}
width={props.libraryItem.thumbnail.width}
height={props.libraryItem.thumbnail.height}
/>
{props.libraryItem.subitems.map((subitem: Subitem) => (
<Link
href={router.asPath + "/" + subitem.subitem_id.slug}
key={subitem.subitem_id.id}
passHref
>
<div>
{subitem.subitem_id.thumbnail ? (
<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}
/>
) : (
""
)}
</div>
</Link>
))}
</ContentPanel>
</>
);
}
export async function getStaticProps({ params }) {
return {
props: {
libraryItem: await getLibraryItem(params.slug),
},
};
}
export async function getStaticPaths() {
const paths = await getAllSlugs();
/*
paths.map((item) => {
console.log(item.params.slug);
});
*/
return {
paths,
fallback: false,
};
}
async function getAllSlugs() {
return (await getRecursiveSlugs()).map((item) => {
return {
params: {
slug: item,
},
};
});
}

72
src/pages/library/index.tsx Normal file
View File

@ -0,0 +1,72 @@
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 Image from "next/image";
import Link from "next/link";
type Props = {
libraryItems: LibraryItem[];
};
export default function Library(props: Props): JSX.Element {
return (
<>
<SubPanel>
<h2>Library</h2>
<p>
A comprehensive list of all Yokoverse’s side materials (books,
novellas, artbooks, stage plays, manga, drama CDs, and comics). For
each, we provide photos and/or scans of the content, information about
what it is, when and how it was released, size, initial price…
</p>
<hr />
</SubPanel>
<ContentPanel>
{props.libraryItems.map((item: LibraryItem) => (
<Link href={"/library/" + item.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)}
</p>
<p>{item.release_date}</p>
{item.thumbnail ? (
<Image
src={getAssetURL(item.thumbnail.id)}
alt={item.thumbnail.title}
width={item.thumbnail.width}
height={item.thumbnail.height}
/>
) : (
""
)}
</div>
</Link>
))}
</ContentPanel>
</>
);
}
export const getStaticProps: GetStaticProps = async (context) => {
return {
props: {
libraryItems: await getLibraryItems(),
},
};
};
function prettyTitleSubtitle(title: string, subtitle: string): string {
let result = title;
if (subtitle !== null) result += " - " + subtitle;
return result;
}

75
src/queries/chronology/overview.ts Normal file
View File

@ -0,0 +1,75 @@
import { queryGraphQL } from "queries/helpers";
export type ChronologyItem = {
id: string;
year: number;
month: number;
day: number;
translations: ChronologyItemsTranslation[];
};
export type ChronologyItemsTranslation = {
title: string;
};
export async function getChronologyItems(
languages_code: String | undefined
): Promise<ChronologyItem[]> {
return (
await queryGraphQL(
`
{
chronology_items {
id
year
month
day
translations(filter: { languages_code: { code: { _eq: "` + languages_code + `" } } }) {
title
}
}
}
`
)
).chronology_items;
}
export type ChronologyEra = {
id: string;
attributes: ChronologyEraAttributes;
};
export type ChronologyEraAttributes = {
starting_year: number;
ending_year: number;
slug: string;
title: ChronologyEraTranslation[];
}
export type ChronologyEraTranslation = {
title: string;
};
export async function getChronologyEras(
language_code: String | undefined
): Promise<ChronologyEra[]> {
return (
await queryGraphQL(
`
{
chronologyEras {
data {
attributes {
starting_year
ending_year
title (filters: {language: {code: {eq: "` + language_code + `"}}}){
title
}
}
}
}
}
`
)
).chronologyEras.data;
}

49
src/queries/helpers.ts Normal file
View File

@ -0,0 +1,49 @@
/*
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",
body: JSON.stringify({
query: query,
}),
headers: {
"content-type": "application/json",
Authorization: "Bearer " + process.env.ACCESS_TOKEN,
},
});
return (await res.json()).data;
};
export const queryGraphQLSystem = async (query: string) => {
const res = await fetch(
process.env.URL_GRAPHQL_SYSTEM +
"?access_token=" +
process.env.ACCESS_TOKEN +
"&query=" +
query
);
return (await res.json()).data;
};
export type AssetImage = {
id: string;
title: string;
width: number;
height: number;
};
export function getAssetURL(id: string): string {
return "https://cms.accords-library.com/assets/" + id;
}

170
src/queries/library/[...slug].ts Normal file
View File

@ -0,0 +1,170 @@
import { queryGraphQL, AssetImage } from "queries/helpers";
export type LibraryItem = {
title: string;
subtitle: string;
slug: string;
thumbnail: AssetImage;
subitems: Subitem[];
};
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[]) {
return (
await queryGraphQL(
`
{
compendium_items(filter: {_and: [` + getFilterForItem(slug) + `]}) {
title
subtitle
slug
thumbnail {
id
title
width
height
}
subitems {
subitem_id {
id
title
subtitle
slug
thumbnail {
id
title
width
height
}
}
}
}
}
`
)
).compendium_items[0];
}
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
);
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) + `]}) {
slug
}
}
`
)
).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;
}
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;
};

72
src/queries/library/index.ts Normal file
View File

@ -0,0 +1,72 @@
import { queryGraphQL, AssetImage } 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";
};
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(
`
{
compendium_items(
filter: { _and: [{ not_sold_separately: { _eq: false } }] }
sort: "title"
) {
id
subitem_of {
item_id {
title
subtitle
virtual_set
}
}
title
subtitle
slug
thumbnail {
id
title
width
height
}
release_date
type
}
}
`
)
).compendium_items);
}
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;
}

49
src/queries/queries.ts
View File

@ -1,49 +0,0 @@
export async function getChronologyItems(languages_code: String | undefined) {
return (
await queryCMS(
`
{
chronology_items {
id
year
month
day
translations(filter: { languages_code: { code: { _eq: "` + languages_code + `" } } }) {
title
}
}
}
`
)
).chronology_items;
}
export async function getChronologyEras(languages_code: String | undefined) {
return (
await queryCMS(
`
{
chronology_eras(sort: "starting_year") {
id
starting_year
ending_year
translations(filter: { languages_code: { code: { _eq: "` + languages_code + `" } } }) {
title
}
}
}
`
)
).chronology_eras;
}
export const queryCMS = async (query: String) => {
const res = await fetch(
process.env.GRAPHQL +
"?access_token=" +
process.env.ACCESS_TOKEN +
"&query=" +
query
);
return (await res.json()).data;
};