feat/build-branch #4

Open
Mitchell wants to merge 12 commits from feat/build-branch into main
8 changed files with 106 additions and 70 deletions
Showing only changes of commit e1121da7b9 - Show all commits

View File

@ -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,

View File

@ -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,
});

View File

@ -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} />

View File

@ -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

View File

@ -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 ? (

View File

@ -150,7 +150,7 @@ export default function UserRoleCard({ user }: Props) {
>
{isEditing && <EditUser user={user} />}
</div>
{openDeleteUser && (
{openDeleteUser && user && (
<DeleteUser
user={user}
open={openDeleteUser}

View File

@ -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
View 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;
}