refactor(web): slim down props

web/src/components/badge-cloud.tsx

@@ -8,16 +8,16 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 
-interface BadgeItem {
+type BadgeItem = {
   key: number;
   value: string;
   tooltip?: string;
   href?: string;
-}
+};
 
-interface BadgeCloudProps {
+type BadgeCloudProps = {
   items: readonly BadgeItem[];
-}
+};
 
 const BadgeElement = ({ item }: { item: BadgeItem }) => {
   const badge = <Badge variant="secondary">{item.value}</Badge>;

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import {
   useReactTable,
   getCoreRowModel,
@@ -7,7 +8,6 @@ import {
   flexRender,
   TableMeta,
 } from "@tanstack/react-table";
-import { columns } from "./columns";
 import {
   Table,
   TableBody,
@@ -16,7 +16,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { useEffect, useState } from "react";
+import { columns } from "./columns";
 import { FilterListTablePagination } from "./pagination";
 import { FilterListTablePaginationSkeleton } from "./pagination-skeleton";
 import { FilterList, getFilterLists } from "@/services/get-filterlists";
@@ -32,7 +32,7 @@ export interface FilterListsTableMeta extends TableMeta<FilterList> {
   licenses: readonly License[];
 }
 
-interface FilterListTableProps {
+type FilterListTableProps = {
   columns: typeof columns;
   initialFilterLists: FilterList[];
   languages: readonly Language[];
@@ -41,7 +41,7 @@ interface FilterListTableProps {
   software: readonly Software[];
   syntaxes: readonly Syntax[];
   tags: readonly Tag[];
-}
+};
 
 export function FilterListTable({
   columns,

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

@@ -2,9 +2,9 @@ import { Button } from "@/components/ui/button";
 import { Table } from "@tanstack/react-table";
 import { FilterList } from "@/services/get-filterlists";
 
-interface FilterListTablePaginationProps {
+type FilterListTablePaginationProps = {
   table: Table<FilterList>;
-}
+};
 
 export function FilterListTablePagination({
   table,

web/src/services/get-filterlists.ts

@@ -8,7 +8,7 @@ export type FilterList = {
   syntaxIds: readonly number[];
   languageIds: readonly number[];
   tagIds: readonly number[];
-  primaryViewUrl: string | null;
+  // primaryViewUrl: string | null; // TODO: rm from the API?
   maintainerIds: readonly number[];
 };
 
@@ -21,5 +21,15 @@ export async function getFilterLists(): Promise<FilterList[]> {
     throw new Error(`Failed to fetch filter lists: ${response.statusText}`);
   }
 
-  return await response.json();
+  const data = await response.json();
+  return data.map((item: Record<string, unknown>) => ({
+    id: item.id as number,
+    name: item.name as string,
+    description: item.description as string | null,
+    licenseId: item.licenseId as number,
+    syntaxIds: item.syntaxIds as readonly number[],
+    languageIds: item.languageIds as readonly number[],
+    tagIds: item.tagIds as readonly number[],
+    maintainerIds: item.maintainerIds as readonly number[],
+  }));
 }

web/src/services/get-languages.ts

@@ -4,7 +4,7 @@ export type Language = {
   id: number;
   iso6391: string;
   name: string;
-  filterListIds: readonly number[]; // TODO: are these needed, or can we remove them from the API?
+  // filterListIds: readonly number[]; // TODO: rm from the API?
 };
 
 export async function getLanguages(): Promise<Language[]> {
@@ -16,5 +16,10 @@ export async function getLanguages(): Promise<Language[]> {
     throw new Error(`Failed to fetch languages: ${response.statusText}`);
   }
 
-  return await response.json();
+  const data = await response.json();
+  return data.map((item: Record<string, unknown>) => ({
+    id: item.id as number,
+    iso6391: item.iso6391 as string,
+    name: item.name as string,
+  }));
 }

web/src/services/get-licenses.ts

@@ -4,10 +4,10 @@ export type License = {
   id: number;
   name: string;
   url: string | null;
-  permitsModification: boolean;
-  permitsDistribution: boolean;
-  permitsCommercialUse: boolean;
-  filterListIds: readonly number[] | null; // TODO: are these needed, or can we remove them from the API?
+  // permitsModification: boolean;
+  // permitsDistribution: boolean;
+  // permitsCommercialUse: boolean;
+  // filterListIds: readonly number[]; // TODO: rm from the API?
 };
 
 export async function getLicenses(): Promise<License[]> {
@@ -19,5 +19,10 @@ export async function getLicenses(): Promise<License[]> {
     throw new Error(`Failed to fetch licenses: ${response.statusText}`);
   }
 
-  return await response.json();
+  const data = await response.json();
+  return data.map((item: Record<string, unknown>) => ({
+    id: item.id as number,
+    name: item.name as string,
+    url: item.url as string | null,
+  }));
 }

web/src/services/get-maintainers.ts

@@ -2,11 +2,11 @@ import { API_BASE_URL, DEFAULT_REVALIDATE_SECS } from "./constants";
 
 export type Maintainer = {
   id: number;
-  name: string | null;
+  name: string;
   url: string | null;
-  emailAddress: string | null;
-  twitterHandle: string | null;
-  filterListIds: readonly number[] | null;
+  // emailAddress: string | null;
+  // twitterHandle: string | null;
+  // filterListIds: readonly number[]; // TODO: rm from the API?
 };
 
 export async function getMaintainers(): Promise<Maintainer[]> {
@@ -18,5 +18,10 @@ export async function getMaintainers(): Promise<Maintainer[]> {
     throw new Error(`Failed to fetch maintainers: ${response.statusText}`);
   }
 
-  return await response.json();
+  const data = await response.json();
+  return data.map((item: Record<string, unknown>) => ({
+    id: item.id as number,
+    name: item.name as string,
+    url: item.url as string | null,
+  }));
 }

web/src/services/get-software.ts

@@ -2,12 +2,12 @@ import { API_BASE_URL, DEFAULT_REVALIDATE_SECS } from "./constants";
 
 export type Software = {
   id: number;
-  name: string | null;
+  name: string;
   description: string | null;
   homeUrl: string | null;
-  downloadUrl: string | null;
-  supportsAbpUrlScheme: boolean;
-  syntaxIds: readonly number[] | null;
+  // downloadUrl: string | null;
+  // supportsAbpUrlScheme: boolean;
+  // syntaxIds: readonly number[]; // TODO: rm from the API?
 };
 
 export async function getSoftware(): Promise<Software[]> {
@@ -19,5 +19,11 @@ export async function getSoftware(): Promise<Software[]> {
     throw new Error(`Failed to fetch software: ${response.statusText}`);
   }
 
-  return await response.json();
+  const data = await response.json();
+  return data.map((item: Record<string, unknown>) => ({
+    id: item.id as number,
+    name: item.name as string,
+    description: item.description as string | null,
+    homeUrl: item.homeUrl as string | null,
+  }));
 }

web/src/services/get-syntaxes.ts

@@ -2,11 +2,11 @@ import { API_BASE_URL, DEFAULT_REVALIDATE_SECS } from "./constants";
 
 export type Syntax = {
   id: number;
-  name: string | null;
+  name: string;
   description: string | null;
   url: string | null;
-  filterListIds: readonly number[] | null;
-  softwareIds: readonly number[] | null;
+  // filterListIds: readonly number[]; // TODO: rm from the API?
+  // softwareIds: readonly number[]; // TODO: rm from the API?
 };
 
 export async function getSyntaxes(): Promise<Syntax[]> {
@@ -18,5 +18,11 @@ export async function getSyntaxes(): Promise<Syntax[]> {
     throw new Error(`Failed to fetch syntaxes: ${response.statusText}`);
   }
 
-  return await response.json();
+  const data = await response.json();
+  return data.map((item: Record<string, unknown>) => ({
+    id: item.id as number,
+    name: item.name as string,
+    description: item.description as string | null,
+    url: item.url as string | null,
+  }));
 }

web/src/services/get-tags.ts

@@ -2,9 +2,9 @@ import { API_BASE_URL, DEFAULT_REVALIDATE_SECS } from "./constants";
 
 export type Tag = {
   id: number;
-  name: string | null;
+  name: string;
   description: string | null;
-  filterListIds: readonly number[] | null;
+  // filterListIds: readonly number[]; // TODO: rm from the API?
 };
 
 export async function getTags(): Promise<Tag[]> {
@@ -16,5 +16,10 @@ export async function getTags(): Promise<Tag[]> {
     throw new Error(`Failed to fetch tags: ${response.statusText}`);
   }
 
-  return await response.json();
+  const data = await response.json();
+  return data.map((item: Record<string, unknown>) => ({
+    id: item.id as number,
+    name: item.name as string,
+    description: item.description as string | null,
+  }));
 }