feat: allow entering app name

Author: Naturalclar

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'
@@ -23,7 +23,8 @@ const DiffViewer = ({
   fromVersion,
   toVersion,
   selectedChanges,
-  onToggleChangeSelection
+  onToggleChangeSelection,
+  appName
 }) => {
   const [isLoading, setLoading] = useState(true)
   const [diff, setDiff] = useState(null)
@@ -61,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
@@ -74,7 +85,7 @@ const DiffViewer = ({
       )).text()
 
       setDiff(
-        parseDiff(response).sort(({ newPath }) =>
+        parseDiff(replaceAppName(response)).sort(({ newPath }) =>
           newPath.includes('package.json') ? -1 : 1
         )
       )
@@ -85,7 +96,7 @@ const DiffViewer = ({
     }
 
     fetchDiff()
-  }, [fromVersion, showDiff, toVersion])
+  }, [appName, fromVersion, replaceAppName, showDiff, toVersion])
 
   if (!showDiff) {
     return null

src/components/pages/Home.js

@@ -44,6 +44,15 @@ const TitleHeader = styled.h1`
   margin-left: 15px;
 `
 
+const AppNameInput = styled.input`
+  border-radius: 5px;
+  outline: none;
+  border: solid 1px #ddd;
+  padding: 8px;
+  width: 50%;
+  margin-bottom: 8px;
+`
+
 const StarButton = styled(({ className, ...props }) => (
   <div className={className}>
     <GitHubButton {...props} />
@@ -61,6 +70,7 @@ const Home = () => {
   const [settings, setSettings] = useState({
     [`${SHOW_LATEST_RCS}`]: false
   })
+  const [appName, setAppName] = useState('')
 
   useEffect(() => {
     if (process.env.NODE_ENV === 'production') {
@@ -114,6 +124,14 @@ const Home = () => {
           <Settings handleSettingsChange={handleSettingsChange} />
         </TitleContainer>
 
+        <h4>Enter your App Name.</h4>
+        <AppNameInput
+          value={appName}
+          onChange={e => {
+            setAppName(e.target.value)
+          }}
+        />
+
         <VersionSelector
           showDiff={handleShowDiff}
           showReleaseCandidates={settings[SHOW_LATEST_RCS]}
@@ -130,6 +148,7 @@ const Home = () => {
         showDiff={showDiff}
         fromVersion={fromVersion}
         toVersion={toVersion}
+        appName={appName}
       />
     </Page>
   )