@c-rex/contexts 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@c-rex/contexts",
-    "version": "0.1.9",
+    "version": "0.1.10",
     "type": "module",
     "files": [
         "src"
@@ -16,6 +16,10 @@
         "./search": {
             "types": "./src/search.tsx",
             "import": "./src/search.tsx"
+        },
+        "./highlight-provider": {
+            "types": "./src/highlight-provider.tsx",
+            "import": "./src/highlight-provider.tsx"
         }
     },
     "scripts": {
@@ -34,8 +38,8 @@
     },
     "dependencies": {
         "next": "^14",
-        "react": "^18",
-        "react-dom": "^18",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "@c-rex/core": "*",
         "@c-rex/constants": "*",
         "@c-rex/services": "*",

package/src/config-provider.tsx

@@ -1,23 +1,19 @@
 "use client"
 
-import { CONTENT_LANG_KEY, CREX_TOKEN_HEADER_KEY, UI_LANG_KEY, UI_LANG_OPTIONS } from '@c-rex/constants'
+import { CREX_TOKEN_HEADER_KEY, UI_LANG_OPTIONS } from '@c-rex/constants'
 import { ConfigInterface, LanguageAndCountries, AvailableVersionsInterface } from '@c-rex/interfaces'
-import { call, getCookie, getFromCookieString, setCookie } from '@c-rex/utils'
+import { call } from '@c-rex/utils'
 import { getConfigs } from '@c-rex/utils/next-cookies'
 import React, { createContext, useContext, useEffect, useState } from 'react'
+import { useLanguageStore } from '@c-rex/components/language-store'
 
 type AppConfigContextType = {
     error: Error | null
-    uiLang: string | null
     configs: ConfigInterface
     loading: boolean
     packageID: string | null
-    contentLang: string | null
     articleLang: string | null
     availableVersions: AvailableVersionsInterface[] | null
-    availableLanguagesAndCountries: LanguageAndCountries[]
-    setUiLang: (lang: string | null) => void
-    setContentLang: (lang: string | null) => void
     setAvailableVersions: (versions: AvailableVersionsInterface[] | null) => void
     setPackageID: (id: string | null) => void
     setArticleLang: (lang: string | null) => void
@@ -27,31 +23,34 @@ const AppConfigContext = createContext<AppConfigContextType | undefined>(undefin
 
 export const AppConfigProvider = ({ children }: { children: React.ReactNode }) => {
     const [error, setError] = useState<Error | null>(null)
-    const [uiLang, setUiLang] = useState<string | null>(null)
     const [configs, setConfigs] = useState<ConfigInterface | null>(null)
     const [loading, setLoading] = useState(true)
     const [packageID, setPackageID] = useState<string | null>(null)
     const [articleLang, setArticleLang] = useState<string | null>(null)
-    const [contentLang, setContentLang] = useState<string | null>(null)
     const [availableVersions, setAvailableVersions] = useState<AvailableVersionsInterface[] | null>(null)
-    const [availableLanguagesAndCountries, setAvailableLanguagesAndCountries] = useState<LanguageAndCountries[] | null>(null)
+
 
     const manageUILanguage = async (configs: ConfigInterface): Promise<void> => {
-        let locale = getFromCookieString(document.cookie, UI_LANG_KEY)
+        const uiLang = useLanguageStore.getState().uiLang;
+        const setUiLang = useLanguageStore.getState().setUiLang;
+        let locale = uiLang
+
         if (locale.length === 0) {
             const browserLang = navigator.language;
 
             locale = UI_LANG_OPTIONS.includes(browserLang.toLowerCase())
                 ? browserLang
                 : configs.languageSwitcher.default;
-
-            await setCookie(UI_LANG_KEY, locale);
         }
         setUiLang(locale)
     }
 
-    const manageContentLanguage = async (configs: ConfigInterface, availableLanguages: LanguageAndCountries[]): Promise<void> => {
-        let locale = getFromCookieString(document.cookie, CONTENT_LANG_KEY)
+    const manageContentLanguage = async (configs: ConfigInterface): Promise<void> => {
+        const contentLang = useLanguageStore.getState().contentLang;
+        const setContentLang = useLanguageStore.getState().setContentLang;
+        const availableLanguages = useLanguageStore.getState().availableLanguages;
+
+        let locale = contentLang
         if (locale.length === 0) {
             const browserLang = navigator.language;
             const hasLang = availableLanguages.some((item) => item.value === browserLang);
@@ -59,22 +58,25 @@ export const AppConfigProvider = ({ children }: { children: React.ReactNode }) =
             locale = hasLang
                 ? browserLang
                 : configs.languageSwitcher.default;
-
-            await setCookie(CONTENT_LANG_KEY, locale);
         }
 
         setContentLang(locale)
     }
 
-    const manageToken = async (): Promise<void> => {
+    const manageToken = async (configs: ConfigInterface): Promise<void> => {
         try {
-            const hasToken = await getCookie(CREX_TOKEN_HEADER_KEY);
+            const url = configs.publicNextApiUrl
+            const res = await fetch(`${url}/api/cookies?key=${CREX_TOKEN_HEADER_KEY}`);
+
+            if (!res.ok) {
+                await requestToken(configs);
+                return
+            }
+
+            const hasToken = await res.json();
 
             if (hasToken.value === null) {
-                await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/token`, {
-                    method: 'POST',
-                    credentials: 'include',
-                });
+                await requestToken(configs);
             }
         } catch (error) {
             call("CrexLogger.log", {
@@ -84,40 +86,62 @@ export const AppConfigProvider = ({ children }: { children: React.ReactNode }) =
         }
     }
 
-    async function interval(delayMs: number) {
+    const requestToken = async (configs: ConfigInterface): Promise<void> => {
+        try {
+            await fetch(`${configs.publicNextApiUrl}/api/token`, {
+                method: 'POST',
+                credentials: 'include',
+            });
+        } catch (error) {
+            call("CrexLogger.log", {
+                level: "error",
+                message: `config-provider.requestToken error: ${error}`
+            });
+        }
+    }
+
+    const interval = async (delayMs: number, configs: ConfigInterface) => {
         while (true) {
             await new Promise(resolve => setTimeout(resolve, delayMs));
-            await manageToken()
+            await manageToken(configs);
         }
     }
 
+    const updateLanguages = async () => {
+        const setAvailableLanguages = useLanguageStore.getState().setAvailableLanguages;
+
+        const langs = await call<LanguageAndCountries[]>("LanguageService.getLanguagesAndCountries")
+        setAvailableLanguages(langs)
+    }
+
     useEffect(() => {
+        useLanguageStore.getState().hydrate();
+
         const load = async () => {
             try {
                 setLoading(true)
 
-                await manageToken()
-
-                const [configsResult, langs] = await Promise.all([
-                    getConfigs(),
-                    call<LanguageAndCountries[]>("LanguageService.getLanguagesAndCountries")
-                ])
-
+                const configsResult = await getConfigs()
                 if (!configsResult) {
                     throw new Error("Config cookie not available");
                 }
 
+                await manageToken(configsResult)
+
                 await Promise.all([
                     manageUILanguage(configsResult),
-                    manageContentLanguage(configsResult, langs)
+                    manageContentLanguage(configsResult),
+                    updateLanguages()
                 ])
 
-                setAvailableLanguagesAndCountries(langs)
-                setConfigs(configsResult)
                 setError(null)
-
-                interval(1000 * 60 * 9);
+                setConfigs(configsResult)
+                interval(1000 * 60 * 9, configsResult);
             } catch (err) {
+                call("CrexLogger.log", {
+                    level: "error",
+                    message: `config-provider.load error: ${err}`
+                });
                 setError(err as Error)
             } finally {
                 setLoading(false)
@@ -137,17 +161,12 @@ export const AppConfigProvider = ({ children }: { children: React.ReactNode }) =
         <AppConfigContext.Provider
             value={{
                 configs: configs!,
-                availableLanguagesAndCountries: availableLanguagesAndCountries!,
                 loading,
                 error,
-                uiLang,
-                contentLang,
                 availableVersions,
                 packageID,
                 articleLang,
                 setArticleLang,
-                setUiLang,
-                setContentLang,
                 setAvailableVersions,
                 setPackageID
             }}

package/src/highlight-provider.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import {
+    createContext,
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
+
+type HighlightContextType = {
+    currentIndex: number;
+    total: number;
+    next: () => void;
+    prev: () => void;
+    registerContainer: (el: HTMLElement | null) => void;
+};
+
+const HighlightContext = createContext<HighlightContextType | null>(null);
+
+export const HighlightProvider = ({ children }: { children: React.ReactNode }) => {
+
+    const containerRef = useRef<HTMLElement | null>(null);
+    const [marks, setMarks] = useState<NodeListOf<HTMLElement> | null>(null);
+    const [currentIndex, setCurrentIndex] = useState(-1);
+
+    const registerContainer = useCallback((el: HTMLElement | null) => {
+        containerRef.current = el;
+        if (el) {
+            const found = el.querySelectorAll("mark");
+            setMarks(found);
+            setCurrentIndex(found.length > 0 ? 0 : -1);
+        } else {
+            setMarks(null);
+            setCurrentIndex(-1);
+        }
+    }, []);
+
+    useEffect(() => {
+        if (marks && currentIndex >= 0 && marks[currentIndex]) {
+            marks.forEach((m) => m.classList.remove("bg-yellow-200", "bg-orange-300"));
+            marks[currentIndex].classList.add("bg-orange-300");
+            marks[currentIndex].scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+    }, [currentIndex, marks]);
+
+    const next = () => {
+        if (!marks || marks.length === 0) return;
+        setCurrentIndex((i) => (i + 1) % marks.length);
+    };
+
+    const prev = () => {
+        if (!marks || marks.length === 0) return;
+        setCurrentIndex((i) => (i - 1 + marks.length) % marks.length);
+    };
+
+    return (
+        <HighlightContext.Provider
+            value={{
+                currentIndex,
+                total: marks?.length ?? 0,
+                next,
+                prev,
+                registerContainer,
+            }}
+        >
+            {children}
+        </HighlightContext.Provider>
+    );
+};
+
+export const useHighlight = () => {
+    const ctx = useContext(HighlightContext);
+    if (!ctx) throw new Error("useHighlight must be used inside HighlightProvider");
+    return ctx;
+};