-
Notifications
You must be signed in to change notification settings - Fork 67
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #388 from MeetDOD/issue-338
Feat: Created manage user by admin block/unblock users based on their activity successfully Issue 338
- Loading branch information
Showing
4 changed files
with
202 additions
and
171 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,184 +1,138 @@ | ||
import { useState } from "react"; | ||
import Navbar from "../components/Navbar" | ||
import { useState, useEffect } from "react"; | ||
import axios from "axios"; | ||
import Navbar from "../components/Navbar"; | ||
import SideBar from "../components/SideBar"; | ||
import { useRecoilValue } from "recoil"; | ||
import { tokenState } from "../store/atoms/auth"; | ||
import toast from "react-hot-toast"; | ||
|
||
export interface IUser { | ||
id: string; | ||
username: string; | ||
email: string; | ||
verified: boolean; | ||
blocked: boolean; | ||
createdAt: string; | ||
comments:[]; | ||
posts: []; | ||
following: []; | ||
} | ||
|
||
const Users = () => { | ||
const [sidebarOpen, setSidebarOpen] = useState(false); | ||
const [allUsers, setAllUsers] = useState<IUser[]>([]); | ||
const token = useRecoilValue(tokenState); | ||
|
||
const toggleSidebar = () => { | ||
setSidebarOpen(!sidebarOpen); | ||
}; | ||
|
||
useEffect(() => { | ||
const fetchUsers = async () => { | ||
try { | ||
const response = await axios.get("/api/v1/admin/allUsers", { | ||
headers: { | ||
Authorization: `Bearer ${token}`, | ||
}, | ||
}); | ||
setAllUsers(response.data.allUsers.reverse()); | ||
} catch (error) { | ||
console.error("Error fetching users:", error); | ||
} | ||
}; | ||
|
||
fetchUsers(); | ||
}, [token]); | ||
|
||
const handleBlock = async (userId: string) => { | ||
try { | ||
const response = await axios.patch( | ||
`/api/v1/admin/block/${userId}`, | ||
{}, | ||
{ | ||
headers: { | ||
Authorization: `Bearer ${token}`, | ||
}, | ||
} | ||
); | ||
toast.success(response.data.message); | ||
setAllUsers(allUsers.map(user => user.id === userId ? { ...user, blocked: true } : user)); | ||
} catch (error) { | ||
console.error("Error blocking user:", error); | ||
toast.error("Error blocking user"); | ||
} | ||
}; | ||
|
||
const handleUnblock = async (userId: string) => { | ||
try { | ||
const response = await axios.patch( | ||
`/api/v1/admin/unblock/${userId}`, | ||
{}, | ||
{ | ||
headers: { | ||
Authorization: `Bearer ${token}`, | ||
}, | ||
} | ||
); | ||
toast.success(response.data.message); | ||
setAllUsers(allUsers.map(user => user.id === userId ? { ...user, blocked: false } : user)); | ||
} catch (error) { | ||
console.error("Error unblocking user:", error); | ||
toast.error("Error unblocking user"); | ||
} | ||
}; | ||
|
||
return ( | ||
<div> | ||
<Navbar toggleSidebar={toggleSidebar} /> | ||
<Navbar toggleSidebar={toggleSidebar} /> | ||
<div className="flex-1 flex flex-col lg:ml-80"> | ||
<SideBar sidebarOpen={sidebarOpen} toggleSidebar={toggleSidebar} /> | ||
<div className="mx-5 lg:mr-11 overflow-x-auto shadow-md rounded-xl mb-5"> | ||
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"> | ||
<thead className="text-xs text-white uppercase bg-sky-500"> | ||
<tr> | ||
<th scope="col" className="px-6 py-3"> | ||
Name | ||
</th> | ||
<th scope="col" className="px-6 py-3"> | ||
Posts | ||
</th> | ||
<th scope="col" className="px-6 py-3"> | ||
followers | ||
</th> | ||
<th scope="col" className="px-6 py-3"> | ||
Action | ||
</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr className="border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white"> | ||
<th className="flex items-center px-6 py-5 text-white"> | ||
<img className="h-10 w-10 rounded-full" src={`https://ui-avatars.com/api/?name=meet&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" /> | ||
<div className="ps-3"> | ||
<div className="text-base font-bold">Neil Sims</div> | ||
<div className="font-medium text-gray-300 ">[email protected]</div> | ||
</div> | ||
</th> | ||
<td className="px-8 py-4 font-semibold"> | ||
10 | ||
</td> | ||
<td className="px-12 py-4 font-semibold"> | ||
7 | ||
</td> | ||
<td className="px-2 py-4 "> | ||
<button className='font-semibold rounded-md p-2 bg-sky-500 text-white px-4 hover:bg-sky-600'> | ||
Manage | ||
</button> | ||
</td> | ||
</tr> | ||
<tr className="border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white"> | ||
<th className="flex items-center px-6 py-5 text-white"> | ||
<img className="h-10 w-10 rounded-full" src={`https://ui-avatars.com/api/?name=meet&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" /> | ||
<div className="ps-3"> | ||
<div className="text-base font-bold">Neil Sims</div> | ||
<div className="font-medium text-gray-300 ">[email protected]</div> | ||
</div> | ||
</th> | ||
<td className="px-8 py-4 font-semibold"> | ||
10 | ||
</td> | ||
<td className="px-12 py-4 font-semibold"> | ||
7 | ||
</td> | ||
<td className="px-2 py-4 "> | ||
<button className='font-semibold rounded-md p-2 bg-sky-500 text-white px-4 hover:bg-sky-600'> | ||
Manage | ||
</button> | ||
</td> | ||
</tr> | ||
<tr className="border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white"> | ||
<th className="flex items-center px-6 py-5 text-white"> | ||
<img className="h-10 w-10 rounded-full" src={`https://ui-avatars.com/api/?name=meet&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" /> | ||
<div className="ps-3"> | ||
<div className="text-base font-bold">Neil Sims</div> | ||
<div className="font-medium text-gray-300 ">[email protected]</div> | ||
</div> | ||
</th> | ||
<td className="px-8 py-4 font-semibold"> | ||
10 | ||
</td> | ||
<td className="px-12 py-4 font-semibold"> | ||
7 | ||
</td> | ||
<td className="px-2 py-4 "> | ||
<button className='font-semibold rounded-md p-2 bg-sky-500 text-white px-4 hover:bg-sky-600'> | ||
Manage | ||
</button> | ||
</td> | ||
</tr> | ||
<tr className="border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white"> | ||
<th className="flex items-center px-6 py-5 text-white"> | ||
<img className="h-10 w-10 rounded-full" src={`https://ui-avatars.com/api/?name=meet&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" /> | ||
<div className="ps-3"> | ||
<div className="text-base font-bold">Neil Sims</div> | ||
<div className="font-medium text-gray-300 ">[email protected]</div> | ||
</div> | ||
</th> | ||
<td className="px-8 py-4 font-semibold"> | ||
10 | ||
</td> | ||
<td className="px-12 py-4 font-semibold"> | ||
7 | ||
</td> | ||
<td className="px-2 py-4 "> | ||
<button className='font-semibold rounded-md p-2 bg-sky-500 text-white px-4 hover:bg-sky-600'> | ||
Manage | ||
</button> | ||
</td> | ||
</tr> | ||
<tr className="border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white"> | ||
<th className="flex items-center px-6 py-5 text-white"> | ||
<img className="h-10 w-10 rounded-full" src={`https://ui-avatars.com/api/?name=meet&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" /> | ||
<div className="ps-3"> | ||
<div className="text-base font-bold">Neil Sims</div> | ||
<div className="font-medium text-gray-300 ">[email protected]</div> | ||
</div> | ||
</th> | ||
<td className="px-8 py-4 font-semibold"> | ||
10 | ||
</td> | ||
<td className="px-12 py-4 font-semibold"> | ||
7 | ||
</td> | ||
<td className="px-2 py-4 "> | ||
<button className='font-semibold rounded-md p-2 bg-sky-500 text-white px-4 hover:bg-sky-600'> | ||
Manage | ||
</button> | ||
</td> | ||
</tr> | ||
<tr className="border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white"> | ||
<th className="flex items-center px-6 py-5 text-white"> | ||
<img className="h-10 w-10 rounded-full" src={`https://ui-avatars.com/api/?name=meet&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" /> | ||
<div className="ps-3"> | ||
<div className="text-base font-bold">Neil Sims</div> | ||
<div className="font-medium text-gray-300 ">[email protected]</div> | ||
</div> | ||
</th> | ||
<td className="px-8 py-4 font-semibold"> | ||
10 | ||
</td> | ||
<td className="px-12 py-4 font-semibold"> | ||
7 | ||
</td> | ||
<td className="px-2 py-4 "> | ||
<button className='font-semibold rounded-md p-2 bg-sky-500 text-white px-4 hover:bg-sky-600'> | ||
Manage | ||
</button> | ||
</td> | ||
</tr> | ||
<tr className="border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white"> | ||
<th className="flex items-center px-6 py-5 text-white"> | ||
<img className="h-10 w-10 rounded-full" src={`https://ui-avatars.com/api/?name=meet&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" /> | ||
<div className="ps-3"> | ||
<div className="text-base font-bold">Neil Sims</div> | ||
<div className="font-medium text-gray-300 ">[email protected]</div> | ||
</div> | ||
</th> | ||
<td className="px-8 py-4 font-semibold"> | ||
10 | ||
</td> | ||
<td className="px-12 py-4 font-semibold"> | ||
7 | ||
</td> | ||
<td className="px-2 py-4 "> | ||
<button className='font-semibold rounded-md p-2 bg-sky-500 text-white px-4 hover:bg-sky-600'> | ||
Manage | ||
</button> | ||
</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
</div> | ||
<SideBar sidebarOpen={sidebarOpen} toggleSidebar={toggleSidebar} /> | ||
<div className="mx-5 lg:mr-11 overflow-x-auto shadow-md rounded-xl mb-5"> | ||
<table className="w-full rtl:text-right text-gray-500 dark:text-gray-400"> | ||
<thead className="text-xs md:text-sm text-white uppercase bg-sky-500 text-center"> | ||
<tr> | ||
<th scope="col" className="px-6 py-3">Photo</th> | ||
<th scope="col" className="px-8 py-3 text-start">Name</th> | ||
<th scope="col" className="px-6 py-3">signup At</th> | ||
<th scope="col" className="px-6 py-3">Posts</th> | ||
<th scope="col" className="px-6 py-3">Followers</th> | ||
<th scope="col" className="px-6 py-3">Comments</th> | ||
<th scope="col" className="px-6 py-3">Action</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
{allUsers.map(user => ( | ||
<tr key={user.id} className="text-xs md:text-sm text-center border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white"> | ||
<td className="pl-7"><img className="h-10 w-10 rounded-full" src={`https://ui-avatars.com/api/?name=${user.username}&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" /></td> | ||
<td className="px-8 py-4 font-semibold"> | ||
<div className="flex flex-col items-start"> | ||
<span className="font-bold">{user.username}</span> | ||
<span className="font-thin text-gray-300">{user.email}</span> | ||
</div> | ||
</td> | ||
<td className="px-8 py-4 font-semibold">{new Date(user.createdAt).toLocaleDateString()}</td> | ||
<td className="px-8 py-4 font-semibold">{user.posts.length}</td> | ||
<td className="px-12 py-4 font-semibold">{user.following.length}</td> | ||
<td className="px-8 py-4 font-semibold">{user.comments.length}</td> | ||
<td className="px-2 py-4"> | ||
{user.blocked ? ( | ||
<button onClick={() => handleUnblock(user.id)} className="font-semibold rounded-md p-2 bg-red-500 text-white border-2 px-4 hover:bg-red-600"> | ||
Unblock | ||
</button> | ||
) : ( | ||
<button onClick={() => handleBlock(user.id)} className="font-semibold rounded-md p-2 bg-sky-500 text-white px-6 border-2 hover:bg-sky-600"> | ||
Block | ||
</button> | ||
)} | ||
</td> | ||
</tr> | ||
))} | ||
</tbody> | ||
</table> | ||
</div> | ||
</div> | ||
</div> | ||
) | ||
} | ||
); | ||
}; | ||
|
||
export default Users | ||
export default Users; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.