Skip to content

Commit a5ae8a2

Browse files
pranavsenthil5pranavsenthil5
committed
Task and Collections work
1 parent 22bc5d4 commit a5ae8a2

File tree

11 files changed

+485
-637
lines changed

11 files changed

+485
-637
lines changed

‎app/DirPage/components/TaskTracker.js

Lines changed: 185 additions & 463 deletions
Large diffs are not rendered by default.

‎app/DirPage/page.tsx

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,18 @@
33
import ImageGrid from "@/components/imageGrid";
44
import TaskTracker from "./components/TaskTracker"
55
import Sidebar from "@/components/Sidebar";
6-
export default function CollectPage({searchParams}:{searchParams:{name: String;}}){
6+
export default function CollectPage({searchParams}:{searchParams:{name: String, id: number}}){
77

88
return(
9-
// <div className="float-container">
10-
11-
// {/* <ProfileBar/> */}
12-
// <Sidebar/>
13-
// <div className='float-child right'>
14-
// <h1>{searchParams.name}</h1>
15-
// <TaskTracker></TaskTracker>
16-
// </div>
17-
// </div>
189
<div>
1910
<Sidebar />
20-
21-
2211
<h3 className="text-2xl text-center">{searchParams.name}</h3>
2312
<hr className="border-2 border-gray-200 my-4 rounded-full w-1/2 mx-auto" />
2413

2514

2615

2716
<div className='w-1/2 mx-auto'>
28-
<TaskTracker></TaskTracker>
17+
<TaskTracker id={searchParams.id} user_id={1}></TaskTracker>
2918
</div>
3019

3120
<h3 className="text-2xl text-center">Saved Posts</h3>

‎app/dashboard/components/AddFolderForm.jsx

Lines changed: 112 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -6,119 +6,160 @@ import Image from "next/image";
66
import Link from "next/link";
77
import { color } from 'framer-motion';
88

9-
const AddFolderForm = ({ onAddFolder }) => {
9+
async function createFolder(name, location, userId) {
10+
const res = await fetch(`http://127.0.0.1:8080/api/collection/create/${userId}`, {
11+
method: "POST",
12+
headers: {
13+
"Content-Type": "application/json",
14+
"Access-Control-Allow-Origin": "*",
15+
},
16+
mode: "cors",
17+
body: JSON.stringify({
18+
name: name,
19+
location: location,
20+
}),
21+
});
22+
const data = await res.json();
23+
console.log("CREATE FOLDER", data);
24+
25+
}
26+
27+
28+
const AddFolderForm = ({ onAddFolder, folders, setFolders }) => {
1029
const [showForm, setShowForm] = useState(false);
11-
const [folders, setFolders] = useState([]);
30+
// const [folders, setFolders] = useState([]);
1231
const initialValues = {
1332
folderName: '',
1433
location: '',
1534
};
1635

17-
const handleSubmit = (values, { resetForm }) => {
36+
const handleSubmit = async (values, { resetForm }) => {
1837
console.log('Submitted values:', values);
1938

20-
const newFolder = {
39+
const newFolder = {
2140
id: new Date().getTime(),
2241
folderName: values.folderName,
2342
location: values.location,
2443
};
2544

26-
setFolders((prevFolders) => [...prevFolders, newFolder]);
27-
onAddFolder(newFolder);
45+
await createFolder(values.folderName, values.location, 1);
46+
47+
// setFolders((prevFolders) => [...prevFolders, newFolder]);
48+
// onAddFolder(newFolder);
49+
50+
// refresh page
51+
window.location.reload();
52+
53+
54+
55+
2856
resetForm();
2957
setShowForm(false);
3058
};
3159

32-
const handleDeleteFolder = (folderId) => {
33-
setFolders((prevFolders) => prevFolders.filter((folder) => folder.id !== folderId));
34-
console.log('Deleting folder with id:', folderId);
60+
async function deleteFolder(folderId) {
61+
const res = await fetch(`http://127.0.0.1:8080/api/collection/delete/${folderId}`, {
62+
method: "DELETE",
63+
headers: {
64+
"Content-Type": "application/json",
65+
"Access-Control-Allow-Origin": "*",
66+
},
67+
mode: "cors",
68+
});
69+
const data = await res.json();
70+
console.log("DELETE FOLDER", data);
71+
}
72+
73+
74+
const handleDeleteFolder = async (folderId) => {
75+
await deleteFolder(folderId);
76+
// refresh page
77+
window.location.reload();
3578
};
3679

3780
return (
3881
<div>
3982
<Button variant="outlined" color="primary" onClick={() => setShowForm(true)}>
4083
New Folder
4184
</Button>
42-
85+
4386
{showForm && (
4487
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
45-
88+
4689
<Form style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
4790
<div style={{ display: 'flex', flexDirection: 'column', maxWidth: '300px' }}>
48-
<Field
49-
name="folderName"
50-
label="Folder Name"
51-
as={TextField}
52-
variant="outlined"
53-
margin="normal"
54-
required
55-
fullWidth
56-
/>
57-
<Field
58-
name="location"
59-
label="Location"
60-
as={TextField}
61-
variant="outlined"
62-
margin="normal"
63-
required
64-
fullWidth
65-
/>
66-
91+
<Field
92+
name="folderName"
93+
label="Folder Name"
94+
as={TextField}
95+
variant="outlined"
96+
margin="normal"
97+
required
98+
fullWidth
99+
/>
100+
<Field
101+
name="location"
102+
label="Location"
103+
as={TextField}
104+
variant="outlined"
105+
margin="normal"
106+
required
107+
fullWidth
108+
/>
109+
67110
<Button type="submit" variant="outlined" color="info" style={{ marginTop: '10px' }}>
68111
Create Folder
69112
</Button>
70113
<Button variant="outlined" color="info" onClick={() => setShowForm(false)} style={{ marginTop: '10px' }}>
71114
Cancel
72115
</Button>
73116
</div>
74-
117+
75118
</Form>
76-
119+
77120
</Formik>
78121
)}
79122

80-
<div style={{ display: 'flex', flexWrap: 'wrap', marginTop: '20px', marginLeft: '20%'}}>
81-
{folders.map((folder) => (
82-
83-
84-
<div style={{ textDecoration: 'none', color: 'inherit' }}>
85-
<Card style={{ width: '100px', margin: '10px', position: 'relative' }}>
86-
<CardMedia
87-
component="img"
88-
height="140"
89-
image="/folder.jpg"
90-
alt="Folder Image"
91-
/>
92-
<Link
93-
href={{
94-
pathname: "/DirPage",
95-
query: {
96-
name: folder.folderName,
97-
},
98-
}}
99-
key={folder.id}
100-
passHref
101-
>
102-
<CardContent>
103-
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
104-
105-
106-
</div>
107-
<span>{folder.folderName}</span>
108-
</CardContent>
109-
</Link>
110-
<IconButton onClick={() => handleDeleteFolder(folder.id)} size="small" style={{ position: 'absolute', top: '5px', right: '5px' }}>
111-
<Delete />
112-
</IconButton>
113-
</Card>
114-
</div>
115-
116-
117123

118-
119-
))}
124+
<div style={{ display: 'flex', flexWrap: 'wrap', marginTop: '20px', marginLeft: '20%' }}>
125+
{Array.from(new Set(folders.map(folder => folder.folderName))).map(uniqueFolderName => {
126+
const folder = folders.find(f => f.folderName === uniqueFolderName);
127+
128+
return (
129+
<div key={folder.id} style={{ textDecoration: 'none', color: 'inherit' }}>
130+
<Card style={{ width: '100px', margin: '10px', position: 'relative' }}>
131+
<CardMedia
132+
component="img"
133+
height="140"
134+
image="/folder.png"
135+
alt="Folder Image"
136+
/>
137+
<Link
138+
href={{
139+
pathname: "/DirPage",
140+
query: {
141+
name: folder.folderName,
142+
id : folder.id,
143+
},
144+
}}
145+
passHref
146+
>
147+
<CardContent>
148+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}></div>
149+
<span>{folder.folderName}</span>
150+
</CardContent>
151+
</Link>
152+
<IconButton onClick={() => handleDeleteFolder(folder.id)} size="small" style={{ position: 'absolute', top: '5px', right: '5px' }}>
153+
<Delete />
154+
</IconButton>
155+
</Card>
156+
</div>
157+
);
158+
})}
120159
</div>
160+
121161
</div>
162+
122163
);
123164
};
124165

‎app/dashboard/page.jsx

Lines changed: 55 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -9,63 +9,72 @@ import React, { useEffect, useState } from 'react';
99
import { get } from "http";
1010
import { NextResponse } from "next/server";
1111

12-
async function getUserInfo() {
13-
fetch("/auth/user", {
12+
13+
const AddFolderPage = () => {
14+
const [folders, setFolders] = useState([]);
15+
const [enable, setEnable] = useState(false);
16+
17+
const handleAddFolder = (newFolder) => {
18+
setFolders((prevFolders) => [...prevFolders, newFolder]);
19+
};
20+
21+
useEffect(() => {
22+
console.log("USE EFFECT");
23+
fetch("http://127.0.0.1:8080/api/collection/all/1", {
1424
method: "GET",
1525
headers: {
1626
"Content-Type": "application/json",
27+
"Access-Control-Allow-Origin": "*",
28+
1729
},
18-
})
19-
.then(async (res) => {
20-
if (res.status === 200) {
21-
const data = await res.json();
22-
console.log("GET USER INFO", data);
23-
return data;
24-
}
25-
})
26-
.catch((err) => {
27-
console.log(err);
28-
});
29-
}
30+
mode: "cors",
31+
}).then(async (res) => {
32+
if (res.status === 200) {
33+
const data = await res.json();
34+
console.log("GET COLLECTIONS", data);
3035

36+
data.forEach((collection) => {
37+
var folder = {
38+
id: collection.id,
39+
folderName: collection.name,
40+
location: collection.location,
41+
};
42+
console.log("FOLDER", folder);
3143

32-
const AddFolderPage = () => {
33-
const [folders, setFolders] = useState([]);
34-
35-
const handleAddFolder = (newFolder) => {
36-
// Add the new folder to the state
37-
setFolders((prevFolders) => [...prevFolders, newFolder]);
38-
};
39-
40-
useEffect(() => {
41-
// get the user info
42-
getUserInfo().then((data) => {
43-
console.log("USER INFO");
44-
console.log(data);
45-
}
46-
)}, []);
44+
folders.some((folder) => folder.id === collection.id) ? console.log("FOLDER ALREADY EXISTS") : handleAddFolder(folder);
4745

4846

49-
return (
50-
<>
51-
<Sidebar />
52-
53-
54-
<h3 className="text-2xl text-center">Task Tracker</h3>
55-
<hr className="border-2 border-gray-200 my-4 rounded-full w-1/2 mx-auto" />
56-
<div className="text-center">
57-
<AddFolderForm onAddFolder={handleAddFolder} folders={folders} />
58-
</div>
47+
});
48+
setEnable(true);
49+
50+
}
51+
}
52+
).catch((err) => {
53+
console.log(err);
54+
}
55+
);
56+
}
57+
, []);
58+
59+
60+
return (
61+
<>
62+
<Sidebar />
63+
<h3 className="text-2xl text-center">Task Tracker</h3>
64+
<hr className="border-2 border-gray-200 my-4 rounded-full w-1/2 mx-auto" />
65+
<div className="text-center">
66+
<AddFolderForm onAddFolder={handleAddFolder} folders={folders} setFolders={setFolders}/>
67+
</div>
5968

60-
<h3 className="text-2xl text-center">Create Post</h3>
61-
<hr className="border-2 border-gray-200 my-4 rounded-full w-1/2 mx-auto" />
69+
<h3 className="text-2xl text-center">Create Post</h3>
70+
<hr className="border-2 border-gray-200 my-4 rounded-full w-1/2 mx-auto" />
6271

63-
<div className='w-1/2 mx-auto'>
64-
<CreatePost></CreatePost>
65-
</div>
72+
<div className='w-1/2 mx-auto'>
73+
<CreatePost></CreatePost>
74+
</div>
6675

6776

68-
</>
69-
)
77+
</>
78+
)
7079
}
7180
export default AddFolderPage;

0 commit comments

Comments
 (0)