From 820eca4c27701657992273f5076fe1cf0245e21c Mon Sep 17 00:00:00 2001
From: Darin Alleman <darin.alleman@gmail.com>
Date: Sun, 10 Jan 2021 22:05:38 -0500
Subject: [PATCH] Add unsaved changes alert for pack changes

---
 frontend/package.json                  |  1 +
 frontend/src/app/PackForm/PackForm.tsx | 39 +++++++++++++++++++-------
 frontend/src/index.tsx                 |  5 +++-
 frontend/src/styles/style.less         | 14 +++++++++
 4 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 2082fdb..72350fd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -63,6 +63,7 @@
     "react-ga": "^2.5.6",
     "react-linkify": "^1.0.0-alpha",
     "react-router-dom": "^5.0.1",
+    "react-router-navigation-confirm": "^1.1.7",
     "react-select": "^3.1.0",
     "recharts": "^1.7.1",
     "resolve": "1.10.0",
diff --git a/frontend/src/app/PackForm/PackForm.tsx b/frontend/src/app/PackForm/PackForm.tsx
index ddd5b44..626ab93 100644
--- a/frontend/src/app/PackForm/PackForm.tsx
+++ b/frontend/src/app/PackForm/PackForm.tsx
@@ -20,16 +20,18 @@ import PackItems from "app/components/PackItems";
 import { alertError, alertSuccess } from "app/components/Notifications";
 import Loading from "app/components/Loading";
 import { useSidebar } from "app/components/Sidebar/Context";
+import { NavigationConfirmModal } from 'react-router-navigation-confirm';
 
-import { PageTitle, Controls, Box, Grid } from "styles/common";
+import { PageTitle, Controls, Box, Grid, PageDescription } from "styles/common";
 
 const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exportItems, getItems, createPack, updatePack, user }) => {
     const [loading, setLoading] = React.useState<boolean>(true);
     const [inventory, setInventory] = React.useState<Item[]>([]);
     const [packItems, setPackItems] = React.useState<PackItem[]>([]);
     const [packData, setPackData] = React.useState<Pack | null>(null);
+    const [hasPendingChanges, setHasPendingChanges] = React.useState<boolean>(false);
     const { dispatch } = useSidebar();
-
+    
     React.useEffect(() => {
         setLoading(true);
         async function fetchData(id: number) {
@@ -64,11 +66,13 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
 
     const addItem = (item: Item) => {
         const items = Object.assign([], [...packItems, { ...item, packItem: { notes: '', quantity: 1, worn: false } }]);
+        setHasPendingChanges(true);
         setPackItems(items);
     };
 
     const removeItem = (itemId: number) => {
         const items = packItems.filter(i => i.id !== itemId);
+        setHasPendingChanges(true);
         setPackItems(items);
     };
 
@@ -76,6 +80,7 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
         const items: PackItem[] = Object.assign([], packItems);
         const idx = items.findIndex(item => item.id === itemId);
         items[idx].packItem[field] = value;
+        setHasPendingChanges(true);
         setPackItems(items);
     };
 
@@ -135,7 +140,10 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
                             id: packId
                         });
                         updatePack(payload)
-                            .then(() => alertSuccess({ message: 'Packing list saved' }))
+                            .then(() => {
+                                alertSuccess({ message: 'Packing list saved' });
+                                setHasPendingChanges(false);
+                            })
                             .catch(() => alertError({ message: 'Error saving packing list' }));
                     }
                 }}>
@@ -174,12 +182,12 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
                                                error={wasSubmitted && !!errors.title}
                                                errorMsg={errors.title}
                                                value={values.title}
-                                               onChange={v => setFieldValue('title', v)}/>
+                                               onChange={v => {setFieldValue('title', v); setHasPendingChanges(true);}}/>
 
                                         <Textarea label="Field Notes"
                                                   placeholder="Additional notes about this trip..."
                                                   value={values.description || ''}
-                                                  onChange={v => setFieldValue('description', v)}
+                                                  onChange={v => {setFieldValue('description', v);setHasPendingChanges(true);}}
                                                   last={true}/>
                                     </div>
                                     <div className="third">
@@ -190,10 +198,11 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
                                                        placeholder="1"
                                                        value={values.duration || ''}
                                                        onChange={v => {
-                                                           setFieldValue('duration', v);
+                                                           setFieldValue('duration', v); 
                                                            if (!values.duration_unit) {
                                                                setFieldValue('duration_unit', DurationUnit.DAYS)
                                                            }
+                                                           setHasPendingChanges(true);
                                                        }}/>
                                             </Col>
                                             <Col span={12}>
@@ -201,21 +210,21 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
                                                         defaultValue={durationUnit}
                                                         value={durationUnit}
                                                         options={durationUnitOptions()}
-                                                        onChange={(option: Option<string>) => setFieldValue('duration_unit', option.value)}
+                                                        onChange={(option: Option<string>) => {setFieldValue('duration_unit', option.value); setHasPendingChanges(true);}}
                                                         style={{ marginTop: '14px' }}/>
                                             </Col>
                                         </Row>
                                         <Input label="Temp Range"
                                                placeholder="43° - 81° F"
                                                value={values.temp_range || ''}
-                                               onChange={v => setFieldValue('temp_range', v)}
+                                               onChange={v => {setFieldValue('temp_range', v); setHasPendingChanges(true);}}
                                         />
                                         <Row gutter={8}>
                                             <Col span={12}>
                                                 <Input label="Season"
                                                        placeholder="Summer"
                                                        value={values.season || ''}
-                                                       onChange={v => setFieldValue('season', v)}
+                                                       onChange={v => {setFieldValue('season', v); setHasPendingChanges(true);}}
                                                        last={true}
                                                 />
                                             </Col>
@@ -227,7 +236,7 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
                                                             value: values.gender,
                                                             label: values.gender
                                                         }}
-                                                        onChange={(option: Option<string>) => setFieldValue('gender', option.value)}
+                                                        onChange={(option: Option<string>) => {setFieldValue('gender', option.value); setHasPendingChanges(true);}}
                                                         last={true}
                                                 />
                                             </Col>
@@ -248,6 +257,16 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
                                        weightUnit={user.default_weight_unit}
                                        removeItem={removeItem}
                                        updateItem={updateItem}/>
+                            <NavigationConfirmModal
+                                when={hasPendingChanges}
+                                buttonClassName="ant-btn"
+                                buttonConfirmClassName="ant-btn-primary"
+                                footerClassName="navigation-confirm-modal-footer"
+                                bodyClassName="navigation-confirm-modal-body"
+                                confirmText="Yes"
+                                cancelText="No">
+                                    <PageDescription><div style={{textAlign: "center"}}>You have unsaved changes. Are you sure you want to leave this page?</div></PageDescription>
+                                </NavigationConfirmModal>
                         </>
                     )
                 }}
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 386c8ea..81c38b3 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -9,6 +9,7 @@ import App from './App';
 import * as serviceWorker from './serviceWorker';
 import { AppProvider } from './AppContext';
 import WithAnalytics from 'app/components/higher-order/with-analytics';
+import { HistoryListener } from 'react-router-navigation-confirm';
 
 import { theme } from 'styles/theme';
 import 'styles/style.less';
@@ -22,7 +23,9 @@ ReactDOM.render(
                 <Router>
                     <Route render={(props) => (
                         <WithAnalytics {...props}>
-                            <App/>
+                            <HistoryListener>
+                                <App/>
+                            </HistoryListener>
                         </WithAnalytics>
                     )}/>
                 </Router>
diff --git a/frontend/src/styles/style.less b/frontend/src/styles/style.less
index 98b62bf..e9192e5 100644
--- a/frontend/src/styles/style.less
+++ b/frontend/src/styles/style.less
@@ -116,6 +116,20 @@ body {
   }
 }
 
+.navigation-confirm-modal-footer {
+  font-family: "Open Sans", sans-serif;
+  margin:.3em;
+  float:right;
+  button {
+    margin:.3em;
+  }
+}
+
+.navigation-confirm-modal-body {
+  font-family: "Open Sans", sans-serif;
+  margin: .8em .5em;
+}
+
 @media screen and (max-width: 660px) {
   html {
     font-size: .85em;