botw-schedule - add a clear button

Plebeian-Technology · Nov 15, 2024 · aeb2a64 · aeb2a64
1 parent 85c4fa3
commit aeb2a64
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/app/frontend/components/bill/creator/BillCreatorFormikForm.tsx b/app/frontend/components/bill/creator/BillCreatorFormikForm.tsx
@@ -1,4 +1,4 @@
-import { Support } from "app/frontend/sway_constants";
+import { ROUTES, Support } from "app/frontend/sway_constants";
 import { Form as FormikForm, useFormikContext } from "formik";
 import { Button } from "react-bootstrap";
 import { FiSave } from "react-icons/fi";
@@ -9,9 +9,10 @@ import SwaySpinner from "app/frontend/components/SwaySpinner";
 
 import BillComponent from "app/frontend/components/bill/BillComponent";
 
-import { usePage } from "@inertiajs/react";
+import { router, usePage } from "@inertiajs/react";
 import { ISubmitValues } from "app/frontend/components/admin/types";
 import { TempBillStorage } from "app/frontend/components/bill/creator/TempBillStorage";
+import { useSearchParams } from "app/frontend/hooks/useSearchParams";
 import { logDev } from "app/frontend/sway_utils";
 import { forwardRef, useEffect, useMemo, useState } from "react";
 
@@ -124,11 +125,29 @@ const BillCreatorFormikForm = forwardRef(({ setCreatorDirty }: IProps, _summaryR
         [formik.values.legislator?.value, legislators],
     );
 
+    const params = useSearchParams();
+
     return (
         <>
             <FormikForm>
-                <div className={countdown >= 0 && countdown <= 3 ? "visible my-2" : "invisible my-2"}>
-                    Store Temporary Bill in: {countdown}
+                <div className="row my-2">
+                    <div className="col">
+                        <span className={countdown >= 0 && countdown <= 3 ? "visible" : "invisible"}>
+                            Store Temporary Bill in: {countdown}
+                        </span>
+                    </div>
+                    <div className="col text-end">
+                        <Button
+                            variant="outline-secondary"
+                            onClick={() => {
+                                TempBillStorage.remove();
+                                formik.resetForm();
+                                router.get(`${ROUTES.billOfTheWeekCreator}?${params.qs}`);
+                            }}
+                        >
+                            Reset To New Bill
+                        </Button>
+                    </div>
                 </div>
                 <BillCreatorFields ref={summaryRef} />
                 <div className="mx-auto text-center p-5">

diff --git a/app/frontend/components/bill/creator/BillOfTheWeekCreator.tsx b/app/frontend/components/bill/creator/BillOfTheWeekCreator.tsx
@@ -103,7 +103,7 @@ const BillOfTheWeekCreator_: React.FC<IProps> = ({ bills, bill, user, tabKey = E
                 <div className="row align-items-center">
                     <div className="col">
                         <Form.Label className="my-0 bold">Sway Locale</Form.Label>
-                        <LocaleSelector callback={TempBillStorage.remove} />
+                        <LocaleSelector callahead={TempBillStorage.remove} />
                     </div>
                 </div>
 
@@ -119,8 +119,8 @@ const BillOfTheWeekCreator_: React.FC<IProps> = ({ bills, bill, user, tabKey = E
                                 menuPortalTarget={document.body}
                                 menuPosition="fixed"
                                 onChange={(o) => {
-                                    handleChangeBill(o);
                                     TempBillStorage.remove();
+                                    handleChangeBill(o);
                                 }}
                             />
                         </div>
@@ -159,7 +159,7 @@ const BillOfTheWeekCreator_: React.FC<IProps> = ({ bills, bill, user, tabKey = E
                 <Tab.Content className="mt-3">
                     <Tab.Pane title="Bill Creator" eventKey={ETab.Creator}>
                         <Suspense fallback={<ProgressBar animated striped now={100} />}>
-                            {tabKey === ETab.Creator && <BillCreator setCreatorDirty={setCreatorDirty} />}
+                            {(!tabKey || tabKey === ETab.Creator) && <BillCreator setCreatorDirty={setCreatorDirty} />}
                         </Suspense>
                     </Tab.Pane>
                     <Tab.Pane title="Schedule" eventKey={ETab.Schedule}>

diff --git a/app/frontend/components/user/LocaleSelector.tsx b/app/frontend/components/user/LocaleSelector.tsx
@@ -9,12 +9,12 @@ import { REACT_SELECT_STYLES } from "../../sway_utils";
 
 interface IProps {
     containerStyle?: React.CSSProperties;
-    callback?: () => void;
+    callahead?: () => void;
 }
 
 const toSelectOption = (l: sway.ISwayLocale): ISelectOption => ({ label: toFormattedLocaleName(l.name), value: l.id });
 
-const LocaleSelector: React.FC<IProps> = ({ callback }) => {
+const LocaleSelector: React.FC<IProps> = ({ callahead }) => {
     const { options } = useLocales();
     const [locale, getLocale] = useLocale();
 
@@ -31,11 +31,11 @@ const LocaleSelector: React.FC<IProps> = ({ callback }) => {
     const handleChange = useCallback(
         (o: SingleValue<ISelectOption>) => {
             if (o) {
+                callahead?.();
                 getLocale(Number(o.value));
-                callback?.();
             }
         },
-        [getLocale, callback],
+        [getLocale, callahead],
     );
 
     return (