feat: move AppNameWarning to DiffViewer (#130)

feat: move AppNameWarning to DiffViewer

Co-authored-by: Lucas Bento <lucas.bsilva@outlook.com>

Author: Lucas Bento

src/components/common/AppNameWarning.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Alert } from 'antd'
+import Markdown from './Markdown'
+
+const Container = styled.div({
+  width: '100%',
+  marginTop: '16px'
+})
+
+export const AppNameWarning = () => (
+  <Container>
+    <Alert
+      message={
+        <Markdown>
+          Keep in mind that `RnDiffApp` and `rndiffapp` are placeholders. When
+          upgrading, you should replace them with your actual project's name.
+        </Markdown>
+      }
+      type="info"
+      closable
+    />
+  </Container>
+)

src/components/common/DiffViewer.js

@@ -10,6 +10,7 @@ import UsefulContentSection from './UsefulContentSection'
 import ViewStyleOptions from './Diff/DiffViewStyleOptions'
 
 import CompletedFilesCounter from './CompletedFilesCounter'
+import { AppNameWarning } from './AppNameWarning'
 
 const Container = styled.div`
   width: 90%;
@@ -117,6 +118,9 @@ const DiffViewer = ({
         fromVersion={fromVersion}
         toVersion={toVersion}
       />
+
+      <AppNameWarning />
+
       <ViewStyleOptions
         handleViewStyleChange={handleViewStyleChange}
         diffViewStyle={diffViewStyle}

src/components/common/Markdown.js

@@ -19,7 +19,7 @@ const InlineCode = styled.em`
   padding: 0.2em 0.4em;
 `
 
-export default ({ forceBlock, options = {}, ...props }) => (
+export default ({ forceBlock = false, options = {}, ...props }) => (
   <Markdown
     {...props}
     options={{

src/components/pages/Home.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
-import { Alert, Card } from 'antd'
+import { Card } from 'antd'
 import GitHubButton from 'react-github-btn'
 import ReactGA from 'react-ga'
 import VersionSelector from '../common/VersionSelector'
@@ -28,13 +28,6 @@ const TitleContainer = styled.div`
   align-items: center;
 `
 
-const Subtitle = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  marginTop: 50
-})
-
 const LogoImg = styled.img`
   width: 100px;
   margin-bottom: 15px;
@@ -59,7 +52,6 @@ const Home = () => {
   const [fromVersion, setFromVersion] = useState('')
   const [toVersion, setToVersion] = useState('')
   const [showDiff, setShowDiff] = useState(false)
-  const [showAppNameWarning, setAppNameWarning] = useState(false)
   const [settings, setSettings] = useState({
     [`${SHOW_LATEST_RCS}`]: false
   })
@@ -78,7 +70,6 @@ const Home = () => {
 
     setFromVersion(fromVersion)
     setToVersion(toVersion)
-    setAppNameWarning(true)
     setShowDiff(true)
   }
 
@@ -121,19 +112,6 @@ const Home = () => {
           showDiff={handleShowDiff}
           showReleaseCandidates={settings[SHOW_LATEST_RCS]}
         />
-
-        {showAppNameWarning ? (
-          <Subtitle>
-            <Alert
-              message="Don't forget: `RnDiffApp` is a placeholder. When upgrading, all
-          instances of `RnDiffApp` should be `YourProjectName`, all `rndiffapp`
-          should be `yourprojectname` etc."
-              type="warning"
-              closable
-              onClose={() => setAppNameWarning(false)}
-            />
-          </Subtitle>
-        ) : null}
       </Container>
 
       <DiffViewer