@c-rex/contexts 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@c-rex/contexts",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "type": "module",
     "files": [
         "src"
@@ -9,6 +9,10 @@
         "access": "public"
     },
     "exports": {
+        "./config-provider": {
+            "types": "./src/config-provider.tsx",
+            "import": "./src/config-provider.tsx"
+        },
         "./search": {
             "types": "./src/search.tsx",
             "import": "./src/search.tsx"
@@ -33,6 +37,9 @@
         "react": "^18",
         "react-dom": "^18",
         "@c-rex/core": "*",
+        "@c-rex/constants": "*",
+        "@c-rex/services": "*",
+        "@c-rex/utils": "*",
         "@c-rex/interfaces": "*"
     }
 }

package/src/config-provider.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import { CONTENT_LANG_KEY, UI_LANG_KEY, UI_LANG_OPTIONS } from '@c-rex/constants'
+import { ConfigInterface, LanguageAndCountries } from '@c-rex/interfaces'
+import { call, getCookie, manageToken, setCookie } from '@c-rex/utils'
+import { getConfigs } from '@c-rex/utils/next-cookies'
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react'
+
+type AppConfigContextType = {
+    configs: ConfigInterface
+    availableLanguagesAndCountries: LanguageAndCountries[]
+    loading: boolean
+    error: Error | null
+    uiLang: string | null
+    contentLang: string | null
+    setUiLang: (lang: string | null) => void
+    setContentLang: (lang: string | null) => void
+}
+
+const AppConfigContext = createContext<AppConfigContextType | undefined>(undefined)
+
+export const AppConfigProvider = ({ children }: { children: React.ReactNode }) => {
+    const [configs, setConfigs] = useState<ConfigInterface | null>(null)
+    const [availableLanguagesAndCountries, setAvailableLanguagesAndCountries] = useState<LanguageAndCountries[] | null>(null)
+    const [loading, setLoading] = useState(true)
+    const [uiLang, setUiLang] = useState<string | null>(null)
+    const [contentLang, setContentLang] = useState<string | null>(null)
+    const [error, setError] = useState<Error | null>(null)
+    const hasRun = useRef(false)
+
+    const manageUILanguage = async (configs: ConfigInterface): Promise<void> => {
+        const hasUILangCookie = await getCookie(UI_LANG_KEY);
+        let locale = hasUILangCookie.value
+        if (hasUILangCookie.value === null) {
+            const browserLang = navigator.language;
+
+            locale = UI_LANG_OPTIONS.includes(browserLang.toLowerCase())
+                ? browserLang
+                : configs.languageSwitcher.default;
+
+            setCookie(UI_LANG_KEY, locale);
+        }
+        setUiLang(locale)
+    }
+
+    const manageContentLanguage = async (configs: ConfigInterface, availableLanguages: LanguageAndCountries[]): Promise<void> => {
+        const hasContentLangCookie = await getCookie(CONTENT_LANG_KEY);
+        let locale = hasContentLangCookie.value
+        if (hasContentLangCookie.value === null) {
+            const browserLang = navigator.language;
+            const hasLang = availableLanguages.some((item) => item.value === browserLang);
+
+            locale = hasLang
+                ? browserLang
+                : configs.languageSwitcher.default;
+
+            setCookie(CONTENT_LANG_KEY, locale);
+        }
+
+        setContentLang(locale)
+    }
+
+    async function interval(delayMs: number) {
+        while (true) {
+            await manageToken()
+            await new Promise(resolve => setTimeout(resolve, delayMs));
+        }
+    }
+
+    useEffect(() => {
+        if (hasRun.current) return
+        hasRun.current = true
+
+        const load = async () => {
+            try {
+                setLoading(true)
+
+                await manageToken()
+
+                const configsResult = await getConfigs()
+                const langs = await call<LanguageAndCountries[]>("LanguageService.getLanguagesAndCountries")
+
+                await manageUILanguage(configsResult)
+                await manageContentLanguage(configsResult, langs)
+
+                setAvailableLanguagesAndCountries(langs)
+                setConfigs(configsResult)
+                setError(null)
+
+                interval(1000 * 60 * 9);
+            } catch (err) {
+                setError(err as Error)
+            } finally {
+                setLoading(false)
+            }
+        }
+
+        load()
+    }, [])
+
+    const loadingComp = (
+        <div className="flex items-center justify-center min-h-screen bg-white">
+            <div className="animate-spin rounded-full h-12 w-12 border-2 border-gray-300 border-t-gray-950" />
+        </div>
+    )
+
+    return (
+        <AppConfigContext.Provider
+            value={{
+                configs: configs!,
+                availableLanguagesAndCountries: availableLanguagesAndCountries!,
+                loading,
+                error,
+                uiLang,
+                contentLang,
+                setUiLang,
+                setContentLang,
+            }}
+        >
+            {loading ? loadingComp : children}
+        </AppConfigContext.Provider>
+    )
+}
+
+export const useAppConfig = () => {
+    const ctx = useContext(AppConfigContext)
+    if (!ctx) throw new Error('useAppConfig must be used within AppConfigProvider')
+    return ctx
+}

package/src/search.tsx

@@ -10,11 +10,7 @@ type SearchContextProps = {
 
 const SearchContext = createContext<SearchContextProps | undefined>(undefined);
 
-export const SearchProvider = ({
-    children,
-}: {
-    children: ReactNode;
-}) => {
+export const SearchProvider = ({ children }: { children: ReactNode }) => {
     const [selectedLanguage, setSelectedLanguage] = useState<string[]>([]);
     const [availableLanguages, setAvailableLanguages] = useState<string[]>([]);