Current Path : /home/church/www/blackfounderssummit.com/wp-content/plugins/really-simple-ssl/settings/src/ |
Current File : /home/church/www/blackfounderssummit.com/wp-content/plugins/really-simple-ssl/settings/src/Page.js |
import {useEffect, useState} from "@wordpress/element"; import Header from "./Header"; import PagePlaceholder from './Placeholder/PagePlaceholder'; import getAnchor from "./utils/getAnchor"; import useFields from "./Settings/FieldsData"; import useMenu from "./Menu/MenuData"; import useOnboardingData from "./Onboarding/OnboardingData"; import useModal from "./Modal/ModalData"; import {setLocaleData} from "@wordpress/i18n"; const Page = () => { const {error, fields, changedFields, fetchFieldsData, updateFieldsData, fieldsLoaded} = useFields(); const {showOnboardingModal, fetchOnboardingModalStatus, modalStatusLoaded,} = useOnboardingData(); const {selectedMainMenuItem, fetchMenuData } = useMenu(); const {showModal} = useModal(); const [Settings, setSettings] = useState(null); const [DashboardPage, setDashboardPage] = useState(null); const [Notices, setNotices] = useState(null); const [Menu, setMenu] = useState(null); useEffect(() => { if ( !modalStatusLoaded ) { fetchOnboardingModalStatus(); } }, []); //load the chunk translations passed to us from the rsssl_settings object //only works in build mode, not in dev mode. useEffect(() => { rsssl_settings.json_translations.forEach( (translationsString) => { let translations = JSON.parse(translationsString); let localeData = translations.locale_data[ 'really-simple-ssl' ] || translations.locale_data.messages; localeData[""].domain = 'really-simple-ssl'; setLocaleData( localeData, 'really-simple-ssl' ); }); },[]); useEffect( () => { if (selectedMainMenuItem !== 'dashboard' ){ if (!Settings) { import ("./Settings/Settings").then(({default: Settings}) => { setSettings(() => Settings); }); } if (!Notices) { import("./Settings/Notices").then(({default: Notices}) => { setNotices(() => Notices); }); } if (!Menu) { import ("./Menu/Menu").then(({default: Menu}) => { setMenu(() => Menu); }); } } if (selectedMainMenuItem === 'dashboard' && !DashboardPage ){ import ( "./Dashboard/DashboardPage").then(async ({default: DashboardPage}) => { setDashboardPage(() => DashboardPage); }); } }, [selectedMainMenuItem]); const [OnboardingModal, setOnboardingModal] = useState(null); useEffect( () => { if ( showOnboardingModal && !OnboardingModal ){ import ("./Onboarding/OnboardingModal").then(({ default: OnboardingModal }) => { setOnboardingModal(() => OnboardingModal); }); } }, [showOnboardingModal]); const [Modal, setModal] = useState(null); useEffect( () => { if ( showModal && !Modal ){ import ( "./Modal/Modal").then(({ default: Modal }) => { setModal(() => Modal); }); } }, [showModal]); useEffect( () => { if ( fieldsLoaded ) { fetchMenuData(fields); window.addEventListener('hashchange', (e) => { fetchMenuData(fields); }); } }, [fields] ); useEffect( () => { let subMenuItem = getAnchor('menu'); updateFieldsData(subMenuItem); }, [changedFields] ); useEffect( () => { let subMenuItem = getAnchor('menu'); fetchFieldsData(subMenuItem); }, [] ); if (error) { return ( <> <PagePlaceholder error={error}></PagePlaceholder> </> ) } return ( <div className="rsssl-wrapper"> {OnboardingModal && <OnboardingModal />} {Modal && <Modal/>} { <> <Header /> <div className={"rsssl-content-area rsssl-grid rsssl-" + selectedMainMenuItem}> { selectedMainMenuItem !== 'dashboard' && Settings && Menu && Notices && <> <Menu /> <Settings/> <Notices className="rsssl-wizard-notices"/> </> } { selectedMainMenuItem === 'dashboard' && DashboardPage && <DashboardPage /> } </div> </> } </div> ); } export default Page