x

src/App.tsx

@@ -43,6 +43,7 @@ const App: React.FC = () => {
   const calculateComparison = (modelPrice: number, comparisonPrice: number): string => {
     return (((modelPrice - comparisonPrice) / comparisonPrice) * 100).toFixed(2)
   }
+
   const filteredData = data
     .filter((provider) => selectedProviders.length === 0 || selectedProviders.includes(provider.provider))
     .map((provider) => ({
@@ -51,36 +52,51 @@ const App: React.FC = () => {
     }))
     .filter((provider) => provider.models.length > 0)
 
-  const sortedData = React.useMemo(() => {
-    let sortableData = [...filteredData];
+  const flattenData = (data) => {
+    return data.flatMap(provider =>
+      provider.models.map(model => ({
+        provider: provider.provider,
+        uri: provider.uri,
+        ...model
+      }))
+    );
+  }
+
+  const sortedFlattenedData = React.useMemo(() => {
+    let sortableData = flattenData(filteredData);
     if (sortConfig !== null) {
-      if (sortConfig.key === 'provider') {
-        sortableData.sort((a, b) => {
-          if (a.provider < b.provider) {
-            return sortConfig.direction === 'ascending' ? -1 : 1;
-          }
-          if (a.provider > b.provider) {
-            return sortConfig.direction === 'ascending' ? 1 : -1;
-          }
-          return 0;
-        });
-      } else if (sortConfig.key === 'model' || sortConfig.key === 'inputPrice' || sortConfig.key === 'outputPrice') {
-        sortableData.forEach(provider => {
-          provider.models.sort((a, b) => {
-            if (a[sortConfig.key] < b[sortConfig.key]) {
-              return sortConfig.direction === 'ascending' ? -1 : 1;
-            }
-            if (a[sortConfig.key] > b[sortConfig.key]) {
-              return sortConfig.direction === 'ascending' ? 1 : -1;
-            }
-            return 0;
-          });
-        });
-      }
+      sortableData.sort((a, b) => {
+        if (a[sortConfig.key] < b[sortConfig.key]) {
+          return sortConfig.direction === 'ascending' ? -1 : 1;
+        }
+        if (a[sortConfig.key] > b[sortConfig.key]) {
+          return sortConfig.direction === 'ascending' ? 1 : -1;
+        }
+        return 0;
+      });
     }
     return sortableData;
   }, [filteredData, sortConfig]);
 
+  const reassembleData = (sortedFlattenedData) => {
+    const reassembledData = sortedFlattenedData.reduce((acc, item) => {
+      const providerIndex = acc.findIndex(provider => provider.provider === item.provider);
+      if (providerIndex === -1) {
+        acc.push({
+          provider: item.provider,
+          uri: item.uri,
+          models: [{ name: item.name, inputPrice: item.inputPrice, outputPrice: item.outputPrice }]
+        });
+      } else {
+        acc[providerIndex].models.push({ name: item.name, inputPrice: item.inputPrice, outputPrice: item.outputPrice });
+      }
+      return acc;
+    }, []);
+    return reassembledData;
+  }
+
+  const sortedData = reassembleData(sortedFlattenedData);
+
   const requestSort = (key: string) => {
     let direction = 'ascending';
     if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') {
@@ -90,7 +106,6 @@ const App: React.FC = () => {
   };
 
 
-  console.log(filteredData)
 
   const toggleProviderExpansion = (provider: string) => {
     setExpandedProviders((prev) => (prev.includes(provider) ? prev.filter((p) => p !== provider) : [...prev, provider]))
@@ -191,8 +206,8 @@ const App: React.FC = () => {
                 </button>
               </TableHead>
               <TableHead>
-                <button type="button" onClick={() => requestSort('model')}>
-                  Model {sortConfig?.key === 'model' ? (sortConfig.direction === 'ascending' ? '▲' : '▼') : null}
+                <button type="button" onClick={() => requestSort('name')}>
+                  Model {sortConfig?.key === 'name' ? (sortConfig.direction === 'ascending' ? '▲' : '▼') : null}
                 </button>
               </TableHead>
               <TableHead>
@@ -304,9 +319,6 @@ const App: React.FC = () => {
             )}
           </TableBody>
         </Table>
-
-
-
       </CardContent>
     </Card>
   )