From a21079a276049308c6aa04b2af9d812ccad0491a Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 1 Feb 2024 11:44:10 -0500
Subject: [PATCH] fix: Custom share url not appearing in popover, closes
 OLN-234

---
 app/components/Sharing/PublicAccess.tsx | 26 +++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/components/Sharing/PublicAccess.tsx b/app/components/Sharing/PublicAccess.tsx
index 301a52f95..cb4737fc0 100644
--- a/app/components/Sharing/PublicAccess.tsx
+++ b/app/components/Sharing/PublicAccess.tsx
@@ -42,13 +42,17 @@ function PublicAccess({ document, share, sharedParent }: Props) {
   const { shares } = useStores();
   const { t } = useTranslation();
   const theme = useTheme();
-  const [slugValidationError, setSlugValidationError] = React.useState("");
-  const [urlSlug, setUrlSlug] = React.useState("");
+  const [validationError, setValidationError] = React.useState("");
+  const [urlId, setUrlId] = React.useState(share?.urlId);
   const inputRef = React.useRef<HTMLInputElement>(null);
   const can = usePolicy(share);
   const documentAbilities = usePolicy(document);
   const canPublish = can.update && documentAbilities.share;
 
+  React.useEffect(() => {
+    setUrlId(share?.urlId);
+  }, [share?.urlId]);
+
   const handlePublishedChange = React.useCallback(
     async (event) => {
       const share = shares.getByDocumentId(document.id);
@@ -65,7 +69,7 @@ function PublicAccess({ document, share, sharedParent }: Props) {
     [document.id, shares]
   );
 
-  const handleUrlSlugChange = React.useMemo(
+  const handleUrlChange = React.useMemo(
     () =>
       debounce(async (ev) => {
         if (!share) {
@@ -73,13 +77,13 @@ function PublicAccess({ document, share, sharedParent }: Props) {
         }
 
         const val = ev.target.value;
-        setUrlSlug(val);
+        setUrlId(val);
         if (val && !SHARE_URL_SLUG_REGEX.test(val)) {
-          setSlugValidationError(
+          setValidationError(
             t("Only lowercase letters, digits and dashes allowed")
           );
         } else {
-          setSlugValidationError("");
+          setValidationError("");
           if (share.urlId !== val) {
             try {
               await share.save({
@@ -87,9 +91,7 @@ function PublicAccess({ document, share, sharedParent }: Props) {
               });
             } catch (err) {
               if (err.message.includes("must be unique")) {
-                setSlugValidationError(
-                  t("Sorry, this link has already been used")
-                );
+                setValidationError(t("Sorry, this link has already been used"));
               }
             }
           }
@@ -166,9 +168,9 @@ function PublicAccess({ document, share, sharedParent }: Props) {
             type="text"
             ref={inputRef}
             placeholder={share?.id}
-            onChange={handleUrlSlugChange}
-            error={slugValidationError}
-            defaultValue={urlSlug}
+            onChange={handleUrlChange}
+            error={validationError}
+            defaultValue={urlId}
             prefix={
               <DomainPrefix
                 readOnly