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

Simplified the GraphQL Query system

This commit is contained in:
DrMint 2022-01-02 05:39:54 +01:00
parent 702dc74ab6
commit 8e077d2c6f
12 changed files with 588 additions and 4305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,8 @@
import { ChronologyItemEntity, Maybe } from "graphql/operations-types";
import { GetChronologyItemsQuery } from "graphql/operations-types";
import styles from "styles/Chronology/ChronologyItemComponent.module.css";
export type ChronologyItemComponentProps = {
item: ChronologyItemEntity;
item: GetChronologyItemsQuery['chronologyItems']['data'][number];
displayYear: boolean;
};
@ -11,8 +11,9 @@ export default function ChronologyItemComponent(
): JSX.Element {
function generateAnchor(
year: number,
month: Maybe<number> | undefined,
day: Maybe<number> | undefined
month: number,
day: number,
event?: number
): string {
let result: string = "";
result += year;
@ -21,10 +22,7 @@ export default function ChronologyItemComponent(
return result;
}
function generateYear(
displayed_date: Maybe<string> | undefined,
year: number
): string {
function generateYear(displayed_date: string, year: number): string {
if (displayed_date) {
return displayed_date;
} else {
@ -32,10 +30,7 @@ export default function ChronologyItemComponent(
}
}
function generateDate(
month: Maybe<number> | undefined,
day: Maybe<number> | undefined
): string {
function generateDate(month: number, day: number): string {
let lut = [
"Jan",
"Feb",
@ -62,7 +57,6 @@ export default function ChronologyItemComponent(
return result;
}
if (props.item && props.item.attributes) {
return (
<div
className={styles.chronologyItem}
@ -88,27 +82,16 @@ export default function ChronologyItemComponent(
</p>
<div className={styles.events}>
{props.item.attributes.events?.map((event) => {
if (event) {
return (
{props.item.attributes.events.map((event) => (
<div className={styles.event} key={event.id}>
{event.translations?.map((translation) => {
if (translation)
return (
{event.translations.map((translation) => (
<>
{translation.title ? (
<h3>{translation.title}</h3>
) : (
""
)}
{translation.title ? <h3>{translation.title}</h3> : ""}
{translation.description ? (
<p
className={
event.translations &&
event.translations.length > 1
? styles.bulletItem
: ""
event.translations.length > 1 ? styles.bulletItem : ""
}
>
{translation.description}
@ -122,24 +105,16 @@ export default function ChronologyItemComponent(
""
)}
</>
);
})}
))}
<p className={styles.source}>
{event.source &&
event.source.data &&
event.source.data.attributes
{event.source.data
? "(" + event.source.data.attributes.name + ")"
: "(WARNING: NO SOURCE!)"}
</p>
</div>
);
}
})}
))}
</div>
</div>
);
} else {
return <></>;
}
}

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

@ -1,10 +1,10 @@
import styles from "styles/Chronology/ChronologyYearComponent.module.css";
import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent";
import { ChronologyItemEntity } from "graphql/operations-types";
import { GetChronologyItemsQuery } from "graphql/operations-types";
type ChronologyYearComponentProps = {
year: number;
items: ChronologyItemEntity[];
items: GetChronologyItemsQuery["chronologyItems"]["data"][number][];
};
export default function ChronologyYearComponent(
@ -15,7 +15,7 @@ export default function ChronologyYearComponent(
className={styles.chronologyYear}
id={props.items.length > 1 ? props.year.toString() : undefined}
>
{props.items.map((item: ChronologyItemEntity, index: number) => (
{props.items.map((item, index) => (
<ChronologyItemComponent
key={index}
item={item}

10
src/components/Library/LibraryItemComponent.tsx
View File

@ -1,11 +1,11 @@
import styles from "styles/Library/LibraryItemComponent.module.css";
import Link from "next/link";
import Image from "next/image";
import { BasicDate, getAssetURL } from "queries/helpers";
import { LibraryItemEntity } from "graphql/operations-types";
import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
import { getAssetURL } from "queries/helpers";
export type LibraryItemComponentProps = {
item: LibraryItemEntity;
item: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number];
};
export default function LibraryItemComponent(
@ -17,7 +17,9 @@ export default function LibraryItemComponent(
return result;
}
function prettyDate(date: BasicDate): string {
function prettyDate(
date: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"]
): string {
return (
date.year +
"/" +

102
src/graphql/operation.graphql
View File

@ -101,3 +101,105 @@ query getLibraryItemsPreview($language_code: String) {
}
}
}
query getLibraryItemsSkeleton {
libraryItems(filters: { root_item: { eq: true } }) {
data {
attributes {
slug
subitems {
data {
attributes {
slug
subitems {
data {
attributes {
slug
subitems {
data {
attributes {
slug
}
}
}
}
}
}
}
}
}
}
}
}
}
query getLibraryItem($slug: String, $language_code: String) {
libraryItems(filters: { slug: { eq: $slug } }) {
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
}
}
}
}
}
}
}
}
}
}

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

File diff suppressed because it is too large Load Diff

24
src/graphql/operations.ts
View File

@ -3,12 +3,16 @@ import {
GetChronologyItemsQueryVariables,
GetErasQuery,
GetErasQueryVariables,
GetLibraryItemQuery,
GetLibraryItemQueryVariables,
GetLibraryItemsPreviewQuery,
GetLibraryItemsPreviewQueryVariables,
GetLibraryItemsSkeletonQuery,
GetLibraryItemsSkeletonQueryVariables,
} from "graphql/operations-types";
const graphQL = async (query: string, variables?: string) => {
const res = await fetch(process.env.URL_GRAPHQL, {
const res = await fetch(`${process.env.URL_GRAPHQL}`, {
method: "POST",
body: JSON.stringify({
query: query,
@ -33,7 +37,8 @@ function getQueryFromOperations(queryName: string): string {
const lines = operations.split("\n");
lines.map((line, index) => {
if (startingIndex === -1) {
if (line.startsWith(`query ${queryName}`)) startingIndex = index;
if (line.startsWith(`query ${queryName}(`)) startingIndex = index;
if (line.startsWith(`query ${queryName} {`)) startingIndex = index;
} else if (endingIndex === -1) {
if (line.startsWith("query")) endingIndex = index;
}
@ -61,3 +66,18 @@ export async function getLibraryItemsPreview(
const query = getQueryFromOperations("getLibraryItemsPreview");
return await graphQL(query, JSON.stringify(variables));
}
export async function getLibraryItemsSkeleton(
variables: GetLibraryItemsSkeletonQueryVariables
): Promise<GetLibraryItemsSkeletonQuery> {
const query = getQueryFromOperations("getLibraryItemsSkeleton");
return await graphQL(query, JSON.stringify(variables));
}
export async function getLibraryItem(
variables: GetLibraryItemQueryVariables
): Promise<GetLibraryItemQuery> {
const query = getQueryFromOperations("getLibraryItem");
return await graphQL(query, JSON.stringify(variables));
}

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

@ -6,7 +6,6 @@ import NavOption from "components/Panels/NavOption";
import ChronologyYearComponent from "components/Chronology/ChronologyYearComponent";
import { applyCustomAppProps } from "pages/_app";
import {
ChronologyItemEntity,
GetChronologyItemsQuery,
GetErasQuery,
} from "graphql/operations-types";
@ -25,17 +24,16 @@ applyCustomAppProps(ChronologyOverview, {
export default function ChronologyOverview(props: Props): JSX.Element {
// Group by year the Chronology items
let chronologyItemYearGroups: ChronologyItemEntity[][] = [];
let chronologyItemYearGroups: GetChronologyItemsQuery["chronologyItems"]["data"][number][][] =
[];
if (props.chronologyItems.chronologyItems) {
props.chronologyItems.chronologyItems.data.map((item) => {
if (item && item.attributes) {
if (!chronologyItemYearGroups.hasOwnProperty(item.attributes.year)) {
chronologyItemYearGroups[item.attributes.year] = [item];
} else {
chronologyItemYearGroups[item.attributes.year].push(item);
}
}
});
}
@ -45,40 +43,26 @@ export default function ChronologyOverview(props: Props): JSX.Element {
<ReturnButton url="/chronology" title="Chronology" />
<hr />
{props.chronologyEras.chronologyEras
? props.chronologyEras.chronologyEras.data.map((era) => (
<>
{era.attributes && era.attributes.title ? (
{props.chronologyEras.chronologyEras.data.map((era) => (
<NavOption
key={era.id}
url={"#" + era.attributes.slug}
title={
era.attributes.title[0]
? era.attributes.title[0].title
: ""
}
title={era.attributes.title[0] ? era.attributes.title[0].title : ""}
subtitle={
era.attributes.starting_year +
" → " +
era.attributes.ending_year
era.attributes.starting_year + " → " + era.attributes.ending_year
}
border={true}
/>
) : (
""
)}
</>
))
: ""}
))}
</SubPanel>
<ContentPanel>
{chronologyItemYearGroups.map((items, index: number) => {
if (items && items[0].attributes?.year) {
if (items && items[0].attributes.year) {
return (
<ChronologyYearComponent
key={index}
year={items[0].attributes?.year}
year={items[0].attributes.year}
items={items}
/>
);
@ -90,6 +74,7 @@ export default function ChronologyOverview(props: Props): JSX.Element {
}
export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale)
return {
props: {
chronologyItems: await getChronologyItems({
@ -98,4 +83,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
chronologyEras: await getEras({ language_code: context.locale }),
},
};
else {
return { props: {} };
}
};

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

@ -1,20 +1,18 @@
import { useRouter } from "next/router";
import ContentPanel from "components/Panels/ContentPanel";
import { getAssetURL } from "queries/helpers";
import {
getLibraryItem,
getBreadcrumbs,
getLibraryItemsSkeleton,
LibraryItem,
LibrarySubItem,
} from "queries/library/[...slug]";
import Image from "next/image";
import Link from "next/link";
import { GetStaticProps } from "next";
import { GetStaticPaths, GetStaticProps } from "next";
import { applyCustomAppProps } from "pages/_app";
import {
getLibraryItem,
getLibraryItemsSkeleton,
} from "graphql/operations";
import { GetLibraryItemQuery } from "graphql/operations-types";
import { getAssetURL } from "queries/helpers";
type Props = {
libraryItem: LibraryItem;
libraryItem: GetLibraryItemQuery;
};
applyCustomAppProps(Library, {
@ -24,25 +22,22 @@ applyCustomAppProps(Library, {
export default function Library(props: Props): JSX.Element {
const router = useRouter();
const libraryItem = props.libraryItem.libraryItems.data[0];
return (
<>
<ContentPanel>
<h1>{props.libraryItem.attributes.title}</h1>
<h2>{props.libraryItem.attributes.subtitle}</h2>
<h1>{libraryItem.attributes.title}</h1>
<h2>{libraryItem.attributes.subtitle}</h2>
<Image
src={getAssetURL(
props.libraryItem.attributes.thumbnail.data.attributes.url
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}
alt={libraryItem.attributes.thumbnail.data.attributes.alternativeText}
width={libraryItem.attributes.thumbnail.data.attributes.width}
height={libraryItem.attributes.thumbnail.data.attributes.height}
/>
{props.libraryItem.attributes.subitems.data.map(
(subitem: LibrarySubItem) => (
{libraryItem.attributes.subitems.data.map((subitem) => (
<Link
href={router.asPath + "/" + subitem.attributes.slug}
key={subitem.id}
@ -55,8 +50,7 @@ export default function Library(props: Props): JSX.Element {
subitem.attributes.thumbnail.data.attributes.url
)}
alt={
subitem.attributes.thumbnail.data.attributes
.alternativeText
subitem.attributes.thumbnail.data.attributes.alternativeText
}
width={subitem.attributes.thumbnail.data.attributes.width}
height={subitem.attributes.thumbnail.data.attributes.height}
@ -66,25 +60,31 @@ export default function Library(props: Props): JSX.Element {
)}
</div>
</Link>
)
)}
))}
</ContentPanel>
</>
);
}
export const getStaticProps: GetStaticProps = async (context) => {
if (context.params && Array.isArray(context.params.slug) && context.locale) {
if (context.params && Array.isArray(context.params.slug)) {
const slug = context.params.slug.pop();
if (slug && context.locale) {
return {
props: {
libraryItem: await getLibraryItem(context.params.slug, context.locale),
libraryItem: await getLibraryItem({
slug: slug,
language_code: context.locale,
}),
},
};
}
}
return { props: {} };
};
export async function getStaticPaths() {
export const getStaticPaths: GetStaticPaths = async () => {
const paths = await getAllSlugs();
return {
paths,
@ -99,9 +99,10 @@ async function getAllSlugs() {
};
};
const data = await getLibraryItemsSkeleton();
const data = await getLibraryItemsSkeleton({});
console.log(data);
const paths: Path[] = [];
data.map((item) => {
data.libraryItems.data.map((item) => {
const breadcrumbs = getBreadcrumbs([], item);
breadcrumbs.map((breadcrumb) => {
paths.push({ params: { slug: breadcrumb } });
@ -109,3 +110,22 @@ async function getAllSlugs() {
});
return paths;
}
export type LibraryItemSkeleton = {
attributes: {
slug: string;
subitems: {
data: LibraryItemSkeleton[];
};
};
};
function getBreadcrumbs(parentBreadcrumb: string[], data: LibraryItemSkeleton) {
const result: string[][] = [];
const itemBreadcrumb = [...parentBreadcrumb, data.attributes.slug];
result.push(itemBreadcrumb);
data.attributes.subitems.data.map((subitem) => {
result.push(...getBreadcrumbs(itemBreadcrumb, subitem));
});
return result;
}

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

@ -16,7 +16,6 @@ applyCustomAppProps(Library, {
});
export default function Library(props: Props): JSX.Element {
console.log(props);
return (
<>
@ -32,7 +31,7 @@ export default function Library(props: Props): JSX.Element {
</SubPanel>
<ContentPanel>
{props.libraryItems.libraryItems?.data.map((item) => (
{props.libraryItems.libraryItems.data.map((item) => (
<LibraryItemComponent key={item.id} item={item} />
))}
</ContentPanel>
@ -41,9 +40,15 @@ export default function Library(props: Props): JSX.Element {
}
export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale)
return {
props: {
libraryItems: await getLibraryItemsPreview({language_code: context.locale}),
libraryItems: await getLibraryItemsPreview({
language_code: context.locale,
}),
},
};
else {
return { props: {} };
}
};

62
src/queries/helpers.ts
View File

@ -1,65 +1,3 @@
export const queryGraphQL = async (query: string, variables?: string) => {
const res = await fetch(process.env.URL_GRAPHQL, {
method: "POST",
body: JSON.stringify({
query: query,
variables: variables
}),
headers: {
"content-type": "application/json",
Authorization: "Bearer " + process.env.ACCESS_TOKEN,
},
});
return (await res.json()).data;
};
export function getAssetURL(url: string): string {
return process.env.NEXT_PUBLIC_URL_CMS + url;
}
export type Source = {
data: {
attributes: {
name: string;
};
};
};
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;
};

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

@ -1,183 +0,0 @@
import {
BasicDate,
BasicPrice,
BasicSize,
queryGraphQL,
UploadImage,
} from "queries/helpers";
export type LibraryItemSkeleton = {
attributes: {
slug: string;
subitems: {
data: LibraryItemSkeleton[];
};
};
};
export async function getLibraryItemsSkeleton(): Promise<
LibraryItemSkeleton[]
> {
return (
await queryGraphQL(
`
{
libraryItems(filters: { root_item: { eq: true } }) {
data {
attributes {
slug
subitems {
data {
attributes {
slug
subitems {
data {
attributes {
slug
subitems {
data {
attributes {
slug
}
}
}
}
}
}
}
}
}
}
}
}
}
`
)
).libraryItems.data;
}
export function getBreadcrumbs(
parentBreadcrumb: string[],
data: LibraryItemSkeleton
) {
const result: string[][] = [];
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
}
}
}
}
}
}
}
}
}
}
`
)
).libraryItems.data[0];
}

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

@ -1,86 +0,0 @@
import {
UploadImage,
queryGraphQL,
BasicPrice,
BasicDate,
BasicSize,
} from "queries/helpers";
export type LibraryItem = {
id: string;
attributes: {
title: string;
subtitle: string;
slug: string;
thumbnail: UploadImage;
release_date: BasicDate;
price: BasicPrice;
size: BasicSize;
description: {
description: string;
};
};
};
export async function getLibraryItems(
language_code: string | undefined
): Promise<LibraryItem[]> {
return (
await queryGraphQL(
`
{
libraryItems(
filters: { root_item: { eq: true } }
pagination: { limit: -1 }
sort: ["slug:asc"]
) {
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
}
}
}
}
}
`
)
).libraryItems.data;
}