From 393bae3e2fd0b3e936bd6177bc1ad7653af6b71b Mon Sep 17 00:00:00 2001
From: 0xExp-po <153439271+0xExp-po@users.noreply.github.com>
Date: Sun, 15 Sep 2024 21:26:56 +0200
Subject: [PATCH] project page update (#48)

* chore: update modal style

* feat: add function to get toml file hash

* chore: update demo data

* feat: add check project in on-chain

* feat: add pagination to commit history

* chore: put pagination out from scroll area

* chore: add docs link to tansu.toml description

* fix: keep wallet connection
---
 dapp/src/components/CommitHistory.jsx         | 98 +++++++++++++------
 dapp/src/components/ConnectWallet.astro       |  3 +-
 dapp/src/components/stellar-wallets-kit.ts    | 10 +-
 .../src/components/utils/ProjectInfoModal.jsx |  2 +-
 dapp/src/service/GithubService.ts             |  2 +-
 5 files changed, 83 insertions(+), 32 deletions(-)

diff --git a/dapp/src/components/CommitHistory.jsx b/dapp/src/components/CommitHistory.jsx
index edeebf5..03a21be 100644
--- a/dapp/src/components/CommitHistory.jsx
+++ b/dapp/src/components/CommitHistory.jsx
@@ -11,20 +11,22 @@ const CommitHistory = () => {
   const isProjectInfoLoaded = useStore(projectInfoLoaded);
   const [commitHistory, setCommitHistory] = useState([]);
   const [authors, setAuthors] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
 
-  const fetchCommitHistory = async () => {
+  const fetchCommitHistory = async (page = 1) => {
     const projectRepoInfo = loadProjectRepoInfo();
     if (projectRepoInfo?.author && projectRepoInfo?.repository) {
-      const history = await getCommitHistory(projectRepoInfo.author, projectRepoInfo.repository);
+      const history = await getCommitHistory(projectRepoInfo.author, projectRepoInfo.repository, page);
       setCommitHistory(history);
-      
+      setCurrentPage(page);
+
       // Set the latest commit
       if (history.length > 0 && history[0].commits.length > 0) {
         latestCommit.set(history[0].commits[0].sha);
       }
     }
   };
-  
+
   const addMaintainerBadge = () => {
     const configData = loadConfigData();
     if (configData.authorGithubNames && configData.authorGithubNames.length > 0) {
@@ -47,31 +49,71 @@ const CommitHistory = () => {
   }, [isProjectInfoLoaded]);
 
   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}
-                  isMaintainer={authors ? authors.includes(commit.author.name.toLowerCase()) : false}
-                />
-              </div>
-            ))}
+    <>
+      <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}
+                    isMaintainer={authors ? authors.includes(commit.author.name.toLowerCase()) : false}
+                  />
+                </div>
+              ))}
+            </div>
           </div>
-        </div>
-      ))}
-    </div>
+        ))}
+      </div>
+      
+      {/* Pagination  */}
+      <div className="flex justify-center items-center mt-4 space-x-2">
+        <button
+          onClick={() => fetchCommitHistory(Math.max(1, currentPage - 1))}
+          disabled={currentPage === 1}
+          className="px-3 py-1 border border-zinc-300 rounded disabled:opacity-50 hover:bg-zinc-100 active:bg-zinc-200 transition-colors duration-150 flex items-center"
+        >
+          <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          Previous
+        </button>
+        <button
+          onClick={() => fetchCommitHistory(1)}
+          className={`px-3 py-1 border rounded hover:bg-zinc-100 active:bg-zinc-200 transition-colors duration-150 ${
+            currentPage === 1 ? 'bg-blue-500 text-white border-blue-500 hover:bg-blue-600 active:bg-blue-700' : 'border-zinc-300'
+          }`}
+        >
+          1
+        </button>
+        {currentPage > 2 && <span>...</span>}
+        {currentPage !== 1 && (
+          <button className="px-3 py-1 border border-blue-500 bg-blue-500 text-white rounded">
+            {currentPage}
+          </button>
+        )}
+        <button
+          onClick={() => fetchCommitHistory(currentPage + 1)}
+          disabled={false}
+          className="px-3 py-1 border border-zinc-300 rounded disabled:opacity-50 hover:bg-zinc-100 active:bg-zinc-200 transition-colors duration-150 flex items-center"
+        >
+          Next
+          <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+      </div>
+    </>
   );
 };
 
diff --git a/dapp/src/components/ConnectWallet.astro b/dapp/src/components/ConnectWallet.astro
index 543f75d..c1d939d 100644
--- a/dapp/src/components/ConnectWallet.astro
+++ b/dapp/src/components/ConnectWallet.astro
@@ -4,9 +4,10 @@
 
 <script>
   import { truncateMiddle } from "../utils/utils";
-  import { kit, loadedPublicKey, setPublicKey } from "./stellar-wallets-kit";
+  import { initializeConnection, kit, loadedPublicKey, setPublicKey } from "./stellar-wallets-kit";
 
   document.addEventListener("astro:page-load", () => {
+    initializeConnection();
     const button = document.querySelector(
       "[data-connect]",
     ) as HTMLButtonElement;
diff --git a/dapp/src/components/stellar-wallets-kit.ts b/dapp/src/components/stellar-wallets-kit.ts
index ca984b9..2c9260c 100644
--- a/dapp/src/components/stellar-wallets-kit.ts
+++ b/dapp/src/components/stellar-wallets-kit.ts
@@ -21,6 +21,14 @@ function loadedPublicKey(): string | undefined {
 
 function setPublicKey(data: string): void {
   connectionState.publicKey = data;
+  localStorage.setItem('publicKey', data);
 }
 
-export { kit, loadedPublicKey, setPublicKey };
+function initializeConnection(): void {
+  const storedPublicKey = localStorage.getItem('publicKey');
+  if (storedPublicKey) {
+    setPublicKey(storedPublicKey);
+  }
+}
+
+export { kit, loadedPublicKey, setPublicKey, initializeConnection };
diff --git a/dapp/src/components/utils/ProjectInfoModal.jsx b/dapp/src/components/utils/ProjectInfoModal.jsx
index 543154b..ade94c5 100644
--- a/dapp/src/components/utils/ProjectInfoModal.jsx
+++ b/dapp/src/components/utils/ProjectInfoModal.jsx
@@ -91,7 +91,7 @@ const ProjectInfoModal = ({ id, projectInfo, onClose }) => {
           <div className="space-y-4">
             <h2 id="view-modal-project-name" className="text-2xl sm:text-3xl font-bold">{projectName || "No project name"}</h2>
             <div className="h-40 flex items-center px-4 sm:px-8 pb-4">
-              <p className="text-lg text-center">This project is missing a tansu.toml configuration file.</p>
+              <p className="text-lg text-center">This project is missing a <a href='https://tansu.dev/docs/developers/project_information_file' target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">tansu.toml</a> configuration file.</p>
             </div>
             <div className="flex justify-end">
               <button 
diff --git a/dapp/src/service/GithubService.ts b/dapp/src/service/GithubService.ts
index 03e2905..be05a3d 100644
--- a/dapp/src/service/GithubService.ts
+++ b/dapp/src/service/GithubService.ts
@@ -4,7 +4,7 @@ import toml from 'toml';
 import type { FormattedCommit } from '../types/github';
 import { getGithubContentUrl, getGithubContentUrlFromConfigUrl } from '../utils/editLinkFunctions';
 
-async function getCommitHistory(username: string, repo: string, perPage: number = 30, page: number = 1): Promise<{ date: string; commits: FormattedCommit[] }[]> {
+async function getCommitHistory(username: string, repo: string, page: number = 1, perPage: number = 30): Promise<{ date: string; commits: FormattedCommit[] }[]> {
   try {
     const response = await axios.get(
       `https://api.github.com/repos/${username}/${repo}/commits`,