Merge pull request #32 from tinloof/tin-586-fix-pathname-field-cannot…

…-type-a-dash

Fix PathnameFieldComponent trailing dash issue

packages/sanity-studio/src/components/PathnameFieldComponent.tsx

@@ -4,11 +4,7 @@ import {
   usePresentationParams,
 } from "@sanity/presentation";
 import { Box, Button, Card, Flex, Stack, Text, TextInput } from "@sanity/ui";
-import {
-  getDocumentPath,
-  slugify,
-  stringToPathname,
-} from "@tinloof/sanity-web";
+import { getDocumentPath, stringToPathname } from "@tinloof/sanity-web";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { ObjectFieldProps, set, SlugValue, unset, useFormValue } from "sanity";
 import { styled } from "styled-components";
@@ -35,7 +31,9 @@ const FolderText = styled(Text)`
   }
 `;
 
-export function PathnameFieldComponent(props: ObjectFieldProps<SlugValue>) {
+export function PathnameFieldComponent(
+  props: ObjectFieldProps<SlugValue>
+): JSX.Element {
   const i18nOptions = (props.schemaType.options as PathnameOptions | undefined)
     ?.i18n ?? { enabled: false, defaultLocaleId: undefined };
   const document = useFormValue([]) as DocumentWithLocale;
@@ -54,7 +52,7 @@ export function PathnameFieldComponent(props: ObjectFieldProps<SlugValue>) {
 
   const updateFinalSegment = useCallback(
     (e: React.FormEvent<HTMLInputElement>) => {
-      const segment = slugify(e.currentTarget.value);
+      const segment = stringToPathname(e.currentTarget.value);
       // When updating only the final path segment, we don't allow slashes / sub-paths.
       // User must unlock the folder before doing so.
       const finalValue = [folder, segment]
@@ -86,7 +84,7 @@ export function PathnameFieldComponent(props: ObjectFieldProps<SlugValue>) {
   const handleBlur: React.FocusEventHandler<HTMLInputElement> =
     useCallback(() => {
       setFolderLocked(!!folder);
-    }, [onChange, folder, setFolderLocked]);
+    }, [folder, setFolderLocked]);
 
   const localizedPathname = getDocumentPath(
     {
@@ -165,14 +163,14 @@ export function PathnameFieldComponent(props: ObjectFieldProps<SlugValue>) {
   }, [
     folder,
     folderLocked,
-    onChange,
     slug,
     readOnly,
-    value?.current,
     unlockFolder,
     updateFullPath,
     updateFinalSegment,
     handleBlur,
+    value,
+    localizedPathname,
   ]);
 
   return (
@@ -196,7 +194,7 @@ export function PathnameFieldComponent(props: ObjectFieldProps<SlugValue>) {
   );
 }
 
-function runChange(onChange: (patch: any) => void, value?: string) {
+function runChange(onChange: (patch) => void, value?: string) {
   // We use stringToPathname to ensure that the value is a valid pathname.
   // We also allow trailing slashes to make it possible to create folders
   const finalValue = value
@@ -217,6 +215,14 @@ function PreviewButton({ localizedPathname }: { localizedPathname: string }) {
   const navigate = useSafeNavigate();
   const preview = useSafePreview();
 
+  const handleClick = useCallback(() => {
+    if (!navigate || typeof localizedPathname !== "string") {
+      return;
+    }
+
+    navigate(localizedPathname);
+  }, [navigate, localizedPathname]);
+
   return (
     <Button
       text="Preview"
@@ -231,7 +237,7 @@ function PreviewButton({ localizedPathname }: { localizedPathname: string }) {
         preview === localizedPathname
       }
       title="Preview page"
-      onClick={!navigate ? undefined : () => navigate(localizedPathname)}
+      onClick={handleClick}
     />
   );
 }
@@ -247,7 +253,8 @@ function useSafeNavigate() {
 
 function useSafePreview() {
   try {
-    const { preview } = usePresentationParams();
+    const presentationParams = usePresentationParams();
+    const { preview } = presentationParams;
     return preview;
   } catch (e) {
     return null;