Rename rerenderModal to renderModal

src/client/components/modal.tsx

@@ -6,9 +6,10 @@ import { theme } from '../themes'
 let modalTitle: string | null = null
 let modalContent: (() => Child) | null = null
 
+const root = document.getElementById('modal')!
+
 const renderModal = () => {
-  const root = document.getElementById('modal')
+  render(<Modal />, root)
-  if (root) render(<Modal />, root)
 }
 
 export const openModal = (title: string, content: () => Child) => {
@@ -26,9 +27,7 @@ export const closeModal = () => {
   renderModal()
 }
 
-export const rerenderModal = () => {
+export { renderModal }
-  renderModal()
-}
 
 // ESC key handler
 document.addEventListener('keydown', (e) => {

src/client/modals/DeleteApp.tsx

@@ -1,5 +1,5 @@
 import type { App } from '../../shared/types'
-import { closeModal, openModal, rerenderModal } from '../components/modal'
+import { closeModal, openModal, renderModal } from '../components/modal'
 import { navigate } from '../router'
 import { selectedApp } from '../state'
 import { Button, Form, FormActions, FormError, FormField, FormInput, FormLabel } from '../styles'
@@ -17,13 +17,13 @@ async function deleteApp(input: HTMLInputElement) {
 
   if (value !== expected) {
     deleteAppError = `Type "${expected}" to confirm`
-    rerenderModal()
+    renderModal()
     return
   }
 
   deleteAppDeleting = true
   deleteAppError = ''
-  rerenderModal()
+  renderModal()
 
   try {
     const res = await fetch(`/api/sync/apps/${deleteAppTarget.name}`, {
@@ -41,7 +41,7 @@ async function deleteApp(input: HTMLInputElement) {
   } catch (err) {
     deleteAppError = err instanceof Error ? err.message : 'Failed to delete app'
     deleteAppDeleting = false
-    rerenderModal()
+    renderModal()
   }
 }
 

src/client/modals/NewApp.tsx

@@ -1,4 +1,4 @@
-import { closeModal, openModal, rerenderModal } from '../components/modal'
+import { closeModal, openModal, renderModal } from '../components/modal'
 import { navigate } from '../router'
 import { apps } from '../state'
 import { Button, Form, FormActions, FormCheckbox, FormCheckboxField, FormCheckboxLabel, FormError, FormField, FormInput, FormLabel, FormSelect } from '../styles'
@@ -16,25 +16,25 @@ async function createNewApp() {
 
   if (!name) {
     newAppError = 'App name is required'
-    rerenderModal()
+    renderModal()
     return
   }
 
   if (!/^[a-z][a-z0-9-]*$/.test(name)) {
     newAppError = 'Name must start with a letter and contain only lowercase letters, numbers, and hyphens'
-    rerenderModal()
+    renderModal()
     return
   }
 
   if (apps.some(a => a.name === name)) {
     newAppError = 'An app with this name already exists'
-    rerenderModal()
+    renderModal()
     return
   }
 
   newAppCreating = true
   newAppError = ''
-  rerenderModal()
+  renderModal()
 
   try {
     const res = await fetch('/api/apps', {
@@ -55,7 +55,7 @@ async function createNewApp() {
   } catch (err) {
     newAppError = err instanceof Error ? err.message : 'Failed to create app'
     newAppCreating = false
-    rerenderModal()
+    renderModal()
   }
 }
 
@@ -105,7 +105,7 @@ export function openNewAppModal() {
           checked={newAppTool}
           onChange={(e: Event) => {
             newAppTool = (e.target as HTMLInputElement).checked
-            rerenderModal()
+            renderModal()
           }}
         />
         <FormCheckboxLabel for="app-tool">Tool</FormCheckboxLabel>

src/client/modals/RenameApp.tsx

@@ -1,5 +1,5 @@
 import type { App } from '../../shared/types'
-import { closeModal, openModal, rerenderModal } from '../components/modal'
+import { closeModal, openModal, renderModal } from '../components/modal'
 import { navigate } from '../router'
 import { apps } from '../state'
 import { Button, Form, FormActions, FormError, FormField, FormInput, FormLabel } from '../styles'
@@ -15,13 +15,13 @@ async function doRenameApp(input: HTMLInputElement) {
 
   if (!newName) {
     renameAppError = 'App name is required'
-    rerenderModal()
+    renderModal()
     return
   }
 
   if (!/^[a-z][a-z0-9-]*$/.test(newName)) {
     renameAppError = 'Name must start with a letter and contain only lowercase letters, numbers, and hyphens'
-    rerenderModal()
+    renderModal()
     return
   }
 
@@ -32,13 +32,13 @@ async function doRenameApp(input: HTMLInputElement) {
 
   if (apps.some(a => a.name === newName)) {
     renameAppError = 'An app with this name already exists'
-    rerenderModal()
+    renderModal()
     return
   }
 
   renameAppRenaming = true
   renameAppError = ''
-  rerenderModal()
+  renderModal()
 
   try {
     const res = await fetch(`/api/apps/${renameAppTarget.name}/rename`, {
@@ -65,7 +65,7 @@ async function doRenameApp(input: HTMLInputElement) {
   } catch (err) {
     renameAppError = err instanceof Error ? err.message : 'Failed to rename app'
     renameAppRenaming = false
-    rerenderModal()
+    renderModal()
   }
 }