Apps Script用Sheet生成動態網頁(24): 移植刪除HTML連結功能

-

一週又過去了，我們本週將許多之前實作的功能都移植到React上了，程式碼的份量佔比也很高，所以今天就簡單的移植上一篇中的未實施的刪除連結功能。

從下週開始便會使用React的hook處理會員登入後才能使用的功能。

1. Apps Script的部份(後端/伺服端)

支援刪除功能後端的API只要新增一個deleteContentFromSheet()，基本判斷都沿用

src/server/content.js

export function deleteContentByName(name) {
User.validateUploadPermission();
const sheet = getContentSheet();
const rowIdx = findIndexInColumn(name, COLUMN_IDX_OF_NAME, sheet);
if (rowIdx > 0) sheet.deleteRow(1 + rowIdx);
return { deleted: rowIdx >= 0 };
}

src/server/index.js

global.deleteContentFromSheet = contentFunctions.deleteContentByName;

2. React的部份(前端/使用者端)

  • 用useEffect(...,[])在頁面載入時，取得會員登入的token，跟後端確認是否有權限可以顯示刪除按鈕。這裡是只要會員登入就會顯示刪除按鈕，未來會再改成實際判斷權限的API來處理。
  • 新增一個按鈕事件處理deleteLink()，會取用button的name屬性作為刪除名稱跟後端溝通。

src/client/demo-bootstrap/pages/LinkLister.jsx

import React, { useEffect, useState } from 'react';
import { Container, Button } from 'react-bootstrap';
import Server from '../../utils/server';

const { serverFunctions } = Server;

const LinkLister = () => {
const [linkList, setlinkList] = useState(null);
const [showDelete, hasDeletePermission] = useState(false);

useEffect(() => {
serverFunctions
.getLinkList()
.then(setlinkList)
.catch(alert);
const token = localStorage.getItem('user-token');
serverFunctions.authLogin(token).then(() => hasDeletePermission(true));
}, []);

const deleteLink = event => {
event.preventDefault();
const { name } = event.target;
const element = event.target;
serverFunctions.deleteContentFromSheet(name).then(response => {
if (response.deleted && element) element.parentNode.remove();
});
};

return (
<Container>
<h1>Sheet儲存的網頁</h1>
{linkList && (
<ul>
{linkList.map((link, idx) => (
<li key={idx}>
<a href={link.url}>{link.name}</a>
{showDelete && (
<Button
variant="outline-danger"
size="sm"
onClick={deleteLink}
name={link.name}
>
刪除
</Button>
)}
</li>
))}
</ul>
)}
</Container>
);
};

export default LinkLister;


3. 成果展示



留言

張貼留言