Add file parsing error handling

.vscode/launch.json

@@ -0,0 +1,13 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+
+    {
+      "type": "msedge",
+      "request": "launch",
+      "name": "Launch Edge against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

src/app/components/BasicDialog.tsx

@@ -1,28 +1,38 @@
-import React, { useState } from 'react';
+import React from 'react';
 
-interface BasicDialogProps {
-  message: string;
-  dialogType?: 'warning' | 'error' | 'info';
+export enum DialogType {
+  WARNING = 'Warning',
+  ERROR = 'Error',
+  INFO = 'Info'
 }
 
-const BasicDialog: React.FC<BasicDialogProps> = ({ message, dialogType }) => {
-  const [isVisible, setIsVisible] = useState(true);
+interface DialogDetail {
+  title: string;
+  icon: string;
+}
 
-  const handleConfirm = () => {
-    setIsVisible(false);
-  };
+const dialogDetails: Record<DialogType, DialogDetail> = {
+  [DialogType.WARNING]: { title: 'Warning', icon: '⚠️' },
+  [DialogType.ERROR]: { title: 'Error', icon: '❌' },
+  [DialogType.INFO]: { title: 'Info', icon: 'ℹ️' },
+};
 
-  const dialogDetails = {
-    warning: { title: 'Warning', icon: '⚠️' },
-    error: { title: 'Error', icon: '❌' },
-    info: { title: 'Info', icon: 'ℹ️' },
-  };
+export class DialogData {
+  constructor(public message: string, public dialogType: DialogType) {}
+}
 
-  const { title, icon } = dialogDetails[dialogType || 'info'];
+export interface BasicDialogProps {
+  dialogData: DialogData;
+  onConfirm: () => void;
+}
+
+export const BasicDialog: React.FC<BasicDialogProps> = ({ dialogData, onConfirm }) => {
+
+  const handleConfirm = () => {
+    onConfirm();
+  };
 
-  if (!isVisible) {
-    return null;
-  }
+  const { title, icon } = dialogDetails[dialogData.dialogType];
 
   return (
     <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center">
@@ -31,7 +41,7 @@ const BasicDialog: React.FC<BasicDialogProps> = ({ message, dialogType }) => {
         <h2 className="text-2xl font-bold mb-4 text-black">
           {icon} {title}
         </h2>
-        <p>{message}</p>
+        <p className="text-black">{dialogData.message}</p>
         <button
           className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full"
           onClick={handleConfirm}

src/app/components/CombatTracker.tsx

@@ -5,8 +5,15 @@ import InitiativeInputDialog from "./InitiativeInputDialog";
 import { CheckmarkIconPositive } from "../lib/SVGIcons";
 import strings from "@/strings";
 import { promptForFile } from "../lib/fileInput";
+import {BasicDialog, DialogData, DialogType} from "./BasicDialog";
 
 const CombatTracker: React.FC = () => {
+  const DIRECTION_UP = "up";
+  const DIRECTION_DOWN = "down";
+  type Direction = typeof DIRECTION_UP | typeof DIRECTION_DOWN;
+  const FILE_NOT_SELECTED = "No file selected";
+  const FILE_PARSING_ERROR = "Unable to parse JSON file";
+
   const [combatCharacters, setCombatCharacters] = useState<Character[]>([]);
   const [sortDescending, toggleSortDescending] = useState(true);
   const [currentCharacterIndex, setCurrentCharacterIndex] = useState<number>(0);
@@ -16,9 +23,7 @@ const CombatTracker: React.FC = () => {
   const [pendingCharacter, setPendingCharacter] = useState<Character | null>(
     null,
   );
-  const DIRECTION_UP = "up";
-  const DIRECTION_DOWN = "down";
-  type Direction = typeof DIRECTION_UP | typeof DIRECTION_DOWN;
+  const [currentDialogData, setCurrentDialogData] = useState<DialogData | null>(null);
 
   const handleToggleSortDescending = () => {
     // Toggle the sort order
@@ -50,11 +55,15 @@ const CombatTracker: React.FC = () => {
             initiative: 0,
           });
         } catch (error) {
+          setCurrentDialogData(new DialogData(FILE_PARSING_ERROR, DialogType.WARNING));
           console.error("Error parsing JSON file:", error);
         }
       };
 
       reader.readAsText(file);
+    } else {
+      setCurrentDialogData(new DialogData(FILE_NOT_SELECTED, DialogType.WARNING));
+      console.log("No file selected");
     }
   };
 
@@ -134,6 +143,14 @@ const CombatTracker: React.FC = () => {
           {toggleButtonText}
         </button>
       </div>
+      {/* Render the basic dialog */}
+      {currentDialogData && (
+        <BasicDialog
+          dialogData={currentDialogData}
+          onConfirm={() => setCurrentDialogData(null)}
+        />
+
+      )}
       {/* Render the custom initiative input dialog */}
       {pendingCharacter && (
         <InitiativeInputDialog

src/app/testData/bad_character_data.json

@@ -0,0 +1,4 @@
+{
+  "name": "Test Warrior",
+  error: xxxx
+}