[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_116":-5,"_20":117,"_22":118,"_119":120,"_121":122,"_25":123,"_24":-5,"_124":-5,"_125":-5,"_126":53,"_127":128,"_129":44,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","tobeofuse","name","doa-patreon-comment-table","branchName","main","version","path","","project",{"_33":62,"_13":14,"_45":63,"_64":-5,"_65":53,"_66":67,"_68":67,"_69":-5,"_70":-5,"_71":72,"_73":37,"_74":44,"_75":44,"_76":-5,"_77":78,"_79":80,"_81":-5,"_82":-5,"_83":-5,"_84":-5,"_85":86,"_87":86,"_88":89,"_90":89,"_91":89,"_92":86,"_93":86,"_94":95,"_96":97,"_98":99,"_100":53},"tree",[57],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_18":56},"id","e52c34e6-e7ee-11f0-adc4-42dde27851f2","index.tsx","fileId","296bc12a-3f7b-11f0-be94-76b3cceeab13","parentId","branchId","2969d874-3f7b-11f0-be94-76b3cceeab13","branchVersion",173,"latest",true,"createdAt",["D",1767367368146],172,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { type ResultSet, sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { renderToString } from \"npm:react-dom@18.2.0/server\";\nimport type { ReactNode } from \"npm:react@18.2.0\";\n\n// data stuff\n\nconst sortableColumns = [\n \"comment_count\",\n \"like_count\",\n \"published_at\",\n];\nconst perPage = 20;\n\nfunction resultSetToObjects(result: ResultSet) {\n return result.rows.map((row) =>\n Object.fromEntries(row.map((data, i) => [result.columns[i], data]))\n );\n}\n\nasync function getPostCount() {\n const sqlQuery = \"SELECT COUNT(*) FROM doa_patreon_posts;\";\n const result = await sqlite.execute(sqlQuery);\n return Number(result.rows[0][0]);\n}\n\nasync function getLastRun() {\n const sqlQuery = `\n select started_at, duration_seconds, posts_retrieved from doa_patreon_post_runs\n order by started_at desc limit 1`;\n const result = await sqlite.execute(sqlQuery);\n return resultSetToObjects(result)[0] as {\n started_at: string;\n duration_seconds: number;\n posts_retrieved: number;\n } | undefined;\n}\n\ntype Post = {\n title: string;\n published_at: string;\n comment_count: number;\n like_count: number;\n url: string;\n};\n\nasync function getPosts(\n page = 1,\n sortBy = \"comment_count\",\n sortDirection = \"desc\",\n query = \"\",\n) {\n if (\n !sortableColumns.includes(sortBy) ||\n ![\"asc\", \"desc\"].includes(sortDirection)\n ) {\n console.error(\"invalid sort parameters:\", sortBy, sortDirection);\n return [] as Post[];\n }\n const offset = (page - 1) * perPage;\n const limit = perPage;\n const sqlQuery = `SELECT title, published_at, comment_count, like_count, url \n FROM doa_patreon_posts\n WHERE title LIKE (\"%\" || ? || \"%\")\n order by ${sortBy} ${sortDirection} limit ? offset ?;`;\n const result = await sqlite.execute({\n sql: sqlQuery,\n args: [query, limit, offset],\n });\n return resultSetToObjects(result) as Post[];\n}\n\n// content stuff\n\nfunction extendQueryParams(\n searchParams: URLSearchParams,\n newParams: Record,\n) {\n const copy = new URLSearchParams(searchParams.toString());\n for (const [key, value] of Object.entries(newParams)) {\n copy.set(key, value);\n }\n return copy;\n}\n\nexport default async function (req: Request): Promise {\n // this thing has moved...\n return Response.redirect(\n \"https://patreon-post-tracker.hypermagical-ultraomnipotence.workers.dev/\",\n );\n\n const currentSearchParams = new URL(req.url).searchParams;\n const pageParam = currentSearchParams.get(\"page\");\n const page = pageParam ? Number(pageParam) : 1;\n const sortBy = currentSearchParams.get(\"sort\") ?? \"comment_count\";\n const sortDirection = currentSearchParams.get(\"direction\") ?? \"desc\";\n const query = currentSearchParams.get(\"search\") ?? \"\";\n\n const postCount = await getPostCount();\n const maxPage = Math.ceil(postCount / perPage);\n if (page > maxPage) {\n return new Response(\n `Page not found; highest available page number is ${maxPage}`,\n { status: 404 },\n );\n }\n\n const posts = await getPosts(page, sortBy, sortDirection, query);\n const columnHeaders = posts.length\n ? Object.keys(posts[0]).filter((col) =>\n col !== \"id\" && col !== \"url\"\n ) as (keyof typeof posts[0])[]\n : [];\n\n const nextPageParams = extendQueryParams(currentSearchParams, {\n page: String(page + 1),\n });\n const prevPageParams = extendQueryParams(currentSearchParams, {\n page: String(page - 1),\n });\n\n const lastRun = await getLastRun();\n\n return html(\n <>\n

Dumbing of Age Patreon Posts

\n This page takes the information you can already get by scrolling\n through the Patreon feed (whether you're subscribed or not) and makes\n it more sortable and kinda searchable.\n

\n \n \n \n {columnHeaders.map((header) => (\n \n ))}\n \n \n \n {posts.map((post) => (\n \n {columnHeaders.map((header) => (\n \n ))}\n \n ))}\n \n

\n {sortableColumns.includes(header)\n ? (\n \n {formatColumnName(header)}{\" \"}\n \n {sortBy === header\n ? (sortDirection === \"asc\" ? \"▲\" : \"▼\")\n : \"\"}\n \n \n )\n : formatColumnName(header)}\n
{getPostCellValue(post, header)}

\n \n \n Search:\n \n \n {!!query && (\n \n \n Clear\n \n \n )}\n \n Go\n \n \n

\n \n Previous\n \n \n Next\n \n

\n {!!lastRun && (\n

\n \n Data updater last ran:{\" \"}\n {new Date(lastRun.started_at).toLocaleString()} UTC\n
\n {!!lastRun.posts_retrieved\n ? (\n <>\n (Retrieved {lastRun.posts_retrieved} posts in{\" \"}\n {lastRun.duration_seconds} seconds)\n \n )\n : <>(Still loading latest comments...)}\n \n

\n )}\n ,\n );\n}\n\n// boilerplate stuff\n\nfunction getPostCellValue(post: Post, header: keyof Post): ReactNode {\n const value = post[header];\n if (header === \"published_at\") {\n return new Date(value).toLocaleDateString();\n } else if (header === \"title\") {\n return {value};\n }\n return value;\n}\n\nfunction formatColumnName(\n columnName: keyof Awaited>[number],\n) {\n if (columnName === \"comment_count\") {\n return \"Comments\";\n } else if (columnName === \"like_count\") {\n return \"Likes\";\n } else if (columnName === \"published_at\") {\n return \"Date\";\n } else if (columnName === \"title\") {\n return \"Post\";\n } else {\n return \"URL\";\n }\n}\n\nfunction Layout({ children }: { children: ReactNode }) {\n return (\n \n \n \n \n \n DOA Patreon Posts Data Table\n \n \n {children}\n \n \n );\n}\n\nfunction html(children: React.ReactNode) {\n return new Response(\n `` +\n renderToString(\n \n {children}\n ,\n ),\n {\n headers: {\n \"content-type\": \"text/html;\",\n },\n },\n );\n}","deleted",false,"label","doa-patreon-comment-tracker",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":58,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_59":60,"_18":61},["D",1767367368146],"children",[],[35],"296990d0-3f7b-11f0-be94-76b3cceeab13",["D",1748845865677],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","c878cd0e-42f2-4d5f-b236-a8bb922062ca","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","805def35-af33-4bd3-b687-47a0923f59a5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_115":111},"org",{"_11":12,"_109":-5,"_110":111,"_71":72,"_112":113,"_114":53},"branch",{"_17":42,"_13":16,"_33":40,"_101":62,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":-5,"_107":14,"_108":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yamFZTkZwTnNHSHJUbTFpclcwUDZzMXlCUEcifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":62,"_13":14,"_45":149,"_64":-5,"_65":53,"_66":67,"_68":67,"_69":-5,"_70":-5,"_71":72,"_73":37,"_74":44,"_75":44,"_76":-5,"_77":78,"_79":80,"_81":-5,"_82":-5,"_83":-5,"_84":-5,"_85":86,"_87":86,"_88":89,"_90":89,"_91":89,"_92":86,"_93":86,"_94":150,"_96":151,"_98":152,"_100":53},[146],"files",[146],"counts",{"_136":78,"_137":138,"_139":78,"_31":140,"_141":142},[134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_18":135},[35],"pulls","branches",1,"forks",{"_143":78,"_145":78},"connections",{"_143":78,"_144":78},"count","unfilledCount","emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":58,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_59":147,"_18":148},[],[35],["D",1748845865677],{"_11":12,"_115":111},{"_11":12,"_109":-5,"_110":111,"_71":72,"_112":113,"_114":53},{"_17":42,"_13":16,"_33":40,"_101":62,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":-5,"_107":14,"_108":12},"ctx",{"_94":-5,"_131":186,"_187":188,"_189":190,"_191":53,"_192":53,"_193":53,"_194":44,"_195":-5,"_196":-7,"_197":-7,"_198":78,"_199":53,"_200":53,"_201":-5,"_202":53,"_203":53,"_204":53,"_205":-5},"ENV",{"_157":158,"_159":160,"_161":16,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code