From 95fd8e72dfc9af88d7a55daf7d7cc833770d830b Mon Sep 17 00:00:00 2001
From: Luccas Mateus de Medeiros Gomes <luccasmmg@gmail.com>
Date: Fri, 2 Jun 2023 09:38:13 -0300
Subject: [PATCH] [examples/openspending][sm] - 5mb to 500kb on preview

---
 .../openspending/components/FlatUiTable.tsx   | 21 +++++++++++++------
 .../pages/@org/[org]/[project].tsx            |  4 ++--
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/examples/openspending/components/FlatUiTable.tsx b/examples/openspending/components/FlatUiTable.tsx
index 9283b320..693dc0f5 100644
--- a/examples/openspending/components/FlatUiTable.tsx
+++ b/examples/openspending/components/FlatUiTable.tsx
@@ -4,10 +4,13 @@ import { Grid } from '@githubocto/flat-ui';
 
 const queryClient = new QueryClient();
 
-export async function getCsv(url: string) {
+export async function getCsv(url: string, corsProxy?: string, range?: string) {
+  if (corsProxy) {
+    url = corsProxy + url
+  }
   const response = await fetch(url, {
     headers: {
-      Range: 'bytes=0-5132288',
+      Range: range ? `bytes=0-${range}` : 'bytes=0-512000',
     },
   });
   const data = await response.text();
@@ -61,21 +64,25 @@ export interface FlatUiTableProps {
   url?: string;
   data?: { [key: string]: number | string }[];
   rawCsv?: string;
+  range?: string;
+  corsProxy?: string;
 }
 export const FlatUiTable: React.FC<FlatUiTableProps> = ({
   url,
   data,
   rawCsv,
+  corsProxy,
+  range
 }) => {
   return (
     // Provide the client to your App
     <QueryClientProvider client={queryClient}>
-      <TableInner url={url} data={data} rawCsv={rawCsv} />
+      <TableInner range={range} corsProxy={corsProxy} url={url} data={data} rawCsv={rawCsv} />
     </QueryClientProvider>
   );
 };
 
-const TableInner: React.FC<FlatUiTableProps> = ({ url, data, rawCsv }) => {
+const TableInner: React.FC<FlatUiTableProps> = ({ url, data, rawCsv, corsProxy, range }) => {
   if (data) {
     return (
       <div className="w-full" style={{height: '500px'}}>
@@ -85,12 +92,12 @@ const TableInner: React.FC<FlatUiTableProps> = ({ url, data, rawCsv }) => {
   }
   const { data: csvString, isLoading: isDownloadingCSV } = useQuery(
     ['dataCsv', url],
-    () => getCsv(url),
+    () => getCsv(url as string, corsProxy, range),
     { enabled: !!url }
   );
   const { data: parsedData, isLoading: isParsing } = useQuery(
     ['dataPreview', csvString],
-    () => parseCsv(rawCsv ? rawCsv : csvString),
+    () => parseCsv(rawCsv ? rawCsv as string : csvString as string),
     { enabled: rawCsv ? true : !!csvString }
   );
   if (isParsing || isDownloadingCSV)
@@ -103,4 +110,6 @@ const TableInner: React.FC<FlatUiTableProps> = ({ url, data, rawCsv }) => {
         <Grid data={parsedData.data} />
       </div>
     );
+  return <Spinning />
 };
+
diff --git a/examples/openspending/pages/@org/[org]/[project].tsx b/examples/openspending/pages/@org/[org]/[project].tsx
index 57c88957..cb87ceed 100644
--- a/examples/openspending/pages/@org/[org]/[project].tsx
+++ b/examples/openspending/pages/@org/[org]/[project].tsx
@@ -189,8 +189,8 @@ export default function ProjectPage({
                       {file.name}
                       {file.format ? `.${file.format}` : ''}
                     </h4>
-                    {file.bytes >= 5132288 && (
-                      <span>Previewing 5MB out of {size}</span>
+                    {file.bytes >= 512000 && (
+                      <span>Previewing 500KB out of {size}</span>
                     )}
                     <div className="mt-5">
                       <FlatUiTable