From 6ebc2f300eadc85ff05d9a12817265e5d8acdeb4 Mon Sep 17 00:00:00 2001
From: Ashhhleyyy <ash@ashhhleyyy.dev>
Date: Tue, 26 Jul 2022 22:03:00 +0100
Subject: [PATCH] fix: lock transcribe fields when submitting

---
 pages/comic/[comic]/transcribe/[page].tsx | 26 ++++++++++++++---------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/pages/comic/[comic]/transcribe/[page].tsx b/pages/comic/[comic]/transcribe/[page].tsx
index 75ee567..3467687 100644
--- a/pages/comic/[comic]/transcribe/[page].tsx
+++ b/pages/comic/[comic]/transcribe/[page].tsx
@@ -65,6 +65,7 @@ export default function TranscribePage(props: Props) {
     const [indicateNumbers, setIndicateNumbers] = useState(false);
     const [lockAreas, setLockAreas] = useState(false);
     const [selectedBubble, setSelectedBubble] = useState(-1);
+    const [saving, setSaving] = useState(false);
 
     const extractText = useCallback(() => {
         if (image && regions.length > 0) {
@@ -94,6 +95,7 @@ export default function TranscribePage(props: Props) {
     }, [props.characters]);
 
     async function submitBubbles() {
+        setSaving(true);
         const res = await fetch('/api/submit-page-bubbles', {
             method: 'PUT',
             headers: {
@@ -139,11 +141,10 @@ export default function TranscribePage(props: Props) {
                 pageId: props.page.id,
             }),
         });
-        if (res.ok) {
-            console.log('submitted!');
-        } else {
-            console.log('failed to submit:', res.status, res.statusText);
+        if (!res.ok) {
+            alert(`failed to submit: ${res.status}, ${res.statusText}`);
         }
+        setSaving(false);
     }
 
     return (
@@ -218,7 +219,7 @@ export default function TranscribePage(props: Props) {
                     <AreaSelector
                         areas={regions.map((r) => r.area)}
                         onChange={(areas) =>
-                            !lockAreas &&
+                            !lockAreas && !saving &&
                             setRegions(
                                 areas.map((area, i) => {
                                     if (i < regions.length) {
@@ -239,13 +240,13 @@ export default function TranscribePage(props: Props) {
                         }
                         globalAreaStyle={{
                             border: `1.5px dashed ${randomColour(
-                                props.page.comic.id,
+                                props.page.id,
                                 0.3,
                                 0.49,
                                 0.5
                             )}`,
                             backgroundColor: randomColour(
-                                props.page.comic.id,
+                                props.page.id,
                                 undefined,
                                 undefined,
                                 0.5
@@ -268,12 +269,13 @@ export default function TranscribePage(props: Props) {
                 </section>
                 <section className='flex-1'>
                     <div>
-                        <Button onClick={extractText}>Extract text</Button>
+                        <Button disabled={saving} onClick={extractText}>Extract text</Button>
                         <br />
                         <label htmlFor='indicate-numbers'>
                             <input
                                 id='indicate-numbers'
                                 type='checkbox'
+                                disabled={saving}
                                 value={indicateNumbers.toString()}
                                 onChange={(e) =>
                                     setIndicateNumbers(e.target.checked)
@@ -289,6 +291,7 @@ export default function TranscribePage(props: Props) {
                                 id='lock-areas'
                                 type='checkbox'
                                 value={lockAreas.toString()}
+                                disabled={saving}
                                 onChange={(e) => setLockAreas(e.target.checked)}
                             />
                             Lock areas
@@ -309,6 +312,7 @@ export default function TranscribePage(props: Props) {
                                 <TextInput
                                     multiline
                                     className='w-full h-24'
+                                    disabled={saving}
                                     value={regions[selectedBubble].text}
                                     onChange={(e) => {
                                         const newRegions = regions.slice();
@@ -320,6 +324,7 @@ export default function TranscribePage(props: Props) {
 
                                 <Select
                                     className='text-slate-900'
+                                    isDisabled={saving}
                                     onChange={(v) => {
                                         const newRegions = regions.slice();
                                         newRegions[selectedBubble].character =
@@ -332,6 +337,7 @@ export default function TranscribePage(props: Props) {
 
                                 <Button
                                     className='mt-2 w-full'
+                                    disabled={saving}
                                     onClick={() => {
                                         const newRegions = regions.filter(
                                             (_, i) => i !== selectedBubble
@@ -354,7 +360,7 @@ export default function TranscribePage(props: Props) {
                                 <div
                                     key={i}
                                     onClick={() =>
-                                        setSelectedBubble(
+                                        !saving && setSelectedBubble(
                                             selectedBubble === i ? -1 : i
                                         )
                                     }
@@ -378,7 +384,7 @@ export default function TranscribePage(props: Props) {
                     <hr className='border-slate-600 my-2' />
 
                     <div>
-                        <Button onClick={submitBubbles}>Save!</Button>
+                        <Button disabled={saving} onClick={submitBubbles}>Save!</Button>
                     </div>
                 </section>
             </div>