feat: random file from nixpkgs

front/src/SideBySide.js

@@ -2,8 +2,10 @@ import react from "react";
 import ReactDiffViewer from "react-diff-viewer";
 import * as wasm from "alejandra-front";
 import { Editor } from "./Editor";
+import { get, randomPath } from "./nixpkgs";
 
 export const SideBySide = () => {
+  const [path, setPath] = react.useState(randomPath());
   const [loading, setLoading] = react.useState(true);
   const [before, setBefore] = react.useState("let x = 123; in\n x");
 
@@ -12,8 +14,17 @@ export const SideBySide = () => {
     setLoading(false);
   }, [wasm]);
 
+  react.useEffect(async () => {
+    const content = await get(path);
+    setBefore(content);
+  }, [path]);
+
   if (loading) {
-    return <span>Loading</span>;
+    return (
+      <div className="flex items-center justify-center">
+        <div className="f6 tc">Loading</div>
+      </div>
+    );
   }
 
   const after = wasm.format(before, "before.nix");
@@ -21,7 +32,17 @@ export const SideBySide = () => {
   return (
     <react.Fragment>
       <div className="flex items-center justify-center">
-        <div className="f6 fl tc w-40">Type your code below</div>
+        <div className="f6 fl tc w-40">
+          Type your code below or&nbsp;
+          <span
+            className="blue underline"
+            onClick={() => {
+              setPath(randomPath());
+            }}
+          >
+            click here to fetch a random file from Nixpkgs
+          </span>
+        </div>
         <div className="w-10" />
         <div className="f6 fl tc w-40">With Alejandra ❤️</div>
       </div>
@@ -39,7 +60,11 @@ export const SideBySide = () => {
       </div>
       <div className="flex items-center justify-center pt1">
         <div className="f6 fl w-80">
-          <ReactDiffViewer oldValue={before} newValue={after} />
+          <ReactDiffViewer
+            disableWordDiff={true}
+            newValue={after}
+            oldValue={before}
+          />
         </div>
       </div>
     </react.Fragment>

front/src/nixpkgs.js

@@ -0,0 +1,18 @@
+import { COMMIT, FILES } from "./nixpkgsFiles";
+
+export const randomPath = () => FILES[Math.floor(Math.random() * FILES.length)];
+
+export const path2url = (path) =>
+  `https://raw.githubusercontent.com/nixos/nixpkgs/${COMMIT}/${path}`;
+
+export const get = async (path) => {
+  const url = path2url(path);
+
+  try {
+    const response = await fetch(url);
+
+    return await response.text();
+  } catch (error) {
+    return `# An error ocurred while fetching ${url}\n# ${error}`;
+  }
+};