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

Added a little message box whenever content is not available in the current language

Browse Source
This commit is contained in:
DrMint 2022-03-20 13:21:30 +01:00
parent 0f7c04c393
commit 54940260e7
8 changed files with 253 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/AppLayout.tsx
View File

@ -1,7 +1,4 @@
import {
GetWebsiteInterfaceQuery,
StrapiImage,
} from "graphql/operations-types";
import { StrapiImage } from "graphql/operations-types";
import MainPanel from "./Panels/MainPanel";
import Head from "next/head";
import { useSwipeable } from "react-swipeable";

43
src/components/LanguageSwitcher.tsx Normal file
View File

@ -0,0 +1,43 @@
import {
GetLanguagesQuery,
GetWebsiteInterfaceQuery,
} from "graphql/operations-types";
import { NextRouter } from "next/router";
import { prettyLanguage } from "queries/helpers";
import Button from "./Button";
type HorizontalLineProps = {
className?: string;
locales: string[];
router: NextRouter;
languages: GetLanguagesQuery["languages"]["data"];
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
};
export default function HorizontalLine(
props: HorizontalLineProps
): JSX.Element {
const { locales, router } = props;
return (
<div className="w-full grid place-content-center">
<div className="flex flex-col place-items-center text-center gap-4 my-12 border-2 border-mid rounded-xl p-8 max-w-lg">
<p>
This content is not available in the currently selected language. You
can select one the following languages instead:
</p>
<div className="flex flex-wrap flex-row gap-2">
{locales.map((locale, index) => (
<Button
key={index}
active={locale === router.locale}
href={router.asPath}
locale={locale}
>
{prettyLanguage(locale, props.languages)}
</Button>
))}
</div>
</div>
</div>
);
}

54
src/graphql/operation.graphql
View File

@ -1301,3 +1301,57 @@ query getPostsPreview($language_code: String) {
}
}
}
query getPostLanguages($slug: String) {
posts(filters: { slug: { eq: $slug } }) {
data {
attributes {
translations {
language {
data {
attributes {
code
}
}
}
}
}
}
}
}
query getContentLanguages($slug: String) {
contents(filters: { slug: { eq: $slug } }) {
data {
attributes {
text_set {
language {
data {
attributes {
code
}
}
}
}
video_set {
language {
data {
attributes {
code
}
}
}
}
audio_set {
language {
data {
attributes {
code
}
}
}
}
}
}
}
}

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

@ -1737,3 +1737,77 @@ export type GetPostsPreviewQuery = {
}>;
};
};
export type GetPostLanguagesQueryVariables = Exact<{
slug: InputMaybe<Scalars["String"]>;
}>;
export type GetPostLanguagesQuery = {
__typename: "Query";
posts: {
__typename: "PostEntityResponseCollection";
data: Array<{
__typename: "PostEntity";
attributes: {
__typename: "Post";
translations: Array<{
__typename: "ComponentTranslationsPosts";
language: {
__typename: "LanguageEntityResponse";
data: {
__typename: "LanguageEntity";
attributes: { __typename: "Language"; code: string };
};
};
}>;
};
}>;
};
};
export type GetContentLanguagesQueryVariables = Exact<{
slug: InputMaybe<Scalars["String"]>;
}>;
export type GetContentLanguagesQuery = {
__typename: "Query";
contents: {
__typename: "ContentEntityResponseCollection";
data: Array<{
__typename: "ContentEntity";
attributes: {
__typename: "Content";
text_set: Array<{
__typename: "ComponentSetsTextSet";
language: {
__typename: "LanguageEntityResponse";
data: {
__typename: "LanguageEntity";
attributes: { __typename: "Language"; code: string };
};
};
}>;
video_set: Array<{
__typename: "ComponentSetsVideoSet";
language: {
__typename: "LanguageEntityResponse";
data: {
__typename: "LanguageEntity";
attributes: { __typename: "Language"; code: string };
};
};
}>;
audio_set: Array<{
__typename: "ComponentSetsAudioSet";
language: {
__typename: "LanguageEntityResponse";
data: {
__typename: "LanguageEntity";
attributes: { __typename: "Language"; code: string };
};
};
}>;
};
}>;
};
};

20
src/graphql/operations.ts
View File

@ -3,6 +3,8 @@ import { readFileSync } from "fs";
import {
GetChronologyItemsQuery,
GetChronologyItemsQueryVariables,
GetContentLanguagesQuery,
GetContentLanguagesQueryVariables,
GetContentQuery,
GetContentQueryVariables,
GetContentsQuery,
@ -23,6 +25,8 @@ import {
GetLibraryItemsPreviewQueryVariables,
GetLibraryItemsSlugsQuery,
GetLibraryItemsSlugsQueryVariables,
GetPostLanguagesQuery,
GetPostLanguagesQueryVariables,
GetPostQuery,
GetPostQueryVariables,
GetPostsPreviewQuery,
@ -168,3 +172,19 @@ export async function getPostsPreview(
const query = getQueryFromOperations("getPostsPreview");
return await graphQL(query, JSON.stringify(variables));
}
export async function getPostLanguages(
variables: GetPostLanguagesQueryVariables
): Promise<GetPostLanguagesQuery> {
const query = getQueryFromOperations("getPostLanguages");
console.log(query);
return await graphQL(query, JSON.stringify(variables));
}
export async function getContentLanguages(
variables: GetContentLanguagesQueryVariables
): Promise<GetContentLanguagesQuery> {
const query = getQueryFromOperations("getContentLanguages");
console.log(query);
return await graphQL(query, JSON.stringify(variables));
}

27
src/pages/contents/[slug]/read.tsx
View File

@ -1,5 +1,9 @@
import { GetStaticPaths, GetStaticProps } from "next";
import { getContentsSlugs, getContentText } from "graphql/operations";
import {
getContentLanguages,
getContentsSlugs,
getContentText,
} from "graphql/operations";
import { GetContentTextQuery } from "graphql/operations-types";
import ContentPanel from "components/Panels/ContentPanel";
import HorizontalLine from "components/HorizontalLine";
@ -25,15 +29,17 @@ import RecorderChip from "components/RecorderChip";
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
import TOC from "components/Markdown/TOC";
import ToolTip from "components/ToolTip";
import LanguageSwitcher from "components/LanguageSwitcher";
interface ContentReadProps extends AppStaticProps {
content: GetContentTextQuery["contents"]["data"][number]["attributes"];
contentId: GetContentTextQuery["contents"]["data"][number]["id"];
locales: string[];
}
export default function ContentRead(props: ContentReadProps): JSX.Element {
useTesting(props);
const { langui, content, languages } = props;
const { langui, content, languages, locales } = props;
const router = useRouter();
const subPanel = (
@ -186,8 +192,15 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
<HorizontalLine />
{content.text_set.length > 0 && content.text_set[0].text && (
{locales.includes(router.locale || "en") ? (
<Markdawn router={router} text={content.text_set[0].text} />
) : (
<LanguageSwitcher
locales={locales}
router={router}
languages={props.languages}
langui={props.langui}
/>
)}
</div>
</ContentPanel>
@ -235,9 +248,10 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
}
export const getStaticProps: GetStaticProps = async (context) => {
const slug = context.params?.slug?.toString() || "";
const content = (
await getContentText({
slug: context.params?.slug?.toString() || "",
slug: slug,
language_code: context.locale || "en",
})
).contents.data[0];
@ -245,6 +259,11 @@ export const getStaticProps: GetStaticProps = async (context) => {
...(await getAppStaticProps(context)),
content: content.attributes,
contentId: content.id,
locales: (
await getContentLanguages({ slug: slug })
).contents.data[0].attributes.text_set.map((translation) => {
return translation.language.data.attributes.code;
}),
};
return {
props: props,

23
src/pages/index.tsx
View File

@ -1,7 +1,8 @@
import AppLayout from "components/AppLayout";
import LanguageSwitcher from "components/LanguageSwitcher";
import Markdawn from "components/Markdown/Markdawn";
import ContentPanel from "components/Panels/ContentPanel";
import { getPost } from "graphql/operations";
import { getPost, getPostLanguages } from "graphql/operations";
import { GetPostQuery } from "graphql/operations-types";
import { GetStaticProps } from "next";
import { useRouter } from "next/router";
@ -10,10 +11,11 @@ import { prettySlug } from "queries/helpers";
interface HomeProps extends AppStaticProps {
post: GetPostQuery["posts"]["data"][number]["attributes"];
locales: string[];
}
export default function Home(props: HomeProps): JSX.Element {
const { post } = props;
const { post, locales } = props;
const router = useRouter();
const contentPanel = (
@ -25,8 +27,15 @@ export default function Home(props: HomeProps): JSX.Element {
Discover • Analyse • Translate • Archive
</h2>
</div>
{post.translations.length > 0 && (
{locales.includes(router.locale || "en") ? (
<Markdawn router={router} text={post.translations[0].body} />
) : (
<LanguageSwitcher
locales={locales}
router={router}
languages={props.languages}
langui={props.langui}
/>
)}
</ContentPanel>
);
@ -45,14 +54,20 @@ export default function Home(props: HomeProps): JSX.Element {
}
export const getStaticProps: GetStaticProps = async (context) => {
const slug = "home";
const props: HomeProps = {
...(await getAppStaticProps(context)),
post: (
await getPost({
slug: "home",
slug: slug,
language_code: context.locale || "en",
})
).posts.data[0].attributes,
locales: (
await getPostLanguages({ slug: slug })
).posts.data[0].attributes.translations.map((translation) => {
return translation.language.data.attributes.code;
}),
};
return {
props: props,

23
src/pages/news/[slug].tsx
View File

@ -2,6 +2,7 @@ import AppLayout from "components/AppLayout";
import Chip from "components/Chip";
import ThumbnailHeader from "components/Content/ThumbnailHeader";
import HorizontalLine from "components/HorizontalLine";
import LanguageSwitcher from "components/LanguageSwitcher";
import Markdawn from "components/Markdown/Markdawn";
import TOC from "components/Markdown/TOC";
import ReturnButton, {
@ -11,7 +12,7 @@ import ContentPanel from "components/Panels/ContentPanel";
import SubPanel from "components/Panels/SubPanel";
import RecorderChip from "components/RecorderChip";
import ToolTip from "components/ToolTip";
import { getPost, getPostsSlugs } from "graphql/operations";
import { getPost, getPostLanguages, getPostsSlugs } from "graphql/operations";
import { GetPostQuery, StrapiImage } from "graphql/operations-types";
import { GetStaticPaths, GetStaticProps } from "next";
import { useRouter } from "next/router";
@ -21,10 +22,11 @@ import { prettySlug, getStatusDescription } from "queries/helpers";
interface PostProps extends AppStaticProps {
post: GetPostQuery["posts"]["data"][number]["attributes"];
postId: GetPostQuery["posts"]["data"][number]["id"];
locales: string[];
}
export default function LibrarySlug(props: PostProps): JSX.Element {
const { post, postId, langui } = props;
const { post, locales, langui } = props;
const router = useRouter();
const thumbnail: StrapiImage | undefined =
@ -107,8 +109,15 @@ export default function LibrarySlug(props: PostProps): JSX.Element {
<HorizontalLine />
{post.translations.length > 0 && post.translations[0].body && (
{locales.includes(router.locale || "en") ? (
<Markdawn router={router} text={post.translations[0].body} />
) : (
<LanguageSwitcher
locales={locales}
router={router}
languages={props.languages}
langui={props.langui}
/>
)}
</ContentPanel>
);
@ -130,9 +139,10 @@ export default function LibrarySlug(props: PostProps): JSX.Element {
}
export const getStaticProps: GetStaticProps = async (context) => {
const slug = context.params?.slug?.toString() || "";
const post = (
await getPost({
slug: context.params?.slug?.toString() || "",
slug: slug,
language_code: context.locale || "en",
})
).posts.data[0];
@ -140,6 +150,11 @@ export const getStaticProps: GetStaticProps = async (context) => {
...(await getAppStaticProps(context)),
post: post.attributes,
postId: post.id,
locales: (
await getPostLanguages({ slug: slug })
).posts.data[0].attributes.translations.map((translation) => {
return translation.language.data.attributes.code;
}),
};
return {
props: props,