Use object URL API to allow downloading large JSON files (#88)

#87 created truncated/unreadable files when the JSON was too big to fit in a data URL. This is a better way to create download links, which works for large files.

lib/PlotsTemplate.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useRef } from "react"
+
 import BarPlot from "lib/BarPlot"
 import { CurrentYearExtrapolationInfo } from "lib/projections"
 import { useFetch } from "lib/queries"
@@ -81,7 +83,11 @@ export default function PlotsTemplate({
             {selected?.has_ca_hcd_data && <HcdDataInfo />}
           </div>
         </div>
-        <DownloadData data={data} name={selected?.name + ".json"} />
+        <DownloadData
+          data={data}
+          name={selected?.name + ".json"}
+          selected={selected?.name}
+        />
       </div>
     </div>
   )
@@ -90,13 +96,30 @@ export default function PlotsTemplate({
 export function DownloadData({
   data,
   name,
+  selected,
 }: {
   data: object
   name: string
+  selected: any
 }): JSX.Element {
+  const url = useRef("#")
+
+  // This runs every time selected changes
+  useEffect(() => {
+    url.current = URL.createObjectURL(
+      new Blob([JSON.stringify(data)], { type: "octet/stream" })
+    )
+    // Cleanup function
+    return () => {
+      if (url.current != "#" && typeof window !== "undefined") {
+        URL.revokeObjectURL(url.current)
+      }
+    }
+  }, [selected])
+
   return (
     <a
-      href={"data:application/json," + JSON.stringify(data)}
+      href={url.current}
       className="text-sm text-blue-500 hover:text-blue-300"
       download={name}
     >

pages/index.tsx

@@ -496,7 +496,11 @@ export default function Home(): JSX.Element {
         {perCapitaInput}
         {groupingInput}
         {selectedLocations.some((l) => l.has_ca_hcd_data) && preferHcdDataInput}
-        <DownloadData data={data} name="housing data comparisons.json" />
+        <DownloadData
+          data={data}
+          name="housing data comparisons.json"
+          selected={selectedLocations}
+        />
         {selectedLocations.some((l) => l.has_ca_hcd_data) && <HcdDataInfo />}
       </div>
     </Page>