feat/build-branch #4
@ -1,4 +1,10 @@
|
||||
import { AUTH_COOKIE_NAME, BE_BASE_URL } from "@/app/services/constants";
|
||||
import { revalidateTag } from "next/cache";
|
||||
|
||||
import {
|
||||
AUTH_COOKIE_NAME,
|
||||
BE_BASE_URL,
|
||||
USERS_CACHE_TAG,
|
||||
} from "@/app/services/constants";
|
||||
import { NextResponse } from "next/server";
|
||||
import { cookies } from "next/headers";
|
||||
|
||||
@ -59,6 +65,8 @@ export async function POST(request: Request) {
|
||||
|
||||
const data = await resp.json();
|
||||
|
||||
revalidateTag(USERS_CACHE_TAG);
|
||||
|
||||
return NextResponse.json(
|
||||
{
|
||||
success: true,
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
// app/api/users/[id]/route.ts
|
||||
import { AUTH_COOKIE_NAME, BE_BASE_URL } from "@/app/services/constants";
|
||||
import { revalidateTag } from "next/cache";
|
||||
|
||||
import {
|
||||
AUTH_COOKIE_NAME,
|
||||
BE_BASE_URL,
|
||||
USERS_CACHE_TAG,
|
||||
} from "@/app/services/constants";
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
// Field mapping: snake_case input -> { snake_case for data, PascalCase for fields }
|
||||
@ -93,6 +99,9 @@ export async function PUT(
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (response.ok) {
|
||||
revalidateTag(USERS_CACHE_TAG);
|
||||
}
|
||||
return NextResponse.json(data, { status: response.status });
|
||||
} catch (err: unknown) {
|
||||
const errorMessage =
|
||||
@ -137,6 +146,10 @@ export async function DELETE(
|
||||
data = { success: response.ok };
|
||||
}
|
||||
|
||||
if (response.ok) {
|
||||
revalidateTag(USERS_CACHE_TAG);
|
||||
}
|
||||
|
||||
return NextResponse.json(data ?? { success: response.ok }, {
|
||||
status: response.status,
|
||||
});
|
||||
|
||||
@ -1,50 +1,16 @@
|
||||
import Users from "@/app/features/Pages/Admin/Users/users";
|
||||
import { cookies } from "next/headers";
|
||||
import { getBaseUrl } from "@/app/services/constants";
|
||||
import { IUser } from "@/app/features/Pages/Admin/Users/interfaces";
|
||||
import { fetchUsers } from "@/app/services/users";
|
||||
|
||||
export default async function BackOfficeUsersPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<Record<string, string | string[] | undefined>>;
|
||||
}) {
|
||||
// Await searchParams and extract pagination
|
||||
const params = await searchParams;
|
||||
const limit = params.limit || "10";
|
||||
const page = params.page || "1";
|
||||
export default async function BackOfficeUsersPage() {
|
||||
let users: IUser[] = [];
|
||||
|
||||
const baseUrl = getBaseUrl();
|
||||
|
||||
const url = new URL(`${baseUrl}/api/dashboard/admin/users`);
|
||||
url.searchParams.set("limit", typeof limit === "string" ? limit : limit[0]);
|
||||
url.searchParams.set("page", typeof page === "string" ? page : page[0]);
|
||||
|
||||
// Forward cookies for auth when calling the internal API route
|
||||
const cookieStore = await cookies();
|
||||
const cookieHeader = cookieStore
|
||||
.getAll()
|
||||
.map((c: { name: string; value: string }) => `${c.name}=${c.value}`)
|
||||
.join("; ");
|
||||
|
||||
const res = await fetch(url.toString(), {
|
||||
headers: {
|
||||
Cookie: cookieHeader,
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
console.error("Failed to fetch users:", res.status, res.statusText);
|
||||
return (
|
||||
<div>
|
||||
<Users users={[]} />
|
||||
</div>
|
||||
);
|
||||
try {
|
||||
users = await fetchUsers();
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch users:", error);
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
// Handle different response structures: could be array directly, or wrapped in data/users property
|
||||
const users = Array.isArray(data) ? data : data.users || data.data || [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Users users={users} />
|
||||
|
||||
@ -17,8 +17,6 @@ const Users: React.FC<UsersProps> = ({ users }) => {
|
||||
const [showAddUser, setShowAddUser] = useState(false);
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
|
||||
console.log("[Users] - users", users);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<UserTopBar
|
||||
|
||||
@ -2,15 +2,15 @@
|
||||
|
||||
import React from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import Modal from "@/app/components/Modal/Modal";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { AppDispatch } from "@/app/redux/store";
|
||||
import { deleteUser, clearError } from "@/app/redux/user/userSlice";
|
||||
import { IUser } from "../../Pages/Admin/Users/interfaces";
|
||||
import Modal from "@/app/components/Modal/Modal";
|
||||
import Spinner from "@/app/components/Spinner/Spinner";
|
||||
import { RootState } from "@/app/redux/store";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { selectUser } from "@/app/redux/auth/selectors";
|
||||
import "./DeleteUser.scss";
|
||||
|
||||
interface DeleteUserProps {
|
||||
@ -23,8 +23,10 @@ const DeleteUser: React.FC<DeleteUserProps> = ({ open, onClose, user }) => {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const router = useRouter();
|
||||
const { status, error } = useSelector((state: RootState) => state.user);
|
||||
const currentUser = useSelector(selectUser);
|
||||
|
||||
const loading = status === "loading";
|
||||
const isSelfDeletion = currentUser?.id === user?.id;
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!user?.id) {
|
||||
@ -32,6 +34,11 @@ const DeleteUser: React.FC<DeleteUserProps> = ({ open, onClose, user }) => {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isSelfDeletion) {
|
||||
toast.error("You cannot delete your own account");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const resultAction = await dispatch(deleteUser(user.id));
|
||||
|
||||
@ -60,10 +67,6 @@ const DeleteUser: React.FC<DeleteUserProps> = ({ open, onClose, user }) => {
|
||||
}
|
||||
};
|
||||
|
||||
if (!user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={handleClose} title="Delete User">
|
||||
<div className="delete-user__content">
|
||||
@ -74,22 +77,24 @@ const DeleteUser: React.FC<DeleteUserProps> = ({ open, onClose, user }) => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="delete-user__user-info">
|
||||
<div className="delete-user__row">
|
||||
<label className="delete-user__label">Username</label>
|
||||
<div className="delete-user__value">{user.username}</div>
|
||||
</div>
|
||||
<div className="delete-user__row">
|
||||
<label className="delete-user__label">Name</label>
|
||||
<div className="delete-user__value">
|
||||
{user.first_name} {user.last_name}
|
||||
{user && (
|
||||
<div className="delete-user__user-info">
|
||||
<div className="delete-user__row">
|
||||
<label className="delete-user__label">Username</label>
|
||||
<div className="delete-user__value">{user.username}</div>
|
||||
</div>
|
||||
<div className="delete-user__row">
|
||||
<label className="delete-user__label">Name</label>
|
||||
<div className="delete-user__value">
|
||||
{user.first_name} {user.last_name}
|
||||
</div>
|
||||
</div>
|
||||
<div className="delete-user__row">
|
||||
<label className="delete-user__label">Email</label>
|
||||
<div className="delete-user__value">{user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="delete-user__row">
|
||||
<label className="delete-user__label">Email</label>
|
||||
<div className="delete-user__value">{user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="delete-user__error">
|
||||
@ -109,7 +114,7 @@ const DeleteUser: React.FC<DeleteUserProps> = ({ open, onClose, user }) => {
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDelete}
|
||||
disabled={loading}
|
||||
disabled={loading || isSelfDeletion}
|
||||
className="delete-user__button delete-user__button--delete"
|
||||
>
|
||||
{loading ? (
|
||||
|
||||
@ -150,7 +150,7 @@ export default function UserRoleCard({ user }: Props) {
|
||||
>
|
||||
{isEditing && <EditUser user={user} />}
|
||||
</div>
|
||||
{openDeleteUser && (
|
||||
{openDeleteUser && user && (
|
||||
<DeleteUser
|
||||
user={user}
|
||||
open={openDeleteUser}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export const AUDIT_CACHE_TAG = "audits";
|
||||
export const REVALIDATE_SECONDS = 60;
|
||||
export const USERS_CACHE_TAG = "users";
|
||||
export const REVALIDATE_SECONDS = 100;
|
||||
|
||||
export const BE_BASE_URL = process.env.BE_BASE_URL || "";
|
||||
export const AUTH_COOKIE_NAME = "auth_token";
|
||||
|
||||
45
app/services/users.ts
Normal file
45
app/services/users.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import { cookies } from "next/headers";
|
||||
|
||||
import { IUser } from "@/app/features/Pages/Admin/Users/interfaces";
|
||||
import {
|
||||
AUTH_COOKIE_NAME,
|
||||
BE_BASE_URL,
|
||||
REVALIDATE_SECONDS,
|
||||
USERS_CACHE_TAG,
|
||||
} from "./constants";
|
||||
|
||||
export async function fetchUsers(): Promise<IUser[]> {
|
||||
const cookieStore = await cookies();
|
||||
const token = cookieStore.get(AUTH_COOKIE_NAME)?.value;
|
||||
|
||||
if (!token) {
|
||||
throw new Error("Missing auth token");
|
||||
}
|
||||
|
||||
const backendUrl = `${BE_BASE_URL}/api/v1/users`;
|
||||
|
||||
const response = await fetch(backendUrl, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
next: {
|
||||
revalidate: REVALIDATE_SECONDS,
|
||||
tags: [USERS_CACHE_TAG],
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response
|
||||
.json()
|
||||
.catch(() => ({ message: "Failed to fetch users" }));
|
||||
throw new Error(errorData?.message || "Failed to fetch users");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
const users = Array.isArray(data) ? data : data.users || data.data || [];
|
||||
|
||||
return users;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user