Always show the appName input

Author: zoontek

src/components/common/Select.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import { Select as AntdSelect } from 'antd'
+import { Select as AntdSelect, Typography } from 'antd'
 
 const { Option } = AntdSelect
 
@@ -13,7 +13,7 @@ const SelectBox = styled(AntdSelect)`
 
 const Select = ({ title, options, ...props }) => (
   <SelectBoxContainer>
-    <h4>{title}</h4>
+    <Typography.Title level={5}>{title}</Typography.Title>
 
     <SelectBox size="large" {...props}>
       {options.map((option) => (

src/components/common/Settings.js

@@ -1,17 +1,9 @@
 import React, { useState } from 'react'
-import { Popover, Button, Checkbox, Input, Radio } from 'antd'
+import { Popover, Button, Checkbox, Radio } from 'antd'
 import { SHOW_LATEST_RCS } from '../../utils'
 import styled from '@emotion/styled'
 import { WindowsFilled } from '@ant-design/icons'
-import {
-  DEFAULT_APP_NAME,
-  PACKAGE_NAMES,
-  LANGUAGE_NAMES,
-} from '../../constants'
-
-const InputContainer = styled.div({
-  marginTop: '16px',
-})
+import { PACKAGE_NAMES, LANGUAGE_NAMES } from '../../constants'
 
 const SettingsButton = styled(Button)`
   color: initial;
@@ -39,21 +31,14 @@ const Settings = ({
   packageName,
   language,
   onChangePackageNameAndLanguage,
-  appName,
-  onChangeAppName,
 }) => {
   const [popoverVisibility, setVisibility] = useState(false)
-  const [newAppName, setNewAppName] = useState(appName)
   const [newPackageName, setNewPackageName] = useState(packageName)
   const [newLanguage, setNewLanguage] = useState(language)
 
   const handleClickChange = (visibility) => {
     setVisibility(visibility)
 
-    if (newAppName !== appName) {
-      onChangeAppName(newAppName)
-    }
-
     const processedNewLanguage =
       newLanguage !== language && newPackageName === PACKAGE_NAMES.RNW
         ? newLanguage
@@ -84,14 +69,6 @@ const Settings = ({
               <Checkbox value={SHOW_LATEST_RCS}>{SHOW_LATEST_RCS}</Checkbox>
             </div>
           </Checkbox.Group>
-          <InputContainer>
-            <h4>What's your app name?</h4>
-            <Input
-              value={newAppName}
-              onChange={({ target }) => setNewAppName(target.value)}
-              placeholder={DEFAULT_APP_NAME}
-            />
-          </InputContainer>
           <PlatformsContainer>
             <h5>Upgrading another platform?</h5>
             <Radio.Group

src/components/pages/Home.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import styled from '@emotion/styled'
-import { Card } from 'antd'
+import { Card, Input, Typography } from 'antd'
 import GitHubButton from 'react-github-btn'
 import ReactGA from 'react-ga'
 import VersionSelector from '../common/VersionSelector'
@@ -10,7 +10,7 @@ import logo from '../../assets/logo.svg'
 import { SHOW_LATEST_RCS } from '../../utils'
 import { useGetLanguageFromURL } from '../../hooks/get-language-from-url'
 import { useGetPackageNameFromURL } from '../../hooks/get-package-name-from-url'
-import { PACKAGE_NAMES } from '../../constants'
+import { DEFAULT_APP_NAME, PACKAGE_NAMES } from '../../constants'
 import { TroubleshootingGuidesButton } from '../common/TroubleshootingGuidesButton'
 import { updateURL } from '../../utils/update-url'
 import { deviceSizes } from '../../utils/device-sizes'
@@ -91,6 +91,7 @@ const Home = () => {
     [`${SHOW_LATEST_RCS}`]: false,
   })
   const [appName, setAppName] = useState('')
+  const fixedAppName = appName || DEFAULT_APP_NAME
 
   const homepageUrl = process.env.PUBLIC_URL
 
@@ -172,17 +173,24 @@ const Home = () => {
             )}
             <Settings
               handleSettingsChange={handleSettingsChange}
-              appName={appName}
               packageName={packageName}
               onChangePackageNameAndLanguage={
                 handlePackageNameAndLanguageChange
               }
               language={language}
-              onChangeAppName={setAppName}
             />
           </SettingsContainer>
         </HeaderContainer>
 
+        <Typography.Title level={5}>What's your app name?</Typography.Title>
+
+        <Input
+          size="large"
+          placeholder={DEFAULT_APP_NAME}
+          value={appName}
+          onChange={({ target }) => setAppName(target.value)}
+        />
+
         <VersionSelector
           key={packageName}
           showDiff={handleShowDiff}
@@ -196,7 +204,7 @@ const Home = () => {
         shouldShowDiff={shouldShowDiff}
         fromVersion={fromVersion}
         toVersion={toVersion}
-        appName={appName}
+        appName={fixedAppName}
         packageName={packageName}
         language={language}
       />