comments feature, fix vulnerabilities

.eslintrc

@@ -2,11 +2,24 @@
   "extends": ["airbnb-base", "plugin:@typescript-eslint/recommended"],
   "rules": {
     "no-tabs": "off",
-    "@typescript-eslint/indent": ["error", 2],
-    "max-len": ["error", {
-      "code": 100
-    }],
     "arrow-body-style": "off",
+    "comma-dangle": "off",
+    "@typescript-eslint/no-var-requires": 0,
+    "operator-linebreak": "off",
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "implicit-arrow-linebreak": "off",
+    "@typescript-eslint/indent": 0,
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "ts": "never",
+        "js": "never",
+        "mjs": "never",
+        "jsx": "never"
+      }
+    ]
   },
   "settings": {
     "import/resolver": {
@@ -18,6 +31,6 @@
   "env": {
     "mocha": true,
     "node": true,
-    "browser": true,
-  },
+    "browser": true
+  }
 }

.gitignore

@@ -1,4 +1,4 @@
 node_modules
 dist
 lib
-*.log
+*.log

examples/src/CommentBlock.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { CommentInfo } from '../../lib';
+
+interface Props {
+  updateComment: (commentInfo: CommentInfo, text: string) => void;
+  removeComment: (lineId: string) => void;
+  comment: any;
+  show: boolean;
+}
+
+const CommentBlock: React.FC<Props> = ({
+  updateComment,
+  removeComment,
+  comment,
+  show
+}) => {
+  const [isComment, setIsComment] = React.useState<boolean>(show);
+  const [text, setText] = React.useState<string>(
+    comment.body ? comment.body.text : ''
+  );
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setText(e.target.value);
+  };
+
+  if (!isComment) {
+    return (
+      <div className='p-2'>
+        <div className='form-group mb-2'>
+          <textarea
+            onChange={handleChange}
+            value={text}
+            className='form-control'
+          />
+        </div>
+        <button
+          className='btn btn-primary mr-2'
+          onClick={() => {
+            if (!text) {
+              return removeComment(comment.lineId);
+            }
+            updateComment(comment, text);
+            setIsComment(true);
+          }}
+        >
+          Submit
+        </button>
+        <button
+          className='btn btn-secondary'
+          onClick={() => {
+            if (!text) {
+              return removeComment(comment.lineId);
+            }
+            setIsComment(true);
+          }}
+        >
+          Cancel
+        </button>
+      </div>
+    );
+  }
+  return (
+    <div className='p-2'>
+      <div className='mb-2 bg-light rounded p-2'>
+        {comment.body.text &&
+          comment.body.text
+            .split('\n')
+            .map((str: string, i: number) => <div key={i}>{str}</div>)}
+      </div>
+      <button
+        onClick={() => setIsComment(false)}
+        className='btn btn-primary mr-2'
+      >
+        Edit
+      </button>
+      <button
+        onClick={() => removeComment(comment.lineId)}
+        className='btn btn-secondary mr-2'
+      >
+        Delete
+      </button>
+    </div>
+  );
+};
+
+export default CommentBlock;

examples/src/index.tsx

@@ -1,20 +1,20 @@
-require('./style.scss');
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-
 import ReactDiff, { DiffMethod } from '../../lib/index';
-
+import CommentBlock from './CommentBlock';
+import { CommentInfo } from '../../lib/index';
 const oldJs = require('./diff/javascript/old.rjs').default;
 const newJs = require('./diff/javascript/new.rjs').default;
-
 const logo = require('../../logo.png');
+require('./style.scss');
 
 interface ExampleState {
   splitView?: boolean;
   highlightLine?: string[];
   language?: string;
   enableSyntaxHighlighting?: boolean;
   compareMethod?: DiffMethod;
+  comments: any[];
 }
 
 const P = (window as any).Prism;
@@ -25,13 +25,27 @@ class Example extends React.Component<{}, ExampleState> {
     this.state = {
       highlightLine: [],
       enableSyntaxHighlighting: true,
+      comments: [
+        {
+          body: {
+            lineId: 'L-12-beforeCommit-afterCommit-test/test.jsx',
+            text: 'Awesome\ncomment!',
+            fileId: 'test/test.jsx',
+            prefix: 'L',
+            lineNumber: 12,
+            specifier: 'beforeCommit-afterCommit'
+          }
+        }
+      ]
     };
   }
 
   private onLineNumberClick = (
     id: string,
-    e: React.MouseEvent<HTMLTableCellElement>,
+    uiniqueLindeId: string,
+    e: React.MouseEvent<HTMLTableCellElement>
   ): void => {
+    console.log(uiniqueLindeId);
     let highlightLine = [id];
     if (e.shiftKey && this.state.highlightLine.length === 1) {
       const [dir, oldId] = this.state.highlightLine[0].split('-');
@@ -46,45 +60,99 @@ class Example extends React.Component<{}, ExampleState> {
       }
     }
     this.setState({
-      highlightLine,
+      highlightLine
     });
   };
 
-  private syntaxHighlight = (str: string): any => {
-    if (!str) return;
-    const language = P.highlight(str, P.languages.javascript);
-    return <span dangerouslySetInnerHTML={{ __html: language }} />;
+  private syntaxHighlight = (source: string, lineId?: string): any => {
+    if (!source) return;
+    const language = P.highlight(source, P.languages.javascript);
+    return <span id={lineId} dangerouslySetInnerHTML={{ __html: language }} />;
   };
 
-  public render(): JSX.Element {
+  private updateComment = (commentInfo: any, text?: string) => {
+    const updatedComments = this.state.comments.map(comment => {
+      console.log(comment);
+      if (comment.lineId === commentInfo.lineId) {
+        return {
+          ...commentInfo,
+          lineId: commentInfo.uniqueLineId,
+          body: text
+        };
+      }
+      return comment;
+    });
+
+    this.setState({
+      comments: updatedComments
+    });
+  };
+
+  private removeComment = (lineId: string) => {
+    const updatedComments = this.state.comments.filter(
+      comment => comment.lineId !== lineId
+    );
+    this.setState({ comments: updatedComments });
+  };
+
+  private createComment = (commentInfo: CommentInfo) => {
+    const updatedComments = [
+      ...this.state.comments,
+      {
+        body: {
+          ...commentInfo,
+          lineId: commentInfo.lineId,
+          text: ''
+        }
+      }
+    ];
+    this.setState({ comments: updatedComments });
+  };
+
+  /**
+   *
+   * helper that return Array with uniqueLineIds (comment.lineId)
+   *
+   * @param arr Array with commentLineIds
+   *
+   */
 
+  private getlineIdsArray = (arr: any[]) => {
+    return arr.reduce((acc: Array<string>, comment) => {
+      acc.push(comment.body.lineId);
+      return acc;
+    }, []);
+  };
+
+  public render(): JSX.Element {
     return (
-      <div className="react-diff-viewer-example">
-        <div className="radial"></div>
-        <div className="banner">
-          <div className="img-container">
-            <img src={logo} alt="React Diff Viewer Logo" />
+      <div className='react-diff-viewer-example'>
+        <div className='radial'></div>
+        <div className='banner'>
+          <div className='img-container'>
+            <img src={logo} alt='React Diff Viewer Logo' />
           </div>
           <p>
             A simple and beautiful text diff viewer made with{' '}
-            <a href="https://github.com/kpdecker/jsdiff" target="_blank">
+            <a href='https://github.com/kpdecker/jsdiff' target='_blank'>
               Diff{' '}
             </a>
             and{' '}
-            <a href="https://reactjs.org" target="_blank">
+            <a href='https://reactjs.org' target='_blank'>
               React.{' '}
             </a>
-            Featuring split view, inline view, word diff, line highlight and more.
+            Featuring split view, inline view, word diff, line highlight and
+            more.
           </p>
-          <div className="cta">
-            <a href="https://github.com/praneshr/react-diff-viewer#install">
-              <button type="button" className="btn btn-primary btn-lg">
+          <div className='cta'>
+            <a href='https://github.com/praneshr/react-diff-viewer#install'>
+              <button type='button' className='btn btn-primary btn-lg'>
                 Documentation
               </button>
             </a>
           </div>
         </div>
-        <div className="diff-viewer">
+        <div className='diff-viewer'>
           <ReactDiff
             highlightLines={this.state.highlightLine}
             onLineNumberClick={this.onLineNumberClick}
@@ -93,13 +161,32 @@ class Example extends React.Component<{}, ExampleState> {
             newValue={newJs}
             renderContent={this.syntaxHighlight}
             useDarkTheme
-            leftTitle="webpack.config.js master@2178133 - pushed 2 hours ago."
-            rightTitle="webpack.config.js master@64207ee - pushed 13 hours ago."
+            leftTitle='webpack.config.js master@2178133 - pushed 2 hours ago.'
+            rightTitle='webpack.config.js master@64207ee - pushed 13 hours ago.'
+            afterCommit={'afterCommit'}
+            beforeCommit={'beforeCommit'}
+            commentLineIds={this.getlineIdsArray(this.state.comments)}
+            getCommentInfo={commentInfo => this.createComment(commentInfo)}
+            renderCommentBlock={commentInfo => {
+              console.log(commentInfo);
+              const currComment = this.state.comments.find(
+                comment => comment.body.lineId === commentInfo.lineId
+              );
+              return (
+                <CommentBlock
+                  updateComment={this.updateComment}
+                  removeComment={this.removeComment}
+                  comment={currComment}
+                  show={!!currComment.body.text}
+                />
+              );
+            }}
+            fileId={'test/test.jsx'}
           />
         </div>
         <footer>
           Made with 💓 by{' '}
-          <a href="https://praneshravi.in" target="_blank">
+          <a href='https://praneshravi.in' target='_blank'>
             Pranesh Ravi
           </a>
         </footer>