Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

project page update #48

Merged
merged 9 commits into from
Sep 15, 2024
Merged

project page update #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c5d7246
chore: update modal style
0xExp-po Sep 14, 2024
19f7027
feat: add function to get toml file hash
0xExp-po Sep 15, 2024
bfa1f93
chore: update demo data
0xExp-po Sep 15, 2024
9d32efb
feat: add check project in on-chain
0xExp-po Sep 15, 2024
5a8b7cb
Merge branch 'tupui:main' into confirm-data
0xExp-po Sep 15, 2024
e66aa85
feat: add pagination to commit history
0xExp-po Sep 15, 2024
45715e9
chore: put pagination out from scroll area
0xExp-po Sep 15, 2024
fd8455a
chore: add docs link to tansu.toml description
0xExp-po Sep 15, 2024
929f622
fix: keep wallet connection
0xExp-po Sep 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 70 additions & 28 deletions dapp/src/components/CommitHistory.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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>
</>
);
};

Expand Down
3 changes: 2 additions & 1 deletion dapp/src/components/ConnectWallet.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 9 additions & 1 deletion dapp/src/components/stellar-wallets-kit.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
2 changes: 1 addition & 1 deletion dapp/src/components/utils/ProjectInfoModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion dapp/src/service/GithubService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down
Loading