Show comments in the diff (#18)

Show comments in the diff
react-native-community · Jun 12, 2019 · 2c4a45f · 2c4a45f
2 parents 2a0ce88 + f7d9268
commit 2c4a45f
Show file tree

Hide file tree

Showing 11 changed files with 321 additions and 45 deletions.
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "license": "MIT",
   "dependencies": {
     "antd": "^3.19.1",
+    "markdown-to-jsx": "^6.10.2",
     "react": "^16.8.0",
     "react-diff-view": "^2.1.3",
     "react-dom": "^16.8.0",

diff --git a/src/components/common/Diff/Diff.js b/src/components/common/Diff/Diff.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import styled from 'styled-components'
 import { Diff as RDiff, Hunk, markEdits, tokenize } from 'react-diff-view'
 import DiffHeader from './DiffHeader'
+import { getComments } from './DiffComment'
 
 const Container = styled.div`
   border: 1px solid #ddd;
@@ -25,6 +26,7 @@ const DiffView = styled(RDiff)`
     padding: 0;
     text-align: center;
     font-size: 12px;
+    cursor: auto;
   }
 
   td.diff-gutter .diff-line-normal {
@@ -61,6 +63,8 @@ const Diff = ({
   newPath,
   type,
   hunks,
+  fromVersion,
+  toVersion,
   diffKey,
   isDiffCompleted,
   onCompleteDiff,
@@ -80,6 +84,7 @@ const Diff = ({
       <DiffHeader
         oldPath={oldPath}
         newPath={newPath}
+        toVersion={toVersion}
         type={type}
         diffKey={diffKey}
         hasDiff={hunks.length > 0}
@@ -94,6 +99,7 @@ const Diff = ({
           viewType="split"
           diffType={type}
           hunks={hunks}
+          widgets={getComments({ newPath, fromVersion, toVersion })}
           selectedChanges={selectedChanges}
         >
           {hunks => {

diff --git a/src/components/common/Diff/DiffComment.js b/src/components/common/Diff/DiffComment.js
@@ -0,0 +1,66 @@
+import React from 'react'
+import styled from 'styled-components'
+import { removeAppPathPrefix, getVersionsInDiff } from '../../../utils'
+import Markdown from '../Markdown'
+
+const Container = styled.div`
+  margin: 10px;
+  border: 1px solid #ddd;
+  padding: 16px;
+  border-radius: 3px;
+  color: #000;
+`
+
+const LINE_CHANGE_TYPES = {
+  ADD: 'I',
+  DELETE: 'D',
+  NEUTRAL: 'N'
+}
+
+const getLineNumberWithType = ({ lineChangeType, lineNumber }) =>
+  `${LINE_CHANGE_TYPES[lineChangeType.toUpperCase()]}${lineNumber}`
+
+const getComments = ({ newPath, fromVersion, toVersion }) => {
+  const newPathSanitized = removeAppPathPrefix(newPath)
+
+  const versionsInDiff = getVersionsInDiff({ fromVersion, toVersion }).filter(
+    ({ comments }) =>
+      comments &&
+      comments.length > 0 &&
+      comments.some(({ fileName }) => fileName === newPathSanitized)
+  )
+
+  return versionsInDiff.reduce((allComments, version) => {
+    const comments = version.comments.reduce(
+      (versionComments, { fileName, lineChangeType, lineNumber, content }) => {
+        if (fileName !== newPathSanitized) {
+          return versionComments
+        }
+
+        return {
+          ...versionComments,
+          [getLineNumberWithType({ lineChangeType, lineNumber })]: (
+            <DiffComment content={content} />
+          )
+        }
+      },
+      {}
+    )
+
+    return {
+      ...allComments,
+      ...comments
+    }
+  }, {})
+}
+
+const DiffComment = ({ content }) => {
+  return (
+    <Container>
+      <Markdown>{content.props.children}</Markdown>
+    </Container>
+  )
+}
+
+export { getComments }
+export default DiffComment
diff --git a/src/components/common/Diff/DiffHeader.js b/src/components/common/Diff/DiffHeader.js
@@ -1,8 +1,7 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import styled from 'styled-components'
 import { Tag, Icon, Button } from 'antd'
-
-const removeAppPathPrefix = path => path.replace(/RnDiffApp\//, '')
+import { removeAppPathPrefix, getBinaryFileURL } from '../../../utils'
 
 const FileRenameArrow = styled(props => <Icon {...props} type="right" />)`
   font-size: 10px;
@@ -52,18 +51,41 @@ const FileStatus = ({ type, ...props }) => {
 }
 
 const BinaryBadge = ({ visible, ...props }) =>
-  visible && (
+  visible ? (
     <Tag {...props} color="cyan">
       BINARY
     </Tag>
-  )
+  ) : null
 
-const HeaderButtonsContainer = styled(
-  ({ hasDiff, ...props }) => hasDiff && <div {...props} />
-)`
+const HeaderButtonsContainer = styled(props => <div {...props} />)`
   float: right;
 `
 
+const DownloadFileButton = styled(({ visible, toVersion, newPath, ...props }) =>
+  visible ? (
+    <Button
+      {...props}
+      type="ghost"
+      shape="circle"
+      icon="download"
+      onClick={() =>
+        (window.location = getBinaryFileURL({
+          version: toVersion,
+          path: newPath
+        }))
+      }
+    />
+  ) : null
+)`
+  color: #24292e;
+  font-size: 12px;
+  border-width: 0;
+  &:hover,
+  &:focus {
+    color: #24292e;
+  }
+`
+
 const CompleteDiffButton = styled(
   ({ diffKey, isDiffCompleted, onCompleteDiff, ...props }) => (
     <Button
@@ -75,7 +97,7 @@ const CompleteDiffButton = styled(
     />
   )
 )`
-  font-size: 12px;
+  font-size: 13px;
   line-height: 0;
   border-width: 0px;
   width: 20px;
@@ -90,11 +112,11 @@ const CompleteDiffButton = styled(
 `
 
 const CollapseDiffButton = styled(
-  ({ isDiffCollapsed, isDiffCompleted, ...props }) => (
-    <Button {...props} type="link" icon="down" />
-  )
+  ({ visible, isDiffCollapsed, ...props }) =>
+    visible ? <Button {...props} type="link" icon="down" /> : null
 )`
   color: #24292e;
+  margin-right: 2px;
   font-size: 10px;
   transform: ${({ isDiffCollapsed }) =>
     isDiffCollapsed ? 'rotate(-90deg)' : 'initial'};
@@ -112,6 +134,7 @@ const DiffHeader = styled(
   ({
     oldPath,
     newPath,
+    toVersion,
     type,
     diffKey,
     hasDiff,
@@ -123,19 +146,26 @@ const DiffHeader = styled(
   }) => (
     <div {...props}>
       <CollapseDiffButton
-        isDiffCompleted={isDiffCompleted}
+        visible={hasDiff}
         isDiffCollapsed={isDiffCollapsed}
         onClick={() => setIsDiffCollapsed(!isDiffCollapsed)}
       />
       <FileName oldPath={oldPath} newPath={newPath} type={type} />{' '}
       <FileStatus type={type} />
       <BinaryBadge visible={!hasDiff} />
-      <HeaderButtonsContainer hasDiff={hasDiff}>
-        <CompleteDiffButton
-          diffKey={diffKey}
-          isDiffCompleted={isDiffCompleted}
-          onCompleteDiff={onCompleteDiff}
-        />
+      <HeaderButtonsContainer>
+        <Fragment>
+          <DownloadFileButton
+            visible={!hasDiff}
+            toVersion={toVersion}
+            newPath={newPath}
+          />
+          <CompleteDiffButton
+            diffKey={diffKey}
+            isDiffCompleted={isDiffCompleted}
+            onCompleteDiff={onCompleteDiff}
+          />
+        </Fragment>
       </HeaderButtonsContainer>
     </div>
   )

diff --git a/src/components/common/DiffViewer.js b/src/components/common/DiffViewer.js
@@ -2,16 +2,15 @@ import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { parseDiff, withChangeSelect } from 'react-diff-view'
 import 'react-diff-view/style/index.css'
+import { getDiffPatchURL } from '../../utils'
 import Diff from './Diff/Diff'
 import Loading from './Loading'
+import UsefulContentSection from './UsefulContentSection'
 
 const Container = styled.div`
   width: 90%;
 `
 
-const getPatchURL = ({ fromVersion, toVersion }) =>
-  `https://raw.githubusercontent.com/react-native-community/rn-diff-purge/diffs/diffs/${fromVersion}..${toVersion}.diff`
-
 const getDiffKey = ({ oldRevision, newRevision }) =>
   `${oldRevision}${newRevision}`
 
@@ -45,7 +44,7 @@ const DiffViewer = ({
       setLoading(true)
 
       const response = await (await fetch(
-        getPatchURL({ fromVersion, toVersion })
+        getDiffPatchURL({ fromVersion, toVersion })
       )).text()
 
       setDiff(
@@ -70,6 +69,8 @@ const DiffViewer = ({
 
   return (
     <Container>
+      <UsefulContentSection fromVersion={fromVersion} toVersion={toVersion} />
+
       {diff.map(diff => {
         const diffKey = getDiffKey(diff)
 
@@ -78,6 +79,8 @@ const DiffViewer = ({
             key={`${diff.oldRevision}${diff.newRevision}`}
             {...diff}
             diffKey={diffKey}
+            fromVersion={fromVersion}
+            toVersion={toVersion}
             isDiffCompleted={completedDiffs.includes(diffKey)}
             onCompleteDiff={handleCompleteDiff}
             selectedChanges={selectedChanges}

diff --git a/src/components/common/Markdown.js b/src/components/common/Markdown.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import Markdown from 'markdown-to-jsx'
+import styled from 'styled-components'
+
+export const Link = styled(props => (
+  // eslint-disable-next-line jsx-a11y/anchor-has-content
+  <a target="_blank" {...props} rel="noopener" />
+))`
+  text-decoration: none;
+  color: #045dc1;
+`
+
+const InlineCode = styled.em`
+  font-style: normal;
+  background-color: rgba(27, 31, 35, 0.07);
+  border-radius: 3px;
+  font-size: 85%;
+  margin: 0;
+  padding: 0.2em 0.4em;
+`
+
+export default ({ forceBlock, options = {}, ...props }) => (
+  <Markdown
+    {...props}
+    options={{
+      ...options,
+      forceBlock,
+      overrides: {
+        ...options.overrides,
+        a: Link,
+        em: InlineCode,
+        code: InlineCode,
+        p: styled.p`
+          margin-bottom: 0;
+        `
+      }
+    }}
+  />
+)