Send file hook

bduhbya · Aug 12, 2024 · 8a2a793 · 8a2a793
1 parent d5bcbc0
commit 8a2a793
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/src/app/components/CharacterDisplay.tsx b/src/app/components/CharacterDisplay.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 // import strings from "@/strings";
 
 export interface CharacterDisplayProps {
@@ -8,18 +8,27 @@ export interface CharacterDisplayProps {
 export const CharacterDisplay: React.FC<CharacterDisplayProps> = ({
   sourceFile,
 }) => {
+  const [characterData, setCharacterData] = useState<String | null>(null);
+
+  if (sourceFile !== null) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        try {
+          const jsonData = JSON.parse(reader.result as string);
+
+          setCharacterData(jsonData);
+        } catch (error) {
+          console.error("Error parsing JSON file:", error);
+        }
+      };
+      reader.readAsText(sourceFile);
+    }
+
   return (
     <div className="flex flex-col items-center justify-center">
-      {sourceFile === null && <p className="text-black dark:text-white">No file selected</p>}
-      {sourceFile !== null && (
-        <>
-          <img
-            src={URL.createObjectURL(sourceFile)}
-            alt={"Character Data"}
-            className="w-64 h-64 rounded-full"
-          />
-          <p className="text-black">{sourceFile.name}</p>
-        </>
+      {characterData === null && <p className="text-black dark:text-white">No file selected</p>}
+      {characterData !== null && (
+        <div>{JSON.stringify(characterData)}</div>
       )}
     </div>
   );

diff --git a/src/app/components/CombatTracker.tsx b/src/app/components/CombatTracker.tsx
@@ -9,7 +9,11 @@ import { BasicDialog, DialogData, DialogType } from "./BasicDialog";
 
 export const activeCharacterTestId = "active-combat-character-row-";
 
-const CombatTracker: React.FC = () => {
+export interface CombatTrackerProps {
+  SetCharacterFile: (file: File) => void;
+}
+
+const CombatTracker: React.FC<CombatTrackerProps> = ({SetCharacterFile}) => {
   const DIRECTION_UP = "up";
   const DIRECTION_DOWN = "down";
   type Direction = typeof DIRECTION_UP | typeof DIRECTION_DOWN;
@@ -81,7 +85,8 @@ const CombatTracker: React.FC = () => {
     setPendingCharacter(null);
   };
 
-  const handleCharacterClick = (character: Character) => {
+  const handleCharacterClick = (character: Character, SetCharacterFile: (file: File) => void) => {
+    SetCharacterFile(character.fileReference);
     // TODO: activate a callback to set the character display in parent
     const dynamicDataKeys = Object.keys(character.dynamicData);
 
@@ -182,7 +187,7 @@ const CombatTracker: React.FC = () => {
           {combatCharacters.map((character, index) => (
             <tr
               key={index}
-              onClick={() => handleCharacterClick(character)}
+              onClick={() => handleCharacterClick(character, SetCharacterFile)}
               className={character.active ? "bg-gray-200" : ""}
               data-testid={
                 character.active ? `${activeCharacterTestId}${index}` : ""

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -41,7 +41,7 @@ export default function Home() {
         </div> */}
 
       <div className="mai flex justify-start items-center gap-x-4">
-        <CombatTracker />
+        <CombatTracker SetCharacterFile={setCharacterFile}/>
         <div className="flex-grow">
           <CharacterDisplay sourceFile={characterFile} />
         </div>