From f5ddb779b46c0a3433f04859949f0c36f09474ab Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Wed, 6 Dec 2023 22:24:25 -0500 Subject: [PATCH] make history forward chronology and have non-changing indices to refer to items --- frontend/src/App.tsx | 4 ++-- .../src/components/history/HistoryDisplay.tsx | 4 ++-- frontend/src/components/history/utils.test.ts | 16 ++++++------- frontend/src/components/history/utils.ts | 24 +++++++++---------- 4 files changed, 24 insertions(+), 24 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 22ec502..a5e3581 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -151,6 +151,7 @@ function App() { } else { setAppHistory((prev) => { const newHistory: History = [ + ...prev, { type: "ai_edit", code, @@ -158,9 +159,8 @@ function App() { prompt: updateInstruction, }, }, - ...prev, ]; - setCurrentVersion(0); + setCurrentVersion(newHistory.length - 1); return newHistory; }); } diff --git a/frontend/src/components/history/HistoryDisplay.tsx b/frontend/src/components/history/HistoryDisplay.tsx index b626df4..43b4614 100644 --- a/frontend/src/components/history/HistoryDisplay.tsx +++ b/frontend/src/components/history/HistoryDisplay.tsx @@ -32,7 +32,7 @@ export default function HistoryDisplay({

History

-
    +
      {history.map((item, index) => (

    • {displayHistoryItemType(item.type)}

      -

      v{history.length - index}

      +

      v{index + 1}

      • ))}
    diff --git a/frontend/src/components/history/utils.test.ts b/frontend/src/components/history/utils.test.ts index 89041bf..3eb5039 100644 --- a/frontend/src/components/history/utils.test.ts +++ b/frontend/src/components/history/utils.test.ts @@ -3,10 +3,10 @@ import { extractHistoryTree } from "./utils"; const data = [ { - type: "ai_edit" as const, - code: "3. edit with better icons and red text", + type: "ai_create" as const, + code: "1. create", inputs: { - prompt: "make text red", + image_url: "", }, }, { @@ -17,16 +17,16 @@ const data = [ }, }, { - type: "ai_create" as const, - code: "1. create", + type: "ai_edit" as const, + code: "3. edit with better icons and red text", inputs: { - image_url: "", + prompt: "make text red", }, }, ]; test("should only include history from this point onward", () => { - expect(extractHistoryTree(data, 0)).toEqual([ + expect(extractHistoryTree(data, 2)).toEqual([ "1. create", "use better icons", "2. edit with better icons", @@ -34,5 +34,5 @@ test("should only include history from this point onward", () => { "3. edit with better icons and red text", ]); - expect(extractHistoryTree(data, 2)).toEqual(["1. create"]); + expect(extractHistoryTree(data, 0)).toEqual(["1. create"]); }); diff --git a/frontend/src/components/history/utils.ts b/frontend/src/components/history/utils.ts index 8c7065f..c82a43f 100644 --- a/frontend/src/components/history/utils.ts +++ b/frontend/src/components/history/utils.ts @@ -4,21 +4,21 @@ export function extractHistoryTree( history: History, version: number ): string[] { - // History is in reverse chronological order - // Get all history items up to the current version - const extractedHistory = history.slice(version); + const extractedHistory = history.slice(0, version + 1); - const obj: string[] = []; - - // Reverse the history so that it is in chronological order for the server - extractedHistory.reverse().forEach((item) => { - // Don't include the image for ai_create since the server gets it passed and will include it directly - if (item.type !== "ai_create") { - obj.push(item.inputs.prompt); + // Convert the history into a flat array of strings that the backend expects + const flatHistory: string[] = []; + extractedHistory.forEach((item) => { + if (item.type === "ai_create") { + // Don't include the image for ai_create since the server + // gets it passed and will include it directly + flatHistory.push(item.code); + } else { + flatHistory.push(item.inputs.prompt); + flatHistory.push(item.code); } - obj.push(item.code); }); - return obj; + return flatHistory; }