change post ID to short uuid

deno.lock

@@ -123,7 +123,10 @@
     "https://deno.land/x/fresh@1.1.5/src/server/types.ts": "6579aac850ea4af5cdfee8f9552fbadebb7b50841d180b75bd90466416feee86",
     "https://deno.land/x/importmap@0.2.1/_util.ts": "ada9a9618b537e6c0316c048a898352396c882b9f2de38aba18fd3f2950ede89",
     "https://deno.land/x/importmap@0.2.1/mod.ts": "ae3d1cd7eabd18c01a4960d57db471126b020f23b37ef14e1359bbb949227ade",
+    "https://deno.land/x/numesis@1.1.0/mod.ts": "c0f8ceffece2b417e9cdfe8cc50408a36b35a4b5ca260451a85b2169df5ec3fd",
     "https://deno.land/x/rutt@0.1.0/mod.ts": "4662ad4f687740ac612b779ed4c62eecebd718b56d24a07f719ec3b24464c139",
+    "https://deno.land/x/short_uuid@v3.0.0-rc1/mod.ts": "cfafcd34f057543f4e47fedaa3c8739b30dc712909ebff6a3a9a11fb4468a790",
+    "https://deno.land/x/short_uuid@v3.0.0-rc1/version.json": "a14637ca453edc6b848ebc3282fa16419efad918aba9c386a7bb6885dd3ba9eb",
     "https://deno.land/x/sqlite@v3.7.1/build/sqlite.d.ts": "d724a21a588a0e19ae46a3476349fe5d75e896735e7362ea8cf997ffad35d0f9",
     "https://deno.land/x/sqlite@v3.7.1/build/sqlite.js": "c59f109f100c2bae0b9342f04e0d400583e2e3211d08bb71095177a4109ee5bf",
     "https://deno.land/x/sqlite@v3.7.1/build/vfs.js": "08533cc78fb29b9d9bd62f6bb93e5ef333407013fed185776808f11223ba0e70",
@@ -143,6 +146,7 @@
     "https://deno.land/x/ts_morph@17.0.1/mod.ts": "adba9b82f24865d15d2c78ef6074b9a7457011719056c9928c800f130a617c93",
     "https://deno.land/x/ts_morph@17.0.1/ts_morph.d.ts": "a54b0c51b06d84defedf5fdd59c773d803808ae7c9678f7165f7a1a6dfa7f6a3",
     "https://deno.land/x/ts_morph@17.0.1/ts_morph.js": "1bb80284b9e31a4c5c2078cd533fe9b12b4b2d710267055cb655225aa88fb2df",
+    "https://deno.land/x/usid@2.0.0/mod.ts": "cf03ac641ae7ad533d900eaedf8bd62a9dbb6ddbc1e50db1c2f4f143fcb608ab",
     "https://esm.sh/lodash@4.17.21/debounce": "6e1de1c30f2e685be1082e4904c7ed95c10829b2e30c3a3e35fdb714ef816736",
     "https://esm.sh/lodash@4.17.21/throttle": "996b17e983a8a862c5d1761d94b417436ae3cef82f7d7cedc54ae04aa929e2e9",
     "https://esm.sh/preact-render-to-string@6.0.2?deps=preact@10.13.2": "df36fa1d653fc00225ec484bee9d8075df042f21cb861b97d40b5aff9029a6c7",

import_map.json

@@ -2,6 +2,7 @@
   "imports": {
     "$fresh/": "https://deno.land/x/fresh@1.1.5/",
     "$sqlite/": "https://deno.land/x/sqlite@v3.7.1/",
+    "$usid/": "https://deno.land/x/usid@2.0.0/",
     "$crypto/": "https://deno.land/std@0.184.0/crypto/",
     "$async/": "https://deno.land/std@0.184.0/async/",
     "$http/": "https://deno.land/std@0.184.0/http/",

islands/Editor.tsx

@@ -12,7 +12,7 @@ export enum EditorMode {
 }
 
 interface EditorProps {
-  id: number;
+  id: string;
   title: string;
   content: string;
   allowMode: EditorMode;
@@ -22,7 +22,7 @@ let shadow: ShadowRoot | null = null;
 let shadowRoot: HTMLDivElement | null = null;
 let converter: Converter | null = null;
 let scrollingSide: EditorMode | null = null;
-let debouncedOnSave: DebouncedFunction | null = null;
+let debouncedOnSave: DebouncedFunction<string[]> | null = null;
 
 export default function Editor(props: EditorProps) {
   const [mode, setMode] = useState(props.allowMode);

islands/PostList.tsx

@@ -2,11 +2,11 @@
 import { h } from "preact";
 
 interface PostListProps {
-  posts: { id: number; title: string; content: string; shared: boolean }[];
+  posts: { id: string; title: string; content: string; shared: boolean }[];
 }
 
 export default function PostList(props: PostListProps) {
-  const onEdit = (id: number) => {
+  const onEdit = (id: string) => {
     location.href = `post/${id}`;
   };
 

routes/api/post.tsx

@@ -4,6 +4,7 @@ import {
   makeErrorResponse,
   makeSuccessResponse,
 } from "utils/server.ts";
+import { uid } from "$usid/mod.ts";
 import { del, find, insert, update } from "utils/db.ts";
 
 export const handler: Handlers = {
@@ -40,7 +41,9 @@ export const handler: Handlers = {
     const content = reqJson.content || "";
     const tokenUserId = checkToken(req);
     if (tokenUserId) {
+      const postId = uid(12);
       const post = insert("Post", {
+        id: postId,
         title,
         content,
         user_id: tokenUserId,

routes/index.tsx

@@ -34,7 +34,7 @@ export const handler: Handlers<HomeProps> = {
         return ctx.render({
           name: user[0][0] as string,
           list: posts.map((post) => ({
-            id: post[0] as number,
+            id: post[0] as string,
             title: post[1] as string,
             content: post[2] as string,
             shared: post[3] as boolean,

routes/post/[id].tsx

@@ -9,7 +9,7 @@ import TopBar from "../../islands/TopBar.tsx";
 import Editor, { EditorMode } from "../../islands/Editor.tsx";
 
 interface PostProps {
-  id: number;
+  id: string;
   title: string;
   content: string;
   isLogined: boolean;
@@ -19,7 +19,7 @@ interface PostProps {
 export const handler: Handlers<PostProps> = {
   GET(req, ctx) {
     const tokenUserId = checkToken(req);
-    const postId = Number(ctx.params.id);
+    const postId = ctx.params.id;
     const post = find(
       "Post",
       tokenUserId

static/global.css

@@ -312,7 +312,7 @@ button {
   display: grid;
   row-gap: 16px;
   column-gap: 16px;
-  grid-template-columns: auto auto auto auto;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
   margin-top: 16px;
   padding-bottom: 16px;
   overflow: auto;
@@ -341,4 +341,10 @@ button {
 .pd-post-list .pd-post .pd-post-title {
   font-weight: 500;
 }
+
+.pd-post-list .pd-post .pd-post-digest {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 /* PostList styles end */

utils/db.ts

@@ -30,7 +30,7 @@ function prepareDB(tableName: string) {
     case "Post":
       db.execute(`
         CREATE TABLE IF NOT EXISTS post (
-          id INTEGER PRIMARY KEY AUTOINCREMENT,
+          id VARCHAR(64) PRIMARY KEY,
           user_id INTEGER,
           title VARCHAR(256),
           content TEXT,
@@ -95,7 +95,7 @@ export function insert(
 
 export function update(
   tableName: string,
-  id: number,
+  id: number | string,
   userUpdateObject: { [key: string]: string | number | boolean }
 ) {
   const db = prepareDB(tableName);
@@ -103,10 +103,10 @@ export function update(
   const updateQuery = db.prepareQuery(
     `UPDATE ${tableName.toLowerCase()} SET ${Object.keys(updateObject)
       .map((updateKey) => `${updateKey} = :${updateKey}`)
-      .join(", ")} WHERE id=${id}`
+      .join(", ")} WHERE id = :id`
   );
   try {
-    updateQuery.all(updateObject);
+    updateQuery.all({ ...updateObject, id });
     return find(tableName, userUpdateObject, ["id"], 1);
   } catch (e) {
     console.error("Insert error:", e);