@c-rex/templates 0.0.12 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/templates",
-  "version": "0.0.12",
+  "version": "0.1.1",
   "type": "module",
   "files": [
     "src"
@@ -41,13 +41,18 @@
     "typescript": "latest"
   },
   "dependencies": {
-    "next": "^14",
-    "react": "^18",
-    "react-dom": "^18",
-    "@c-rex/services": "*",
+    "@c-rex/components": "*",
+    "@c-rex/contexts": "*",
     "@c-rex/interfaces": "*",
+    "@c-rex/services": "*",
     "@c-rex/ui": "*",
     "@c-rex/utils": "*",
-    "@c-rex/components": "*"
+    "i18next": "^25.1.3",
+    "next": "^14",
+    "next-intl": "^4.1.0",
+    "nuqs": "^2.4.3",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-i18next": "^15.5.1"
   }
 }

package/src/home/layout.tsx

@@ -1,6 +1,9 @@
-import { informationUnits } from "@c-rex/interfaces";
-import { InformationUnitsService } from "@c-rex/services";
+import React from "react";
+import { ConfigInterface, informationUnits } from "@c-rex/interfaces";
+import { InformationUnitsService, LanguageService } from "@c-rex/services";
+import { getConfigs, getCookie } from "@c-rex/utils/next-cookies";
 import { HomePage } from "./page";
+import { SDK_CONFIG_KEY } from "@c-rex/constants";
 
 interface SearchParams {
     search?: string;
@@ -16,10 +19,23 @@ const loadData = async ({
     page,
     language,
 }: SearchParams): Promise<any> => {
-    const service = new InformationUnitsService();
-    const pageAux = page != undefined ? Number(page) : 0;
-    const searchValue = search != undefined ? (search as string) : "";
-    const availableLanguages = await service.getLanguages();
+    if (search === undefined || search === "") {
+        return {
+            data: { items: [] },
+            filters: {
+                searchValue: "",
+                page: 0,
+                selectedLanguage: [],
+                availableLanguages: [],
+            },
+        };
+    }
+
+    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 selectedLanguages: string[] = [];
@@ -30,12 +46,14 @@ const loadData = async ({
     }
 
     if (searchValue) {
-        data = await service.getList(
-            searchValue,
-            pageAux,
-            selectedLanguages,
-            [],
-        );
+        const service = new InformationUnitsService();
+
+        data = await service.getList({
+            queries: searchValue.split(" ").join(","),
+            page: pageAux,
+            fields: [],
+            languages: selectedLanguages
+        });
     }
 
     return {
@@ -43,16 +61,27 @@ const loadData = async ({
         filters: {
             searchValue: searchValue,
             page: pageAux,
-            selectedLanguage: selectedLanguages,
-            availableLanguages: availableLanguages,
+            selectedLanguages: selectedLanguages,
+            availableLanguages: availableLanguagesAndCountries,
         },
     };
 };
 
 export const HomeLayout = async ({ searchParams }: HomeProps) => {
-    const { data } = await loadData(searchParams);
+    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} />
+        <HomePage
+            data={data}
+            configs={configs}
+            selectedLanguages={selectedLanguages}
+            availableLanguages={availableLanguages}
+        />
     );
 };

package/src/home/page.tsx

@@ -1,45 +1,61 @@
 "use client";
 
-import { FC } from "react";
-import { informationUnits } from "@c-rex/interfaces";
-import { InformationUnitsService } from "@c-rex/services";
-import { updateUrlWithParams } from "@c-rex/utils";
-import { useRouter } from "next/navigation";
+import React, { FC } from "react";
+import { ConfigInterface, informationUnits } from "@c-rex/interfaces";
+import { call } 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 { useSearchContext } from '@/contexts/search'; TODO: replace for a lib how manage states from URL
+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 { CONTENT_LANG_KEY } from "@c-rex/constants";
 
 interface HomePageProps {
     data: informationUnits;
+    selectedLanguages: string[];
+    availableLanguages: any;
+    configs: ConfigInterface
 }
 
-export const HomePage: FC<HomePageProps> = ({ data }) => {
-    const router = useRouter();
-    const initialValue = null;
+export const HomePage: FC<HomePageProps> = ({
+    data,
+    selectedLanguages,
+    availableLanguages,
+    configs
+}) => {
+    const t = useTranslations();
+    const [params, setParams] = useQueryStates({
+        search: {
+            defaultValue: "",
+            parse(value) {
+                return value
+            },
+        },
+        operator: parseAsString,
+        language: parseAsString,
+        page: parseAsInteger,
+    }, {
+        history: 'push',
+        shallow: false,
+    });
+
+    const { search } = params;
 
     const onSearch = (value: string): Promise<string[]> => {
-        const service = new InformationUnitsService();
-        return service.getSuggestions(value);
-
+        return call('InformationUnitsService.getSuggestions', { query: value });
     }
 
     const onSelect = (value: string) => {
-        updateUrlWithParams(router, [
-            {
-                key: "search",
-                value: value.split(" ").join(","),
-            },
-            {
-                key: "operator",
-                value: "OR",
-            },
-            {
-                key: "page",
-                value: "1",
-            },
-        ]);
+        getCookie(CONTENT_LANG_KEY).then((language) => {
+            setParams({
+                search: value,
+                operator: "OR",
+                page: 1,
+                language: language,
+            });
+        });
     };
 
     return (
@@ -47,19 +63,26 @@ export const HomePage: FC<HomePageProps> = ({ data }) => {
             <div className="grid grid-cols-12 gap-4 py-6">
                 <div className="col-span-12 sm:col-span-9 md:col-span-10">
                     <AutoComplete
-                        initialValue={initialValue ?? ""}
+                        initialValue={search}
                         onSearch={onSearch}
                         onSelect={onSelect}
                     />
                 </div>
                 <div className="col-span-12 sm:col-span-3 md:col-span-2">
                     <div className="flex justify-end">
-                        <Button variant="default">Filters</Button>
+                        <DialogFilter
+
+                            startSelectedLanguages={selectedLanguages}
+                            availableLanguages={availableLanguages}
+                            trigger={(
+                                <Button variant="default">{t("filters")}</Button>
+                            )}
+                        />
                     </div>
                 </div>
             </div>
 
-            <ResultList items={data.items} />
+            <ResultList items={data.items} configs={configs} />
         </div>
     );
 };

package/src/info/page.tsx

@@ -1,65 +1,46 @@
 "use client";
 
-import { FC, useEffect, useRef, useState } from "react";
-import { InformationUnitsService } from "@c-rex/services";
+import React, { FC } from "react";
 import { TreeOfContent } from "@c-rex/interfaces";
-import { SidebarInset, SidebarProvider, SidebarTrigger } from "@c-rex/ui/sidebar";
-import { Separator } from "@c-rex/ui/separator";
+import { SidebarInset, SidebarProvider } from "@c-rex/ui/sidebar";
 import { AppSidebar } from "@c-rex/components/sidebar";
 import { Breadcrumb } from "@c-rex/components/breadcrumb";
-//import { generateTreeOfContent } from "@c-rex/utils";
-//import { generateBreadcrumbItems } from "@c-rex/utils";
 
 interface InfoPageTemplateProps {
     htmlContent: string;
-    id: string;
+    breadcrumbItems: TreeOfContent[];
+    sidebarItems: TreeOfContent[];
+    availableVersions: any
 }
 
-export const InfoPageTemplate: FC<InfoPageTemplateProps> = ({ htmlContent, id }) => {
-    const [breadcrumbItems, setBreadcrumbItems] = useState<TreeOfContent[]>([]);
-    const [sidebarItems, setSidebarItems] = useState<TreeOfContent[]>([]);
-    const [loading, setLoading] = useState(true);
-    const effectRan = useRef(false);
-
-    useEffect(() => {
-        if (effectRan.current) return;
-        effectRan.current = true;
-
-        const loadNavigationData = async () => {
-            const service = new InformationUnitsService();
-            const informationUnitsItem = await service.getItem(id);
-
-            if (informationUnitsItem?.directoryNodes != undefined) {
-                /*
-                const treeOfContent = await generateTreeOfContent(
-                    informationUnitsItem.directoryNodes,
-                );
-                const breadcrumbItems = generateBreadcrumbItems(treeOfContent);
-                
-                setBreadcrumbItems(breadcrumbItems);
-                setSidebarItems(treeOfContent);
-                */
-                setLoading(false);
-            }
-        };
-
-        loadNavigationData();
-    }, [id]);
-
+export const InfoPageTemplate: FC<InfoPageTemplateProps> = ({
+    htmlContent,
+    breadcrumbItems,
+    sidebarItems,
+    availableVersions
+}) => {
     return (
         <SidebarProvider>
-            <AppSidebar data={sidebarItems} loading={loading} />
+            <AppSidebar
+                data={sidebarItems}
+                availableVersions={availableVersions}
+                className="top-20"
+                side="right"
+                variant="floating"
+                collapsible="icon"
+            />
             <SidebarInset>
-                <header className="flex h-16 shrink-0 items-center">
-                    <SidebarTrigger className="-ml-1" />
-                    <Separator orientation="vertical" className="mr-2 h-4" />
-                    <Breadcrumb items={breadcrumbItems} loading={loading} />
-                </header>
-
-                <div
-                    className="flex"
-                    dangerouslySetInnerHTML={{ __html: htmlContent }}
-                />
+                <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>
     );

package/src/layout.tsx

@@ -1,24 +1,26 @@
-//import "@/styles/global.css";
-
 import React from "react";
 import { NavBar } from "@c-rex/components/navbar";
+import { NextIntlClientProvider } from 'next-intl';
+import { getLocale } from "next-intl/server";
 
 interface DefaultRootLayoutProps {
     children: React.ReactNode;
 }
 
-export const DefaultRootLayout = ({
-    children,
-}: DefaultRootLayoutProps) => {
+export const DefaultRootLayout = async ({ children }: DefaultRootLayoutProps) => {
+    const locale = await getLocale();
+
     return (
-        <html lang="en" suppressHydrationWarning>
+        <html lang={locale} suppressHydrationWarning>
             <head />
             <body className="min-h-screen bg-background font-sans antialiased">
                 <div className="items-center flex flex-col">
+                    <NextIntlClientProvider>
 
-                    <NavBar />
+                        <NavBar />
 
-                    <div className="container pt-6">{children}</div>
+                        {children}
+                    </NextIntlClientProvider>
                 </div>
             </body>
         </html>