84 lines
3.3 KiB
TypeScript
84 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import React, { createContext, useContext, useEffect, useState } from 'react';
|
|
import { lmsApi, Organization } from '@/lib/api';
|
|
|
|
interface BrandingContextType {
|
|
branding: Organization | null;
|
|
loading: boolean;
|
|
}
|
|
|
|
const BrandingContext = createContext<BrandingContextType>({
|
|
branding: null,
|
|
loading: true,
|
|
});
|
|
|
|
export const useBranding = () => useContext(BrandingContext);
|
|
|
|
export const BrandingProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const [branding, setBranding] = useState<Organization | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const orgId = process.env.NEXT_PUBLIC_ORG_ID || '00000000-0000-0000-0000-000000000001';
|
|
|
|
useEffect(() => {
|
|
const loadBranding = async () => {
|
|
try {
|
|
const data = await lmsApi.getBranding(orgId);
|
|
setBranding(data);
|
|
|
|
// Apply CSS variables
|
|
if (data.primary_color) {
|
|
document.documentElement.style.setProperty('--primary-color', data.primary_color);
|
|
}
|
|
if (data.secondary_color) {
|
|
document.documentElement.style.setProperty('--secondary-color', data.secondary_color);
|
|
}
|
|
|
|
// Update Title
|
|
if (data.platform_name) {
|
|
document.title = `${data.platform_name} | Experiencia de Aprendizaje`;
|
|
}
|
|
|
|
// Update Favicon
|
|
if (data.favicon_url) {
|
|
// Import getImageUrl logic locally or assume it needs import
|
|
// Since I can't easily add import at top with replace_file, I will assume getImageUrl handles the path or do logic here.
|
|
// Actually I need to import getImageUrl at the top. Instead of complicating, I'll update imports too.
|
|
const getImageUrl = (path?: string) => {
|
|
if (!path) return '';
|
|
if (path.startsWith('http')) return path;
|
|
const CMS_API_URL = process.env.NEXT_PUBLIC_CMS_API_URL || "http://localhost:3001";
|
|
const cleanPath = path.startsWith('/uploads') ? path.replace('/uploads', '/assets') : path;
|
|
const finalPath = cleanPath.startsWith('/') ? cleanPath : `/${cleanPath}`;
|
|
return `${CMS_API_URL}${finalPath}`;
|
|
};
|
|
|
|
const faviconUrl = getImageUrl(data.favicon_url);
|
|
const link: HTMLLinkElement | null = document.querySelector("link[rel*='icon']");
|
|
if (link) {
|
|
link.href = faviconUrl;
|
|
} else {
|
|
const newLink = document.createElement("link");
|
|
newLink.rel = "shortcut icon";
|
|
newLink.href = faviconUrl;
|
|
document.head.appendChild(newLink);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load branding', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
loadBranding();
|
|
}, [orgId]);
|
|
|
|
return (
|
|
<BrandingContext.Provider value={{ branding, loading }}>
|
|
{children}
|
|
</BrandingContext.Provider>
|
|
);
|
|
};
|