fix(permalinks): default permalink for create

isomerpages · Mar 18, 2024 · 3f3f0ae · 3f3f0ae
1 parent 89198d5
commit 3f3f0ae
Showing 1 changed file with 46 additions and 6 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,23 @@ export const PageSettingsModal = ({
     })
   }
 
+  const getDefaultPermalink = (title: string) => {
+    if (!title) return ""
+    const titleSlug = title
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "")
+    return `/${titleSlug}/`
+  }
+
+  const currTitle = watch("title")
+  const currPermalink = watch("permalink")
+  useEffect(() => {
+    if (isPageCreated && currPermalink !== getDefaultPermalink(currTitle)) {
+      setValue("permalink", getDefaultPermalink(currTitle))
+    }
+  }, [isPageCreated, setValue, currTitle, currPermalink])
+
   return (
     <Modal isOpen onClose={onClose}>
       <ModalOverlay />
@@ -169,32 +187,54 @@ export const PageSettingsModal = ({
                 isLink={false}
               />
               {/* Title */}
-              <FormControl isRequired isInvalid={!!errors.title?.message}>
-                <FormLabel>Page title</FormLabel>
+              <FormControl
+                isRequired
+                isInvalid={!!errors.title?.message}
+                mb="1rem"
+              >
+                <Box mb="0.75rem">
+                  <FormLabel mb={0}>Page title</FormLabel>
+                  <FormLabel.Description color="text.description">
+                    This appears on the top of the browser window or tab
+                  </FormLabel.Description>
+                </Box>
                 <Input
                   placeholder="Page title"
                   id="title"
                   {...register("title", { required: true })}
                 />
                 <FormErrorMessage>{errors.title?.message}</FormErrorMessage>
               </FormControl>
-              <br />
               {/* Permalink */}
-              <FormControl isInvalid={!!errors.permalink?.message} isRequired>
+              <FormControl
+                isInvalid={!!errors.permalink?.message}
+                isRequired
+                mb="1rem"
+              >
                 <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 my="0.5rem">
+                    <Text textStyle="body-2">
+                      {`${siteUrl}${watch("permalink")}`}
+                    </Text>
+                  </Box>
+                )}
+
                 <FormErrorMessage>{errors.permalink?.message}</FormErrorMessage>
               </FormControl>
-              <br />
               {isTiptapEnabled && (
                 <FormControl isInvalid={!!errors.permalink?.message} isRequired>
                   <Flex mb="0.75rem" alignItems="center">