@c-rex/templates 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/templates",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "files": [
     "src"
@@ -57,6 +57,7 @@
     "next-intl": "^4.1.0",
     "nuqs": "^2.4.3",
     "react": "^18",
+    "sonner": "^2.0.5",
     "react-dom": "^18",
     "react-i18next": "^15.5.1"
   }

package/src/articles/documents/page.tsx

@@ -1,56 +1,8 @@
 import React from "react";
-import { SidebarInset, SidebarProvider } from "@c-rex/ui/sidebar";
-import { AppSidebar } from "@c-rex/components/sidebar";
-import { Breadcrumb } from "@c-rex/components/breadcrumb";
-import { loadArticleData } from "@c-rex/utils";
-
-export const DocumentsPageTemplate = async ({ params }: { params: { id: string } }) => {
-    const { documentURL, availableVersions: availableVersionsAux, title } = await loadArticleData(params.id)
-
-    const availableVersions = availableVersionsAux.map((item) => {
-        return {
-            link: `/documents/${item.shortId}`,
-            ...item,
-        }
-    })
+import { ArticleWrapper } from "../wrapper";
 
+export const DocumentsPageTemplate = ({ params }: { params: { id: string } }) => {
     return (
-        <SidebarProvider>
-            <title>{title}</title>
-            <AppSidebar
-                data={[]}
-                availableVersions={availableVersions}
-                className="top-20"
-                side="right"
-                variant="floating"
-                collapsible="icon"
-            />
-            <SidebarInset>
-                <div className="container flex flex-col">
-                    <header className="flex h-16 shrink-0 items-center justify-between">
-                        <div className="flex shrink-0 items-center">
-                            <Breadcrumb items={[
-                                {
-                                    link: "/",
-                                    label: title,
-                                    id: "title",
-                                    active: false,
-                                    children: [],
-                                }
-                            ]} />
-                        </div>
-                    </header>
-
-                    <div style={{ width: '100%', height: '90.6vh' }}>
-                        <iframe
-                            width="100%"
-                            height="100%"
-                            style={{ border: 'none' }}
-                            src={documentURL}
-                        />
-                    </div>
-                </div>
-            </SidebarInset>
-        </SidebarProvider>
+        <ArticleWrapper id={params.id} type="documents" />
     );
 };

package/src/articles/info/page.tsx

@@ -1,50 +1,9 @@
 import React from "react";
-import { SidebarInset, SidebarProvider } from "@c-rex/ui/sidebar";
-import { AppSidebar } from "@c-rex/components/sidebar";
-import { Breadcrumb } from "@c-rex/components/breadcrumb";
-import { loadArticleData } from "@c-rex/utils";
+import { ArticleWrapper } from "../wrapper";
 
-export const InfoPageTemplate = async ({ params }: { params: { id: string } }) => {
-    const {
-        availableVersions: availableVersionsAux,
-        title,
-        treeOfContent,
-        breadcrumbItems,
-        htmlContent
-    } = await loadArticleData(params.id)
-
-    const availableVersions = availableVersionsAux.map((item) => {
-        return {
-            link: `/topics/${item.shortId}`,
-            ...item,
-        }
-    })
+export const InfoPageTemplate = ({ params }: { params: { id: string } }) => {
 
     return (
-        <SidebarProvider>
-            <title>{title}</title>
-
-            <AppSidebar
-                data={treeOfContent}
-                availableVersions={availableVersions}
-                className="top-20"
-                side="right"
-                variant="floating"
-                collapsible="icon"
-            />
-            <SidebarInset>
-                <div className="container flex flex-col">
-                    <header className="flex h-16 shrink-0 items-center justify-between">
-                        <div className="flex shrink-0 items-center">
-                            <Breadcrumb items={breadcrumbItems} />
-                        </div>
-                    </header>
-
-                    <div
-                        dangerouslySetInnerHTML={{ __html: htmlContent }}
-                    />
-                </div>
-            </SidebarInset>
-        </SidebarProvider>
+        <ArticleWrapper id={params.id} type="topics" />
     );
 };

package/src/articles/wrapper.tsx

@@ -0,0 +1,73 @@
+import React 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 { loadArticleData } from "@c-rex/utils";
+import { getCookieFromBack } from "@c-rex/utils/next-cookies";
+import { CONTENT_LANG_KEY } from "@c-rex/constants";
+import { PageWrapper } from "@c-rex/components/page-wrapper";
+import { Breadcrumb } from "@c-rex/components/breadcrumb";
+import { DropdownMenu } from "../../../components/src/result-view/dropdown-menu";
+import { CloudDownload, Eye } from "lucide-react";
+
+type Props = {
+    id: string,
+    type: string,
+}
+export const ArticleWrapper = async ({ id, type }: Props) => {
+
+    const contentLanguage = getCookieFromBack(CONTENT_LANG_KEY);
+    const {
+        availableVersions,
+        title,
+        treeOfContent,
+        documents,
+        breadcrumbItems,
+        htmlContent
+    } = await loadArticleData(id, type)
+
+    return (
+        <PageWrapper title={title}>
+            <SidebarProvider>
+                <title>{title}</title>
+
+                <CheckArticleLangToast
+                    availableVersions={availableVersions}
+                    contentLanguage={contentLanguage}
+                />
+
+                <AppSidebar
+                    data={treeOfContent}
+                    availableVersions={availableVersions}
+                />
+                <SidebarInset>
+                    <div className="container flex flex-col">
+                        <header className="flex h-16 shrink-0 items-center justify-between">
+                            <Breadcrumb items={breadcrumbItems} />
+                            <div className="flex">
+
+                                {documents.filesToDownload.length > 0 && (
+                                    <DropdownMenu
+                                        items={documents.filesToDownload}
+                                        icon={<CloudDownload />}
+                                    />
+                                )}
+                                {documents.filesToOpen.length > 0 && (
+                                    <DropdownMenu
+                                        items={documents.filesToOpen}
+                                        icon={<Eye />}
+                                    />
+                                )}
+                            </div>
+                        </header>
+
+                        <div
+                            className="pb-4"
+                            dangerouslySetInnerHTML={{ __html: htmlContent }}
+                        />
+                    </div>
+                </SidebarInset>
+            </SidebarProvider>
+        </PageWrapper>
+    );
+};

package/src/home/layout.tsx

@@ -1,87 +1,63 @@
 import React from "react";
-import { ConfigInterface, informationUnits } from "@c-rex/interfaces";
+import { informationUnitsResponse } from "@c-rex/interfaces";
 import { InformationUnitsService, LanguageService } from "@c-rex/services";
-import { getConfigs, getCookie } from "@c-rex/utils/next-cookies";
+import { getConfigs } from "@c-rex/utils/next-cookies";
 import { HomePage } from "./page";
-import { SDK_CONFIG_KEY } from "@c-rex/constants";
+import { PageWrapper } from "@c-rex/components/page-wrapper";
 
-interface SearchParams {
-    search?: string;
-    page?: string;
-    language?: string;
-}
 interface HomeProps {
-    searchParams: SearchParams;
+    searchParams: {
+        search?: string;
+        page?: string;
+        language?: string;
+    };
 }
 
-const loadData = async ({
-    search,
-    page,
-    language,
-}: SearchParams): Promise<any> => {
-    if (search === undefined || search === "") {
-        return {
-            data: { items: [] },
-            filters: {
-                searchValue: "",
-                page: 0,
-                selectedLanguage: [],
-                availableLanguages: [],
-            },
-        };
-    }
+export const HomeLayout = async ({ searchParams }: HomeProps) => {
+    const { search, page, language } = searchParams;
 
-    const pageAux = Number(page);
     const configs = await getConfigs();
-    const searchValue = search as string;
     const languageService = new LanguageService(configs.languageSwitcher.endpoint);
     const availableLanguagesAndCountries = await languageService.getLanguagesAndCountries();
 
-    let data = { items: [] } as unknown as informationUnits;
+    let data = {
+        items: [],
+        pageInfo: {
+            pageCount: 0,
+            pageNumber: 0
+        }
+    } as unknown as informationUnitsResponse;
     let selectedLanguages: string[] = [];
 
-    if (language != undefined) {
-        const aux = language as string;
-        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
-        });
+    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
+            });
+        }
     }
 
-    return {
-        data: data,
-        filters: {
-            searchValue: searchValue,
-            page: pageAux,
-            selectedLanguages: selectedLanguages,
-            availableLanguages: availableLanguagesAndCountries,
-        },
-    };
-};
-
-export const HomeLayout = async ({ searchParams }: HomeProps) => {
-    const { data, filters: { selectedLanguages, availableLanguages } } = await loadData(searchParams);
-    const jsonConfigs = await getCookie(SDK_CONFIG_KEY);
-    if (!jsonConfigs) {
-        return null;
-    }
-
-    const configs: ConfigInterface = JSON.parse(jsonConfigs);
-
     return (
-        <HomePage
-            data={data}
-            configs={configs}
-            selectedLanguages={selectedLanguages}
-            availableLanguages={availableLanguages}
-        />
+        <PageWrapper title="">
+            <HomePage
+                data={data}
+                configs={configs}
+                selectedLanguages={selectedLanguages}
+                availableLanguages={availableLanguagesAndCountries}
+            />
+        </PageWrapper>
     );
 };

package/src/home/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { FC } from "react";
-import { ConfigInterface, informationUnits } from "@c-rex/interfaces";
+import { ConfigInterface, informationUnitsResponse, LanguageAndCountries } from "@c-rex/interfaces";
 import { call } from "@c-rex/utils";
 import { Button } from "@c-rex/ui/button";
 import { AutoComplete } from "@c-rex/components/autocomplete";
@@ -9,22 +9,17 @@ 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/next-cookies";
+import { getCookieInFront } from "@c-rex/utils";
 import { CONTENT_LANG_KEY } from "@c-rex/constants";
 
 interface HomePageProps {
-    data: informationUnits;
+    data: informationUnitsResponse;
     selectedLanguages: string[];
-    availableLanguages: any;
+    availableLanguages: LanguageAndCountries[];
     configs: ConfigInterface
 }
 
-export const HomePage: FC<HomePageProps> = ({
-    data,
-    selectedLanguages,
-    availableLanguages,
-    configs
-}) => {
+export const HomePage: FC<HomePageProps> = ({ data, selectedLanguages, availableLanguages, configs }) => {
     const t = useTranslations();
     const [params, setParams] = useQueryStates({
         search: {
@@ -48,14 +43,17 @@ export const HomePage: FC<HomePageProps> = ({
     }
 
     const onSelect = (value: string) => {
-        getCookie(CONTENT_LANG_KEY).then((language) => {
-            setParams({
-                search: value,
-                operator: "OR",
-                page: 1,
-                language: language,
+        //show loading
+        getCookieInFront(CONTENT_LANG_KEY)
+            .then((cookie) => cookie.value)
+            .then((cookie) => {
+                setParams({
+                    search: value,
+                    operator: "OR",
+                    page: 1,
+                    language: cookie,
+                });
             });
-        });
     };
 
     return (
@@ -71,7 +69,6 @@ export const HomePage: FC<HomePageProps> = ({
                 <div className="col-span-12 sm:col-span-3 md:col-span-2">
                     <div className="flex justify-end">
                         <DialogFilter
-
                             startSelectedLanguages={selectedLanguages}
                             availableLanguages={availableLanguages}
                             trigger={(
@@ -82,7 +79,11 @@ export const HomePage: FC<HomePageProps> = ({
                 </div>
             </div>
 
-            <ResultList items={data.items} configs={configs} />
+            <ResultList
+                configs={configs}
+                items={data.items}
+                pagination={data.pageInfo}
+            />
         </div>
     );
 };

package/src/layout.tsx

@@ -1,7 +1,11 @@
 import React from "react";
-import { NavBar } from "@c-rex/components/navbar";
 import { NextIntlClientProvider } from 'next-intl';
 import { getLocale } from "next-intl/server";
+import { Toaster } from "@c-rex/ui/sonner"
+import { LanguageService } from "@c-rex/services";
+import { getConfigs } from "@c-rex/utils/next-cookies";
+import { SetCookies } from "@c-rex/components/cookies";
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
 
 interface DefaultRootLayoutProps {
     children: React.ReactNode;
@@ -9,20 +13,24 @@ interface DefaultRootLayoutProps {
 
 export const DefaultRootLayout = async ({ children }: DefaultRootLayoutProps) => {
     const locale = await getLocale();
+    const configs = await getConfigs();
+    const languageService = new LanguageService(configs.languageSwitcher.endpoint);
+    const availableLanguages = await languageService.getLanguagesAndCountries();
 
     return (
-        <html lang={locale} suppressHydrationWarning>
-            <head />
-            <body className="min-h-screen bg-background font-sans antialiased">
-                <div className="items-center flex flex-col">
-                    <NextIntlClientProvider>
-
-                        <NavBar />
-
-                        {children}
-                    </NextIntlClientProvider>
-                </div>
-            </body>
-        </html>
+        <NuqsAdapter>
+            <html lang={locale} suppressHydrationWarning>
+                <head />
+                <body className="min-h-screen bg-background font-sans antialiased">
+                    <div className="items-center flex flex-col">
+                        <NextIntlClientProvider>
+                            <Toaster />
+                            <SetCookies configs={configs} availableLanguages={availableLanguages} />
+                            {children}
+                        </NextIntlClientProvider>
+                    </div>
+                </body>
+            </html>
+        </NuqsAdapter>
     );
 }