Bläddra i källkod

Finish delete post

jerryliao 1 år sedan
förälder
incheckning
5548c51636
6 ändrade filer med 61 tillägg och 7 borttagningar
  1. 1 1
      islands/HomeBar.tsx
  2. 36 0
      islands/PostList.tsx
  3. 1 1
      routes/_app.tsx
  4. 2 2
      routes/api/post.tsx
  5. 17 0
      static/global.css
  6. 4 3
      utils/db.ts

+ 1 - 1
islands/HomeBar.tsx

@@ -19,7 +19,7 @@ export default function HomeBar(props: HomeBarProps) {
     });
     const respJson = await resp.json();
     if (respJson.success) {
-      location.href = `/post/${respJson.data}`;
+      location.href = `/${respJson.data}`;
       return true;
     }
     return false;

+ 36 - 0
islands/PostList.tsx

@@ -10,11 +10,47 @@ export default function PostList(props: PostListProps) {
     location.href = `/${id}`;
   };
 
+  const onDelete = (id: string, title: string) => {
+    window.$modal?.show(
+      "Confirm delete",
+      `Are you sure you want to delete ${title}?`,
+      [
+        {
+          text: "Confirm",
+          onClick: async () => {
+            const resp = await fetch("/api/post", {
+              method: "DELETE",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                id,
+              }),
+            });
+            const respJson = await resp.json();
+            if (respJson.success) {
+              location.reload();
+            }
+          },
+        },
+        {
+          text: "Cancel",
+        },
+      ]
+    );
+  };
+
   return (
     <div className="pd-post-list">
       {props.posts.map((post) => (
         <div className="pd-post" key={post.id}>
           <span className="pd-post-title">{post.title || "Untitled"}</span>
+          <div className="pd-post-action">
+            <i
+              className="bi bi-x"
+              onClick={() => {
+                onDelete(post.id, post.title);
+              }}
+            />
+          </div>
           <span className="pd-post-digest">{post.content || "No content"}</span>
           <button
             onClick={() => {

+ 1 - 1
routes/_app.tsx

@@ -11,7 +11,7 @@ export default function App({ Component }: AppProps) {
       <Head>
         <link href={asset("/global.css")} rel="stylesheet" />
         <link
-          href="https://www.unpkg.com/bootstrap-icons@1.10.4/font/bootstrap-icons.css"
+          href="https://unpkg.com/bootstrap-icons@1.10.4/font/bootstrap-icons.css"
           rel="stylesheet"
         />
       </Head>

+ 2 - 2
routes/api/post.tsx

@@ -87,11 +87,11 @@ export const handler: Handlers = {
     const id = reqJson.id;
     const tokenUserId = checkToken(req);
     if (tokenUserId && id) {
-      const post = del("Post", {
+      const flag = del("Post", {
         id,
         user_id: tokenUserId,
       });
-      if (post.length > 0) {
+      if (flag) {
         return makeSuccessResponse(true);
       }
     }

+ 17 - 0
static/global.css

@@ -163,6 +163,10 @@ button {
   border-top: 1px solid #dee2e6;
   padding: 1rem;
 }
+
+.pd-modal .pd-modal-content .pd-modal-footer button:not(:last-child) {
+  margin-right: 0.5rem;
+}
 /* Modal styles end */
 
 /* Login frame styles start */
@@ -396,6 +400,7 @@ button {
   border: 1px solid #dee2e6;
   border-radius: 0.375rem;
   box-sizing: border-box;
+  position: relative;
   padding: 1rem;
   display: flex;
   font-size: 16px;
@@ -414,6 +419,18 @@ button {
   font-weight: 500;
 }
 
+.pd-post-list .pd-post .pd-post-action {
+  position: absolute;
+  right: 1rem;
+  top: 0.75rem;
+  font-size: 1.5rem;
+  z-index: 1;
+}
+
+.pd-post-list .pd-post .pd-post-action i {
+  cursor: pointer;
+}
+
 .pd-post-list .pd-post .pd-post-digest {
   overflow: hidden;
   text-overflow: ellipsis;

+ 4 - 3
utils/db.ts

@@ -134,10 +134,11 @@ export function del(
       .join(" AND ")}`
   );
   try {
-    return deleteQuery.all(queryObject);
+    deleteQuery.all(queryObject);
+    return true;
   } catch (e) {
-    console.error("Insert error:", e);
-    return [];
+    console.error("Delete error:", e);
+    return false;
   } finally {
     deleteQuery.finalize();
     db.close();