Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make history forward chronology and have non-changing indices to refer to items

Browse Source
This commit is contained in:
Abi Raja 2023-12-06 22:24:25 -05:00
parent eff532bcf5
commit f5ddb779b4
4 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.tsx
View File

@ -151,6 +151,7 @@ function App() {
} else { } else {
setAppHistory((prev) => { setAppHistory((prev) => {
const newHistory: History = [ const newHistory: History = [
...prev,
{ {
type: "ai_edit", type: "ai_edit",
code, code,
@ -158,9 +159,8 @@ function App() {
prompt: updateInstruction, prompt: updateInstruction,
}, },
}, },
...prev,
]; ];
setCurrentVersion(0); setCurrentVersion(newHistory.length - 1);
return newHistory; return newHistory;
}); });
} }

4
frontend/src/components/history/HistoryDisplay.tsx
View File

@ -32,7 +32,7 @@ export default function HistoryDisplay({
<div className="flex flex-col h-screen"> <div className="flex flex-col h-screen">
<h1 className="font-bold mb-2">History</h1> <h1 className="font-bold mb-2">History</h1>
<ScrollArea className="flex-1 overflow-y-auto"> <ScrollArea className="flex-1 overflow-y-auto">
<ul className="space-y-0"> <ul className="space-y-0 flex flex-col-reverse">
{history.map((item, index) => ( {history.map((item, index) => (
<li <li
key={index} key={index}
@ -53,7 +53,7 @@ export default function HistoryDisplay({
} }
> >
<h2 className="text-sm">{displayHistoryItemType(item.type)}</h2> <h2 className="text-sm">{displayHistoryItemType(item.type)}</h2>
<h2 className="text-sm">v{history.length - index}</h2> <h2 className="text-sm">v{index + 1}</h2>
</li> </li>
))} ))}
</ul> </ul>

16
frontend/src/components/history/utils.test.ts
View File

@ -3,10 +3,10 @@ import { extractHistoryTree } from "./utils";
const data = [ const data = [
{ {
type: "ai_edit" as const, type: "ai_create" as const,
code: "<html>3. edit with better icons and red text</html>", code: "<html>1. create</html>",
inputs: { inputs: {
prompt: "make text red", image_url: "",
}, },
}, },
{ {
@ -17,16 +17,16 @@ const data = [
}, },
}, },
{ {
type: "ai_create" as const, type: "ai_edit" as const,
code: "<html>1. create</html>", code: "<html>3. edit with better icons and red text</html>",
inputs: { inputs: {
image_url: "", prompt: "make text red",
}, },
}, },
]; ];
test("should only include history from this point onward", () => { test("should only include history from this point onward", () => {
expect(extractHistoryTree(data, 0)).toEqual([ expect(extractHistoryTree(data, 2)).toEqual([
"<html>1. create</html>", "<html>1. create</html>",
"use better icons", "use better icons",
"<html>2. edit with better icons</html>", "<html>2. edit with better icons</html>",
@ -34,5 +34,5 @@ test("should only include history from this point onward", () => {
"<html>3. edit with better icons and red text</html>", "<html>3. edit with better icons and red text</html>",
]); ]);
expect(extractHistoryTree(data, 2)).toEqual(["<html>1. create</html>"]); expect(extractHistoryTree(data, 0)).toEqual(["<html>1. create</html>"]);
}); });

24
frontend/src/components/history/utils.ts
View File

@ -4,21 +4,21 @@ export function extractHistoryTree(
history: History, history: History,
version: number version: number
): string[] { ): string[] {
// History is in reverse chronological order
// Get all history items up to the current version // Get all history items up to the current version
const extractedHistory = history.slice(version); const extractedHistory = history.slice(0, version + 1);
const obj: string[] = []; // Convert the history into a flat array of strings that the backend expects
const flatHistory: string[] = [];
// Reverse the history so that it is in chronological order for the server extractedHistory.forEach((item) => {
extractedHistory.reverse().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 // Don't include the image for ai_create since the server
if (item.type !== "ai_create") { // gets it passed and will include it directly
obj.push(item.inputs.prompt); flatHistory.push(item.code);
} else {
flatHistory.push(item.inputs.prompt);
flatHistory.push(item.code);
} }
obj.push(item.code);
}); });
return obj; return flatHistory;
} }