Skip to content

Commit dc6fc17

Browse files
tituschewxjtituschewxj
committed
feat: add loading icon
1 parent 983d9ae commit dc6fc17

File tree

1 file changed

+167
-148
lines changed

1 file changed

+167
-148
lines changed

‎apps/frontend/src/app/question/page.tsx‎

Lines changed: 167 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
Checkbox,
1919
Tooltip,
2020
Card,
21+
Spin,
2122
} from "antd";
2223
import { Content } from "antd/es/layout/layout";
2324
import {
@@ -293,8 +294,11 @@ export default function QuestionListPage() {
293294
return () => clearTimeout(timeout);
294295
}, [search]);
295296

297+
// Testcases
298+
296299
const [visibleTests, setVisibleTests] = useState<Test[]>([]);
297300
const [hiddenTests, setHiddenTests] = useState<Test[]>([]);
301+
const [isTestsLoading, setIsTestsLoading] = useState<boolean>(true);
298302

299303
const handleAddVisibleTest = () => {
300304
const newKey = uuidv4();
@@ -342,38 +346,41 @@ export default function QuestionListPage() {
342346
};
343347

344348
async function fetchTestsForQuestion(questionId: string) {
345-
try {
346-
const response = await ReadAllTestcases(questionId); // Replace with the actual API call to fetch tests
347-
const { visibleTests, hiddenTests } = response;
349+
setIsTestsLoading(true);
350+
ReadAllTestcases(questionId)
351+
.then((response) => {
352+
const { visibleTests, hiddenTests } = response;
348353

349-
// Add a unique key to each test
350-
if (visibleTests) {
351-
setVisibleTests(
352-
visibleTests.map((test) => ({
353-
...test,
354-
key: uuidv4(),
355-
}))
356-
);
357-
}
358-
if (hiddenTests) {
359-
setHiddenTests(
360-
hiddenTests.map((test) => ({
361-
...test,
362-
key: uuidv4(),
363-
}))
364-
);
365-
}
366-
} catch (err) {
367-
error("Error fetching tests for question.");
368-
}
354+
// Add a unique key to each test
355+
if (visibleTests) {
356+
setVisibleTests(
357+
visibleTests.map((test) => ({
358+
...test,
359+
key: uuidv4(),
360+
}))
361+
);
362+
}
363+
if (hiddenTests) {
364+
setHiddenTests(
365+
hiddenTests.map((test) => ({
366+
...test,
367+
key: uuidv4(),
368+
}))
369+
);
370+
}
371+
})
372+
.catch((err) => {
373+
error("Error fetching tests for question.");
374+
})
375+
.finally(() => {
376+
setIsTestsLoading(false);
377+
});
369378
}
370379

371380
async function deleteTestsByDocRefId(docRefId: string) {
372-
try {
373-
await DeleteTestcases(docRefId); // Replace with the actual API call
374-
} catch (err) {
381+
await DeleteTestcases(docRefId).catch((e) => {
375382
error("Error deleting tests associated with the question.");
376-
}
383+
});
377384
}
378385

379386
// Table column specification
@@ -533,69 +540,75 @@ export default function QuestionListPage() {
533540
}
534541
key="1"
535542
>
536-
<Tabs
537-
type="editable-card"
538-
onEdit={(targetKey, action) =>
539-
action === "add"
540-
? handleAddVisibleTest()
541-
: handleRemoveVisibleTest(targetKey.toString())
542-
}
543-
>
544-
{visibleTests.map((test: Test, index: number) => (
545-
<TabPane
546-
tab={`Test ${index + 1}`} // Dynamic numbering based on index
547-
key={test.key}
548-
closable={visibleTests.length > 1} // Restrict removing if only one visible test
549-
>
550-
<Form.Item
551-
label="Input"
552-
name={`visible-input-${test.key}`}
553-
rules={[
554-
{
555-
required: true,
556-
message: "Please enter input value",
557-
},
558-
]}
559-
>
560-
<Input
561-
placeholder="Input"
562-
value={test.input}
563-
onChange={(e) => {
564-
handleTestChange(
565-
"visible",
566-
index,
567-
e.target.value,
568-
undefined
569-
);
570-
}}
571-
/>
572-
</Form.Item>
573-
<Form.Item
574-
label="Expected"
575-
name={`visible-expected-${test.key}`}
576-
rules={[
577-
{
578-
required: true,
579-
message: "Please enter expected value",
580-
},
581-
]}
543+
{isTestsLoading ? (
544+
<Spin style={{ justifySelf: "center" }} />
545+
) : (
546+
<Tabs
547+
type="editable-card"
548+
onEdit={(targetKey, action) =>
549+
action === "add"
550+
? handleAddVisibleTest()
551+
: handleRemoveVisibleTest(targetKey.toString())
552+
}
553+
>
554+
{visibleTests.map((test: Test, index: number) => (
555+
<TabPane
556+
tab={`Test ${index + 1}`} // Dynamic numbering based on index
557+
key={test.key}
558+
closable={visibleTests.length > 1} // Restrict removing if only one visible test
582559
>
583-
<Input
584-
placeholder="Expected"
585-
value={test.expected}
586-
onChange={(e) => {
587-
handleTestChange(
588-
"visible",
589-
index,
590-
undefined,
591-
e.target.value
592-
);
593-
}}
594-
/>
595-
</Form.Item>
596-
</TabPane>
597-
))}
598-
</Tabs>
560+
<Form.Item
561+
label="Input"
562+
name={`visible-input-${test.key}`}
563+
initialValue={test.input}
564+
rules={[
565+
{
566+
required: true,
567+
message: "Please enter input value",
568+
},
569+
]}
570+
>
571+
<Input
572+
placeholder="Input"
573+
value={test.input}
574+
onChange={(e) => {
575+
handleTestChange(
576+
"visible",
577+
index,
578+
e.target.value,
579+
undefined
580+
);
581+
}}
582+
/>
583+
</Form.Item>
584+
<Form.Item
585+
label="Expected"
586+
name={`visible-expected-${test.key}`}
587+
initialValue={test.expected}
588+
rules={[
589+
{
590+
required: true,
591+
message: "Please enter expected value",
592+
},
593+
]}
594+
>
595+
<Input
596+
placeholder="Expected"
597+
value={test.expected}
598+
onChange={(e) => {
599+
handleTestChange(
600+
"visible",
601+
index,
602+
undefined,
603+
e.target.value
604+
);
605+
}}
606+
/>
607+
</Form.Item>
608+
</TabPane>
609+
))}
610+
</Tabs>
611+
)}
599612
</TabPane>
600613

601614
{/* Hidden Tests Tab */}
@@ -607,65 +620,71 @@ export default function QuestionListPage() {
607620
}
608621
key="2"
609622
>
610-
<Tabs
611-
type="editable-card"
612-
onEdit={(targetKey, action) =>
613-
action === "add"
614-
? handleAddHiddenTest()
615-
: handleRemoveHiddenTest(targetKey.toString())
616-
}
617-
>
618-
{hiddenTests.map((test: Test, index: number) => (
619-
<TabPane tab={`Test ${index + 1}`} key={test.key}>
620-
<Form.Item
621-
label="Input"
622-
name={`hidden-input-${test.key}`}
623-
rules={[
624-
{
625-
required: true,
626-
message: "Please enter input value",
627-
},
628-
]}
629-
>
630-
<Input
631-
placeholder="Input"
632-
value={test.input}
633-
onChange={(e) => {
634-
handleTestChange(
635-
"hidden",
636-
index,
637-
e.target.value,
638-
undefined
639-
);
640-
}}
641-
/>
642-
</Form.Item>
643-
<Form.Item
644-
label="Expected"
645-
name={`hidden-expected-${test.key}`}
646-
rules={[
647-
{
648-
required: true,
649-
message: "Please enter expected value",
650-
},
651-
]}
652-
>
653-
<Input
654-
placeholder="Expected"
655-
value={test.expected}
656-
onChange={(e) => {
657-
handleTestChange(
658-
"hidden",
659-
index,
660-
undefined,
661-
e.target.value
662-
);
663-
}}
664-
/>
665-
</Form.Item>
666-
</TabPane>
667-
))}
668-
</Tabs>
623+
{isTestsLoading ? (
624+
<Spin />
625+
) : (
626+
<Tabs
627+
type="editable-card"
628+
onEdit={(targetKey, action) =>
629+
action === "add"
630+
? handleAddHiddenTest()
631+
: handleRemoveHiddenTest(targetKey.toString())
632+
}
633+
>
634+
{hiddenTests.map((test: Test, index: number) => (
635+
<TabPane tab={`Test ${index + 1}`} key={test.key}>
636+
<Form.Item
637+
label="Input"
638+
name={`hidden-input-${test.key}`}
639+
initialValue={test.input}
640+
rules={[
641+
{
642+
required: true,
643+
message: "Please enter input value",
644+
},
645+
]}
646+
>
647+
<Input
648+
placeholder="Input"
649+
value={test.input}
650+
onChange={(e) => {
651+
handleTestChange(
652+
"hidden",
653+
index,
654+
e.target.value,
655+
undefined
656+
);
657+
}}
658+
/>
659+
</Form.Item>
660+
<Form.Item
661+
label="Expected"
662+
name={`hidden-expected-${test.key}`}
663+
initialValue={test.expected}
664+
rules={[
665+
{
666+
required: true,
667+
message: "Please enter expected value",
668+
},
669+
]}
670+
>
671+
<Input
672+
placeholder="Expected"
673+
value={test.expected}
674+
onChange={(e) => {
675+
handleTestChange(
676+
"hidden",
677+
index,
678+
undefined,
679+
e.target.value
680+
);
681+
}}
682+
/>
683+
</Form.Item>
684+
</TabPane>
685+
))}
686+
</Tabs>
687+
)}
669688
</TabPane>
670689
</Tabs>
671690
<Form.Item

0 commit comments

Comments
 (0)