feat: display real commit history

dapp/src/components/CommitHistory.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { getCommitHistory } from '../service/GithubService';
+import CommitRecord from './CommitRecord.jsx';
+import { formatDate } from '../service/utils';
+import { loadProjectRepoInfo } from '../service/StateService';
+
+const CommitHistory = () => {
+  const [commitHistory, setCommitHistory] = React.useState([]);
+
+  React.useEffect(() => {
+    const fetchCommitHistory = async () => {
+      const projectRepoInfo = loadProjectRepoInfo();
+      if (projectRepoInfo?.author && projectRepoInfo?.repository) {
+        const history = await getCommitHistory(projectRepoInfo.author, projectRepoInfo.repository);
+        console.log("history:", history);
+        setCommitHistory(history);
+      }
+    };
+    fetchCommitHistory();
+  }, []);
+
+  return (
+    <div className="commit-history-container max-h-[560px] overflow-auto relative pl-8">
+      {commitHistory.map((day) => (
+        <div key={day.date} className="day-group relative">
+          <h3 className="text-lg font-semibold pb-4 relative before:content-[''] before:absolute before:-left-[1.5rem] before:top-0 before:bottom-0 before:w-0.5 before:bg-zinc-700">
+            <div className="commit-dot absolute left-[-2.2rem] top-0 w-[25px] h-[25px] bg-[#f3f3f3] rounded-full before:content-[''] before:absolute before:left-[50%] before:top-[50%] before:transform before:-translate-x-1/2 before:-translate-y-1/2 before:w-[15px] before:h-[15px] before:border-[2px] before:rounded-full"></div>
+            <span className="pr-2 relative z-10">{formatDate(day.date)}</span>
+          </h3>
+          <div className="space-y-4 pb-4 relative before:content-[''] before:absolute before:-left-[1.5rem] before:top-0 before:bottom-0 before:w-0.5 before:bg-zinc-700">
+            {day.commits.map((commit) => (
+              <div key={commit.sha} className="relative">
+                <CommitRecord
+                  message={commit.message}
+                  date={commit.commit_date}
+                  authorName={commit.author.name}
+                  authorGithubLink={commit.author.html_url}
+                  sha={commit.sha}
+                  commitLink={commit.html_url}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default CommitHistory;

dapp/src/components/CommitRecord.jsx

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+import { formatTime } from '../service/utils';
+import { loadProjectLatestSha } from '../service/StateService';
+
+const CommitRecord = ({ message, date, authorName, authorGithubLink, sha, commitLink }) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const [isLatestCommit, setIsLatestCommit] = useState(false);
+  const formattedMessage = message.split(/\r?\n/).map(line => line.trim()).filter(Boolean);
+  const firstLine = formattedMessage[0];
+  const hasMoreLines = formattedMessage.length > 1;
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    const highlightLatestCommit = () => {
+      const latestSha = 'cb2e487eb72e836d5ef9f00b52997416a56173dd';
+      setIsLatestCommit(sha === latestSha);
+    };
+    highlightLatestCommit();
+  }, [sha]);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(sha);
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
+  };
+
+  return (
+    <div className={`commit-record relative bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex justify-between items-start ${isLatestCommit ? 'border-2 border-blue-300 bg-zinc-300' : ''}`} data-sha={sha} id={isLatestCommit ? 'latest-commit-record' : undefined}>
+      {isLatestCommit && (
+        <div className="absolute top-0.5 left-1 text-xs font-bold tracking-tighter leading-3 bg-lime rounded-sm p-0.5">
+          latest commit
+        </div>
+      )}
+      <div className="commit-info flex-grow overflow-hidden mr-4">
+        <div className="flex items-center">
+          <a href={commitLink} target="_blank" rel="noopener noreferrer" className="commit-message text-lg font-medium hover:underline hover:text-blue-500 truncate">{firstLine}</a>
+          {hasMoreLines && (
+            <button onClick={() => setIsExpanded(!isExpanded)} className="expand-button ml-2 text-xs bg-zinc-200 hover:bg-zinc-300 text-gray-700 font-semibold py-1 px-2 rounded-md transition-colors duration-200 flex-shrink-0">
+              {isExpanded ? 'Less' : '. . .'}
+            </button>
+          )}
+        </div>
+        {hasMoreLines && isExpanded && (
+          <div className="expanded-message mt-2 text-sm text-gray-700 whitespace-pre-wrap">{formattedMessage.slice(1).join('\n')}</div>
+        )}
+        <div className="commit-details text-sm text-gray-600 mt-1">
+          <a href={authorGithubLink} target="_blank" rel="noopener noreferrer" className="author-name font-semibold hover:underline hover:text-blue-500">{authorName}</a>
+          <span className="mx-1">committed on</span>
+          <span className="commit-date">{formatTime(date)}</span>
+        </div>
+      </div>
+      <div className="commit-sha flex items-center space-x-2 flex-shrink-0">
+        <a href={commitLink} target="_blank" rel="noopener noreferrer" className="sha text-sm font-mono text-gray-500 hover:bg-zinc-400 transition-colors duration-200 px-2 py-1 rounded">{sha.substring(0, 7)}</a>
+        <button className="copy-button hover:bg-zinc-400 transition-colors duration-200 p-1 rounded" onClick={handleCopy}>
+          {isCopied ? (
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 text-green-500">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+            </svg>
+          ) : (
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 text-gray-400 hover:text-gray-600">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+            </svg>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CommitRecord;

dapp/src/components/ProjectInfo.astro

@@ -2,7 +2,7 @@
 import Topic from "./utils/Topic.astro";
 import Modal from "./utils/Modal.astro";
 import Loading from "./utils/Loading.astro";
-import CommitHistory from "./CommitHistory.astro";
+import CommitHistory from "./CommitHistory.jsx";
 ---
 
 <div class="relative flex flex-col items-center md:flex-row justify-between">
@@ -50,7 +50,7 @@ import CommitHistory from "./CommitHistory.astro";
       </div>
     </div>
     <div id="commit-history-container" class="mt-4 overflow-hidden transition-all duration-300 max-h-0">
-      <CommitHistory/>
+      <CommitHistory client:load/>
     </div>
   </div>
 </div>
@@ -111,8 +111,8 @@ import CommitHistory from "./CommitHistory.astro";
 </Modal>
 
 <script>
-  import { getProject, updateConfig } from "../service/ProjectService";
-  import { initializeProjectState, loadedProjectInfo, setProject } from "../service/StateService";
+  import { getProject, getProjectHash, updateConfig } from "../service/ProjectService";
+  import { initializeProjectState, loadedProjectInfo, setProject, setProjectLatestSha } from "../service/StateService";
   import { loadedPublicKey } from "./stellar-wallets-kit";
 
   document.addEventListener("astro:page-load", () => {
@@ -192,7 +192,20 @@ import CommitHistory from "./CommitHistory.astro";
       }
     }
 
+
+  async function updateProjectLatestSha() {
+    try {
+      const latestSha = await getProjectHash();
+      if (latestSha) {
+        setProjectLatestSha(latestSha);
+      }
+    } catch (error) {
+      console.error("Error updating project latest SHA:", error);
+    }
+  }
+
     updateProjectInfo();
+    updateProjectLatestSha();  // Call this function to update the latest SHA
 
     const button = document.querySelector(
       "[update-config]",

dapp/src/service/StateService.ts

@@ -30,6 +30,12 @@ const projectRepoInfo: {
   project_repository: undefined,
 }
 
+const projectLatestSha: {
+  sha: string | undefined;
+} = {
+  sha: undefined,
+};
+
 function initializeProjectState() {
   if (typeof window !== 'undefined') {
     const storedState = localStorage.getItem('projectState');
@@ -53,6 +59,12 @@ function initializeProjectState() {
       projectRepoInfo.project_author = parsedRepoInfo.project_author;
       projectRepoInfo.project_repository = parsedRepoInfo.project_repository;
     }
+
+    const storedLatestSha = localStorage.getItem('projectLatestSha');
+    if (storedLatestSha && projectLatestSha.sha === undefined) {
+      const parsedLatestSha = JSON.parse(storedLatestSha);
+      projectLatestSha.sha = parsedLatestSha.sha;
+    }
   }
 }
 
@@ -93,6 +105,15 @@ function setProjectRepoInfo(author: string, repository: string): void {
   }
 }
 
+function setProjectLatestSha(sha: string): void {
+  projectLatestSha.sha = sha;
+  if (typeof window !== 'undefined') {
+    localStorage.setItem('projectLatestSha', JSON.stringify({
+      sha: projectLatestSha.sha,
+    }));
+  }
+}
+
 function loadedProjectId(): Buffer | undefined {
   return projectState.project_id;
 }
@@ -121,6 +142,10 @@ function loadProjectRepoInfo(): { author: string; repository: string } | undefin
   };
 }
 
+function loadProjectLatestSha(): string | undefined {
+  return projectLatestSha.sha;
+}
+
 export {
   initializeProjectState,
   setProjectId,
@@ -129,4 +154,6 @@ export {
   loadedProjectId,
   loadedProjectInfo,
   loadProjectRepoInfo,
+  setProjectLatestSha,
+  loadProjectLatestSha,
 };