Feature: replace RnDiffApp with entered AppName

src/components/common/DiffViewer.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import styled from 'styled-components'
 import { Alert } from 'antd'
 import { parseDiff, withChangeSelect } from 'react-diff-view'
@@ -8,7 +8,6 @@ import DiffSection from './Diff/DiffSection'
 import DiffLoading from './Diff/DiffLoading'
 import UsefulContentSection from './UsefulContentSection'
 import ViewStyleOptions from './Diff/DiffViewStyleOptions'
-
 import CompletedFilesCounter from './CompletedFilesCounter'
 import { AppNameWarning } from './AppNameWarning'
 
@@ -24,7 +23,8 @@ const DiffViewer = ({
   fromVersion,
   toVersion,
   selectedChanges,
-  onToggleChangeSelection
+  onToggleChangeSelection,
+  appName
 }) => {
   const [isLoading, setLoading] = useState(true)
   const [diff, setDiff] = useState(null)
@@ -62,6 +62,16 @@ const DiffViewer = ({
     localStorage.setItem('viewStyle', newViewStyle)
   }
 
+  const replaceAppName = useCallback(
+    text => {
+      if (!appName) return text
+      return text
+        .replace(/RnDiffApp/g, appName)
+        .replace(/rndiffapp/g, appName.toLowerCase())
+    },
+    [appName]
+  )
+
   useEffect(() => {
     if (!showDiff) {
       return
@@ -75,7 +85,7 @@ const DiffViewer = ({
       ).text()
 
       setDiff(
-        parseDiff(response).sort(({ newPath }) =>
+        parseDiff(replaceAppName(response)).sort(({ newPath }) =>
           newPath.includes('package.json') ? -1 : 1
         )
       )
@@ -85,8 +95,13 @@ const DiffViewer = ({
       setLoading(false)
     }
 
-    fetchDiff()
-  }, [fromVersion, showDiff, toVersion])
+    const debounce = setTimeout(() => {
+      fetchDiff()
+    }, 750)
+    return () => {
+      clearTimeout(debounce)
+    }
+  }, [appName, fromVersion, replaceAppName, showDiff, toVersion])
 
   if (!showDiff) {
     return null

src/components/common/Settings.js

@@ -1,8 +1,12 @@
 import React, { useState } from 'react'
-import { Popover, Button, Checkbox } from 'antd'
+import { Popover, Button, Checkbox, Input } from 'antd'
 import { SHOW_LATEST_RCS } from '../../utils'
+import styled from 'styled-components'
 
-const Settings = ({ handleSettingsChange }) => {
+const InputContainer = styled.div({
+  marginTop: '16px'
+})
+const Settings = ({ handleSettingsChange, appName, setAppName }) => {
   const [popoverVisibility, setVisibility] = useState(false)
 
   const handleClickChange = visibility => setVisibility(visibility)
@@ -14,11 +18,23 @@ const Settings = ({ handleSettingsChange }) => {
     <Popover
       placement="bottomRight"
       content={
-        <Checkbox.Group onChange={updateCheckboxValues}>
-          <div>
-            <Checkbox value={SHOW_LATEST_RCS}>{SHOW_LATEST_RCS}</Checkbox>
-          </div>
-        </Checkbox.Group>
+        <>
+          <Checkbox.Group onChange={updateCheckboxValues}>
+            <div>
+              <Checkbox value={SHOW_LATEST_RCS}>{SHOW_LATEST_RCS}</Checkbox>
+            </div>
+          </Checkbox.Group>
+          <InputContainer>
+            <h4>What's your app name?</h4>
+            <Input
+              value={appName}
+              onChange={e => {
+                setAppName(e.target.value)
+              }}
+              placeholder="MyAwesomeApp"
+            />
+          </InputContainer>
+        </>
       }
       trigger="click"
       visible={popoverVisibility}

src/components/pages/Home.js

@@ -55,6 +55,7 @@ const Home = () => {
   const [settings, setSettings] = useState({
     [`${SHOW_LATEST_RCS}`]: false
   })
+  const [appName, setAppName] = useState('')
 
   useEffect(() => {
     if (process.env.NODE_ENV === 'production') {
@@ -105,7 +106,11 @@ const Home = () => {
             Star
           </StarButton>
 
-          <Settings handleSettingsChange={handleSettingsChange} />
+          <Settings
+            handleSettingsChange={handleSettingsChange}
+            appName={appName}
+            setAppName={setAppName}
+          />
         </TitleContainer>
 
         <VersionSelector
@@ -118,6 +123,7 @@ const Home = () => {
         showDiff={showDiff}
         fromVersion={fromVersion}
         toVersion={toVersion}
+        appName={appName}
       />
     </Page>
   )