# **CRUD**

## R
* Api:get(`http://localhost:8080/api/users/all`) 暫時 ,
* Api:get(`http://localhost:8080/api/users?${query}`),
* Page:container/user/Users.jsx
Define:container/Columns.jsx 表格定義 => 合併至Users
DataTable:component/DataTable 表格做成元件

## D

* Api:delete(`http://localhost:8080/api/users/${id}`),
* Page:container/user/UsersDelete
* Container:user/DeleteAlertDialog Delete alertDialog
Delete alertDialog:delete api

## U

* Api:put(`http://localhost:8080/api/users/${id}`,params),
* Page:container/user/UsersEdit.jsx 編輯表格
* Component:buttons/EditButton 按鈕做成元件

## C

* Api:post(`http://localhost:8080/api/users`, params),
* Page:container/user/UserAdd.jsx 導入至Users.jsx使用

## 8/21(一） Read & Delete

**Users.jsx：**
* Api:get(`http://localhost:8080/api/users/all`) 暫時
* 定義 actions 陣列（內有deleteFunction,editFunction)
* 當作props傳送至DataTable.jsx
* 定義 Columns：每個 row 的項目

**DeleteAlertDialog.jsx:**
* Api:delete(`http://localhost:8080/api/users/${id}`),
* 用DataTable內定義的api function 來call api
* DeleteAlertDialog的function
*handleDeleteClick（onClick打delet的api)

**DataTable.jsx:**
* 定義獲取api的props getDataApi={ userApi.getUsers }
* 接收從Users.jsx的actions當作props

## 8/22(二） Read & Delete

**Users.jsx：**

* 找出id值帶入DeleteAlertDialog

**deleteFunction:**

const deleteFunction = {
    icon: Eraser,
    function: (帶入id) => {
      userApi.delete(帶入id)
      .then(response => {
        setUsersData(response.data);
        setDeleteOpen(true);
      });
    },
    name: "Delete",
  };
  const actions = [deleteFunction]

**DeleteAlertDialog:**
* 帶入id
* 隱藏按鈕

<DeleteAlertDialog
          id={userIds} //帶入id
          actions={deleteFunction}
          getUserApi={userApi.delete}
          deleteOpen={deleteOpen}
          deleteClose={() => setDeleteOpen(false)}
          setDeleteOpen={setDeleteOpen}
        />

## 8/23(三） Read & Delete

加入一條要帶對應row的id**

const actions = [
    {
      icon: Eraser,
      name: 'Delete',
      actionFunction: id => {
        console.log("User ID:", id);
        getUser(id) **// 加入一條要帶對應row的id**
          .then(res => {
            console.log("Received user data:", res.data);
            setId(res.data);
          })
          .then(() => setDeleteOpen(true))
      },
    },
  ];

將function帶入DeleteAlertDialog

const DeleteAlertDialog = ({ actions, setDeleteOpen , deleteOpen }) => {
  const handleDelete = () => {
    userApi.delete(actions)
    .then(() => {
      setDeleteOpen(false);
    });
  };
  const handleCancel = () => {
    setDeleteOpen(false);
  };

## 8/24(四） Read & Delete

1. 用ref做重新渲染
2. up commit (Read & Delete)

Ref: