NERDDISCO commited on
Commit
9916364
•
1 Parent(s): 3516ec6

feat: extract form submit into own function

Browse files
Files changed (1) hide show
  1. src/components/GameCreator.tsx +55 -59
src/components/GameCreator.tsx CHANGED
@@ -137,6 +137,45 @@ export default function GameCreator() {
137
  };
138
  }, [subscribe, loadingLive]);
139
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
  const handleCancel = async () => {
141
  if (abortController.current) {
142
  abortController.current.abort();
@@ -186,13 +225,15 @@ export default function GameCreator() {
186
  >
187
  <AppBar position="static" elevation={0} color="default">
188
  <Toolbar>
189
- <Typography variant="h5" component="h2" sx={{ m: 0 }}>
190
- 2D GameCreator
191
- </Typography>
192
-
193
- <Typography variant="body2" sx={{ ml: 1, flex: 1 }}>
194
- v0.0.1
195
- </Typography>
 
 
196
 
197
  <IconButton
198
  color="inherit"
@@ -250,64 +291,16 @@ export default function GameCreator() {
250
  component="form"
251
  id="gpt-form"
252
  sx={{ p: 0, pt: 0 }}
253
- onSubmit={async event => {
254
- event.preventDefault();
255
- const formData = new FormData(event.target as HTMLFormElement);
256
- const formObject = Object.fromEntries(formData);
257
- try {
258
- setLoading(true);
259
-
260
- abortController.current = new AbortController();
261
-
262
- const {
263
- command,
264
- prompt,
265
- temperature,
266
- template,
267
- model,
268
- maxTokens,
269
- } = formObject;
270
-
271
- const client = createClient(
272
- formObject.openAIAPIKey as string
273
- );
274
- const answer = await toOpenAI({
275
- command: command as string,
276
- prompt: prompt as string,
277
- temperature: temperature as string,
278
- template: template as string,
279
- model: model as string,
280
- maxTokens: maxTokens as string,
281
- client,
282
- signal: abortController.current.signal,
283
- });
284
-
285
- setAnswers(previousAnswers => [answer, ...previousAnswers]);
286
- setRunningId(answer.id);
287
- setActiveId(answer.id);
288
- setTemplate(prettify(answer.content));
289
- setErrorMessage("");
290
- reload();
291
- } catch (error) {
292
- if (
293
- (error as { message?: string }).message !== "canceled"
294
- ) {
295
- setErrorMessage((error as AxiosError).message);
296
- console.error(error);
297
- }
298
- } finally {
299
- setLoading(false);
300
- }
301
- }}
302
  >
303
- <Stack sx={{ p: 1, pl: 0, gap: 2 }}>
304
  <Secret label="OpenAI API Key" name="openAIAPIKey" />
305
 
306
  <Stack direction="row" spacing={1}>
307
  <TextField
308
  multiline
309
  fullWidth
310
- variant="outlined"
311
  required
312
  id="prompt"
313
  name="prompt"
@@ -524,7 +517,10 @@ export default function GameCreator() {
524
  </Stack>
525
  </Box>
526
 
527
- <Paper variant="elevation" sx={{ p: 1, pl: 0, overflow: "auto" }}>
 
 
 
528
  <List sx={{ flex: 1, p: 0 }}>
529
  <ListSubheader
530
  sx={{
 
137
  };
138
  }, [subscribe, loadingLive]);
139
 
140
+ const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
141
+ event.preventDefault();
142
+ const formData = new FormData(event.target as HTMLFormElement);
143
+ const formObject = Object.fromEntries(formData);
144
+ try {
145
+ setLoading(true);
146
+
147
+ abortController.current = new AbortController();
148
+
149
+ const { command, prompt, temperature, template, model, maxTokens } = formObject;
150
+
151
+ const client = createClient(formObject.openAIAPIKey as string);
152
+ const answer = await toOpenAI({
153
+ command: command as string,
154
+ prompt: prompt as string,
155
+ temperature: temperature as string,
156
+ template: template as string,
157
+ model: model as string,
158
+ maxTokens: maxTokens as string,
159
+ client,
160
+ signal: abortController.current.signal,
161
+ });
162
+
163
+ setAnswers(previousAnswers => [answer, ...previousAnswers]);
164
+ setRunningId(answer.id);
165
+ setActiveId(answer.id);
166
+ setTemplate(prettify(answer.content));
167
+ setErrorMessage("");
168
+ reload();
169
+ } catch (error) {
170
+ if ((error as { message?: string }).message !== "canceled") {
171
+ setErrorMessage((error as AxiosError).message);
172
+ console.error(error);
173
+ }
174
+ } finally {
175
+ setLoading(false);
176
+ }
177
+ };
178
+
179
  const handleCancel = async () => {
180
  if (abortController.current) {
181
  abortController.current.abort();
 
225
  >
226
  <AppBar position="static" elevation={0} color="default">
227
  <Toolbar>
228
+ <Stack sx={{ alignItems: "baseline", flex: 1 }} direction="row">
229
+ <Typography variant="h5" component="h2" sx={{ m: 0 }}>
230
+ 2D GameCreator
231
+ </Typography>
232
+
233
+ <Typography variant="body2" sx={{ ml: 1 }}>
234
+ v1.0.0
235
+ </Typography>
236
+ </Stack>
237
 
238
  <IconButton
239
  color="inherit"
 
291
  component="form"
292
  id="gpt-form"
293
  sx={{ p: 0, pt: 0 }}
294
+ onSubmit={handleSubmit}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
295
  >
296
+ <Stack sx={{ p: 1, pl: 0, gap: 1 }}>
297
  <Secret label="OpenAI API Key" name="openAIAPIKey" />
298
 
299
  <Stack direction="row" spacing={1}>
300
  <TextField
301
  multiline
302
  fullWidth
303
+ variant="filled"
304
  required
305
  id="prompt"
306
  name="prompt"
 
517
  </Stack>
518
  </Box>
519
 
520
+ <Paper
521
+ variant="elevation"
522
+ sx={{ p: 1, pl: 0, pt: 0, overflow: "auto" }}
523
+ >
524
  <List sx={{ flex: 1, p: 0 }}>
525
  <ListSubheader
526
  sx={{