@nitrogenbuilder/client-react/dist/useNitrogenData.js

Nitrogen Builder React Client

import { useEffect, useState } from 'react';
import { logger } from './utils/logger.js';
export function useNitrogenData(requestedData) {
    const hasData = requestedData.data && requestedData.data.length > 0;
    const [data, setData] = useState({
        id: requestedData.id,
        data: hasData ? requestedData.data : [],
        dynamicData: requestedData.dynamicData,
    });
    useEffect(() => {
        const hasData = requestedData.data && requestedData.data.length > 0;
        if (requestedData.id === data.id)
            return;
        setData({
            id: requestedData.id,
            data: hasData ? requestedData.data : [],
            dynamicData: requestedData.dynamicData,
        });
    }, [data, requestedData.id]);
    useEffect(() => {
        if (typeof window === 'undefined') {
            logger.log('window is undefined');
            return;
        }
        // if we are not in builder return and use the data passed in (page data from server)
        const urlParams = new URLSearchParams(window.location.search);
        const isBuilder = urlParams.get('nitrogen-builder');
        // TODO: Add isPreview urlParams thing or something here to also get live updates when previewing.
        if (!isBuilder) {
            return;
        }
        function windowOnMessage(event) {
            logger.log('windowOnMessage', event);
            if (!event.data) {
                return;
            }
            let data;
            try {
                data = JSON.parse(event.data);
            }
            catch (e) {
                return;
            }
            if (data.channel !== 'nitrogen-builder') {
                return;
            }
            if (data.type === 'corePageData') {
                logger.log('got corePageData from iframe', data.data);
                if (typeof window !== 'undefined') {
                    window.dispatchEvent(new CustomEvent('nitrogen-page-data', {
                        detail: { data: data.data, requestedData },
                    }));
                }
                setData((prevData) => ({
                    ...prevData,
                    data: data.data,
                }));
            }
            else if (data.type === 'patchPageData') {
                logger.log('got patchPageData from iframe', data.page);
                if (typeof window !== 'undefined') {
                    window.dispatchEvent(new CustomEvent('nitrogen-page-data', {
                        detail: { data: data.data, requestedData },
                    }));
                }
                setData((prevData) => ({
                    ...prevData,
                    data: data.data,
                }));
            }
            else if (data.type === 'patchDynamicData') {
                const dynamicData = data.dynamicData;
                setData((data) => {
                    return {
                        ...data,
                        dynamicData: {
                            ...data.dynamicData,
                            ...dynamicData.dynamicData,
                        },
                    };
                });
            }
            else if (data.type === 'usersJoined') {
                if (!window.nitrogen)
                    return;
                window.nitrogen.users = { ...window.nitrogen.users, ...data.users };
            }
            else if (data.type === 'userLeft') {
                if (!window.nitrogen)
                    return;
                const newUsers = { ...window.nitrogen.users };
                delete newUsers[data.userSocketId];
                window.nitrogen.users = newUsers;
            }
            else if (data.type === 'startScreenUsage') {
                if (!window.nitrogen)
                    return;
                const newScreenUsage = [
                    ...window.nitrogen.screenUsage,
                    data.screenUsage,
                ];
                window.nitrogen.screenUsage = newScreenUsage;
            }
            else if (data.type === 'setScreenUsage') {
                if (!window.nitrogen)
                    return;
                window.nitrogen.screenUsage = data.screenUsage;
            }
            else if (data.type === 'stopScreenUsage') {
                if (!window.nitrogen)
                    return;
                const newScreenUsage = window.nitrogen.screenUsage.filter((usage) => {
                    return !(usage.screen === data.screenUsage.screen &&
                        usage.socketId === data.screenUsage.socketId);
                });
                window.nitrogen.screenUsage = newScreenUsage;
            }
        }
        function setup() {
            if (!window.nitrogen) {
                logger.log('window.nitrogen is undefined');
                setTimeout(setup, 100);
                return;
            }
            logger.log('connecting window to iFrame message listener');
            window.addEventListener('message', windowOnMessage);
        }
        setup();
        return () => {
            logger.log('disconnecting window from iFrame message listener');
            window.removeEventListener('message', windowOnMessage);
        };
    }, []);
    if (requestedData?.moduleId) {
        return data?.data?.find((d) => d.id === requestedData.moduleId) || {};
    }
    // logger.log('returning data', data);
    return data;
}