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

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

View File

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

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>
);
}

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
}
}
}
}
}
}
}
}

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 };
};
};
}>;
};
}>;
};
};

View File

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

View File

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

View File

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

View File

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