Mike/freno-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revert due to filtering issues

Browse Source
This commit is contained in:
Michael Freno
2026-01-04 21:55:15 -05:00
parent c0b4bad93d
commit 77408fb892
1 changed files with 63 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
src/routes/blog/index.tsx
View File

@@ -1,4 +1,4 @@
import { Show, createSignal, onMount, lazy } from "solid-js"; import { Show } from "solid-js";
import { useSearchParams, A, query } from "@solidjs/router"; import { useSearchParams, A, query } from "@solidjs/router";
import { Title } from "@solidjs/meta"; import { Title } from "@solidjs/meta";
import { createAsync } from "@solidjs/router"; import { createAsync } from "@solidjs/router";
@@ -6,15 +6,11 @@ import { getRequestEvent } from "solid-js/web";
import PostSortingSelect from "~/components/blog/PostSortingSelect"; import PostSortingSelect from "~/components/blog/PostSortingSelect";
import TagSelector from "~/components/blog/TagSelector"; import TagSelector from "~/components/blog/TagSelector";
import PostSorting from "~/components/blog/PostSorting"; import PostSorting from "~/components/blog/PostSorting";
import PublishStatusToggle from "~/components/blog/PublishStatusToggle";
import { TerminalSplash } from "~/components/TerminalSplash"; import { TerminalSplash } from "~/components/TerminalSplash";
import { CACHE_CONFIG } from "~/config"; import { CACHE_CONFIG } from "~/config";
const PublishStatusToggle = lazy(() => import("~/components/blog/PublishStatusToggle")); const getPosts = query(async () => {
const POSTS_PER_PAGE = 12;
// Separate query for all tags (needed for TagSelector)
const getAllTags = query(async () => {
"use server"; "use server";
const { ConnectionFactory, getPrivilegeLevel } = const { ConnectionFactory, getPrivilegeLevel } =
await import("~/server/utils"); await import("~/server/utils");
@@ -23,61 +19,17 @@ const getAllTags = query(async () => {
const privilegeLevel = await getPrivilegeLevel(event.nativeEvent); const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
return withCache( return withCache(
`all-tags-${privilegeLevel}`, `posts-${privilegeLevel}`,
CACHE_CONFIG.BLOG_POSTS_LIST_CACHE_TTL_MS, CACHE_CONFIG.BLOG_POSTS_LIST_CACHE_TTL_MS,
async () => { async () => {
const conn = ConnectionFactory(); const conn = ConnectionFactory();
const tagsQuery = `
SELECT t.value, t.post_id
FROM Tag t
JOIN Post p ON t.post_id = p.id
${privilegeLevel !== "admin" ? "WHERE p.published = TRUE" : ""}
ORDER BY t.value ASC
`;
const tagsResult = await conn.execute(tagsQuery);
const tags = tagsResult.rows;
const tagMap: Record<string, number> = {};
tags.forEach((tag: any) => {
const key = `${tag.value}`;
tagMap[key] = (tagMap[key] || 0) + 1;
});
return { tagMap, privilegeLevel };
}
);
}, "all-tags");
const getPosts = query(async (page: number = 1) => {
"use server";
const { ConnectionFactory, getPrivilegeLevel } =
await import("~/server/utils");
const { withCache } = await import("~/server/cache");
const event = getRequestEvent()!;
const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
return withCache(
`posts-${privilegeLevel}-page-${page}`,
CACHE_CONFIG.BLOG_POSTS_LIST_CACHE_TTL_MS,
async () => {
const conn = ConnectionFactory();
const offset = (page - 1) * POSTS_PER_PAGE;
// Get total count first
let countQuery = `SELECT COUNT(*) as total FROM Post p`;
if (privilegeLevel !== "admin") {
countQuery += ` WHERE p.published = TRUE`;
}
const countResult = await conn.execute(countQuery);
const totalPosts = (countResult.rows[0] as any).total;
let postsQuery = ` let postsQuery = `
SELECT SELECT
p.id, p.id,
p.title, p.title,
p.subtitle, p.subtitle,
p.body,
p.banner_photo, p.banner_photo,
p.date, p.date,
p.published, p.published,
@@ -96,149 +48,67 @@ const getPosts = query(async (page: number = 1) => {
postsQuery += ` WHERE p.published = TRUE`; postsQuery += ` WHERE p.published = TRUE`;
} }
postsQuery += ` GROUP BY p.id, p.title, p.subtitle, p.banner_photo, p.date, p.published, p.category, p.author_id, p.reads, p.attachments`; postsQuery += ` GROUP BY p.id, p.title, p.subtitle, p.body, p.banner_photo, p.date, p.published, p.category, p.author_id, p.reads, p.attachments`;
postsQuery += ` ORDER BY p.date ASC`; postsQuery += ` ORDER BY p.date ASC;`;
postsQuery += ` LIMIT ${POSTS_PER_PAGE} OFFSET ${offset};`;
const postsResult = await conn.execute(postsQuery); const postsResult = await conn.execute(postsQuery);
const posts = postsResult.rows; const posts = postsResult.rows;
// Only fetch tags for the posts we're returning const tagsQuery = `
const postIds = posts.map((p: any) => p.id).join(",");
const tagsQuery = postIds
? `
SELECT t.value, t.post_id SELECT t.value, t.post_id
FROM Tag t FROM Tag t
WHERE t.post_id IN (${postIds}) JOIN Post p ON t.post_id = p.id
${privilegeLevel !== "admin" ? "WHERE p.published = TRUE" : ""}
ORDER BY t.value ASC ORDER BY t.value ASC
` `;
: `SELECT t.value, t.post_id FROM Tag t WHERE 1=0`;
const tagsResult = await conn.execute(tagsQuery); const tagsResult = await conn.execute(tagsQuery);
const tags = tagsResult.rows; const tags = tagsResult.rows;
return { const tagMap: Record<string, number> = {};
posts, tags.forEach((tag: any) => {
tags, const key = `${tag.value}`;
hasMore: offset + posts.length < totalPosts, tagMap[key] = (tagMap[key] || 0) + 1;
totalPosts });
};
return { posts, tags, tagMap, privilegeLevel };
} }
); );
}, "posts"); }, "posts");
export default function BlogIndex() { export default function BlogIndex() {
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const [currentPage, setCurrentPage] = createSignal(1);
const [allPosts, setAllPosts] = createSignal<any[]>([]);
const [allTags, setAllTags] = createSignal<any[]>([]);
const [hasMore, setHasMore] = createSignal(true);
const [isLoading, setIsLoading] = createSignal(false);
let sentinelRef: HTMLDivElement | undefined;
const sort = () => { const sort = () => searchParams.sort || "newest";
const sortParam = searchParams.sort; const filters = () =>
return Array.isArray(sortParam) ? sortParam[0] : sortParam || "newest"; "filter" in searchParams ? searchParams.filter : undefined;
}; const include = () =>
const filters = () => { "include" in searchParams ? searchParams.include : undefined;
const filterParam = searchParams.filter; const status = () =>
return filterParam "status" in searchParams ? searchParams.status : undefined;
? Array.isArray(filterParam)
? filterParam[0]
: filterParam
: undefined;
};
const include = () => {
const includeParam = searchParams.include;
return includeParam
? Array.isArray(includeParam)
? includeParam[0]
: includeParam
: undefined;
};
const status = () => {
const statusParam = searchParams.status;
return statusParam
? Array.isArray(statusParam)
? statusParam[0]
: statusParam
: undefined;
};
// Load initial page and tag data const data = createAsync(() => getPosts(), { deferStream: true });
const initialData = createAsync(() => getPosts(1), { deferStream: true });
const tagsData = createAsync(() => getAllTags(), { deferStream: true });
// Initialize with first page data
const initializeData = () => {
const firstPage = initialData();
if (firstPage) {
setAllPosts(firstPage.posts);
setAllTags(firstPage.tags);
setHasMore(firstPage.hasMore);
}
};
// Load more posts
const loadMorePosts = async () => {
if (isLoading() || !hasMore()) return;
setIsLoading(true);
const nextPage = currentPage() + 1;
try {
const newData = await getPosts(nextPage);
setAllPosts((prev) => [...prev, ...newData.posts]);
setAllTags((prev) => [...prev, ...newData.tags]);
setHasMore(newData.hasMore);
setCurrentPage(nextPage);
} catch (error) {
console.error("Error loading more posts:", error);
} finally {
setIsLoading(false);
}
};
// Set up IntersectionObserver for infinite scroll
onMount(() => {
initializeData();
const observer = new IntersectionObserver(
(entries) => {
if (entries[0]?.isIntersecting) {
loadMorePosts();
}
},
{ rootMargin: "200px" }
);
if (sentinelRef) {
observer.observe(sentinelRef);
}
return () => observer.disconnect();
});
return ( return (
<> <>
<Title>Blog | Michael Freno</Title> <Title>Blog | Michael Freno</Title>
<div class="mx-auto py-16 pb-24"> <div class="mx-auto py-16 pb-24">
<Show when={initialData() && tagsData()} fallback={<TerminalSplash />}> <Show when={data()} fallback={<TerminalSplash />}>
{(loadedData) => (
<>
<div class="flex flex-col items-center gap-4 px-4 md:flex-row md:justify-around"> <div class="flex flex-col items-center gap-4 px-4 md:flex-row md:justify-around">
<PostSortingSelect /> <PostSortingSelect />
<Show <Show when={Object.keys(loadedData().tagMap).length > 0}>
when={tagsData() && Object.keys(tagsData()!.tagMap).length > 0} <TagSelector tagMap={loadedData().tagMap} />
>
<TagSelector tagMap={tagsData()!.tagMap} />
</Show> </Show>
<Show when={tagsData()?.privilegeLevel === "admin"}> <Show when={loadedData().privilegeLevel === "admin"}>
<PublishStatusToggle /> <PublishStatusToggle />
</Show> </Show>
<Show when={tagsData()?.privilegeLevel === "admin"}> <Show when={loadedData().privilegeLevel === "admin"}>
<div class="mt-2 flex justify-center md:mt-0 md:justify-end"> <div class="mt-2 flex justify-center md:mt-0 md:justify-end">
<A <A
href="/blog/create" href="/blog/create"
@@ -251,30 +121,23 @@ export default function BlogIndex() {
</div> </div>
<Show <Show
when={allPosts().length > 0} when={loadedData().posts.length > 0}
fallback={<div class="pt-12 text-center">No posts yet!</div>} fallback={<div class="pt-12 text-center">No posts yet!</div>}
> >
<div class="mx-auto flex w-11/12 flex-col pt-8"> <div class="mx-auto flex w-11/12 flex-col pt-8">
<PostSorting <PostSorting
posts={allPosts()} posts={loadedData().posts}
tags={allTags()} tags={loadedData().tags}
privilegeLevel={tagsData()!.privilegeLevel} privilegeLevel={loadedData().privilegeLevel}
filters={filters()} filters={filters()}
sort={sort()} sort={sort()}
include={include()} include={include()}
status={status()} status={status()}
/> />
{/* Sentinel element for infinite scroll */}
<Show when={hasMore()}>
<div ref={sentinelRef} class="py-8 text-center">
<Show when={isLoading()}>
<div class="text-lg">Loading more posts...</div>
</Show>
</div>
</Show>
</div> </div>
</Show> </Show>
</>
)}
</Show> </Show>
</div> </div>
</> </>