@c-rex/templates 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/templates",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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>
+        <PageWrapper title="" showInput={false}>
+            <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,17 @@
-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, packageId } = await getPrimaryInfo(params.id, DOCUMENTS_TYPE_AND_LINK);
 
     return (
-        <PageWrapper title={title}>
+        <PageWrapper title={title} showInput>
             <ArticleWrapper
+                packageId={packageId}
                 title={title}
+                availableVersions={availableVersions}
                 htmlContent={htmlContent}
                 lang={lang}
                 id={params.id}

package/src/articles/topics/page.tsx

@@ -1,18 +1,50 @@
 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,
+        packageId
+    } = await getInfoWithCache(params.id, TOPICS_TYPE_AND_LINK, infoCache);
+
+    const { articleHtml } = extractHtmlContent(htmlContent)
 
     return (
-        <PageWrapper title={title}>
+        <PageWrapper title={title} showInput>
             <ArticleWrapper
                 title={title}
                 lang={lang}
-                htmlContent={htmlContent}
+                packageId={packageId}
+                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, informationUnitsResponseItem, 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,9 @@ import { DirectoryNodes } from "@c-rex/interfaces";
 export const getPrimaryInfo = async (id: string, type: string): Promise<{
     htmlContent: string,
     title: string,
-    lang: string
+    lang: string,
+    packageId: string,
+    availableVersions: SidebarAvailableVersionsInterface[]
 }> => {
     const renditionService = new RenditionsService();
     const informationService = new InformationUnitsService();
@@ -19,29 +23,65 @@ 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);
-    let htmlContent = ""
+    const versionOf = informationUnitsItem.versionOf.shortId
+
+    const promiseList: any = [
+        informationService.getList({
+            restrict: [`versionOf.shortId=${versionOf}`], // TODO: replace from filter to restrict
+            fields: ["renditions", "class", "languages", "labels"],
+        }),
+    ]
+
+    const rootNode = await getRootNode(informationUnitsItem.directoryNodes)
 
     if (rootNode != null) {
         title = rootNode.informationUnits[0]?.labels[0]?.value;
     }
 
-    if (type == TOPICS_TYPE_AND_LINK) {
-        htmlContent = await renditionService.getHTMLRendition({ renditions: informationUnitsItem.renditions });
+    if ([TOPICS_TYPE_AND_LINK, BLOG_TYPE_AND_LINK].includes(type)) {
+        promiseList.push(
+            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 });
+
+        promiseList.push(
+            renditionService.getHTMLRendition({ renditions: childInformationUnit.renditions })
+        )
     }
 
+    const [versions, htmlContent] = await Promise.all(promiseList)
+
+    const availableVersions = versions.items.map((item: informationUnitsResponseItem) => {
+        return {
+            shortId: item.shortId,
+            link: `/${type}/${item.shortId}`,
+            lang: item.language,
+            country: item.language.split("-")[1],
+            active: item.language === lang,
+        }
+    }).sort((a: SidebarAvailableVersionsInterface, b: SidebarAvailableVersionsInterface) => {
+        if (a.lang < b.lang) return -1;
+        if (a.lang > b.lang) return 1;
+        return 0;
+    }) as SidebarAvailableVersionsInterface[];
+
     return {
         htmlContent,
+        packageId: informationUnitsItem.packages[0]?.shortId as string,
         title: title as string,
         lang: lang as string,
+        availableVersions
     }
 }
 
@@ -70,4 +110,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,17 +1,18 @@
 "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";
+import { useAppConfig } from "@c-rex/contexts/config-provider";
 
 type Props = {
     htmlContent: string,
@@ -19,38 +20,20 @@ type Props = {
     id: string,
     type: string,
     lang: string,
+    availableVersions: SidebarAvailableVersionsInterface[],
+    packageId: string,
 }
-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 +41,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,15 +65,14 @@ 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, packageId }: Props) => {
+    const { setPackageID } = useAppConfig()
     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
@@ -109,16 +93,15 @@ export const ArticleWrapper = ({ htmlContent, title, id, type, lang }: Props) =>
     })
 
     useEffect(() => {
-        const fetchData = async () => {
+        setPackageID(packageId)
 
+        const fetchData = async () => {
             const {
-                availableVersions,
                 treeOfContent,
                 documents,
                 breadcrumbItems,
             } = await loadArticleData(id, type, title)
 
-            setAvailableVersions(availableVersions)
             setTreeOfContent(treeOfContent)
             setDocuments(documents)
             setBreadcrumbItems(breadcrumbItems)

package/src/home/layout.tsx

@@ -1,19 +1,23 @@
-import React from "react";
 import { informationUnitsResponse } from "@c-rex/interfaces";
 import { InformationUnitsService } from "@c-rex/services";
 import { HomePage } from "./page";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
+import { WildCardType } from "@c-rex/types";
 
 interface HomeProps {
     searchParams: {
         search?: string;
-        page?: string;
-        language?: string;
+        page: string;
+        language: string;
+        wildcard: string;
+        operator: string;
+        like: string;
+        package?: string;
     };
 }
 
 export const HomeLayout = async ({ searchParams }: HomeProps) => {
-    const { search, page, language } = searchParams;
+    const { search, page, language, wildcard, operator, like, package: packageParam } = searchParams;
 
     let data = {
         items: [],
@@ -22,35 +26,30 @@ export const HomeLayout = async ({ searchParams }: HomeProps) => {
             pageNumber: 0
         }
     } as unknown as informationUnitsResponse;
-    let selectedLanguages: string[] = [];
 
     if (search !== undefined) {
-        const pageAux = Number(page);
-        const searchValue = search;
 
-        if (language != undefined) {
-            const aux = language;
-            selectedLanguages = aux.split(",");
-        }
-
-        if (searchValue) {
-            const service = new InformationUnitsService();
-
-            data = await service.getList({
-                queries: searchValue.split(" ").join(","),
-                page: pageAux,
-                fields: ["renditions", "class", "languages", "labels"],
-                languages: selectedLanguages
-            });
+        const filters: string[] = []
+        if (packageParam && packageParam.length > 0) {
+            filters.push(`packages.shortId=${packageParam}`)
         }
+        const service = new InformationUnitsService();
+
+        data = await service.getList({
+            queries: search,
+            page: Number(page),
+            fields: ["renditions", "class", "languages", "labels"],
+            languages: language.split(","),
+            wildcard: wildcard as WildCardType,
+            operator: operator,
+            like: Boolean(like === "true"),
+            filters: filters
+        });
     }
 
     return (
-        <PageWrapper title="">
-            <HomePage
-                data={data}
-                selectedLanguages={selectedLanguages}
-            />
+        <PageWrapper title="" showInput={false}>
+            <HomePage data={data} />
         </PageWrapper>
     );
 };

package/src/home/page.tsx

@@ -1,26 +1,25 @@
 "use client";
 
-import React, { FC } from "react";
+import React, { FC, useEffect, useState } 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 { parseAsBoolean, 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 { CONTENT_LANG_KEY, WILD_CARD_OPTIONS } from "@c-rex/constants";
 import { useAppConfig } from "@c-rex/contexts/config-provider";
+import { AutoComplete } from "@c-rex/components/autocomplete";
 
 interface HomePageProps {
     data: informationUnitsResponse;
-    selectedLanguages: string[];
 }
 
-export const HomePage: FC<HomePageProps> = ({ data, selectedLanguages }) => {
-    const { configs, availableLanguagesAndCountries: availableLanguages, contentLang } = useAppConfig()
+export const HomePage: FC<HomePageProps> = ({ data }) => {
     const t = useTranslations();
+    const { configs } = useAppConfig()
+    const [disabled, setDisabled] = useState<boolean>(false)
     const [params, setParams] = useQueryStates({
         search: {
             defaultValue: "",
@@ -28,51 +27,34 @@ export const HomePage: FC<HomePageProps> = ({ data, selectedLanguages }) => {
                 return value
             },
         },
-        operator: parseAsString,
-        language: parseAsString,
-        page: parseAsInteger,
     }, {
         history: 'push',
         shallow: false,
     });
 
-    const { search } = params;
-
-    const onSearch = (value: string): Promise<string[]> => {
-        return call("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,
-                });
-            });
-    };
+    useEffect(() => {
+        if (params.search.length > 0) {
+            setDisabled(false)
+        } else {
+            setDisabled(true)
+        }
+    }, [params])
 
     return (
         <div className="container">
             <div className="grid grid-cols-12 gap-4 py-6">
-                <div className="col-span-12 sm:col-span-9 md:col-span-10">
+                <div className="col-span-12 sm:col-span-10 md:col-span-10">
                     <AutoComplete
-                        initialValue={search}
-                        onSearch={onSearch}
-                        onSelect={onSelect}
+                        embedded={false}
+                        initialValue={params.search}
+                        searchByPackage={false}
                     />
                 </div>
-                <div className="col-span-12 sm:col-span-3 md:col-span-2">
+                <div className="col-span-12 sm:col-span-2 md:col-span-2">
                     <div className="flex justify-end">
                         <DialogFilter
-                            startSelectedLanguages={selectedLanguages}
-                            availableLanguages={availableLanguages}
                             trigger={(
-                                <Button variant="default">{t("filters")}</Button>
+                                <Button variant="default" disabled={disabled}>{t("filter.filters")}</Button>
                             )}
                         />
                     </div>