fix: project card fixes

This commit is contained in:
sriram veeraghanta 2023-10-11 20:04:47 +05:30
parent faf0a641ff
commit d58d639190
4 changed files with 35 additions and 26 deletions

View File

@ -22,6 +22,8 @@ export const ProjectCardList: FC<IProjectCardList> = observer((props) => {
const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
console.log("projects", projects);
if (!projects) {
return (
<Loader className="grid grid-cols-3 gap-4">

View File

@ -5,6 +5,7 @@ import { mutate } from "swr";
import { observer } from "mobx-react-lite";
// icons
import { CalendarDaysIcon, LinkIcon, PencilIcon, PlusIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
import { Star } from "lucide-react";
// services
import projectService from "services/project.service";
// hooks
@ -136,7 +137,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
alt={project.name}
className="absolute top-0 left-0 h-full w-full object-cover rounded-t-[10px]"
/>
<div className="absolute bottom-4 left-4 flex items-center gap-3 text-white">
<div className="absolute bottom-4 right-4 flex items-center gap-3 text-white">
{!project.is_member ? (
<button
type="button"
@ -153,11 +154,21 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
) : (
<span className="cursor-default rounded bg-green-600 px-2 py-1 text-xs">Joined</span>
)}
{project.is_favorite && (
<span className="grid h-6 w-9 cursor-default place-items-center rounded bg-orange-400">
<StarIcon className="h-3 w-3" />
</div>
<div className="absolute top-4 right-4 bg-slate-300 rounded">
<span className="grid h-6 w-9 place-items-center cursor-pointer ">
<Star className="h-3 w-3" />
</span>
</div>
<div className="absolute bottom-4 left-4 bg-slate-300 rounded-md">
{project.emoji ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{renderEmoji(project.emoji)}
</span>
)}
) : project.icon_prop ? (
renderEmoji(project.icon_prop)
) : null}
</div>
</div>
</a>
@ -167,13 +178,6 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
<a>
<div className="flex items-center gap-1">
<h3 className="text-1.5xl font-medium text-custom-text-100">{project.name}</h3>
{project.emoji ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{renderEmoji(project.emoji)}
</span>
) : project.icon_prop ? (
renderEmoji(project.icon_prop)
) : null}
</div>
<p className="mt-3.5 mb-7 break-words">{truncateText(project.description ?? "", 100)}</p>
</a>
@ -209,14 +213,14 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
{project.is_favorite ? (
<CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
<span className="flex items-center justify-start gap-2">
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
<Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
<span>Remove from favorites</span>
</span>
</CustomMenu.MenuItem>
) : (
<CustomMenu.MenuItem onClick={handleAddToFavorites}>
<span className="flex items-center justify-start gap-2">
<StarIcon className="h-4 w-4" />
<Star className="h-4 w-4" />
<span>Add to favorites</span>
</span>
</CustomMenu.MenuItem>

View File

@ -5,7 +5,7 @@ import trackEventServices from "services/track_event.service";
// types
import type {
GithubRepositoriesResponse,
ICurrentUserResponse,
IUser,
IProject,
IProjectBulkInviteFormData,
IProjectMember,
@ -44,15 +44,8 @@ export class ProjectService extends APIService {
});
}
async getProjects(
workspaceSlug: string,
params: {
is_favorite: "all" | boolean;
}
): Promise<IProject[]> {
return this.get(`/api/workspaces/${workspaceSlug}/projects/`, {
params,
})
async getProjects(workspaceSlug: string): Promise<IProject[]> {
return this.get(`/api/workspaces/${workspaceSlug}/projects/`)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
@ -93,7 +86,7 @@ export class ProjectService extends APIService {
workspaceSlug: string,
projectId: string,
data: IProjectBulkInviteFormData,
user: ICurrentUserResponse | undefined
user: IUser | undefined
): Promise<any> {
return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/add/`, data)
.then((response) => {
@ -291,6 +284,14 @@ export class ProjectService extends APIService {
});
}
async getUserProjectFavorites(workspaceSlug: string): Promise<any[]> {
return this.get(`/api/workspaces/${workspaceSlug}/user-favorite-projects/`)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
async addProjectToFavorites(workspaceSlug: string, project: string): Promise<any> {
return this.post(`/api/workspaces/${workspaceSlug}/user-favorite-projects/`, { project })
.then((response) => response?.data)

View File

@ -232,10 +232,11 @@ class ProjectStore implements IProjectStore {
* get Workspace projects using workspace slug
* @param workspaceSlug
* @returns
*
*/
fetchProjects = async (workspaceSlug: string) => {
try {
const projects = await this.projectService.getProjects(workspaceSlug, { is_favorite: "all" });
const projects = await this.projectService.getProjects(workspaceSlug);
runInAction(() => {
this.projects = {
...this.projects,
@ -244,6 +245,7 @@ class ProjectStore implements IProjectStore {
});
} catch (error) {
console.log("Failed to fetch project from workspace store");
throw error;
}
};