[basic-example][m] - fix fetching of actual data

examples/basic-example/components/Table.tsx

@@ -22,6 +22,7 @@ import React, { useEffect, useMemo, useState } from "react";
 
 import parseCsv from "../lib/parseCsv";
 import DebouncedInput from "./DebouncedInput";
+import loadUrlProxied from "../lib/loadUrlProxied";
 
 const Table = ({
   data: ogData = [],
@@ -66,6 +67,17 @@ const Table = ({
     getSortedRowModel: getSortedRowModel(),
   });
 
+  useEffect(() => {
+    if (url) {
+      loadUrlProxied(url).then((data) => {
+        console.log(data)
+        const { rows, fields } = parseCsv(data);
+        setData(rows);
+        setCols(fields);
+      });
+    }
+  }, [url]);
+
   return (
     <div className={`${fullWidth ? "w-[90vw] ml-[calc(50%-45vw)]" : "w-full"}`}>
       <DebouncedInput

examples/basic-example/content/my-dataset/data_1.csv

@@ -0,0 +1,3 @@
+Year,Temp Anomaly
+1850,-0.418
+2020,0.923

examples/basic-example/lib/loadUrlProxied.tsx

@@ -0,0 +1,11 @@
+export default async function loadUrlProxied(url: string) {
+  // HACK: duplicate of Excel code - maybe refactor
+  // if url is external may have CORS issue so we proxy it ...
+  if (url.startsWith("http")) {
+    const PROXY_URL = "/api/proxy";
+    url = PROXY_URL + "?url=" + encodeURIComponent(url);
+  }
+  const response = await fetch(url)
+  const data = await response.text()
+  return data
+}

examples/basic-example/middleware.ts

@@ -3,12 +3,15 @@ import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
 
 // This function can be marked `async` if using `await` inside
-export function middleware(request: NextRequest) {
-  console.log('FUCK MY LIFE')
-  return NextResponse.redirect(new URL('/about-2', request.url))
+export async function middleware(req: NextRequest, res: NextResponse) {
+  const refererPaths = req.headers.get('referer').split('/'); // logs the referer URL to the console
+  const urlPaths = req.nextUrl.pathname.split('/')
+  const datasetName = refererPaths[refererPaths.length - 1]
+  const fileName = urlPaths[urlPaths.length - 1]
+  return NextResponse.rewrite(new URL(`/api/get-data-file?datasetName=${datasetName}&fileName=${fileName}`, req.url))
 }
 
 // See "Matching Paths" below to learn more
 export const config = {
-  matcher: '/datasets/:datasetName',
+  matcher: '/datasets/:file*.csv',
 }

examples/basic-example/pages/api/get-data-file.ts

@@ -0,0 +1,18 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+import { promises as fs } from 'fs';
+import path from 'path';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<string>
+) {
+  const query = req.query;
+  const { datasetName, fileName } = query;
+  const dataFile = path.join(
+    process.cwd(),
+    '/content/' + datasetName + '/' + fileName
+  );
+  const data = await fs.readFile(dataFile, 'utf8');
+  res.status(200).send(data)
+}

examples/basic-example/pages/api/hello.ts

@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
-}

examples/basic-example/pages/datasets/[datasetId].tsx

@@ -21,6 +21,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
   );
   const readme = await fs.readFile(jsonDirectory, 'utf8');
   let { mdxSource, frontMatter, excerpt } = await parse(readme, '.mdx');
+  console.log(mdxSource, frontMatter, excerpt)
   return {
     props: {
       mdxSource,

examples/basic-example/tsconfig.json

@@ -15,6 +15,6 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "middleware.ts"],
   "exclude": ["node_modules"]
 }