feat: list file contents

frontend/src/App.tsx

@@ -1,10 +1,10 @@
 // import { FilesList } from "./components/FilesList";
 // import { FileContent } from "./components/FileContent";
-import { Root } from "./components/Root";
+import { Obi } from "./components/Obi";
 import "./index.css";
 
 export function App() {
-  return (<Root/ >);
+  return (<Obi />);
 }
 
 export default App;

frontend/src/components/FileContent.tsx

@@ -8,7 +8,7 @@ export function FileContent({ filePath }) {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await fetch("http://localhost:8912/api/v1/files"); // Replace with your API endpoint
+        const response = await fetch("http://localhost:8912/api/v1/files/" + filePath); // Replace with your API endpoint
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
@@ -22,14 +22,14 @@ export function FileContent({ filePath }) {
     };
 
     fetchData();
-  }, []); // Empty dependency array ensures this effect runs only once on mount
+  }, [filePath]); // Empty dependency array ensures this effect runs only once on mount
 
   if (loading) return <p>Loading data...</p>;
-  if (error) return <p>Error: {error.message}</p>;
+  // if (error) return <p>Error: {error.message}</p>;
 
   return (
     <div>
-      <pre>{filePath}</pre>
+      <pre>{data?.data}</pre>
     </div>
   );
 }

frontend/src/components/FilesList.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 export function FilesList({ handleFileClick }) {
   const [data, setData] = useState(null);
@@ -27,15 +27,11 @@ export function FilesList({ handleFileClick }) {
   if (loading) return <p>Loading data...</p>;
   if (error) return <p>Error: {error.message}</p>;
 
-  const onClick = (event) => {
-    handleFileClick(event.target.value); // Call the parent's callback with the new value
-  };
-
-  const listFiles = data.map(filePath => <li onClick={onClick} className="cursor-pointer">{filePath}</li>);
-
   return (
     <div>
-      {listFiles}
+      {data.map(filePath => (
+        <li key={filePath} onClick={() => handleFileClick(filePath)} className="cursor-pointer">{filePath}</li>)
+      )}
     </div>
   );
 }

frontend/src/components/Obi.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { FilesList } from "./FilesList";
+import { FileContent } from "./FileContent";
+import { bytesToBase64 } from "../util/codecs.ts";
+
+export function Obi() {
+  const [filePath, setFilePath] = useState('');
+
+  const handleFileClick = (value) => {
+    console.log(`Encoded string: [${bytesToBase64(value)}]`);
+    setFilePath(bytesToBase64(value));
+  };
+
+  return (
+    <div className="grid text-black grid-cols-1 md:grid-cols-2 h-screen">
+      <div className="bg-gray-100 p-4 overflow-y-auto">
+        <FilesList handleFileClick={handleFileClick} />
+      </div>
+      <div className="bg-white p-4 overflow-y-auto">
+        <FileContent filePath={filePath} />
+      </div>
+    </div>
+  );
+}

frontend/src/components/Root.tsx

@@ -1,24 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-import { FilesList } from "./FilesList";
-import { FileContent } from "./FileContent";
-
-export function Root() {
-  const [filePath, setFilePath] = useState(''); // State to be shared
-
-  const handleFileClick = () => {
-    setFilePath('1000')
-    alert("Button clicked!");
-  };
-
-  return (
-    <div className="flex">
-      <div className="flex-1">
-        <FilesList onClick={handleFileClick} />
-      </div>
-      <div className="flex-2">
-        <FileContent filePath={filePath} />
-      </div>
-    </div>
-  );
-}

frontend/src/util/codecs.ts

@@ -0,0 +1,12 @@
+// From https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem.
+export function base64ToBytes(base64) {
+  const binString = atob(base64);
+  return Uint8Array.from(binString, (m) => m.codePointAt(0));
+}
+
+// From https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem.
+export function bytesToBase64(string: String) {
+  const bytes = new TextEncoder().encode(string)
+  const binString = String.fromCodePoint(...bytes);
+  return btoa(binString);
+}