()
| 39 | ); |
| 40 | |
| 41 | const EditorPageComponent: React.FC = () => { |
| 42 | const { diagramName, currentDiagram } = useChartDB(); |
| 43 | const { openStarUsDialog } = useDialog(); |
| 44 | const { isMd: isDesktop } = useBreakpoint('md'); |
| 45 | const { starUsDialogLastOpen, setStarUsDialogLastOpen, githubRepoOpened } = |
| 46 | useLocalConfig(); |
| 47 | const { initialDiagram } = useDiagramLoader(); |
| 48 | |
| 49 | useEffect(() => { |
| 50 | if (HIDE_CHARTDB_CLOUD) { |
| 51 | return; |
| 52 | } |
| 53 | |
| 54 | if (!currentDiagram?.id || githubRepoOpened) { |
| 55 | return; |
| 56 | } |
| 57 | |
| 58 | if ( |
| 59 | new Date().getTime() - starUsDialogLastOpen > |
| 60 | 1000 * 60 * 60 * 24 * SHOW_STAR_US_AGAIN_AFTER_DAYS |
| 61 | ) { |
| 62 | const lastOpen = new Date().getTime(); |
| 63 | setStarUsDialogLastOpen(lastOpen); |
| 64 | setTimeout(openStarUsDialog, OPEN_STAR_US_AFTER_SECONDS * 1000); |
| 65 | } |
| 66 | }, [ |
| 67 | currentDiagram?.id, |
| 68 | githubRepoOpened, |
| 69 | openStarUsDialog, |
| 70 | setStarUsDialogLastOpen, |
| 71 | starUsDialogLastOpen, |
| 72 | ]); |
| 73 | |
| 74 | return ( |
| 75 | <> |
| 76 | <Helmet> |
| 77 | <title> |
| 78 | {diagramName |
| 79 | ? `ChartDB - ${diagramName} Diagram | Visualize Database Schemas` |
| 80 | : 'ChartDB - Create & Visualize Database Schema Diagrams'} |
| 81 | </title> |
| 82 | </Helmet> |
| 83 | <section |
| 84 | className={`bg-background ${isDesktop ? 'h-screen w-screen' : 'h-dvh w-dvw'} flex select-none flex-col overflow-x-hidden`} |
| 85 | > |
| 86 | <Suspense |
| 87 | fallback={ |
| 88 | <> |
| 89 | <TopNavbarMock /> |
| 90 | <div className="flex flex-1 items-center justify-center"> |
| 91 | <Spinner |
| 92 | size={isDesktop ? 'large' : 'medium'} |
| 93 | /> |
| 94 | </div> |
| 95 | </> |
| 96 | } |
| 97 | > |
| 98 | {isDesktop ? ( |
nothing calls this directly
no test coverage detected