From 93daabe60f61865f4aba1aec1c04134066310750 Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <vincenzos@spotify.com>
Date: Thu, 20 Feb 2025 14:42:00 +0100
Subject: [PATCH 1/2] fix: correctly replace app name in file path

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>
---
 src/components/common/VersionSelector.tsx |  2 +-
 src/components/pages/Home.tsx             | 19 +++++++------------
 src/utils/update-url.ts                   |  2 +-
 3 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/components/common/VersionSelector.tsx b/src/components/common/VersionSelector.tsx
index 4db5d289..eb5d7eae 100644
--- a/src/components/common/VersionSelector.tsx
+++ b/src/components/common/VersionSelector.tsx
@@ -228,7 +228,7 @@ const VersionSelector = ({
   showDiff: (args: { fromVersion: string; toVersion: string }) => void
   showReleaseCandidates: boolean
   appPackage: string
-  appName: string
+  appName?: string
 }) => {
   const { isLoading, isDone, releaseVersions } = useFetchReleaseVersions({
     packageName,
diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
index 7a29f9f9..8a1561d8 100644
--- a/src/components/pages/Home.tsx
+++ b/src/components/pages/Home.tsx
@@ -98,16 +98,13 @@ const SettingsContainer = styled.div`
   flex: 1;
 `
 
-const getAppInfoInURL = (): {
-  appPackage: string
-  appName: string
-} => {
+const getAppInfoInURL = () => {
   // Parses `/?name=RnDiffApp&package=com.rndiffapp` from URL
   const { name, package: pkg } = queryString.parse(window.location.search)
 
   return {
     appPackage: pkg as string,
-    appName: name as string,
+    appName: name as string | null,
   }
 }
 
@@ -143,11 +140,11 @@ const Home = () => {
   })
 
   const appInfoInURL = getAppInfoInURL()
-  const [appName, setAppName] = useState<string>(appInfoInURL.appName)
-  const [appPackage, setAppPackage] = useState<string>(appInfoInURL.appPackage)
+  const [appName, setAppName] = useState(appInfoInURL.appName)
+  const [appPackage, setAppPackage] = useState(appInfoInURL.appPackage)
 
   // Avoid UI lag when typing.
-  const deferredAppName = useDeferredValue(appName)
+  const deferredAppName = useDeferredValue(appName || DEFAULT_APP_NAME)
   const deferredAppPackage = useDeferredValue(appPackage)
 
   const homepageUrl = process.env.PUBLIC_URL
@@ -281,7 +278,7 @@ const Home = () => {
                 <Input
                   size="large"
                   placeholder={DEFAULT_APP_NAME}
-                  value={appName}
+                  value={appName || ''}
                   onChange={({ target }) => setAppName((value) => target.value)}
                 />
               </AppNameField>
@@ -322,9 +319,7 @@ const Home = () => {
             shouldShowDiff={shouldShowDiff}
             fromVersion={fromVersion}
             toVersion={toVersion}
-            appName={
-              deferredAppName !== DEFAULT_APP_NAME ? deferredAppName : ''
-            }
+            appName={deferredAppName}
             appPackage={
               deferredAppPackage !== DEFAULT_APP_PACKAGE
                 ? deferredAppPackage
diff --git a/src/utils/update-url.ts b/src/utils/update-url.ts
index 680e184d..a2cfab94 100644
--- a/src/utils/update-url.ts
+++ b/src/utils/update-url.ts
@@ -15,7 +15,7 @@ export function updateURL({
   fromVersion: string
   toVersion: string
   appPackage: string
-  appName: string
+  appName?: string
 }) {
   const url = new URL(window.location.origin)
   url.pathname = window.location.pathname

From 17989b318472f6c554d1583e6d6df1aea01db19c Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <me@vinzscam.dev>
Date: Thu, 27 Feb 2025 23:40:59 +0100
Subject: [PATCH 2/2] Update src/components/pages/Home.tsx

Co-authored-by: Pavlos Vinieratos <pvinis@gmail.com>
---
 src/components/pages/Home.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
index 8a1561d8..e416e873 100644
--- a/src/components/pages/Home.tsx
+++ b/src/components/pages/Home.tsx
@@ -278,7 +278,7 @@ const Home = () => {
                 <Input
                   size="large"
                   placeholder={DEFAULT_APP_NAME}
-                  value={appName || ''}
+                  value={appName ?? ''}
                   onChange={({ target }) => setAppName((value) => target.value)}
                 />
               </AppNameField>