Skip to content

Commit

Permalink
Update workflow (#45)
Browse files Browse the repository at this point in the history 
* chore: update config data type

* feat: add modal in project list

* chore: add projectcard modal open nanostores

* chore: remove set project section in dashboard

* chore: change modal when no config file

* chore: change description of get commit section

* chore: change path from commit to project

* chore: update style of projectinfomodal without config data

* chore: add tooltip to commit badge

* chore: update logo in project info modal

* chore: change maintainer address to github name

* chore: change register button position

* chore: add jump to latest commit button

* chore: remove dropdown

* chore: display logo instead thumbnail in project card

* fix: hide register button during loading

* fix: detail button in mobile

* chore: open history and jump to latest commit
  • Loading branch information
@0xExp-po
0xExp-po authored Sep 14, 2024
1 parent e7efed1 commit df36ab6
Show file tree
Hide file tree
Showing 14 changed files with 322 additions and 75 deletions.
3 changes: 3 additions & 0 deletions dapp/public/icons/arrow.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 20 additions & 4 deletions dapp/src/components/CommitRecord.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,29 @@ const CommitRecord = ({ message, date, authorName, authorGithubLink, sha, commit
{(isLatestCommit || isMaintainer) && (
<div className="absolute top-0.5 left-1 flex space-x-1">
{isLatestCommit && (
<div className="text-xs font-bold tracking-tighter leading-3 bg-lime rounded-sm p-0.5">
verified commit
<div className="relative group">
<div className="text-xs font-bold tracking-tighter leading-3 bg-lime rounded-sm p-0.5">
verified commit
</div>
<div className="absolute left-0 bottom-full mb-2 hidden group-hover:block">
<div className="bg-black text-white text-xs py-1 px-2 rounded shadow-lg w-max max-w-[60vw] break-words">
This commit was verified on-chain by a maintainer
<div className="absolute left-4 top-full border-4 border-transparent border-t-black"></div>
</div>
</div>
</div>
)}
{isMaintainer && (
<div className="text-xs font-bold tracking-tighter leading-3 bg-blue-200 rounded-sm p-0.5">
verified maintainer
<div className="relative group">
<div className="text-xs font-bold tracking-tighter leading-3 bg-blue-200 rounded-sm p-0.5">
verified maintainer
</div>
<div className="absolute left-0 bottom-full mb-2 hidden group-hover:block">
<div className="bg-black text-white text-xs py-1 px-2 rounded shadow-lg w-max max-w-[60vw] break-words">
This maintainer is allowed to register new commit hash on-chain
<div className="absolute left-4 top-full border-4 border-transparent border-t-black"></div>
</div>
</div>
</div>
)}
</div>
Expand Down
4 changes: 2 additions & 2 deletions dapp/src/components/GetCommit.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Loading from "./utils/Loading.astro";
---

<div class="relative flex flex-col items-center md:flex-row">
<Topic title="Latest hash" description="Get the latest hash on-chain" />
<Topic title="Latest hash" description="" />
</div>

<div
Expand Down Expand Up @@ -76,7 +76,7 @@ import Loading from "./utils/Loading.astro";
wrap_div.innerHTML = '';
wrap_div.appendChild(container);
} else {
wrap_div.innerHTML = 'Get the Latest Sha ...';
wrap_div.innerHTML = 'There is no hash on-chain for this project';
}
} catch (e) {
console.error(e);
Expand Down
8 changes: 5 additions & 3 deletions dapp/src/components/ProjectCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { getProject, getProjectHash } from "../service/ReadContractService";
import { setProjectId, setProject, setProjectRepoInfo, setConfigData, setProjectLatestSha, refreshLocalStorage } from "../service/StateService";
import { getAuthorRepo } from "../utils/editLinkFunctions";
import { fetchTOMLFromConfigUrl } from "../service/GithubService";
import { projectCardModalOpen } from '../utils/store';
import { convertGitHubLink } from '../utils/editLinkFunctions';

const ProjectCard = ({ config }) => {

Expand Down Expand Up @@ -48,7 +50,7 @@ const ProjectCard = ({ config }) => {
setProjectLatestSha(latestSha);
} else setProjectLatestSha("");

window.location.href = '/commit';
projectCardModalOpen.set(true);
} else {
alert(`There is not such project: ${config.projectName}`);
}
Expand All @@ -61,9 +63,9 @@ const ProjectCard = ({ config }) => {
<div className="project-card max-w-[400px] w-full border border-zinc-400 rounded-lg">
<div className="rounded-lg overflow-hidden cursor-pointer group" onClick={handleCardClick}>
<img
src={config.thumbnailImageLink || '/fallback-image.jpg'}
src={config.logoImageLink !== undefined ? convertGitHubLink(config.logoImageLink) : '/fallback-image.jpg'}
alt={config.projectName}
className="thumbnail w-full aspect-[3/2] object-cover transition-transform duration-300 ease-in-out group-hover:scale-125"
className="thumbnail w-full aspect-[3/2] object-fill transition-transform duration-300 ease-in-out group-hover:scale-125"
/>
</div>
<div className="px-2 pb-2">
Expand Down
110 changes: 82 additions & 28 deletions dapp/src/components/ProjectInfo.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,12 @@ import ModalInput from "./utils/ModalInput.astro";
</svg>
<span>View Project Info</span>
</div>
<div id="jump-to-latest-commit" class="flex items-center space-x-2 cursor-pointer hover:bg-zinc-300 transition-colors duration-300 rounded-lg px-2 py-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" />
</svg>
<span>Jump to Latest Verified Commit</span>
</div>
</div>
</div>
<div id="commit-history-container" class="mt-4 overflow-hidden transition-all duration-300 max-h-0">
Expand Down Expand Up @@ -111,7 +117,7 @@ import ModalInput from "./utils/ModalInput.astro";
<Modal id="project-info-modal" title="">
<div class="space-y-6 w-[calc(100vw-80px)] sm:w-[calc(100vw-120px)] md:w-full md:max-w-[800px]">
<div class="flex items-center space-x-4">
<img id="project-logo" src="" alt="Project Logo" class="w-12 h-12 object-contain">
<!-- <img id="project-logo" src="" alt="Project Logo" class="w-12 h-12 object-contain"> -->
<h2 id="view-modal-project-name" class="text-2xl sm:text-3xl font-bold"></h2>
</div>

Expand Down Expand Up @@ -166,31 +172,60 @@ import ModalInput from "./utils/ModalInput.astro";
const ul = maintainersList.querySelector("ul");
if (ul) {
ul.innerHTML = '';
projectInfo.maintainers.forEach((maintainer: string) => {
const li = document.createElement("li");
li.className = "relative";

const content = document.createElement("p");
content.className = "truncate";
content.textContent = maintainer;

li.appendChild(content);

const popup = document.createElement("p");
popup.className = "absolute left-0 bottom-full mb-1 bg-black text-white text-xs text-center p-1 rounded hidden before:content-[''] before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-black max-w-[240px] sm:max-w-[320px] md:max-w-none break-words";
popup.textContent = maintainer;
li.appendChild(popup);

li.addEventListener("mouseenter", () => {
popup.classList.remove("hidden");
const configData = loadConfigData();
if (configData && configData.authorGithubNames && configData.maintainersAddresses) {
configData.authorGithubNames.forEach((authorName: string, index: number) => {
const li = document.createElement("li");
li.className = "relative";

const content = document.createElement("p");
content.className = "truncate";
content.textContent = authorName;

li.appendChild(content);

const popup = document.createElement("p");
popup.className = "absolute left-0 bottom-full mb-1 bg-black text-white text-xs text-center p-1 rounded hidden before:content-[''] before:absolute before:left-5 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-black max-w-[240px] sm:max-w-[320px] md:max-w-none break-words";
popup.textContent = configData.maintainersAddresses[index] || '';
li.appendChild(popup);

li.addEventListener("mouseenter", () => {
popup.classList.remove("hidden");
});

li.addEventListener("mouseleave", () => {
popup.classList.add("hidden");
});

ul.appendChild(li);
});

li.addEventListener("mouseleave", () => {
popup.classList.add("hidden");
} else {
projectInfo.maintainers.forEach((maintainer: string) => {
const li = document.createElement("li");
li.className = "relative";

const content = document.createElement("p");
content.className = "truncate";
content.textContent = maintainer;

li.appendChild(content);

const popup = document.createElement("p");
popup.className = "absolute left-0 bottom-full mb-1 bg-black text-white text-xs text-center p-1 rounded hidden before:content-[''] before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-black max-w-[240px] sm:max-w-[320px] md:max-w-none break-words";
popup.textContent = maintainer;
li.appendChild(popup);

li.addEventListener("mouseenter", () => {
popup.classList.remove("hidden");
});

li.addEventListener("mouseleave", () => {
popup.classList.add("hidden");
});

ul.appendChild(li);
});

ul.appendChild(li);
});
}
}
}
const githubLink = document.getElementById("github-link") as HTMLAnchorElement;
Expand Down Expand Up @@ -282,20 +317,38 @@ import ModalInput from "./utils/ModalInput.astro";
}

const viewCommitHistory = document.getElementById("view-commit-history");
const jumpToLatestCommit = document.getElementById("jump-to-latest-commit");
const viewCommitText = document.getElementById("view-commit-text");
const commitHistoryContainer = document.getElementById("commit-history-container");
const commitIconUp = document.getElementById("commit-icon-up");
const commitIconDown = document.getElementById("commit-icon-down");

if (viewCommitHistory && viewCommitText && commitHistoryContainer && commitIconUp && commitIconDown) {
if (viewCommitHistory && commitHistoryContainer) {
viewCommitHistory.addEventListener("click", () => {
if (commitHistoryContainer.style.maxHeight === "0px" || !commitHistoryContainer.style.maxHeight) {
commitHistoryContainer.style.maxHeight = `${commitHistoryContainer.scrollHeight}px`;
} else {
commitHistoryContainer.style.maxHeight = "0px";
}
});

}

if (jumpToLatestCommit && commitHistoryContainer) {
jumpToLatestCommit.addEventListener("click", () => {
if (commitHistoryContainer.style.maxHeight === "0px" || !commitHistoryContainer.style.maxHeight) {
commitHistoryContainer.style.maxHeight = `${commitHistoryContainer.scrollHeight}px`;
} else {
setTimeout(() => {
const latestCommit = document.getElementById('latest-commit-record');
if (latestCommit) {
latestCommit.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}, 10);
}
})
}

if (viewCommitText && commitHistoryContainer && commitIconUp && commitIconDown) {
commitHistoryContainer.addEventListener("transitionend", () => {
if (commitHistoryContainer.style.maxHeight === "0px") {
viewCommitText.textContent = "View Commit History";
Expand All @@ -310,7 +363,7 @@ import ModalInput from "./utils/ModalInput.astro";
if (latestCommit) {
latestCommit.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}, 1000);
}, 10);
}
});
}
Expand Down Expand Up @@ -357,7 +410,8 @@ import ModalInput from "./utils/ModalInput.astro";
projectLogo.style.display = 'none';
}
}
if (projectThumbnail) projectThumbnail.src = configData.thumbnailImageLink || '/fallback-image.jpg';
// if (projectThumbnail) projectThumbnail.src = configData.thumbnailImageLink || '/fallback-image.jpg';
if (projectThumbnail) projectThumbnail.src = convertGitHubLink(configData.logoImageLink) || '/fallback-image.jpg';
if (projectDescription) projectDescription.textContent = configData.description || '';
if (companyName) companyName.innerHTML = `Developed by <strong class="font-extrabold"> ${configData.companyName || ''}</strong>`;

Expand Down
95 changes: 62 additions & 33 deletions dapp/src/components/ProjectList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,29 @@
import React, { useState, useEffect } from 'react';
import { useStore } from '@nanostores/react';
import ProjectCard from './ProjectCard.jsx';
import { getDemoConfigData } from '../constants/demoConfigData.js';
import Dropdown from './utils/DropDown.jsx';
import { refreshLocalStorage, setProjectId } from '../service/StateService';
import ProjectInfoModal from './utils/ProjectInfoModal.jsx';
import { getDemoConfigData } from '../constants/demoConfigData';
import { refreshLocalStorage, setProjectId, loadConfigData } from '../service/StateService';
import { projectCardModalOpen } from '../utils/store.js';
import { convertGitHubLink } from '../utils/editLinkFunctions';

const ProjectList = () => {
const [projects, setProjects] = useState([]);
const [filteredProjects, setFilteredProjects] = useState([]);
const isProjectInfoModalOpen = useStore(projectCardModalOpen);
const [projects, setProjects] = useState(undefined);
const [filteredProjects, setFilteredProjects] = useState(undefined);
const [searchTerm, setSearchTerm] = useState('');
const [category, setCategory] = useState('all');

const options = [
{ label: 'All', value: 'all' },
{ label: 'Web', value: 'web' },
{ label: 'Mobile', value: 'mobile' },
{ label: 'Desktop', value: 'desktop' },
];
const [isModalOpen, setModalOpen] = useState(false);
const [projectInfo, setProjectInfo] = useState(null);

// const options = [
// { label: 'All', value: 'all' },
// { label: 'Web', value: 'web' },
// { label: 'Mobile', value: 'mobile' },
// { label: 'Desktop', value: 'desktop' },
// ];

useEffect(() => {
const fetchProjects = async () => {
Expand All @@ -29,13 +37,30 @@ const ProjectList = () => {
}, []);

useEffect(() => {
const filtered = projects.filter(project =>
project?.projectName.toLowerCase().includes(searchTerm.toLowerCase()) &&
(category === 'all')
);
setFilteredProjects(filtered);
if (projects) {
const filtered = projects.filter(project =>
project?.projectName.toLowerCase().includes(searchTerm.toLowerCase()) &&
(category === 'all')
);
setFilteredProjects(filtered);
}
}, [searchTerm, category, projects]);

useEffect(() => {
setModalOpen(isProjectInfoModalOpen);
if (isProjectInfoModalOpen) {
const configData = loadConfigData();
if (configData?.logoImageLink) {
setProjectInfo({
...configData,
logoImageLink: convertGitHubLink(configData.logoImageLink)
});
} else {
setProjectInfo(configData);
}
}
}, [isProjectInfoModalOpen]);

const handleSearch = () => {
console.log('Search function activated');
};
Expand All @@ -49,12 +74,12 @@ const ProjectList = () => {
return (
<div className="project-list-container">
<div className="filters flex items-center gap-2 sm:gap-4 mb-4">
<Dropdown options={options} onSelect={(e) => setCategory(e.target.value)} />
<div className="search-container relative">
{/* <Dropdown options={options} onSelect={(e) => setCategory(e.target.value)} /> */}
<div className="search-container relative w-full">
<input
type="text"
placeholder="Search projects..."
className="w-36 sm:w-48 border rounded-2xl pl-3 sm:pl-4 pr-6 sm:pr-8 py-1"
className="w-full border rounded-2xl pl-3 sm:pl-4 pr-6 sm:pr-8 py-1 sm:py-2"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
Expand All @@ -65,27 +90,31 @@ const ProjectList = () => {
<img src='/icons/search.svg' width={20} height={20} className='icon-search'/>
</div>
</div>
{filteredProjects.length === 0 && (
</div>

{filteredProjects !== undefined && (
filteredProjects.length > 0 ? (
<div className="project-list py-4 grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 justify-items-center">
{filteredProjects.map((project, index) => (
<ProjectCard key={index} config={project} />
))}
</div>
) : (
<div className="no-projects h-80 flex flex-col gap-6 justify-center items-center text-center py-4">
{/* <p className="px-3 py-1 text-base sm:text-lg font-semibold border-2 border-zinc-700 rounded-lg">No projects found</p> */}
<button
className="register-btn mr-2 px-2 sm:px-3 py-1 bg-black text-white text-base sm:text-lg rounded-lg"
className="register-btn mr-2 px-3 sm:px-4 py-2 bg-black text-white text-2xl sm:text-3xl rounded-lg"
onClick={handleRegister}
>
Register
</button>
)}
</div>

{filteredProjects.length > 0 ? (
<div className="project-list py-4 grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 justify-items-center">
{filteredProjects.map((project, index) => (
<ProjectCard key={index} config={project} />
))}
</div>
) : (
<div className="no-projects h-40 flex justify-center items-center text-center py-4">
<p className="px-3 py-1 text-base sm:text-lg font-semibold border-2 border-zinc-700 rounded-lg">No projects found</p>
</div>
</div>
)
)}

{isModalOpen &&
<ProjectInfoModal id="project-info-modal" projectInfo={projectInfo} onClose={() => projectCardModalOpen.set(false)}/>
}
</div>
);
};
Expand Down
Loading

0 comments on commit df36ab6

Please sign in to comment.