Skip to content

Commit cb53fe8

Browse files
xhulia028xhulia028
committed
fix linting and fromating
1 parent 8817eda commit cb53fe8

File tree

4 files changed

+195
-201
lines changed

4 files changed

+195
-201
lines changed

‎client/src/app/dashboard/page.tsx‎

Lines changed: 64 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,78 @@
1-
"use client"
2-
import React, { useState } from 'react';
3-
import { Plus, FileText, Users } from 'lucide-react';
1+
"use client";
2+
import React, { useState } from "react";
3+
import { Plus } from "lucide-react";
44
import Project from "@/types/ProjectType";
55
import ProjectCard from "@/components/project-card/ProjectCard";
66

7-
8-
97
// fetch old porjects here
108
const Dashboard = () => {
11-
const [projects, setProjects] = useState<Project[]>([
12-
{
13-
id: '1',
14-
title: 'fyfu',
15-
lastEdited: 'Edited 5 minutes ago',
16-
preview: 'blank'
17-
},
18-
{
19-
id: '2',
20-
title: 'Untitled',
21-
lastEdited: 'Edited 3 years ago',
22-
preview: 'blank'
23-
},
24-
{
25-
id: '3',
26-
title: "Xhulla Jasimi's team library",
27-
lastEdited: 'Edited 3 years ago',
28-
preview: 'library',
29-
isTeamProject: true
30-
}
31-
]);
9+
const [projects, setProjects] = useState<Project[]>([
10+
{
11+
id: "1",
12+
title: "fyfu",
13+
lastEdited: "Edited 5 minutes ago",
14+
preview: "blank",
15+
},
16+
{
17+
id: "2",
18+
title: "Untitled",
19+
lastEdited: "Edited 3 years ago",
20+
preview: "blank",
21+
},
22+
{
23+
id: "3",
24+
title: "Xhulla Jasimi's team library",
25+
lastEdited: "Edited 3 years ago",
26+
preview: "library",
27+
isTeamProject: true,
28+
},
29+
]);
3230

33-
const handleCreateProject = () => {
34-
const newProject: Project = {
35-
id: Date.now().toString(),
36-
title: 'Untitled',
37-
lastEdited: 'Just created',
38-
preview: 'blank'
39-
};
40-
setProjects([newProject, ...projects]);
31+
const handleCreateProject = () => {
32+
const newProject: Project = {
33+
id: Date.now().toString(),
34+
title: "Untitled",
35+
lastEdited: "Just created",
36+
preview: "blank",
4137
};
38+
setProjects([newProject, ...projects]);
39+
};
4240

43-
44-
45-
// must directly redirect you to /board
46-
const CreateProjectCard = () => (
47-
<div
48-
onClick={handleCreateProject}
49-
className="group relative bg-white rounded-lg border-2 border-dashed border-gray-300 hover:border-gray-400 transition-all duration-200 cursor-pointer hover:bg-gray-50"
50-
>
51-
<div className="aspect-video p-4 flex items-center justify-center">
52-
<div className="flex flex-col items-center space-y-3">
53-
<div className="w-12 h-12 rounded-full bg-gray-100 group-hover:bg-gray-200 flex items-center justify-center transition-colors">
54-
<Plus className="w-6 h-6 text-gray-600" />
55-
</div>
56-
</div>
57-
</div>
58-
<div className="p-4">
59-
<h3 className="font-medium text-gray-600 text-center">Blank board</h3>
60-
</div>
41+
// must directly redirect you to /board
42+
const CreateProjectCard = () => (
43+
<div
44+
onClick={handleCreateProject}
45+
className="group relative bg-white rounded-lg border-2 border-dashed border-gray-300 hover:border-gray-400 transition-all duration-200 cursor-pointer hover:bg-gray-50"
46+
>
47+
<div className="aspect-video p-4 flex items-center justify-center">
48+
<div className="flex flex-col items-center space-y-3">
49+
<div className="w-12 h-12 rounded-full bg-gray-100 group-hover:bg-gray-200 flex items-center justify-center transition-colors">
50+
<Plus className="w-6 h-6 text-gray-600" />
51+
</div>
6152
</div>
62-
);
53+
</div>
54+
<div className="p-4">
55+
<h3 className="font-medium text-gray-600 text-center">Blank board</h3>
56+
</div>
57+
</div>
58+
);
6359

64-
return (
65-
<div className="min-h-screen text-white">
66-
<div className="p-6">
67-
<div className="mb-8">
68-
<h1 className="text-xl font-medium">My boards</h1>
69-
</div>
60+
return (
61+
<div className="min-h-screen text-white">
62+
<div className="p-6">
63+
<div className="mb-8">
64+
<h1 className="text-xl font-medium">My boards</h1>
65+
</div>
7066

71-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
72-
<CreateProjectCard />
73-
{projects.map((project) => (
74-
<ProjectCard key={project.id} project={project} />
75-
))}
76-
</div>
77-
</div>
67+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
68+
<CreateProjectCard />
69+
{projects.map((project) => (
70+
<ProjectCard key={project.id} project={project} />
71+
))}
7872
</div>
79-
);
73+
</div>
74+
</div>
75+
);
8076
};
8177

82-
export default Dashboard;
78+
export default Dashboard;

‎client/src/components/project-card/ProjectCard.tsx‎

Lines changed: 72 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,86 @@
1-
import {FileText } from 'lucide-react';
1+
import { FileText } from "lucide-react";
22
import Project from "@/types/ProjectType";
33
import ProjectEditPopover from "@/components/project-card/project-card-components/ProjectEditPopover";
44
import { useState, useRef, useEffect } from "react";
55

66
export default function ProjectCard({ project }: { project: Project }) {
7-
const [isEditing, setIsEditing] = useState(false);
8-
const [editedTitle, setEditedTitle] = useState(project.title);
9-
const inputRef = useRef<HTMLInputElement>(null);
7+
const [isEditing, setIsEditing] = useState(false);
8+
const [editedTitle, setEditedTitle] = useState(project.title);
9+
const inputRef = useRef<HTMLInputElement>(null);
1010

11-
useEffect(() => {
12-
if (!isEditing) return;
11+
useEffect(() => {
12+
if (!isEditing) return;
1313

14-
const handleClickOutside = (event: MouseEvent) => {
15-
if (inputRef.current && !inputRef.current.contains(event.target as Node)) {
16-
handleSave();
17-
}
18-
};
14+
const handleClickOutside = (event: MouseEvent) => {
15+
if (
16+
inputRef.current &&
17+
!inputRef.current.contains(event.target as Node)
18+
) {
19+
handleSave();
20+
}
21+
};
1922

20-
document.addEventListener('mousedown', handleClickOutside);
21-
return () => document.removeEventListener('mousedown', handleClickOutside);
22-
}, [isEditing, editedTitle]);
23+
document.addEventListener("mousedown", handleClickOutside);
24+
return () => document.removeEventListener("mousedown", handleClickOutside);
25+
}, [isEditing, editedTitle]);
2326

24-
useEffect(() => {
25-
if (isEditing && inputRef.current) {
26-
inputRef.current.focus();
27-
inputRef.current.select();
28-
}
29-
}, [isEditing]);
27+
useEffect(() => {
28+
if (isEditing && inputRef.current) {
29+
inputRef.current.focus();
30+
inputRef.current.select();
31+
}
32+
}, [isEditing]);
3033

31-
const handleRename = () => {
32-
setIsEditing(true);
33-
setEditedTitle(project.title);
34-
};
34+
const handleRename = () => {
35+
setIsEditing(true);
36+
setEditedTitle(project.title);
37+
};
3538

36-
const handleSave = () => {
37-
project.title = editedTitle.trim() || project.title;
38-
setIsEditing(false);
39-
};
39+
const handleSave = () => {
40+
project.title = editedTitle.trim() || project.title;
41+
setIsEditing(false);
42+
};
4043

41-
const handleKeyDown = (e: React.KeyboardEvent) => {
42-
if (e.key === 'Enter') {
43-
handleSave();
44-
} else if (e.key === 'Escape') {
45-
setEditedTitle(project.title);
46-
setIsEditing(false);
47-
}
48-
};
44+
const handleKeyDown = (e: React.KeyboardEvent) => {
45+
if (e.key === "Enter") {
46+
handleSave();
47+
} else if (e.key === "Escape") {
48+
setEditedTitle(project.title);
49+
setIsEditing(false);
50+
}
51+
};
4952

50-
return (
51-
<div className="group relative bg-white rounded-lg border-2 border-gray-200 hover:border-gray-300 transition-all duration-200 cursor-pointer hover:shadow-md">
52-
<div className="aspect-video p-4 flex items-center justify-center bg-gray-50 rounded-t-lg">
53-
{/*theoretically the img of the white board*/}
54-
<div className="w-full h-full bg-gray-100 rounded flex items-center justify-center">
55-
<FileText className="w-8 h-8 text-gray-400"/>
56-
</div>
57-
</div>
58-
<div className="flex flex-row p-4 justify-between">
59-
<div className="flex-1 mr-2 w-3/4">
60-
<div className="flex items-center space-x-2 mb-1">
61-
{isEditing ? (
62-
<input
63-
ref={inputRef}
64-
type="text"
65-
value={editedTitle}
66-
onChange={(e) => setEditedTitle(e.target.value)}
67-
onKeyDown={handleKeyDown}
68-
className="font-medium text-gray-900 bg-transparent border border-blue-500 rounded px-1 py-0.5 outline-none focus:ring-1 focus:ring-blue-500 w-full"
69-
onClick={(e) => e.stopPropagation()}
70-
/>
71-
) : (
72-
<h3 className="font-medium text-gray-900 truncate">{project.title}</h3>
73-
)}
74-
</div>
75-
<p className="text-sm text-gray-500">{project.lastEdited}</p>
76-
</div>
77-
<ProjectEditPopover onRename={handleRename} />
78-
</div>
53+
return (
54+
<div className="group relative bg-white rounded-lg border-2 border-gray-200 hover:border-gray-300 transition-all duration-200 cursor-pointer hover:shadow-md">
55+
<div className="aspect-video p-4 flex items-center justify-center bg-gray-50 rounded-t-lg">
56+
{/*theoretically the img of the white board*/}
57+
<div className="w-full h-full bg-gray-100 rounded flex items-center justify-center">
58+
<FileText className="w-8 h-8 text-gray-400" />
59+
</div>
60+
</div>
61+
<div className="flex flex-row p-4 justify-between">
62+
<div className="flex-1 mr-2 w-3/4">
63+
<div className="flex items-center space-x-2 mb-1">
64+
{isEditing ? (
65+
<input
66+
ref={inputRef}
67+
type="text"
68+
value={editedTitle}
69+
onChange={(e) => setEditedTitle(e.target.value)}
70+
onKeyDown={handleKeyDown}
71+
className="font-medium text-gray-900 bg-transparent border border-blue-500 rounded px-1 py-0.5 outline-none focus:ring-1 focus:ring-blue-500 w-full"
72+
onClick={(e) => e.stopPropagation()}
73+
/>
74+
) : (
75+
<h3 className="font-medium text-gray-900 truncate">
76+
{project.title}
77+
</h3>
78+
)}
79+
</div>
80+
<p className="text-sm text-gray-500">{project.lastEdited}</p>
7981
</div>
80-
);
81-
}
82+
<ProjectEditPopover onRename={handleRename} />
83+
</div>
84+
</div>
85+
);
86+
}

0 commit comments

Comments
 (0)