Django + React 電商專案練習 [???] - 後台實作-管理、刪除、更新用戶資料

// Header.js
userInfo && userInfo.isAdmin && (
	<NavDropdown title='後台管理專用' id='admin-menu'>
		<LinkContainer to='/admin/userlist'>
			<NavDropdown.Item>用戶管理</NavDropdown.Item>
		</LinkContainer>
		<NavDropdown.Item>Another action</NavDropdown.Item>

		<NavDropdown.Item>Something</NavDropdown.Item>
		<NavDropdown.Divider />
		<NavDropdown.Item>Separated link</NavDropdown.Item>
	</NavDropdown>
);

const deleteUserHandler = (id) => {
	console.log("delete", id);
};
...
<Button variant='danger' className='btn-sm' onClick={() => deleteUserHandler(user.id)}>
	<i className='fas fa-trash'></i>
</Button>

export const USER_DELETE_REQUEST = "USER_DELETE_REQUEST";
export const USER_DELETE_SUCCESS = "USER_DELETE_SUCCESS";
export const USER_DELETE_FAIL = "USER_DELETE_FAIL";

export const userDeleteReducer = (state = {}, action) => {
	switch (action.type) {
		case USER_DELETE_REQUEST:
			return { loading: true };
		case USER_DELETE_SUCCESS:
			return { loading: false, success: true };
		case USER_DELETE_FAIL:
			return { loading: false, error: action.payload };
		default:
			return state;
	}
};

// 刪除使用者資料
export const deleteUser = (id) => async (dispatch, getState) => {
	// getState 大多都是在需要訪問 store 的裡的數據以做一些操作時使用
	try {
		dispatch({
			type: USER_DELETE_REQUEST,
		});

		const {
			userLogin: { userInfo },
		} = getState(); // 確保 User 是登入的狀態

		const config = {
			headers: {
				"Content-Type": "application/json",
				Authorization: `Bearer ${userInfo.token}`, // 需要有 token 才能取得資料，因為後端有設 permission_classes
			},
		};
		const { data } = await axios.delete(`/api/users/delete/${id}/`, config);

		dispatch({
			type: USER_DELETE_SUCCESS,
			payload: data, // payload 是後端回傳的資料
		});
	} catch (error) {
		dispatch({
			type: USER_DELETE_FAIL,
			payload: error.response && error.response.data.message ? error.response.data.message : error.message,
		});
	}
};

import { listUsers,deleteUser } from "../actions/userActions";
...

const userDelete = useSelector((state) => state.userDelete);
const { success: successDelete } = userDelete;

useEffect(() => {
	dispatch(listUsers());

}, [dispatch,successDelete]); // 這邊放入 successDelete，因為要在刪除使用者後自動重新載入頁面

const deleteUserHandler = (id) => {
	// console.log("delete",id);
	if(window.confirm("確定要刪除此使用者嗎？")){
		dispatch(deleteUser(id));
	}
}

const userDelete = useSelector((state) => state.userDelete);
// const { success: successDelete } = userDelete;
useEffect(() => {
	dispatch(listUsers());
}, [dispatch, userDelete.success]);

useEffect(() => {
	if (!user.first_name || user.id !== Number(userID)) {
		dispatch(getUserDetails(userID)); // 如果用戶不存在或者用戶id不等於當前用戶id，就發送請求
	} else {
		// 如果用戶存在，就自動載入用戶資料
		setFirst_name(user.first_name);
		setEmail(user.email);
		setIsAdmin(user.isAdmin);
	}
}, [dispatch, user, userID]);

return (
	<>
		<Link to='/admin/userlist' className='btn btn-light my-3'>
			回到用戶列表
		</Link>

		<h1>編輯用戶資料</h1>
		{loading ? (
			<Loader />
		) : error ? (
			<Message variant='danger'>{error}</Message>
		) : (
			<FormContainer>
				<Form onSubmit={submitHandler}>
					<Form.Group controlId='first_name' className='mb-3'>
						<Form.Label>用戶姓名</Form.Label>
						<Form.Control required type='name' placeholder='請輸入您的ID' value={first_name} onChange={(e) => setFirst_name(e.target.value)}></Form.Control>
					</Form.Group>

					<Form.Group controlId='email' className='mb-3'>
						<Form.Label>電子郵件</Form.Label>
						<Form.Control required type='email' placeholder='請輸入電子郵件' value={email} onChange={(e) => setEmail(e.target.value)} autoComplete='username'></Form.Control>
					</Form.Group>

					<Form.Group controlId='isAdmin'>
						<Form.Check type='checkbox' label='是否為管理員' checked={isAdmin} onChange={(e) => setIsAdmin(e.target.checked)}></Form.Check>
					</Form.Group>

					<p>{isAdmin ? "User is an Admin" : "User is not an Admin"}</p>

					<Button type='submit' variant='primary' className='mt-3'>
						更新
					</Button>
				</Form>
			</FormContainer>
		)}
	</>
);

// ProfilePage.js
useEffect(() => {
...
	if (!user || !user.first_name || success || userInfo.id !== user.id) {
		...
	}
...
}, [dispatch, userInfo, user, success]);

// userConstants.js
export const USER_UPDATE_REQUEST = "USER_UPDATE_REQUEST";
export const USER_UPDATE_SUCCESS = "USER_UPDATE_SUCCESS";
export const USER_UPDATE_FAIL = "USER_UPDATE_FAIL";

// userReducers.js
export const userUpdateReducer = (state = { user: [] }, action) => {
	switch (action.type) {
		case USER_UPDATE_REQUEST:
			return { loading: true };
		case USER_UPDATE_SUCCESS:
			return { loading: false, success: true };
		case USER_UPDATE_FAIL:
			return { loading: false, error: action.payload };
		case USER_UPDATE_RESET:
			return { user: [] }; // 重置 user 狀態，清空舊資料，避免影響下一次操作或導致錯誤的資料顯示
		default:
			return state;
	}
};

export const updateUser = (user) => async (dispatch, getState) => {
	// getState 大多都是在需要訪問 store 的裡的數據以做一些操作時使用
	try {
		dispatch({
			type: USER_UPDATE_REQUEST,
		});

		const {
			userLogin: { userInfo },
		} = getState(); // 確保 User 是登入的狀態

		const config = {
			headers: {
				"Content-Type": "application/json",
				Authorization: `Bearer ${userInfo.token}`, // 需要有 token 才能取得資料，因為後端有設 permission_classes
			},
		};
		const { data } = await axios.put(`/api/users/update/${user.id}/`, user, config);

		dispatch({
			type: USER_UPDATE_SUCCESS,
		});

		dispatch({
			// 更新成功後自動重新獲取用戶列表
			type: USER_DETAILS_SUCCESS,
			payload: data,
		});
	} catch (error) {
		dispatch({
			type: USER_UPDATE_FAIL,
			payload: error.response && error.response.data.message ? error.response.data.message : error.message,
		});
	}
};

// UserEditPage.js
import { ..., updateUser } from "../actions/userActions"; // 自動載入用戶資料
import { USER_UPDATE_RESET } from "../constants/userConstants";

const userUpdate = useSelector((state) => state.userUpdate);
// console.log("Redux state userDetails:", userDetails);
const { error: errorUpdate, loading: loadingUpdate, suecces: successUpdate } = userUpdate;

const submitHandler = (e) => {
	e.preventDefault();
	dispatch(updateUser({ id: userID, first_name, email, isAdmin }));
};

useEffect(() => {
	if (successUpdate) {
		dispatch({ type: USER_UPDATE_RESET });
		navigate("/admin/userlist");
	} else {
		if (!user.first_name || user.id !== Number(userID)) {
			dispatch(getUserDetails(userID)); // 如果用戶不存在或者用戶id不等於當前用戶id，就發送請求
		} else {
			// 如果用戶存在，就自動載入用戶資料
			setFirst_name(user.first_name);
			setEmail(user.email);
			setIsAdmin(user.isAdmin);
		}
	}
}, [dispatch, user, userID, successUpdate, navigate]);

return(
	...
	<h1>編輯用戶資料</h1>
	{loadingUpdate && <Loader />}
	{errorUpdate && <Message variant='danger'>{errorUpdate}</Message>}
)