diff --git a/frontend/features/AssetHistory/AssetHistoryComponent.spec.tsx b/frontend/features/AssetHistory/AssetHistoryComponent.spec.tsx new file mode 100644 index 00000000..ba93b537 --- /dev/null +++ b/frontend/features/AssetHistory/AssetHistoryComponent.spec.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import { describe, it, expect } from "vitest"; +import { render, screen } from "@testing-library/react"; +import { AssetHistoryComponent } from "./AssetHistoryComponent"; +describe("AssetHistoryComponent", () => { + it("renders correctly", () => { + render(); + expect(screen.getByText("Asset History")).toBeDefined(); + }); +}); diff --git a/frontend/features/AssetHistory/AssetHistoryComponent.tsx b/frontend/features/AssetHistory/AssetHistoryComponent.tsx new file mode 100644 index 00000000..6631f1a4 --- /dev/null +++ b/frontend/features/AssetHistory/AssetHistoryComponent.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { useAssetHistory } from "./useAssetHistory"; +import { TimelineEvent } from "./AssetHistoryTypes"; +export const AssetHistoryComponent: React.FC = () => { + const { events } = useAssetHistory(); + return ( +
+

Asset History

+ {events.map((event: TimelineEvent) => ( +
+ {event.date} +

{event.description}

+
+ ))} +
+ ); +}; diff --git a/frontend/features/AssetHistory/AssetHistoryStore.ts b/frontend/features/AssetHistory/AssetHistoryStore.ts new file mode 100644 index 00000000..2d2307ad --- /dev/null +++ b/frontend/features/AssetHistory/AssetHistoryStore.ts @@ -0,0 +1,8 @@ +import { createContext } from "react"; +import { AssetHistoryState, TimelineEvent } from "./AssetHistoryTypes"; +export interface AssetHistoryStore extends AssetHistoryState { + addEvent: (event: TimelineEvent) => void; +} +export const AssetHistoryContext = createContext( + undefined, +); diff --git a/frontend/features/AssetHistory/AssetHistoryTypes.ts b/frontend/features/AssetHistory/AssetHistoryTypes.ts new file mode 100644 index 00000000..d89d62fc --- /dev/null +++ b/frontend/features/AssetHistory/AssetHistoryTypes.ts @@ -0,0 +1,8 @@ +export interface TimelineEvent { + id: string; + date: string; + description: string; +} +export interface AssetHistoryState { + events: TimelineEvent[]; +} diff --git a/frontend/features/AssetHistory/useAssetHistory.ts b/frontend/features/AssetHistory/useAssetHistory.ts new file mode 100644 index 00000000..0f0b8a9c --- /dev/null +++ b/frontend/features/AssetHistory/useAssetHistory.ts @@ -0,0 +1,10 @@ +import { useState } from "react"; +import { TimelineEvent } from "./AssetHistoryTypes"; +export const useAssetHistory = () => { + const [events, setEvents] = useState([ + { id: "1", date: "2023-01-01", description: "Asset Created" }, + ]); + const addEvent = (event: TimelineEvent) => + setEvents((prev) => [...prev, event]); + return { events, addEvent }; +};