x

src/App.tsx

@@ -9,6 +9,11 @@ import { Button } from '@/components/ui/button'
 import { ChevronDown, ChevronRight } from 'lucide-react'
 import { mockData } from './lib/data'
 
+interface FlattenedModel extends Model {
+  provider: string;
+  uri: string;
+}
+
 export interface Model {
   name: string
   inputPrice: number
@@ -44,6 +49,16 @@ const App: React.FC = () => {
     return (((modelPrice - comparisonPrice) / comparisonPrice) * 100).toFixed(2)
   }
 
+  const flattenData = (data: Provider[]) => {
+    return data.flatMap(provider =>
+      provider.models.map(model => ({
+        provider: provider.provider,
+        uri: provider.uri,
+        ...model
+      }))
+    );
+  }
+
   const filteredData = data
     .filter((provider) => selectedProviders.length === 0 || selectedProviders.includes(provider.provider))
     .map((provider) => ({
@@ -52,24 +67,19 @@ const App: React.FC = () => {
     }))
     .filter((provider) => provider.models.length > 0)
 
-  const flattenData = (data) => {
-    return data.flatMap(provider =>
-      provider.models.map(model => ({
-        provider: provider.provider,
-        uri: provider.uri,
-        ...model
-      }))
-    );
+  const toggleProviderExpansion = (provider: string) => {
+    setExpandedProviders((prev) => (prev.includes(provider) ? prev.filter((p) => p !== provider) : [...prev, provider]))
   }
 
   const sortedFlattenedData = React.useMemo(() => {
-    let sortableData = flattenData(filteredData);
+    let sortableData: FlattenedModel[] = flattenData(filteredData);
     if (sortConfig !== null) {
       sortableData.sort((a, b) => {
-        if (a[sortConfig.key] < b[sortConfig.key]) {
+        const key = sortConfig.key as keyof FlattenedModel;
+        if (a[key] < b[key]) {
           return sortConfig.direction === 'ascending' ? -1 : 1;
         }
-        if (a[sortConfig.key] > b[sortConfig.key]) {
+        if (a[key] > b[key]) {
           return sortConfig.direction === 'ascending' ? 1 : -1;
         }
         return 0;
@@ -78,9 +88,10 @@ const App: React.FC = () => {
     return sortableData;
   }, [filteredData, sortConfig]);
 
-  const reassembleData = (sortedFlattenedData) => {
+
+  const reassembleData = (sortedFlattenedData: any[]) => {
     const reassembledData = sortedFlattenedData.reduce((acc, item) => {
-      const providerIndex = acc.findIndex(provider => provider.provider === item.provider);
+      const providerIndex = acc.findIndex((provider: { provider: any }) => provider.provider === item.provider);
       if (providerIndex === -1) {
         acc.push({
           provider: item.provider,
@@ -91,9 +102,9 @@ const App: React.FC = () => {
         acc[providerIndex].models.push({ name: item.name, inputPrice: item.inputPrice, outputPrice: item.outputPrice });
       }
       return acc;
-    }, []);
+    }, [] as Provider[]);
     return reassembledData;
-  }
+  };
 
   const sortedData = reassembleData(sortedFlattenedData);
 
@@ -107,10 +118,6 @@ const App: React.FC = () => {
 
 
 
-  const toggleProviderExpansion = (provider: string) => {
-    setExpandedProviders((prev) => (prev.includes(provider) ? prev.filter((p) => p !== provider) : [...prev, provider]))
-  }
-
   return (
     <Card className="w-full max-w-6xl mx-auto">
       <CardHeader>
@@ -262,7 +269,7 @@ const App: React.FC = () => {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {sortedData.flatMap((provider) =>
+            {sortedData.flatMap((provider: { models: any[]; provider: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined; uri: string | undefined }) =>
               provider.models.map((model) => (
                 <TableRow key={`${provider.provider}-${model.name}`}>
                   <TableCell>