refactor(web): extract getFilterLists, misc re-org

web/src/app/loading.tsx

@@ -1,4 +1,4 @@
-import { FilterListTableSkeleton } from "@/components/filterlist-table/skeleton";
+import { FilterListTableSkeleton } from "@/components/filterlist-table/table-skeleton";
 
 export default function Loading() {
   return (

web/src/app/page.tsx

@@ -1,18 +1,12 @@
 import { FilterListTable } from "@/components/filterlist-table";
-import { columns, FilterList } from "@/components/filterlist-table/columns";
-
-async function getInitialFilterLists(): Promise<FilterList[]> {
-  const response = await fetch("https://api.filterlists.com/lists", {
-    next: { revalidate: 86400 },
-  });
-  const lists = await response.json();
-
-  // TODO: add pagination support to API
-  return lists.slice(0, 20);
-}
+import { columns } from "@/components/filterlist-table/columns";
+import { getFilterLists } from "@/services/get-filterlists";
 
 export default async function Home() {
-  const initialData = await getInitialFilterLists();
+  const filterLists = await getFilterLists();
+
+  // TODO: add pagination support to API
+  const initialData = filterLists.slice(0, 20);
 
   return (
     <main className="pt-4 p-8 gap-16 sm:p-20 sm:pt-8">

web/src/components/filterlist-table/columns.ts

@@ -1,10 +1,6 @@
+import { FilterList } from "@/services/get-filterlists";
 import { createColumnHelper } from "@tanstack/react-table";
 
-export type FilterList = {
-  name: string;
-  description: string;
-};
-
 const columnHelper = createColumnHelper<FilterList>();
 
 export const columns = [

web/src/components/filterlist-table/index.tsx

@@ -16,10 +16,10 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { FilterList } from "./columns";
 import { useEffect, useState } from "react";
 import { FilterListTablePagination } from "./pagination";
-import { FilterListTablePaginationSkeleton } from "./skeleton";
+import { FilterList, getFilterLists } from "@/services/get-filterlists";
+import { FilterListTablePaginationSkeleton } from "./pagination-skeleton";
 
 interface FilterListTableProps {
   columns: AccessorKeyColumnDef<FilterList, string>[];
@@ -36,8 +36,7 @@ export function FilterListTable({
   useEffect(() => {
     async function fetchAll() {
       try {
-        const response = await fetch("https://api.filterlists.com/lists");
-        const lists = await response.json();
+        const lists = await getFilterLists();
         setData(lists);
       } finally {
         setLoading(false);

web/src/components/filterlist-table/pagination-skeleton.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function FilterListTablePaginationSkeleton() {
+  return (
+    <div className="flex items-center justify-between gap-2 mt-2">
+      <Skeleton className="h-8 w-20" />
+      <Skeleton className="h-6 w-24" />
+      <Skeleton className="h-8 w-20" />
+    </div>
+  );
+}

web/src/components/filterlist-table/pagination.tsx

@@ -1,13 +1,15 @@
 import * as React from "react";
 import { Button } from "@/components/ui/button";
 import { Table } from "@tanstack/react-table";
-import { FilterList } from "./columns";
+import { FilterList } from "@/services/get-filterlists";
 
-interface PaginationProps {
+interface FilterListTablePaginationProps {
   table: Table<FilterList>;
 }
 
-export function FilterListTablePagination({ table }: PaginationProps) {
+export function FilterListTablePagination({
+  table,
+}: FilterListTablePaginationProps) {
   return (
     <div className="flex items-center justify-between gap-2">
       <Button

web/src/components/filterlist-table/table-skeleton.tsx

@@ -1,4 +1,5 @@
 import { Skeleton } from "@/components/ui/skeleton";
+import { FilterListTablePaginationSkeleton } from "./pagination-skeleton";
 
 export function FilterListTableSkeleton() {
   return (
@@ -27,13 +28,3 @@ export function FilterListTableSkeleton() {
     </div>
   );
 }
-
-export function FilterListTablePaginationSkeleton() {
-  return (
-    <div className="flex items-center justify-between gap-2 mt-2">
-      <Skeleton className="h-8 w-20" />
-      <Skeleton className="h-6 w-24" />
-      <Skeleton className="h-8 w-20" />
-    </div>
-  );
-}

web/src/components/header/index.tsx

@@ -1,5 +1,5 @@
 import { ThemeImage } from "@/components/theme-image";
-import { ThemeToggle } from "../theme-toggle";
+import { ThemeToggle } from "@/components/theme-toggle";
 import Link from "next/link";
 import LogoLight from "./logo-filterlists-light.png";
 import logoDark from "./logo-filterlists-dark.png";

web/src/components/theme-image.tsx

@@ -4,12 +4,12 @@ import { useTheme } from "next-themes";
 import Image, { ImageProps, StaticImageData } from "next/image";
 import { useEffect, useState } from "react";
 
-type Props = Omit<ImageProps, "src" | "loading"> & {
+type ThemeImageProps = Omit<ImageProps, "src" | "loading"> & {
   srcLight: string | StaticImageData;
   srcDark: string | StaticImageData;
 };
 
-export const ThemeImage = (props: Props) => {
+export const ThemeImage = (props: ThemeImageProps) => {
   const { srcLight, srcDark, alt, priority, ...rest } = props;
   const { resolvedTheme } = useTheme();
   const [mounted, setMounted] = useState(false);

web/src/services/constants.ts

@@ -0,0 +1 @@
+export const API_BASE_URL = "https://api.filterlists.com";

web/src/services/get-filterlists.ts

@@ -0,0 +1,25 @@
+import { API_BASE_URL } from "./constants";
+
+export type FilterList = {
+  id: number;
+  name: string;
+  description: string | null;
+  licenseId: number;
+  syntaxIds: number[];
+  languageIds: number[];
+  tagIds: number[];
+  primaryViewUrl: string | null;
+  maintainerIds: number[];
+};
+
+export async function getFilterLists(): Promise<FilterList[]> {
+  const response = await fetch(`${API_BASE_URL}/lists`, {
+    next: { revalidate: 86400 },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch filter lists: ${response.statusText}`);
+  }
+
+  return await response.json();
+}