fix view bug

starsky/starsky/clientapp/src/components/molecules/item-text-list-view/internal/get-box-class-name.spec.ts

@@ -0,0 +1,42 @@
+import { IFileIndexItem } from "../../../../interfaces/IFileIndexItem";
+import { IExifStatus } from "../../../../interfaces/IExifStatus";
+import { GetBoxClassName } from "./get-box-class-name";
+
+describe("GetBoxClassName function", () => {
+  it("should return correct class name for directory items", () => {
+    const item: IFileIndexItem = { isDirectory: true, status: null } as unknown as IFileIndexItem;
+    expect(GetBoxClassName(item)).toBe("box isDirectory-true");
+  });
+
+  it("should return correct class name for items with OK status", () => {
+    const item: IFileIndexItem = {
+      isDirectory: false,
+      status: IExifStatus.Ok
+    } as unknown as IFileIndexItem;
+    expect(GetBoxClassName(item)).toBe("box isDirectory-false");
+  });
+
+  it("should return correct class name for items with Default status", () => {
+    const item: IFileIndexItem = {
+      isDirectory: false,
+      status: IExifStatus.Default
+    } as unknown as IFileIndexItem;
+    expect(GetBoxClassName(item)).toBe("box isDirectory-false");
+  });
+
+  it("should return correct class name for items with OKAndSame status", () => {
+    const item: IFileIndexItem = {
+      isDirectory: false,
+      status: IExifStatus.OkAndSame
+    } as unknown as IFileIndexItem;
+    expect(GetBoxClassName(item)).toBe("box isDirectory-false");
+  });
+
+  it("should return correct class name for items with error status", () => {
+    const item: IFileIndexItem = {
+      isDirectory: false,
+      status: "SomeErrorStatus"
+    } as unknown as IFileIndexItem;
+    expect(GetBoxClassName(item)).toBe("box isDirectory-false error");
+  });
+});

starsky/starsky/clientapp/src/components/molecules/item-text-list-view/internal/get-box-class-name.ts

@@ -0,0 +1,16 @@
+import { IFileIndexItem } from "../../../../interfaces/IFileIndexItem";
+import { IExifStatus } from "../../../../interfaces/IExifStatus";
+
+export function GetBoxClassName(item: IFileIndexItem): string {
+  if (item.isDirectory) {
+    return "box isDirectory-true";
+  } else if (
+    item.status === IExifStatus.Ok ||
+    item.status === IExifStatus.Default ||
+    item.status === IExifStatus.OkAndSame
+  ) {
+    return "box isDirectory-false";
+  } else {
+    return "box isDirectory-false error";
+  }
+}

starsky/starsky/clientapp/src/components/molecules/item-text-list-view/item-text-list-view.tsx

@@ -3,28 +3,21 @@ import { IExifStatus } from "../../../interfaces/IExifStatus";
 import { IFileIndexItem } from "../../../interfaces/IFileIndexItem";
 import localization from "../../../localization/localization.json";
 import { Language } from "../../../shared/language";
+import { ReactNode, FunctionComponent } from "react";
+import { GetBoxClassName } from "./internal/get-box-class-name.ts";
 
 interface ItemListProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
   fileIndexItems: IFileIndexItem[];
   isLoading?: boolean;
-  callback?(path: string): void;
-}
 
-function GetBoxClass(item: IFileIndexItem): string {
-  if (item.isDirectory) {
-    return "box isDirectory-true";
-  } else if (item.status === IExifStatus.Ok || item.status === IExifStatus.Default) {
-    return "box isDirectory-false";
-  } else {
-    return "box isDirectory-false error";
-  }
+  callback?(path: string): void;
 }
 
 /**
  * A list with links to the items
  */
-const ItemTextListView: React.FunctionComponent<ItemListProps> = (props) => {
+const ItemTextListView: FunctionComponent<ItemListProps> = (props) => {
   // Content
   const settings = useGlobalSettings();
   const language = new Language(settings.language);
@@ -48,7 +41,7 @@ const ItemTextListView: React.FunctionComponent<ItemListProps> = (props) => {
       )}
       <ul>
         {props.fileIndexItems.map((item) => (
-          <li className={GetBoxClass(item)} key={item.filePath + item.lastEdited}>
+          <li className={GetBoxClassName(item)} key={item.filePath + item.lastEdited}>
             {item.isDirectory ? (
               <button
                 data-test={"btn-" + item.fileName}