Removed some static text and use textui

2022-03-29 23:45:23 +02:00 · 2022-03-29 23:45:23 +02:00 · c8a2104dae
parent 935c364a71
commit c8a2104dae
8 changed files with 280 additions and 68 deletions
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@ -4,14 +4,13 @@
 name: Node.js CI

 on:
-#  push:
-#    branches: [ main ]
+  #  push:
+  #    branches: [ main ]
  pull_request:
-    branches: [ main ]
+    branches: [main]

 jobs:
  build:
-
    runs-on: ubuntu-latest

    strategy:
@ -25,7 +24,7 @@ jobs:
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
-        cache: 'npm'
+          cache: "npm"
      - run: npm ci
      - run: npm run lint
      - run: npm run build --if-present
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@ -218,7 +218,15 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
          >
            {appLayout.mainPanelOpen ? "close" : "menu"}
          </span>
-          <p className="text-2xl font-black font-headers">{props.navTitle}</p>
+          <p
+            className={`font-black font-headers text-center overflow-hidden ${
+              props.navTitle.length > 30
+                ? "text-xl max-h-14"
+                : "text-2xl max-h-16"
+            }`}
+          >
+            {props.navTitle}
+          </p>
          <span
            className="material-icons mt-[.1em] cursor-pointer"
            onClick={() => {
--- a/src/pages/contents/[slug]/index.tsx
+++ b/src/pages/contents/[slug]/index.tsx
@ -1,44 +1,167 @@
 import AppLayout from "components/AppLayout";
 import Button from "components/Button";
+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, {
  ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
 import ContentPanel from "components/Panels/ContentPanel";
 import SubPanel from "components/Panels/SubPanel";
-import { getContent, getContentsSlugs } from "graphql/operations";
-import { GetContentQuery } from "graphql/operations-types";
+import RecorderChip from "components/RecorderChip";
+import ToolTip from "components/ToolTip";
+import { getContentsSlugs, getContentText } from "graphql/operations";
+import { GetContentTextQuery } from "graphql/operations-types";
 import {
  GetStaticPathsContext,
  GetStaticPathsResult,
  GetStaticPropsContext,
 } from "next";
+import { useRouter } from "next/router";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-import { prettyinlineTitle, prettySlug } from "queries/helpers";
+import {
+  getLocalesFromLanguages,
+  getStatusDescription,
+  prettyinlineTitle,
+  prettyLanguage,
+  prettySlug,
+  prettyTestError,
+  prettyTestWarning,
+} from "queries/helpers";

-interface ContentIndexProps extends AppStaticProps {
-  content: GetContentQuery["contents"]["data"][number]["attributes"];
+interface Props extends AppStaticProps {
+  content: GetContentTextQuery["contents"]["data"][number]["attributes"];
+  contentId: GetContentTextQuery["contents"]["data"][number]["id"];
 }

-export default function ContentIndex(props: ContentIndexProps): JSX.Element {
-  const { content, langui } = props;
+export default function Content(props: Props): JSX.Element {
+  useTesting(props);
+  const { langui, content, languages } = props;
+  const router = useRouter();
+  const locales = getLocalesFromLanguages(content.text_set_languages);
+
  const subPanel = (
    <SubPanel>
      <ReturnButton
-        href="/contents"
-        title={"Contents"}
+        href={`/contents`}
+        title={langui.contents}
        langui={langui}
        displayOn={ReturnButtonType.desktop}
        horizontalLine
      />
+
+      {content.text_set.length > 0 && content.text_set[0].source_language.data && (
+        <div className="grid gap-5">
+          <h2 className="text-xl">
+            {content.text_set[0].source_language.data.attributes.code ===
+            router.locale
+              ? langui.transcript_notice
+              : langui.translation_notice}
+          </h2>
+
+          {content.text_set[0].source_language.data.attributes.code !==
+            router.locale && (
+            <div className="grid place-items-center gap-2">
+              <p className="font-headers">{langui.source_language}:</p>
+              <Button
+                href={router.asPath}
+                locale={
+                  content.text_set[0].source_language.data.attributes.code
+                }
+              >
+                {prettyLanguage(
+                  content.text_set[0].source_language.data.attributes.code,
+                  languages
+                )}
+              </Button>
+            </div>
+          )}
+
+          <div className="grid grid-flow-col place-items-center place-content-center gap-2">
+            <p className="font-headers">{langui.status}:</p>
+
+            <ToolTip
+              content={getStatusDescription(content.text_set[0].status, langui)}
+              maxWidth={"20rem"}
+            >
+              <Chip>{content.text_set[0].status}</Chip>
+            </ToolTip>
+          </div>
+
+          {content.text_set[0].transcribers.data.length > 0 && (
+            <div>
+              <p className="font-headers">{langui.transcribers}:</p>
+              <div className="grid place-items-center place-content-center gap-2">
+                {content.text_set[0].transcribers.data.map((recorder) => (
+                  <RecorderChip
+                    key={recorder.id}
+                    langui={langui}
+                    recorder={recorder}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {content.text_set[0].translators.data.length > 0 && (
+            <div>
+              <p className="font-headers">{langui.translators}:</p>
+              <div className="grid place-items-center place-content-center gap-2">
+                {content.text_set[0].translators.data.map((recorder) => (
+                  <RecorderChip
+                    key={recorder.id}
+                    langui={langui}
+                    recorder={recorder}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {content.text_set[0].proofreaders.data.length > 0 && (
+            <div>
+              <p className="font-headers">{langui.proofreaders}:</p>
+              <div className="grid place-items-center place-content-center gap-2">
+                {content.text_set[0].proofreaders.data.map((recorder) => (
+                  <RecorderChip
+                    key={recorder.id}
+                    langui={langui}
+                    recorder={recorder}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {content.text_set.length > 0 && content.text_set[0].text && (
+        <>
+          <HorizontalLine />
+          <TOC
+            text={content.text_set[0].text}
+            title={
+              content.titles.length > 0
+                ? prettyinlineTitle(
+                    content.titles[0].pre_title,
+                    content.titles[0].title,
+                    content.titles[0].subtitle
+                  )
+                : prettySlug(content.slug)
+            }
+          />
+        </>
+      )}
    </SubPanel>
  );
  const contentPanel = (
    <ContentPanel>
      <ReturnButton
-        href="/contents"
-        title={"Contents"}
+        href={`/contents/${content.slug}`}
+        title={langui.content}
        langui={langui}
        displayOn={ReturnButtonType.mobile}
        className="mb-10"
@ -69,22 +192,14 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {

        <HorizontalLine />

-        {content.text_set.length > 0 && (
-          <Button href={`/contents/${content.slug}/read/`}>
-            {langui.read_content}
-          </Button>
-        )}
-
-        {content.audio_set.length > 0 && (
-          <Button href={`/contents/${content.slug}/listen/`}>
-            {langui.listen_content}
-          </Button>
-        )}
-
-        {content.video_set.length > 0 && (
-          <Button href={`/contents/${content.slug}/watch/`}>
-            {langui.watch_content}
-          </Button>
+        {locales.includes(router.locale ?? "en") ? (
+          <Markdawn text={content.text_set[0].text} />
+        ) : (
+          <LanguageSwitcher
+            locales={locales}
+            languages={props.languages}
+            langui={props.langui}
+          />
        )}
      </div>
    </ContentPanel>
@ -108,15 +223,9 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
    description += "\n";
  }

-  if (content.titles.length > 0 && content.titles[0].description) {
-    description += "\n";
-    description += content.titles[0].description;
-  }
-
  return (
    <AppLayout
-      navTitle="Contents"
-      title={
+      navTitle={
        content.titles.length > 0
          ? prettyinlineTitle(
              content.titles[0].pre_title,
@ -136,17 +245,19 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {

 export async function getStaticProps(
  context: GetStaticPropsContext
-): Promise<{ notFound: boolean } | { props: ContentIndexProps }> {
+): Promise<{ notFound: boolean } | { props: Props }> {
+  const slug = context.params?.slug?.toString() ?? "";
  const content = (
-    await getContent({
-      slug: context.params?.slug?.toString() ?? "",
+    await getContentText({
+      slug: slug,
      language_code: context.locale ?? "en",
    })
-  ).contents.data[0].attributes;
+  ).contents.data[0];
  if (!content) return { notFound: true };
-  const props: ContentIndexProps = {
+  const props: Props = {
    ...(await getAppStaticProps(context)),
-    content: content,
+    content: content.attributes,
+    contentId: content.id,
  };
  return {
    props: props,
@ -168,3 +279,100 @@ export async function getStaticPaths(
    fallback: "blocking",
  };
 }
+
+function useTesting(props: Props) {
+  const router = useRouter();
+  const { content, contentId } = props;
+
+  const contentURL = `/admin/content-manager/collectionType/api::content.content/${contentId}`;
+
+  if (router.locale === "en") {
+    if (content.categories.data.length === 0) {
+      prettyTestError(router, "Missing categories", ["content"], contentURL);
+    }
+  }
+
+  if (content.ranged_contents.data.length === 0) {
+    prettyTestWarning(
+      router,
+      "Unconnected to any source",
+      ["content"],
+      contentURL
+    );
+  }
+
+  if (content.text_set.length === 0) {
+    prettyTestWarning(
+      router,
+      "Has no textset, nor audioset, nor videoset",
+      ["content"],
+      contentURL
+    );
+  }
+
+  if (content.text_set.length > 1) {
+    prettyTestError(
+      router,
+      "More than one textset for this language",
+      ["content", "text_set"],
+      contentURL
+    );
+  }
+
+  if (content.text_set.length === 1) {
+    const textset = content.text_set[0];
+
+    if (!textset.text) {
+      prettyTestError(
+        router,
+        "Missing text",
+        ["content", "text_set"],
+        contentURL
+      );
+    }
+    if (!textset.source_language.data) {
+      prettyTestError(
+        router,
+        "Missing source language",
+        ["content", "text_set"],
+        contentURL
+      );
+    } else if (textset.source_language.data.attributes.code === router.locale) {
+      // This is a transcript
+      if (textset.transcribers.data.length === 0) {
+        prettyTestError(
+          router,
+          "Missing transcribers attribution",
+          ["content", "text_set"],
+          contentURL
+        );
+      }
+      if (textset.translators.data.length > 0) {
+        prettyTestError(
+          router,
+          "Transcripts shouldn't have translators",
+          ["content", "text_set"],
+          contentURL
+        );
+      }
+    } else {
+      // This is a translation
+      if (textset.translators.data.length === 0) {
+        prettyTestError(
+          router,
+          "Missing translators attribution",
+          ["content", "text_set"],
+          contentURL
+        );
+      }
+      if (textset.transcribers.data.length > 0) {
+        prettyTestError(
+          router,
+          "Translations shouldn't have transcribers",
+          ["content", "text_set"],
+          contentURL
+        );
+      }
+    }
+  }
+}
--- a/src/pages/library/[slug]/index.tsx
+++ b/src/pages/library/[slug]/index.tsx
@ -399,8 +399,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {

  return (
    <AppLayout
-      navTitle={langui.library}
-      title={prettyinlineTitle("", item.title, item.subtitle)}
+      navTitle={prettyinlineTitle("", item.title, item.subtitle)}
      contentPanel={contentPanel}
      subPanel={subPanel}
      thumbnail={item.thumbnail.data?.attributes}
--- a/src/pages/library/[slug]/scans.tsx
+++ b/src/pages/library/[slug]/scans.tsx
@ -134,8 +134,7 @@ export default function LibrarySlug(props: Props): JSX.Element {

  return (
    <AppLayout
-      navTitle={langui.library}
-      title={prettyinlineTitle("", item.title, item.subtitle)}
+      navTitle={prettyinlineTitle("", item.title, item.subtitle)}
      contentPanel={contentPanel}
      subPanel={subPanel}
      thumbnail={item.thumbnail.data?.attributes}
--- a/src/pages/news/[slug].tsx
+++ b/src/pages/news/[slug].tsx
@ -130,8 +130,7 @@ export default function LibrarySlug(props: PostProps): JSX.Element {

  return (
    <AppLayout
-      navTitle={langui.news}
-      title={
+      navTitle={
        post.translations.length > 0
          ? post.translations[0].title
          : prettySlug(post.slug)
--- a/src/pages/wiki/chronology.tsx
+++ b/src/pages/wiki/chronology.tsx
@ -133,7 +133,7 @@ export default function Chronology(props: ChronologyProps): JSX.Element {

  return (
    <AppLayout
-      navTitle="Chronology"
+      navTitle={langui.chronology}
      contentPanel={contentPanel}
      subPanel={subPanel}
      {...props}
--- a/src/pages/wiki/index.tsx
+++ b/src/pages/wiki/index.tsx
@ -16,7 +16,7 @@ export default function Wiki(props: WikiProps): JSX.Element {
        title={langui.wiki}
        description={langui.wiki_description}
      />
-      <NavOption title="Chronology" url="/wiki/chronology" border />
+      <NavOption title={langui.chronology} url="/wiki/chronology" border />
    </SubPanel>
  );