feat(web): fetch related data

web/src/app/page.tsx

@@ -1,16 +1,47 @@
 import { FilterListTable } from "@/components/filterlist-table";
 import { columns } from "@/components/filterlist-table/columns";
 import { getFilterLists } from "@/services/get-filterlists";
+import { getLanguages } from "@/services/get-languages";
+import { getLicenses } from "@/services/get-licenses";
+import { getMaintainers } from "@/services/get-maintainers";
+import { getSoftware } from "@/services/get-software";
+import { getSyntaxes } from "@/services/get-syntaxes";
+import { getTags } from "@/services/get-tags";
 
 export default async function Home() {
-  const filterLists = await getFilterLists();
+  const [
+    filterLists,
+    languages,
+    licenses,
+    maintainers,
+    software,
+    syntaxes,
+    tags,
+  ] = await Promise.all([
+    getFilterLists(),
+    getLanguages(),
+    getLicenses(),
+    getMaintainers(),
+    getSoftware(),
+    getSyntaxes(),
+    getTags(),
+  ]);
 
   // TODO: add pagination support to API
-  const initialData = filterLists.slice(0, 20);
+  const initialFilterLists = filterLists.slice(0, 20);
 
   return (
     <main className="pt-4 p-8 gap-16 sm:p-20 sm:pt-8">
-      <FilterListTable columns={columns} initialData={initialData} />
+      <FilterListTable
+        columns={columns}
+        initialFilterLists={initialFilterLists}
+        languages={languages}
+        licenses={licenses}
+        maintainers={maintainers}
+        software={software}
+        syntaxes={syntaxes}
+        tags={tags}
+      />
     </main>
   );
 }

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

@@ -18,32 +18,43 @@ import {
 } from "@/components/ui/table";
 import { useEffect, useState } from "react";
 import { FilterListTablePagination } from "./pagination";
-import { FilterList, getFilterLists } from "@/services/get-filterlists";
 import { FilterListTablePaginationSkeleton } from "./pagination-skeleton";
+import { FilterList, getFilterLists } from "@/services/get-filterlists";
+import { Language } from "@/services/get-languages";
+import { License } from "@/services/get-licenses";
+import { Maintainer } from "@/services/get-maintainers";
+import { Software } from "@/services/get-software";
+import { Syntax } from "@/services/get-syntaxes";
+import { Tag } from "@/services/get-tags";
 
 interface FilterListTableProps {
   columns: AccessorKeyColumnDef<FilterList, string>[];
-  initialData: FilterList[];
+  initialFilterLists: FilterList[];
+  languages: Language[];
+  licenses: License[];
+  maintainers: Maintainer[];
+  software: Software[];
+  syntaxes: Syntax[];
+  tags: Tag[];
 }
 
 export function FilterListTable({
   columns,
-  initialData,
+  initialFilterLists,
 }: FilterListTableProps) {
-  const [data, setData] = useState<FilterList[]>(initialData);
+  const [data, setData] = useState<FilterList[]>(initialFilterLists);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    async function fetchAll() {
+    (async () => {
       try {
         const lists = await getFilterLists();
         setData(lists);
       } finally {
         setLoading(false);
       }
-    }
-    fetchAll();
-  }, [initialData.length]);
+    })();
+  }, [initialFilterLists.length]);
 
   const table = useReactTable({
     data,