export diff section component, fix get diff, pass diff data, remove useEffect

Author: liuliu-dev

CHANGELOG.md

@@ -189,6 +189,6 @@ If you are upgrading from a version prior to 2.0.0, please note the changes to p
 
 -- Add support for Dolt diff.
 
-## [2.3.3]
+## [2.3.8]
 
 -- Diff section UI fixes.

README.md

@@ -212,16 +212,16 @@ Represents changes between two commits:
 
 ```typescript
 export type Diff = {
-  files: ChangedFile[];
+  files: ChangedItem[];
 };
 ```
 
-### `ChangedFile` Type
+### `ChangedItem` Type
 
 Details of files changed between commits:
 
 ```typescript
-export type ChangedFile = {
+export type ChangedItem = {
   filename: string;
   status: string; // "added", "modified", or "deleted"
   additions: number;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "commit-graph",
-  "version": "2.3.3",
+  "version": "2.3.8",
   "homepage": "https://liuliu-dev.github.io/CommitGraph/",
   "author": "Liu Liu <[email protected]>",
   "description": "A React component to visualize a commit graph.",
@@ -46,6 +46,7 @@
     ]
   },
   "dependencies": {
+    "@dolthub/react-components": "^0.2.7",
     "@dolthub/react-hooks": "^0.1.7",
     "@dolthub/web-utils": "^0.1.5",
     "@rollup/plugin-typescript": "11.1.6",

rollup.config.js

@@ -35,7 +35,7 @@ export default [
   },
   {
     input: "src/index.ts",
-    output: [{ file: "dist/types.d.ts", format: "es" }],
+    output: [{ file: "dist/index.d.ts", format: "es" }],
     plugins: [dts.default()],
   },
 ];

src/components/CommitDetails/index.module.css

@@ -38,20 +38,6 @@
   visibility: visible;
 }
 
-.diffSection {
-  font-family: "Source Sans Pro";
-  font-size: small;
-  border: 1px solid #e1e4e8;
-  background-color: white;
-  position: absolute;
-  width: 360px;
-  right: 1rem;
-  top: 1rem;
-  z-index: 10;
-  color: #010a40;
-  border-radius: 0.5rem;
-}
-
 .comments {
   border: 1px solid #e1e4e8;
   background-color: white;

src/components/CommitDetails/index.tsx

@@ -6,6 +6,7 @@ import css from "./index.module.css";
 import { Tooltip } from "react-tooltip";
 import DiffSection from "../DiffSection";
 import { useOnClickOutside } from "@dolthub/react-hooks";
+import { fromCommitNodeToCommit } from "src/helpers/utils";
 
 type Props = {
   commit: CommitNode;
@@ -21,6 +22,8 @@ type Props = {
   forDolt?: boolean;
 };
 
+const diffCache: { [key: string]: Diff | undefined } = {};
+
 export default function CommitDetails({
   commit,
   branch,
@@ -48,6 +51,8 @@ export default function CommitDetails({
   useOnClickOutside(diffRef, () => {
     setShowDiff(false);
   });
+  const [diff, setDiff] = useState<Diff | undefined>(undefined);
+  const [loading, setLoading] = useState(false);
 
   return (
     <>
@@ -80,7 +85,22 @@ export default function CommitDetails({
               <button
                 type="button"
                 className={css.button}
-                onClick={() => setShowDiff(true)}
+                onClick={async () => {
+                  setLoading(true);
+                  setShowDiff(true);
+                  const cacheKey = `${commit.parents[0]}-${commit.hash}`;
+                  if (diffCache[cacheKey]) {
+                    setDiff(diffCache[cacheKey]);
+                  } else {
+                    const result = await getDiff(
+                      commit.parents[0],
+                      commit.hash,
+                    );
+                    diffCache[cacheKey] = result;
+                    setDiff(result);
+                  }
+                  setLoading(false);
+                }}
               >
                 See commit overview
               </button>
@@ -100,17 +120,22 @@ export default function CommitDetails({
         >
           {excerpt(message, 80)}
         </div>
-        {message.length > 80 && (
+        {message.length > 80 && !getDiff && (
           <Tooltip
             id={`commit-${commit.hash}-msg`}
             className={css.tooltip}
             noArrow
           />
         )}
       </div>
-      {showDiff && !!getDiff && (
-        <div className={css.diffSection} ref={diffRef}>
-          <DiffSection commit={commit} getDiff={getDiff} forDolt={forDolt} />
+      {showDiff && (
+        <div ref={diffRef}>
+          <DiffSection
+            commit={fromCommitNodeToCommit(commit)}
+            diff={diff}
+            forDolt={forDolt}
+            loading={loading}
+          />
         </div>
       )}
     </>

src/components/CommitGraph/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { Branch, Commit, CommitNode, Diff, GraphStyle } from "../../types";
 import {
   defaultStyle,

src/components/DiffSection/ChangedFileDetails.tsx

@@ -1,12 +1,12 @@
 import { FiPlus } from "react-icons/fi";
-import { ChangedFile } from "../../types";
+import { ChangedItem } from "../../types";
 import css from "./index.module.css";
 import React from "react";
 import { RiPencilFill } from "react-icons/ri";
 import { FiMinus } from "react-icons/fi";
 
 type Props = {
-  file: ChangedFile;
+  file: ChangedItem;
 };
 
 export default function ChangedFileDetails({ file }: Props) {

src/components/DiffSection/index.module.css

@@ -1,3 +1,17 @@
+.diffSection {
+  font-family: "Source Sans Pro";
+  font-size: small;
+  border: 1px solid #e1e4e8;
+  background-color: white;
+  position: absolute;
+  width: 360px;
+  right: 1rem;
+  top: 1rem;
+  z-index: 10;
+  color: #010a40;
+  border-radius: 0.5rem;
+}
+
 .top {
   padding: 1rem 1.5rem;
 }
@@ -80,3 +94,9 @@
 .link:hover {
   color: #3d91f0;
 }
+
+.loading {
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+}

src/components/DiffSection/index.tsx

@@ -1,63 +1,49 @@
 import React, { useEffect, useState } from "react";
-import { ChangedFile, CommitNode, Diff } from "../../types";
+import { ChangedItem, Commit, Diff } from "../../types";
 import css from "./index.module.css";
 import ChangedFileDetails from "./ChangedFileDetails";
 import { pluralize } from "@dolthub/web-utils";
+import { SmallLoader } from "@dolthub/react-components";
 
 type Props = {
-  commit: CommitNode;
-  getDiff: (base: string, head: string) => Promise<Diff | undefined>;
+  commit: Commit;
+  diff?: Diff;
   forDolt?: boolean;
+  loading?: boolean;
 };
 
-const diffCache: { [key: string]: Diff | undefined } = {};
-
-export default function DiffSection({ commit, getDiff, forDolt }: Props) {
-  const [diff, setDiff] = useState<Diff | undefined>(undefined);
-
-  useEffect(() => {
-    const fetchDiff = async () => {
-      const cacheKey = `${commit.parents[0]}-${commit.hash}`;
-      if (diffCache[cacheKey]) {
-        setDiff(diffCache[cacheKey]);
-      } else {
-        const result = await getDiff(commit.parents[0], commit.hash);
-        diffCache[cacheKey] = result;
-        setDiff(result);
-      }
-    };
-
-    fetchDiff();
-  }, [commit, getDiff]);
-
+export default function DiffSection({ commit, diff, forDolt, loading }: Props) {
   const { added, modified, deleted } = getChanged(diff?.files || []);
   const file = forDolt ? "table" : "file";
+  const files = diff?.files || diff?.tables;
 
   return (
-    <div>
+    <div className={css.diffSection}>
       <div className={css.top}>
         <div className={css.commitAndParents}>
           <div className={css.hashes}>
             <div className={css.bold}>commit:</div>
-            <div>{commit.hash}</div>
+            <div>{commit.sha}</div>
           </div>
           <div className={css.hashes}>
             <div className={css.bold}>
               {pluralize(commit.parents.length, "parent")}:
             </div>
             <div>
               {commit.parents.map((p, i) => (
-                <div>
-                  {p}
+                <div key={p.sha}>
+                  {p.sha}
                   {i === commit.parents.length - 1 ? "" : ","}
                 </div>
               ))}
             </div>
           </div>
         </div>
-        <div className={css.message}>{commit.message}</div>
+        <div className={css.message}>{commit.commit.message}</div>
+        {loading && <SmallLoader loaded={!loading} className={css.loading} />}
+        {/* {err && <div className={css.error}>{err}</div>} */}
       </div>
-      {!!diff?.files.length && (
+      {!!files?.length && (
         <>
           <div className={css.summary}>
             {!!modified && (
@@ -80,7 +66,7 @@ export default function DiffSection({ commit, getDiff, forDolt }: Props) {
             )}
           </div>
           <ul className={css.list}>
-            {diff?.files.map(file => (
+            {files.map(file => (
               <ChangedFileDetails key={file.filename} file={file} />
             ))}
           </ul>
@@ -96,7 +82,7 @@ type GetChangedReturnType = {
   deleted: number;
 };
 
-function getChanged(files: ChangedFile[]): GetChangedReturnType {
+function getChanged(files: ChangedItem[]): GetChangedReturnType {
   let added = 0;
   let modified = 0;
   let deleted = 0;