Skip to content

Commit 31293b9

Browse files
matt-aitkenmatt-aitken
committed
Fix for glitchy hourglass animation
1 parent 153639f commit 31293b9

File tree

2 files changed

+122
-94
lines changed

2 files changed

+122
-94
lines changed

‎apps/webapp/app/assets/icons/AnimatedHourglassIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export function AnimatedHourglassIcon({
2121
],
2222
{ repeat: Infinity, delay }
2323
);
24-
});
24+
}, []);
2525

2626
return <HourglassIcon ref={scope} className={className} />;
2727
}

‎apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.waitpoints.$waitpointFriendlyId.complete/route.tsx‎

Lines changed: 121 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -74,23 +74,27 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
7474
throw new Error("Project not found");
7575
}
7676

77-
switch (submission.value.type) {
78-
case "DATETIME": {
79-
const waitpointId = WaitpointId.toId(waitpointFriendlyId);
77+
const waitpointId = WaitpointId.toId(waitpointFriendlyId);
8078

81-
const waitpoint = await $replica.waitpoint.findFirst({
82-
select: {
83-
projectId: true,
84-
},
85-
where: {
86-
id: waitpointId,
87-
},
88-
});
79+
const waitpoint = await $replica.waitpoint.findFirst({
80+
select: {
81+
projectId: true,
82+
},
83+
where: {
84+
id: waitpointId,
85+
},
86+
});
8987

90-
if (waitpoint?.projectId !== project.id) {
91-
throw new Error("Waitpoint not found");
92-
}
88+
if (waitpoint?.projectId !== project.id) {
89+
return redirectWithErrorMessage(
90+
submission.value.failureRedirect,
91+
request,
92+
"No waitpoint found"
93+
);
94+
}
9395

96+
switch (submission.value.type) {
97+
case "DATETIME": {
9498
const result = await engine.completeWaitpoint({
9599
id: waitpointId,
96100
});
@@ -102,6 +106,8 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
102106
);
103107
}
104108
case "MANUAL": {
109+
//todo packet
110+
//todo completeWaitpoint
105111
}
106112
}
107113
} catch (error: any) {
@@ -124,28 +130,6 @@ export function CompleteWaitpointForm({ waitpoint }: { waitpoint: FormWaitpoint
124130
const isLoading = navigation.state !== "idle";
125131
const organization = useOrganization();
126132
const project = useProject();
127-
const currentJson = useRef<string>("{\n\n}");
128-
const formAction = `/resources/orgs/${organization.slug}/projects/${project.slug}/waitpoints/${waitpoint.friendlyId}/complete`;
129-
130-
const submitForm = useCallback(
131-
(e: React.FormEvent<HTMLFormElement>) => {
132-
const formData = new FormData(e.currentTarget);
133-
const data: Record<string, string> = {
134-
type: formData.get("type") as string,
135-
failedRedirect: formData.get("failedRedirect") as string,
136-
successRedirect: formData.get("failedRedirect") as string,
137-
};
138-
139-
data.payload = currentJson.current;
140-
141-
submit(data, {
142-
action: formAction,
143-
method: "post",
144-
});
145-
e.preventDefault();
146-
},
147-
[currentJson]
148-
);
149133

150134
return (
151135
<div className="space-y-3">
@@ -161,62 +145,7 @@ export function CompleteWaitpointForm({ waitpoint }: { waitpoint: FormWaitpoint
161145
<>Waitpoint doesn't have a complete date</>
162146
)
163147
) : (
164-
<>
165-
<Form
166-
action={formAction}
167-
method="post"
168-
onSubmit={(e) => submitForm(e)}
169-
className="grid h-full max-h-full grid-rows-[2.5rem_1fr_2.5rem] overflow-hidden rounded-md border border-grid-bright"
170-
>
171-
<input type="hidden" name="type" value={waitpoint.type} />
172-
<div className="mx-3 flex items-center">
173-
<Paragraph variant="small/bright">Manually complete this waitpoint</Paragraph>
174-
</div>
175-
<div className="overflow-y-auto border-t border-grid-dimmed bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
176-
<div className="max-h-[70vh] min-h-40 overflow-y-auto bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
177-
<JSONEditor
178-
autoFocus
179-
defaultValue={currentJson.current}
180-
readOnly={false}
181-
basicSetup
182-
onChange={(v) => {
183-
currentJson.current = v;
184-
}}
185-
showClearButton={false}
186-
showCopyButton={false}
187-
height="100%"
188-
min-height="100%"
189-
max-height="100%"
190-
/>
191-
</div>
192-
</div>
193-
<div className="bg-charcoal-900 px-2">
194-
<div className="mb-2 flex items-center justify-end gap-2 border-t border-grid-dimmed pt-2">
195-
<Button
196-
variant="secondary/small"
197-
type="submit"
198-
disabled={isLoading}
199-
LeadingIcon={isLoading ? "spinner" : undefined}
200-
>
201-
{isLoading ? "Completing…" : "Complete waitpoint"}
202-
</Button>
203-
</div>
204-
</div>
205-
</Form>
206-
<CodeBlock
207-
rowTitle={
208-
<span className="-ml-1 flex items-center gap-1 text-text-dimmed">
209-
<InformationCircleIcon className="size-5 shrink-0 text-text-dimmed" />
210-
To complete this waitpoint in your code use:
211-
</span>
212-
}
213-
code={`
214-
await wait.completeToken<YourType>(tokenId,
215-
output
216-
);`}
217-
showLineNumbers={false}
218-
/>
219-
</>
148+
<CompleteManualWaitpointForm waitpoint={waitpoint} />
220149
)}
221150
</div>
222151
);
@@ -229,7 +158,6 @@ function CompleteDateTimeWaitpointForm({
229158
}) {
230159
const location = useLocation();
231160
const navigation = useNavigation();
232-
const submit = useSubmit();
233161
const isLoading = navigation.state !== "idle";
234162
const organization = useOrganization();
235163
const project = useProject();
@@ -292,3 +220,103 @@ function CompleteDateTimeWaitpointForm({
292220
</Form>
293221
);
294222
}
223+
224+
function CompleteManualWaitpointForm({ waitpoint }: { waitpoint: { friendlyId: string } }) {
225+
const location = useLocation();
226+
const navigation = useNavigation();
227+
const submit = useSubmit();
228+
const isLoading = navigation.state !== "idle";
229+
const organization = useOrganization();
230+
const project = useProject();
231+
const currentJson = useRef<string>("{\n\n}");
232+
const formAction = `/resources/orgs/${organization.slug}/projects/${project.slug}/waitpoints/${waitpoint.friendlyId}/complete`;
233+
234+
const submitForm = useCallback(
235+
(e: React.FormEvent<HTMLFormElement>) => {
236+
const formData = new FormData(e.currentTarget);
237+
const data: Record<string, string> = {
238+
type: formData.get("type") as string,
239+
failureRedirect: formData.get("failureRedirect") as string,
240+
successRedirect: formData.get("successRedirect") as string,
241+
};
242+
243+
data.payload = currentJson.current;
244+
245+
submit(data, {
246+
action: formAction,
247+
method: "post",
248+
});
249+
e.preventDefault();
250+
},
251+
[currentJson]
252+
);
253+
254+
return (
255+
<>
256+
<Form
257+
action={formAction}
258+
method="post"
259+
onSubmit={(e) => submitForm(e)}
260+
className="grid h-full max-h-full grid-rows-[2.5rem_1fr_2.5rem] overflow-hidden rounded-md border border-grid-bright"
261+
>
262+
<input type="hidden" name="type" value={"DATETIME"} />
263+
<input
264+
type="hidden"
265+
name="successRedirect"
266+
value={`${location.pathname}${location.search}`}
267+
/>
268+
<input
269+
type="hidden"
270+
name="failureRedirect"
271+
value={`${location.pathname}${location.search}`}
272+
/>
273+
<div className="mx-3 flex items-center">
274+
<Paragraph variant="small/bright">Manually complete this waitpoint</Paragraph>
275+
</div>
276+
<div className="overflow-y-auto border-t border-grid-dimmed bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
277+
<div className="max-h-[70vh] min-h-40 overflow-y-auto bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
278+
<JSONEditor
279+
autoFocus
280+
defaultValue={currentJson.current}
281+
readOnly={false}
282+
basicSetup
283+
onChange={(v) => {
284+
currentJson.current = v;
285+
}}
286+
showClearButton={false}
287+
showCopyButton={false}
288+
height="100%"
289+
min-height="100%"
290+
max-height="100%"
291+
/>
292+
</div>
293+
</div>
294+
<div className="bg-charcoal-900 px-2">
295+
<div className="mb-2 flex items-center justify-end gap-2 border-t border-grid-dimmed pt-2">
296+
<Button
297+
variant="secondary/small"
298+
type="submit"
299+
disabled={isLoading}
300+
LeadingIcon={isLoading ? "spinner" : undefined}
301+
>
302+
{isLoading ? "Completing…" : "Complete waitpoint"}
303+
</Button>
304+
</div>
305+
</div>
306+
</Form>
307+
<CodeBlock
308+
rowTitle={
309+
<span className="-ml-1 flex items-center gap-1 text-text-dimmed">
310+
<InformationCircleIcon className="size-5 shrink-0 text-text-dimmed" />
311+
To complete this waitpoint in your code use:
312+
</span>
313+
}
314+
code={`
315+
await wait.completeToken<YourType>(tokenId,
316+
output
317+
);`}
318+
showLineNumbers={false}
319+
/>
320+
</>
321+
);
322+
}

0 commit comments

Comments
 (0)