From 62e8a5a0ebe3b0507079f5360bdf48401f8ecc26 Mon Sep 17 00:00:00 2001
From: Collin Barrett <6483057+collinbarrett@users.noreply.github.com>
Date: Wed, 25 Jun 2025 19:51:32 -0500
Subject: [PATCH] refactor(web): extract getFilterLists, misc re-org

---
 web/public/favicon.ico                        | Bin 0 -> 15406 bytes
 web/src/app/loading.tsx                       |   2 +-
 web/src/app/page.tsx                          |  18 +++++--------
 .../{columns.tsx => columns.ts}               |   6 +----
 web/src/components/filterlist-table/index.tsx |   7 +++--
 .../filterlist-table/pagination-skeleton.tsx  |  11 ++++++++
 .../filterlist-table/pagination.tsx           |   8 +++---
 .../{skeleton.tsx => table-skeleton.tsx}      |  11 +-------
 web/src/components/header/index.tsx           |   2 +-
 web/src/components/theme-image.tsx            |   4 +--
 web/src/services/constants.ts                 |   1 +
 web/src/services/get-filterlists.ts           |  25 ++++++++++++++++++
 12 files changed, 57 insertions(+), 38 deletions(-)
 create mode 100644 web/public/favicon.ico
 rename web/src/components/filterlist-table/{columns.tsx => columns.ts} (79%)
 create mode 100644 web/src/components/filterlist-table/pagination-skeleton.tsx
 rename web/src/components/filterlist-table/{skeleton.tsx => table-skeleton.tsx} (75%)
 create mode 100644 web/src/services/constants.ts
 create mode 100644 web/src/services/get-filterlists.ts

diff --git a/web/public/favicon.ico b/web/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..430ab1a1a9aa3c87d9c4cb62c002e2b61eeb67df
GIT binary patch
literal 15406
zcmeHNJ#W-N5S_K}M3jIC1w|;(oj{NRp_9Uw6hK5uK|y^K6i}h?H?9If4Typ+MJi|!
z)QFG2kRJddB@GY>-rKcvK6`DSaeO(rS?Ou*+1;7h=k@yCCL%^cSzHv<9ocA!ToRE^
z$K5X<6L|?+uNSqS5qW=HWEp)h1S6as)$EiNnGZz<nDADF!ICV^S0I3W?RWzp;2+nO
z##acne_dBZkasx1a<KCT2l4#3!VuTSfCu*Rms_rFk2hn6<FN$kYamN2x#Rs_o42+D
zxs52BfSa!g_vX##hc^I-ZMNQ&IXlKBmmF_-O3WMM!z2&z16~=6F=xJTpXmTM0Pas(
zlmTU+HUkUra24nScT?y~i*4uGr>Sxhj$Z)V!1p8qXJZ@tG*TdGGVu{N&VxBM8Xx`(
z`JZ#orb+%A;Z>bZEd#mht&R7eK;{wJiEC@)9>Kk$&U(zeZ}1ntZ)Np<ypQ9>H{P7K
zp-t=V2NC~4f0XN(^Mbl<_vpI(gKjM|!oUg4^CoZyNWaU)_d!YjVLN>@24khmx&-nD
z#;;K9Iq!C!-TVG!eHi+-G1k+;aZg(mpZ;pb8ri4ze7X3cjg?Mel>Z@Tj{Eez?->>L
zvHNoo|LJ`6UKvmZ{&NO+PJ$y^xd-Su2}sbQ3@8K2fHI&AWEnUN(<$Hra1B@^4n=i*
zFVeb>YxX$}908`G;7?9ApZlnv0k42}Id~oQd4T$?{Dw3*_`)10RUQGKfN#KV4tAnG
zPf+tY9DM$cL+1Yw_z3W~;Li+<wQ+9jGd=k`4!NGkSU+ZT{Y(S@NF0UdX&s=4zg1j8
zz3M|tY+Fx`N*C>X=d~yU%78L3D-3YY%jg`~)@or+CZUV?t&hG_rcCGL>7P9NB))4#
z+6kQ#6zZHj{p0K=qmOpL4YgB~x`O<d>l|vIz@vYBnrLX7gf2>~pHiKiT_-_8Q=8~I
zu0<xXen5Xh=Qu6n)j8-_VsE9}shRj}yMXE<kf22wPzL@v2KYOW8e!xd2lt+{oSK@a
znr7me(#0sZqWzWo?*{M`;5p7)Ap0$<Xv2qZEFbuvH(x*I!0+30fVq+1ymAf=)FAOW
z$S+*)BK|Jxs`#66qhkzXG6(95&j54dcP_6m|Hr@w;0y2r$e!i+Y(C8s+uYgDcz%+;
z-FW7}GbQRf=2nz{7wvZafQMS^Cuc4A)<>DG%KG8|`g0DP<7Hqq9~li((6`8sYs1-4
d(Rk*<oS54JphX!_29yD1Kp9X5l!2LL;17v$$kG4+

literal 0
HcmV?d00001

diff --git a/web/src/app/loading.tsx b/web/src/app/loading.tsx
index e1ddebd9f..863d6e748 100644
--- a/web/src/app/loading.tsx
+++ b/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 (
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 721129fa6..c0f5a6cb8 100644
--- a/web/src/app/page.tsx
+++ b/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">
diff --git a/web/src/components/filterlist-table/columns.tsx b/web/src/components/filterlist-table/columns.ts
similarity index 79%
rename from web/src/components/filterlist-table/columns.tsx
rename to web/src/components/filterlist-table/columns.ts
index 82a63b149..fa1c2bedc 100644
--- a/web/src/components/filterlist-table/columns.tsx
+++ b/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 = [
diff --git a/web/src/components/filterlist-table/index.tsx b/web/src/components/filterlist-table/index.tsx
index 64c6dc23a..d84da991b 100644
--- a/web/src/components/filterlist-table/index.tsx
+++ b/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);
diff --git a/web/src/components/filterlist-table/pagination-skeleton.tsx b/web/src/components/filterlist-table/pagination-skeleton.tsx
new file mode 100644
index 000000000..c32795ac9
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/web/src/components/filterlist-table/pagination.tsx b/web/src/components/filterlist-table/pagination.tsx
index b8e70aa25..67ec99c5f 100644
--- a/web/src/components/filterlist-table/pagination.tsx
+++ b/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
diff --git a/web/src/components/filterlist-table/skeleton.tsx b/web/src/components/filterlist-table/table-skeleton.tsx
similarity index 75%
rename from web/src/components/filterlist-table/skeleton.tsx
rename to web/src/components/filterlist-table/table-skeleton.tsx
index 90f473715..eb6b3edba 100644
--- a/web/src/components/filterlist-table/skeleton.tsx
+++ b/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>
-  );
-}
diff --git a/web/src/components/header/index.tsx b/web/src/components/header/index.tsx
index 4e8032d43..c9e8d4041 100644
--- a/web/src/components/header/index.tsx
+++ b/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";
diff --git a/web/src/components/theme-image.tsx b/web/src/components/theme-image.tsx
index 7a7c8f99e..8c818cd7b 100644
--- a/web/src/components/theme-image.tsx
+++ b/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);
diff --git a/web/src/services/constants.ts b/web/src/services/constants.ts
new file mode 100644
index 000000000..e95c8343f
--- /dev/null
+++ b/web/src/services/constants.ts
@@ -0,0 +1 @@
+export const API_BASE_URL = "https://api.filterlists.com";
diff --git a/web/src/services/get-filterlists.ts b/web/src/services/get-filterlists.ts
new file mode 100644
index 000000000..e5d1eeff6
--- /dev/null
+++ b/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();
+}