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

feat: refactor app status type

Browse Source
This commit is contained in:
clean99 2023-11-21 15:54:01 +08:00
parent b283d39d81
commit 2f1745a0b5
2 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/App.tsx
View File

@ -17,7 +17,7 @@ import { Textarea } from "@/components/ui/textarea";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
import CodeMirror from "./components/CodeMirror"; import CodeMirror from "./components/CodeMirror";
import SettingsDialog from "./components/SettingsDialog"; import SettingsDialog from "./components/SettingsDialog";
import { Settings } from "./types"; import { AppStatus, Settings } from "./types";
import { IS_RUNNING_ON_CLOUD } from "./config"; import { IS_RUNNING_ON_CLOUD } from "./config";
import { PicoBadge } from "./components/PicoBadge"; import { PicoBadge } from "./components/PicoBadge";
import { OnboardingNote } from "./components/OnboardingNote"; import { OnboardingNote } from "./components/OnboardingNote";
@ -26,8 +26,8 @@ import { UrlInputSection } from "./components/UrlInputSection";
import TermsOfServiceDialog from "./components/TermsOfServiceDialog"; import TermsOfServiceDialog from "./components/TermsOfServiceDialog";
function App() { function App() {
const [appState, setAppState] = useState<"INITIAL" | "CODING" | "CODE_READY">( const [appState, setAppState] = useState<AppStatus>(
"INITIAL" AppStatus.INITIAL
); );
const [generatedCode, setGeneratedCode] = useState<string>(""); const [generatedCode, setGeneratedCode] = useState<string>("");
const [referenceImages, setReferenceImages] = useState<string[]>([]); const [referenceImages, setReferenceImages] = useState<string[]>([]);
@ -62,7 +62,7 @@ function App() {
}; };
const reset = () => { const reset = () => {
setAppState("INITIAL"); setAppState(AppStatus.INITIAL);
setGeneratedCode(""); setGeneratedCode("");
setReferenceImages([]); setReferenceImages([]);
setExecutionConsole([]); setExecutionConsole([]);
@ -71,7 +71,7 @@ function App() {
function doGenerateCode(params: CodeGenerationParams) { function doGenerateCode(params: CodeGenerationParams) {
setExecutionConsole([]); setExecutionConsole([]);
setAppState("CODING"); setAppState(AppStatus.CODING);
// Merge settings with params // Merge settings with params
const updatedParams = { ...params, ...settings }; const updatedParams = { ...params, ...settings };
@ -81,7 +81,7 @@ function App() {
(token) => setGeneratedCode((prev) => prev + token), (token) => setGeneratedCode((prev) => prev + token),
(code) => setGeneratedCode(code), (code) => setGeneratedCode(code),
(line) => setExecutionConsole((prev) => [...prev, line]), (line) => setExecutionConsole((prev) => [...prev, line]),
() => setAppState("CODE_READY") () => setAppState(AppStatus.CODE_READY)
); );
} }
@ -122,7 +122,7 @@ function App() {
<h1 className="text-2xl ">Screenshot to Code</h1> <h1 className="text-2xl ">Screenshot to Code</h1>
<SettingsDialog settings={settings} setSettings={setSettings} /> <SettingsDialog settings={settings} setSettings={setSettings} />
</div> </div>
{appState === "INITIAL" && ( {appState === AppStatus.INITIAL && (
<h2 className="text-sm text-gray-500 mb-2"> <h2 className="text-sm text-gray-500 mb-2">
Drag & drop a screenshot to get started. Drag & drop a screenshot to get started.
</h2> </h2>
@ -130,10 +130,10 @@ function App() {
{IS_RUNNING_ON_CLOUD && !settings.openAiApiKey && <OnboardingNote />} {IS_RUNNING_ON_CLOUD && !settings.openAiApiKey && <OnboardingNote />}
{(appState === "CODING" || appState === "CODE_READY") && ( {(appState === AppStatus.CODING || appState === AppStatus.CODE_READY) && (
<> <>
{/* Show code preview only when coding */} {/* Show code preview only when coding */}
{appState === "CODING" && ( {appState === AppStatus.CODING && (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex items-center gap-x-1"> <div className="flex items-center gap-x-1">
<Spinner /> <Spinner />
@ -143,7 +143,7 @@ function App() {
</div> </div>
)} )}
{appState === "CODE_READY" && ( {appState === AppStatus.CODE_READY && (
<div> <div>
<div className="grid w-full gap-2"> <div className="grid w-full gap-2">
<Textarea <Textarea
@ -176,7 +176,7 @@ function App() {
<div className="flex flex-col"> <div className="flex flex-col">
<div <div
className={classNames({ className={classNames({
"scanning relative": appState === "CODING", "scanning relative": appState === AppStatus.CODING,
})} })}
> >
<img <img
@ -209,7 +209,7 @@ function App() {
</div> </div>
<main className="py-2 lg:pl-96"> <main className="py-2 lg:pl-96">
{appState === "INITIAL" && ( {appState === AppStatus.INITIAL && (
<div className="flex flex-col justify-center items-center gap-y-10"> <div className="flex flex-col justify-center items-center gap-y-10">
<ImageUpload setReferenceImages={doCreate} /> <ImageUpload setReferenceImages={doCreate} />
<UrlInputSection <UrlInputSection
@ -219,7 +219,7 @@ function App() {
</div> </div>
)} )}
{(appState === "CODING" || appState === "CODE_READY") && ( {(appState === AppStatus.CODING || appState === AppStatus.CODE_READY) && (
<div className="ml-4"> <div className="ml-4">
<Tabs defaultValue="desktop"> <Tabs defaultValue="desktop">
<div className="flex justify-end mr-8 mb-4"> <div className="flex justify-end mr-8 mb-4">

6
frontend/src/types.ts
View File

@ -4,3 +4,9 @@ export interface Settings {
isImageGenerationEnabled: boolean; isImageGenerationEnabled: boolean;
editorTheme: string; editorTheme: string;
} }
export enum AppStatus {
INITIAL = "INITIAL",
CODING = "CODING",
CODE_READY = "CODE_READY",
}