fix(permalinks): default permalink for create

isomerpages · Mar 14, 2024 · e8131c2 · e8131c2
1 parent 89198d5
commit e8131c2
Showing 1 changed file with 35 additions and 2 deletions.
diff --git a/src/components/PageSettingsModal/PageSettingsModal.tsx b/src/components/PageSettingsModal/PageSettingsModal.tsx
@@ -96,6 +96,7 @@ export const PageSettingsModal = ({
 }: PageSettingsModalParams) => {
   const { siteName, fileName } = params
   const isTiptapEnabled = useFeatureIsOn("is-tiptap-enabled")
+  const isPageCreated = !fileName
 
   const existingTitlesArray = pagesData
     .filter((page) => page.name !== fileName)
@@ -146,6 +147,24 @@ export const PageSettingsModal = ({
     })
   }
 
+  const getDefaultPermalink = (title: string) => {
+    if (!title) return ""
+    const titleSlug = title
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "")
+    return `/${titleSlug}/`
+  }
+
+  useEffect(() => {
+    if (
+      isPageCreated &&
+      watch("permalink") !== getDefaultPermalink(watch("title"))
+    ) {
+      setValue("permalink", getDefaultPermalink(watch("title")))
+    }
+  }, [isPageCreated, setValue, watch])
+
   return (
     <Modal isOpen onClose={onClose}>
       <ModalOverlay />
@@ -170,7 +189,10 @@ export const PageSettingsModal = ({
               />
               {/* Title */}
               <FormControl isRequired isInvalid={!!errors.title?.message}>
-                <FormLabel>Page title</FormLabel>
+                <FormLabel mb={0}>Page title</FormLabel>
+                <FormLabel.Description color="text.description">
+                  This appears on the top of the browser window or tab
+                </FormLabel.Description>
                 <Input
                   placeholder="Page title"
                   id="title"
@@ -184,14 +206,25 @@ export const PageSettingsModal = ({
                 <Box mb="0.75rem">
                   <FormLabel mb={0}>Page URL</FormLabel>
                   <FormLabel.Description color="text.description">
-                    {`${siteUrl}${watch("permalink")}`}
+                    {isPageCreated
+                      ? "You can change this later in Page Settings."
+                      : `${siteUrl}${watch("permalink")}`}
                   </FormLabel.Description>
                 </Box>
                 <Input
                   {...register("permalink", { required: true })}
                   id="permalink"
                   placeholder="Insert /page-url or https://"
+                  isDisabled={isPageCreated}
                 />
+                {isPageCreated && (
+                  <Box mt="0.5rem" mb="0.5rem">
+                    <Text textStyle="body-2">
+                      {`${siteUrl}${watch("permalink")}`}
+                    </Text>
+                  </Box>
+                )}
+
                 <FormErrorMessage>{errors.permalink?.message}</FormErrorMessage>
               </FormControl>
               <br />