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

263
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 { Title } from "@solidjs/meta";
import { createAsync } from "@solidjs/router";
@@ -6,15 +6,11 @@ import { getRequestEvent } from "solid-js/web";
import PostSortingSelect from "~/components/blog/PostSortingSelect";
import TagSelector from "~/components/blog/TagSelector";
import PostSorting from "~/components/blog/PostSorting";
import PublishStatusToggle from "~/components/blog/PublishStatusToggle";
import { TerminalSplash } from "~/components/TerminalSplash";
import { CACHE_CONFIG } from "~/config";
const PublishStatusToggle = lazy(() => import("~/components/blog/PublishStatusToggle"));
const POSTS_PER_PAGE = 12;
// Separate query for all tags (needed for TagSelector)
const getAllTags = query(async () => {
const getPosts = query(async () => {
"use server";
const { ConnectionFactory, getPrivilegeLevel } =
await import("~/server/utils");
@@ -23,61 +19,17 @@ const getAllTags = query(async () => {
const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
return withCache(
`all-tags-${privilegeLevel}`,
`posts-${privilegeLevel}`,
CACHE_CONFIG.BLOG_POSTS_LIST_CACHE_TTL_MS,
async () => {
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 = `
SELECT
p.id,
p.title,
p.subtitle,
p.body,
p.banner_photo,
p.date,
p.published,
@@ -96,185 +48,96 @@ const getPosts = query(async (page: number = 1) => {
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 += ` ORDER BY p.date ASC`;
postsQuery += ` LIMIT ${POSTS_PER_PAGE} OFFSET ${offset};`;
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;`;
const postsResult = await conn.execute(postsQuery);
const posts = postsResult.rows;
// Only fetch tags for the posts we're returning
const postIds = posts.map((p: any) => p.id).join(",");
const tagsQuery = postIds
? `
const tagsQuery = `
SELECT t.value, t.post_id
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
`
: `SELECT t.value, t.post_id FROM Tag t WHERE 1=0`;
`;
const tagsResult = await conn.execute(tagsQuery);
const tags = tagsResult.rows;
return {
posts,
tags,
hasMore: offset + posts.length < totalPosts,
totalPosts
};
const tagMap: Record<string, number> = {};
tags.forEach((tag: any) => {
const key = `${tag.value}`;
tagMap[key] = (tagMap[key] || 0) + 1;
});
return { posts, tags, tagMap, privilegeLevel };
}
);
}, "posts");
export default function BlogIndex() {
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 sortParam = searchParams.sort;
return Array.isArray(sortParam) ? sortParam[0] : sortParam || "newest";
};
const filters = () => {
const filterParam = searchParams.filter;
return filterParam
? 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;
};
const sort = () => searchParams.sort || "newest";
const filters = () =>
"filter" in searchParams ? searchParams.filter : undefined;
const include = () =>
"include" in searchParams ? searchParams.include : undefined;
const status = () =>
"status" in searchParams ? searchParams.status : undefined;
// Load initial page and tag data
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();
});
const data = createAsync(() => getPosts(), { deferStream: true });
return (
<>
<Title>Blog | Michael Freno</Title>
<div class="mx-auto py-16 pb-24">
<Show when={initialData() && tagsData()} fallback={<TerminalSplash />}>
<div class="flex flex-col items-center gap-4 px-4 md:flex-row md:justify-around">
<PostSortingSelect />
<Show when={data()} fallback={<TerminalSplash />}>
{(loadedData) => (
<>
<div class="flex flex-col items-center gap-4 px-4 md:flex-row md:justify-around">
<PostSortingSelect />
<Show
when={tagsData() && Object.keys(tagsData()!.tagMap).length > 0}
>
<TagSelector tagMap={tagsData()!.tagMap} />
</Show>
<Show when={Object.keys(loadedData().tagMap).length > 0}>
<TagSelector tagMap={loadedData().tagMap} />
</Show>
<Show when={tagsData()?.privilegeLevel === "admin"}>
<PublishStatusToggle />
</Show>
<Show when={loadedData().privilegeLevel === "admin"}>
<PublishStatusToggle />
</Show>
<Show when={tagsData()?.privilegeLevel === "admin"}>
<div class="mt-2 flex justify-center md:mt-0 md:justify-end">
<A
href="/blog/create"
class="border-text rounded border px-4 py-2 text-center transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
>
Create Post
</A>
<Show when={loadedData().privilegeLevel === "admin"}>
<div class="mt-2 flex justify-center md:mt-0 md:justify-end">
<A
href="/blog/create"
class="border-text rounded border px-4 py-2 text-center transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
>
Create Post
</A>
</div>
</Show>
</div>
</Show>
</div>
<Show
when={allPosts().length > 0}
fallback={<div class="pt-12 text-center">No posts yet!</div>}
>
<div class="mx-auto flex w-11/12 flex-col pt-8">
<PostSorting
posts={allPosts()}
tags={allTags()}
privilegeLevel={tagsData()!.privilegeLevel}
filters={filters()}
sort={sort()}
include={include()}
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>
<Show
when={loadedData().posts.length > 0}
fallback={<div class="pt-12 text-center">No posts yet!</div>}
>
<div class="mx-auto flex w-11/12 flex-col pt-8">
<PostSorting
posts={loadedData().posts}
tags={loadedData().tags}
privilegeLevel={loadedData().privilegeLevel}
filters={filters()}
sort={sort()}
include={include()}
status={status()}
/>
</div>
</Show>
</div>
</Show>
</>
)}
</Show>
</div>
</>