@c-rex/templates 0.1.6 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/templates",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "files": [
     "src"

package/src/articles/blog/page.tsx

@@ -1,33 +1,19 @@
-import React from "react";
-import { getPrimaryInfo } from "../utils";
-import { TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
+import { extractHtmlContent, getInfoWithCache, getPrimaryInfo } from "../utils";
+import { BLOG_TYPE_AND_LINK } from "@c-rex/constants";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
-import { Breadcrumb } from "@c-rex/components/breadcrumb";
-import * as cheerio from 'cheerio'
 import { Metadata } from "next";
 import { RenderArticle } from "@c-rex/components/render-article";
+import { AppSidebar } from "@c-rex/components/sidebar";
+import { SidebarInset, SidebarProvider } from "@c-rex/ui/sidebar";
+import { CheckArticleLangToast } from "@c-rex/components/check-article-lang";
 
-const extractHtmlContent = (htmlString: string) => {
-    const $ = cheerio.load(htmlString)
+const infoCache = new Map<string, Awaited<ReturnType<typeof getPrimaryInfo>>>();
 
-    const metaTags = $('meta').map((_, el) => {
-        const name = $(el).attr('name')
-        const content = $(el).attr('content')
-        return name && content ? { name, content } : null
-    }).get().filter(Boolean)
-
-    const articleHtml = $('body').html() || ''
-
-    return {
-        metaTags,
-        articleHtml,
-    }
-}
 
 export const generateMetadata = async (
     { params }: { params: { id: string } }
 ): Promise<Metadata> => {
-    const { htmlContent, title } = await getPrimaryInfo(params.id, TOPICS_TYPE_AND_LINK);
+    const { htmlContent, title } = await getInfoWithCache(params.id, BLOG_TYPE_AND_LINK, infoCache);
     const { metaTags } = extractHtmlContent(htmlContent)
 
     const other: Record<string, string[]> = {}
@@ -44,26 +30,26 @@ export const generateMetadata = async (
 }
 
 export const BlogPageTemplate = async ({ params }: { params: { id: string } }) => {
-    const { htmlContent, title, lang } = await getPrimaryInfo(params.id, TOPICS_TYPE_AND_LINK);
+    const { htmlContent, lang, availableVersions } = await getInfoWithCache(params.id, BLOG_TYPE_AND_LINK, infoCache);
     const { articleHtml } = extractHtmlContent(htmlContent)
 
-    const breadcrumbItems = [{
-        link: "/",
-        label: title,
-        id: "home",
-        active: false,
-        children: [],
-    }]
-
     return (
         <PageWrapper title="">
-            <div className="container flex flex-col">
-                <header className="flex h-16 shrink-0 items-center justify-between">
-                    <Breadcrumb items={breadcrumbItems} lang={lang} />
-                </header>
-
-                <RenderArticle htmlContent={articleHtml} contentLang={lang} />
-            </div>
+            <SidebarProvider>
+
+                <CheckArticleLangToast availableVersions={availableVersions} />
+
+                <AppSidebar
+                    lang={lang}
+                    data={[]}
+                    availableVersions={availableVersions}
+                />
+                <SidebarInset>
+                    <div className="container flex flex-col">
+                        <RenderArticle htmlContent={articleHtml} contentLang={lang} />
+                    </div>
+                </SidebarInset>
+            </SidebarProvider>
         </PageWrapper>
     );
 };

package/src/articles/documents/page.tsx

@@ -1,16 +1,16 @@
-import React from "react";
 import { getPrimaryInfo } from "../utils";
 import { ArticleWrapper } from "../wrapper";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
 import { DOCUMENTS_TYPE_AND_LINK } from "@c-rex/constants";
 
 export const DocumentsPageTemplate = async ({ params }: { params: { id: string } }) => {
-    const { htmlContent, title, lang } = await getPrimaryInfo(params.id, DOCUMENTS_TYPE_AND_LINK);
+    const { htmlContent, title, lang, availableVersions } = await getPrimaryInfo(params.id, DOCUMENTS_TYPE_AND_LINK);
 
     return (
         <PageWrapper title={title}>
             <ArticleWrapper
                 title={title}
+                availableVersions={availableVersions}
                 htmlContent={htmlContent}
                 lang={lang}
                 id={params.id}

package/src/articles/topics/page.tsx

@@ -1,18 +1,48 @@
 import React from "react";
-import { getPrimaryInfo } from "../utils";
+import { extractHtmlContent, getInfoWithCache, getPrimaryInfo } from "../utils";
 import { TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
 import { ArticleWrapper } from "../wrapper";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
+import { Metadata } from "next";
+
+const infoCache = new Map<string, Awaited<ReturnType<typeof getPrimaryInfo>>>();
+
+export const generateMetadata = async (
+    { params }: { params: { id: string } }
+): Promise<Metadata> => {
+    const { htmlContent, title } = await getInfoWithCache(params.id, TOPICS_TYPE_AND_LINK, infoCache);
+    const { metaTags } = extractHtmlContent(htmlContent)
+
+    const other: Record<string, string[]> = {}
+
+    for (const { name, content } of metaTags) {
+        if (Object.keys(other).includes(name)) {
+            other[name]?.push(content)
+        } else {
+            other[name] = [content]
+        }
+    }
+
+    return { ...other, title }
+}
 
 export const TopicsPageTemplate = async ({ params }: { params: { id: string } }) => {
-    const { htmlContent, title, lang } = await getPrimaryInfo(params.id, TOPICS_TYPE_AND_LINK);
+    const {
+        htmlContent,
+        title,
+        lang,
+        availableVersions
+    } = await getInfoWithCache(params.id, TOPICS_TYPE_AND_LINK, infoCache);
+
+    const { articleHtml } = extractHtmlContent(htmlContent)
 
     return (
         <PageWrapper title={title}>
             <ArticleWrapper
                 title={title}
                 lang={lang}
-                htmlContent={htmlContent}
+                availableVersions={availableVersions}
+                htmlContent={articleHtml}
                 id={params.id}
                 type={TOPICS_TYPE_AND_LINK}
             />

package/src/articles/utils.ts

@@ -1,6 +1,8 @@
 import { DirectoryNodesService, InformationUnitsService, RenditionsService } from "@c-rex/services";
 import { DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
-import { DirectoryNodes } from "@c-rex/interfaces";
+import { DirectoryNodes, SidebarAvailableVersionsInterface } from "@c-rex/interfaces";
+import * as cheerio from 'cheerio'
+import { BLOG_TYPE_AND_LINK } from "@c-rex/constants";
 
 /*
  * Get primary info for a given information unit
@@ -11,7 +13,8 @@ import { DirectoryNodes } from "@c-rex/interfaces";
 export const getPrimaryInfo = async (id: string, type: string): Promise<{
     htmlContent: string,
     title: string,
-    lang: string
+    lang: string,
+    availableVersions: SidebarAvailableVersionsInterface[]
 }> => {
     const renditionService = new RenditionsService();
     const informationService = new InformationUnitsService();
@@ -19,29 +22,59 @@ export const getPrimaryInfo = async (id: string, type: string): Promise<{
 
     let title = informationUnitsItem.labels[0]?.value
     const lang = informationUnitsItem.languages[0];
-    const rootNode = await getRootNode(informationUnitsItem.directoryNodes);
+    const versionOf = informationUnitsItem.versionOf.shortId
+
+    const [versions, rootNode] = await Promise.all([
+        informationService.getList({
+            filters: [`versionOf.shortId=${versionOf}`],
+            fields: ["renditions", "class", "languages", "labels"],
+        }),
+        getRootNode(informationUnitsItem.directoryNodes),
+    ])
+
     let htmlContent = ""
 
     if (rootNode != null) {
         title = rootNode.informationUnits[0]?.labels[0]?.value;
     }
 
-    if (type == TOPICS_TYPE_AND_LINK) {
+    if ([TOPICS_TYPE_AND_LINK, BLOG_TYPE_AND_LINK].includes(type)) {
         htmlContent = await renditionService.getHTMLRendition({ renditions: informationUnitsItem.renditions });
+
     } else if (rootNode != null && type == DOCUMENTS_TYPE_AND_LINK) {
-        const directoryId = rootNode.childNodes[0]?.shortId as string;
+
         const service = new DirectoryNodesService();
+
+        const directoryId = rootNode.childNodes[0]?.shortId as string;
+
         const response = await service.getItem(directoryId);
         const infoId = response.informationUnits[0]?.shortId;
 
         const childInformationUnit = await informationService.getItem({ id: infoId as string });
+
         htmlContent = await renditionService.getHTMLRendition({ renditions: childInformationUnit.renditions });
     }
 
+    const availableVersions = versions.items.map((item) => {
+        return {
+            shortId: item.shortId,
+            link: `/${type}/${item.shortId}`,
+            lang: item.language,
+            country: item.language.split("-")[1],
+            active: item.language === lang,
+        }
+    }).sort((a, b) => {
+        if (a.lang < b.lang) return -1;
+        if (a.lang > b.lang) return 1;
+        return 0;
+    })
+        .filter(item => item.lang.toLocaleLowerCase() !== "pl-pl") as SidebarAvailableVersionsInterface[];
+
     return {
         htmlContent,
         title: title as string,
         lang: lang as string,
+        availableVersions
     }
 }
 
@@ -70,4 +103,29 @@ export const getRootNode = async (directoryNodes: DirectoryNodes[]): Promise<Dir
     }
 
     return response;
-};
+};
+
+export const getInfoWithCache = async (id: string, type: string, infoCache: any): Promise<Awaited<ReturnType<typeof getPrimaryInfo>>> => {
+    if (!infoCache.has(id)) {
+        const info = await getPrimaryInfo(id, type);
+        infoCache.set(id, info);
+    }
+    return infoCache.get(id)!;
+}
+
+export const extractHtmlContent = (htmlString: string) => {
+    const $ = cheerio.load(htmlString)
+
+    const metaTags = $('meta').map((_, el) => {
+        const name = $(el).attr('name')
+        const content = $(el).attr('content')
+        return name && content ? { name, content } : null
+    }).get().filter(Boolean)
+
+    const articleHtml = $('main').html() || ''
+
+    return {
+        metaTags,
+        articleHtml,
+    }
+}

package/src/articles/wrapper.tsx

@@ -1,15 +1,15 @@
 "use client"
 
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { SidebarInset, SidebarProvider } from "@c-rex/ui/sidebar";
 import { AppSidebar } from "@c-rex/components/sidebar";
 import { CheckArticleLangToast } from "@c-rex/components/check-article-lang";
 import { Breadcrumb } from "@c-rex/components/breadcrumb";
 import { RenderArticle } from "@c-rex/components/render-article";
 import { CloudDownload, Eye } from "lucide-react";
-import { informationUnitsItems, informationUnitsResponse, SidebarAvailableVersionsInterface, TreeOfContent } from "@c-rex/interfaces";
+import { informationUnitsItems, SidebarAvailableVersionsInterface, TreeOfContent } from "@c-rex/interfaces";
 import { DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
-import { call, generateBreadcrumbItems, generateTreeOfContent } from "@c-rex/utils";
+import { call, generateBreadcrumbItems, generateTreeOfContent, getFileRenditions } from "@c-rex/utils";
 import { DropdownMenu } from "@c-rex/components/dropdown-menu";
 import { FileRenditionType } from "@c-rex/types";
 
@@ -19,38 +19,19 @@ type Props = {
     id: string,
     type: string,
     lang: string,
+    availableVersions: SidebarAvailableVersionsInterface[],
 }
-type filesRenditions = {
-    filesToDownload: FileRenditionType[],
-    filesToOpen: FileRenditionType[]
-}
+
 const loadArticleData = async (id: string, type: string, title: string) => {
     const informationUnitsItem = await call<informationUnitsItems>('InformationUnitsService.getItem', { id: id });
-
     const { rootNode, result: treeOfContent } = await generateTreeOfContent(informationUnitsItem.directoryNodes);
 
     const articleLanguage = informationUnitsItem.languages[0]
-    const versionOf = informationUnitsItem.versionOf.shortId
 
-    const versions = await call<informationUnitsResponse>("InformationUnitsService.getList", {
-        filters: [`versionOf.shortId=${versionOf}`],
-        fields: ["renditions", "class", "languages", "labels"],
-    })
-    const availableVersions = versions.items.map((item) => {
-        return {
-            shortId: item.shortId,
-            link: `/${type}/${item.shortId}`,
-            lang: item.language,
-            country: item.language.split("-")[1],
-            active: item.language === articleLanguage,
-        }
-    }).sort((a, b) => {
-        if (a.lang < b.lang) return -1;
-        if (a.lang > b.lang) return 1;
-        return 0;
-    }) as SidebarAvailableVersionsInterface[];
-
-    let documents = await call<filesRenditions>("RenditionsService.getFileRenditions", { renditions: informationUnitsItem.renditions });
+    let documents: {
+        filesToDownload: FileRenditionType[];
+        filesToOpen: FileRenditionType[];
+    }
     let rootNodeInfoID = "";
     let breadcrumbItems: TreeOfContent[] = [];
 
@@ -58,7 +39,9 @@ const loadArticleData = async (id: string, type: string, title: string) => {
         rootNodeInfoID = rootNode.informationUnits[0]?.shortId as string;
 
         const childInformationUnit = await call<informationUnitsItems>('InformationUnitsService.getItem', { id: rootNodeInfoID });
-        documents = await call<filesRenditions>("RenditionsService.getFileRenditions", { renditions: childInformationUnit.renditions });
+        documents = getFileRenditions({ renditions: childInformationUnit.renditions });
+    } else {
+        documents = getFileRenditions({ renditions: informationUnitsItem.renditions });
     }
 
     if (type == TOPICS_TYPE_AND_LINK) {
@@ -80,16 +63,13 @@ const loadArticleData = async (id: string, type: string, title: string) => {
     return {
         treeOfContent,
         breadcrumbItems,
-        availableVersions,
         documents,
         articleLanguage
     }
 };
 
-export const ArticleWrapper = ({ htmlContent, title, id, type, lang }: Props) => {
+export const ArticleWrapper = ({ htmlContent, title, id, type, lang, availableVersions }: Props) => {
     const [loading, setLoading] = useState<boolean>(true)
-    const [availableVersions, setAvailableVersions] = useState<SidebarAvailableVersionsInterface[]>([])
-
 
     //set available versions on confgi context so will be possible to get the link when change contant language
     const [breadcrumbItems, setBreadcrumbItems] = useState<TreeOfContent[]>([])
@@ -110,15 +90,12 @@ export const ArticleWrapper = ({ htmlContent, title, id, type, lang }: Props) =>
 
     useEffect(() => {
         const fetchData = async () => {
-
             const {
-                availableVersions,
                 treeOfContent,
                 documents,
                 breadcrumbItems,
             } = await loadArticleData(id, type, title)
 
-            setAvailableVersions(availableVersions)
             setTreeOfContent(treeOfContent)
             setDocuments(documents)
             setBreadcrumbItems(breadcrumbItems)

package/src/home/page.tsx

@@ -2,14 +2,13 @@
 
 import React, { FC } from "react";
 import { informationUnitsResponse } from "@c-rex/interfaces";
-import { call } from "@c-rex/utils";
+import { call, getFromCookieString } from "@c-rex/utils";
 import { Button } from "@c-rex/ui/button";
 import { AutoComplete } from "@c-rex/components/autocomplete";
 import { ResultList } from "@c-rex/components/result-list";
 import { useTranslations } from 'next-intl'
 import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs'
 import { DialogFilter } from "@c-rex/components/dialog-filter";
-import { getCookie } from "@c-rex/utils";
 import { CONTENT_LANG_KEY } from "@c-rex/constants";
 import { useAppConfig } from "@c-rex/contexts/config-provider";
 
@@ -39,21 +38,20 @@ export const HomePage: FC<HomePageProps> = ({ data, selectedLanguages }) => {
     const { search } = params;
 
     const onSearch = (value: string): Promise<string[]> => {
-        return call("InformationUnitsService.getSuggestions", { query: value, language: contentLang });
+        return call<string[]>("InformationUnitsService.getSuggestions", { query: value, language: contentLang });
     }
 
     const onSelect = (value: string) => {
         //show loading
-        getCookie(CONTENT_LANG_KEY)
-            .then((cookie) => cookie.value)
-            .then((cookie) => {
-                setParams({
-                    search: value,
-                    operator: "OR",
-                    page: 1,
-                    language: cookie,
-                });
-            });
+
+        const cookie = getFromCookieString(document.cookie, CONTENT_LANG_KEY)
+
+        setParams({
+            search: value,
+            operator: "OR",
+            page: 1,
+            language: cookie,
+        });
     };
 
     return (