Fix issue with AppName stripping incorrectly.

When appName or appPackage are empty, set the state to the default
values. This makes the down-tree props simpler to understand.

Also more strictly strip the prefix AppName from the filepath to avoid
edgecases.

src/__tests__/utils.spec.ts

@@ -2,6 +2,7 @@ import { PACKAGE_NAMES } from '../constants'
 import '../releases/__mocks__/index'
 import {
   getVersionsContentInDiff,
+  removeAppPathPrefix,
   replaceAppDetails,
   getChangelogURL,
 } from '../utils'
@@ -132,3 +133,21 @@ describe('replaceAppDetails ', () => {
     }
   )
 })
+
+describe('removeAppPathPrefix', () => {
+  test.each([
+    ['RnDiffApp/package.json', 'package.json'],
+    ['RnDiffApp/RnDiffApp.ts', 'RnDiffApp.ts'],
+  ])('removeAppPathPrefix("%s") -> "%s"', (path, newPath) => {
+    expect(removeAppPathPrefix(path)).toEqual(newPath)
+  })
+
+  test('removeAppPathPrefix custom AppName', () => {
+    expect(removeAppPathPrefix('RnDiffApp/package.json', '')).toEqual(
+      'RnDiffApp/package.json'
+    )
+    expect(removeAppPathPrefix('Foobar/package.json', 'Foobar')).toEqual(
+      'package.json'
+    )
+  })
+})

src/components/pages/Home.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useDeferredValue } from 'react'
+import React, { useState, useEffect, useReducer, useDeferredValue } from 'react'
 import styled from '@emotion/styled'
 import { ThemeProvider } from '@emotion/react'
 import { Card, Input, Typography, ConfigProvider, theme } from 'antd'
@@ -125,6 +125,12 @@ const StarButton = styled(({ className, ...props }: StarButtonProps) => (
 // will have dark mode automatically if they've selected it previously.
 const useDarkModeState = createPersistedState('darkMode')
 
+// The value returns to `defaultValue` when an empty string is entered,
+// this makes our down-tree props behaviour simpler without having to swap
+// empty values for the default.
+const useDefaultState = (defaultValue: string) =>
+  useReducer((_, v: string) => (v === '' ? defaultValue : v), defaultValue)
+
 const Home = () => {
   const { packageName: defaultPackageName, isPackageNameDefinedInURL } =
     useGetPackageNameFromURL()
@@ -138,8 +144,8 @@ const Home = () => {
     [`${SHOW_LATEST_RCS}`]: false,
   })
 
-  const [appName, setAppName] = useState<string>('')
-  const [appPackage, setAppPackage] = useState<string>('')
+  const [appName, setAppName] = useDefaultState(DEFAULT_APP_NAME)
+  const [appPackage, setAppPackage] = useDefaultState(DEFAULT_APP_PACKAGE)
 
   // Avoid UI lag when typing.
   const deferredAppName = useDeferredValue(appName)
@@ -276,8 +282,8 @@ const Home = () => {
                 <Input
                   size="large"
                   placeholder={DEFAULT_APP_NAME}
-                  value={appName}
-                  onChange={({ target }) => setAppName((value) => target.value)}
+                  value={appName === DEFAULT_APP_NAME ? '' : appName}
+                  onChange={({ target }) => setAppName(target.value)}
                 />
               </AppNameField>
 
@@ -289,10 +295,8 @@ const Home = () => {
                 <Input
                   size="large"
                   placeholder={DEFAULT_APP_PACKAGE}
-                  value={appPackage}
-                  onChange={({ target }) =>
-                    setAppPackage((value) => target.value)
-                  }
+                  value={appPackage === DEFAULT_APP_PACKAGE ? '' : appPackage}
+                  onChange={({ target }) => setAppPackage(target.value)}
                 />
               </AppPackageField>
             </AppDetailsContainer>
@@ -315,14 +319,8 @@ const Home = () => {
             shouldShowDiff={shouldShowDiff}
             fromVersion={fromVersion}
             toVersion={toVersion}
-            appName={
-              deferredAppName !== DEFAULT_APP_NAME ? deferredAppName : ''
-            }
-            appPackage={
-              deferredAppPackage !== DEFAULT_APP_PACKAGE
-                ? deferredAppPackage
-                : ''
-            }
+            appName={deferredAppName}
+            appPackage={deferredAppPackage}
             packageName={packageName}
             language={language}
           />

src/utils.ts

@@ -75,7 +75,7 @@ export const getBinaryFileURL = ({
 }
 
 export const removeAppPathPrefix = (path: string, appName = DEFAULT_APP_NAME) =>
-  path.replace(new RegExp(`${appName}/`), '')
+  path.replace(new RegExp(`^${appName}/`), '')
 
 /**
  * Replaces DEFAULT_APP_PACKAGE and DEFAULT_APP_NAME in str with custom