balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

MainWindow.js (3165B)

      1 import {
      2     Fragment, useRef, useEffect,
      3 } from '@wordpress/element'
      4 import { Dialog, Transition } from '@headlessui/react'
      5 import useBeacon from '../../hooks/useBeacon'
      6 import { useGlobalStore } from '../../state/GlobalState'
      7 import Router from '../Router'
      8 import useTaxonomies from '../../hooks/useTaxonomies'
      9 import { General as GeneralApi } from '../../api/General'
     10 import { useUserStore } from '../../state/User'
     11 
     12 export default function MainWindow() {
     13     const containerRef = useRef(null)
     14     const open = useGlobalStore(state => state.open)
     15     const metaData = useGlobalStore(state => state.metaData)
     16     const currentPage = useGlobalStore(state => state.currentPage)
     17     useBeacon(open)
     18     useTaxonomies(open)
     19 
     20     useEffect(() => {
     21         if (!open) return
     22         if (!useUserStore.getState().hasClickedThroughWelcomePage) {
     23             useGlobalStore.setState({ currentPage: 'welcome' })
     24             return
     25         }
     26         // if (!window.sessionStorage.getItem('esxtendify-show-guide')) {
     27         //     window.sessionStorage.setItem('esxtendify-show-guide', '1')
     28         //     useGlobalStore.setState({ currentPage: 'guide-start' })
     29         //     return
     30         // }
     31     }, [open])
     32 
     33     useEffect(() => {
     34         if (!open || Object.keys(metaData).length) {
     35             return
     36         }
     37         GeneralApi.metaData().then((data) => useGlobalStore.setState({ metaData: data }))
     38     }, [open, metaData])
     39 
     40     return (
     41         <Transition.Root show={open} as={Fragment}>
     42             <Dialog
     43                 as="div"
     44                 static
     45                 className="extendify-sdk"
     46                 initialFocus={containerRef}
     47                 onClose={() => {}}
     48             >
     49                 <div className="h-screen w-screen sm:h-auto sm:w-auto fixed z-high inset-0 overflow-y-auto">
     50                     <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
     51                         <Transition.Child
     52                             as={Fragment}
     53                             enter="ease-out duration-300"
     54                             enterFrom="opacity-0"
     55                             enterTo="opacity-100"
     56                         >
     57                             <Dialog.Overlay className="fixed inset-0 bg-black bg-opacity-30 transition-opacity" />
     58                         </Transition.Child>
     59                         <Transition.Child
     60                             as={Fragment}
     61                             enter="ease-out duration-300"
     62                             enterFrom="opacity-0 translate-y-4 sm:translate-y-5"
     63                             enterTo="opacity-100 translate-y-0"
     64                         >
     65                             <div
     66                                 ref={containerRef}
     67                                 tabIndex="0"
     68                                 className="fixed lg:absolute inset-0 lg:overflow-hidden transform transition-all lg:p-5">
     69                                 <Router page={currentPage} />
     70                             </div>
     71                         </Transition.Child>
     72                     </div>
     73                 </div>
     74             </Dialog>
     75         </Transition.Root>
     76     )
     77 }