Merge branch 'dev-nico' into 'master'

fix 'empty shopping basket' functionality

See merge request astron-sdc/esap-gui!55

src/components/basket/AddToBasketCheckBox.js

@@ -25,11 +25,7 @@ export default function AddToCheckout(props) {
     console.log('removeFromBasket: '+[removeFromBasketItem, basketContext]);
   }
 
-  // fake authentication when in 'development' mode.
-  // let authenticated = isAuthenticated || (process.env.NODE_ENV === "development")
-  let authenticated = isAuthenticated
-
-  if (authenticated){
+  if (isAuthenticated){
       //let datasets_in_basket = basketContext.datasets
       //console.log('datasets_in_basket: '+datasets_in_basket)
     return (

src/components/basket/EmptyBasketButton.js

@@ -9,7 +9,7 @@ import { saveBasket } from "./SaveBasketButton"
 export default function EmptyBasketButton(props) {
     const { api_host, isAuthenticated, isTokenValid, loginAgain } = useContext(GlobalContext);
     const basketContext = useContext(BasketContext);
-    const { setHasChanged } = useContext(BasketContext);
+    const { setHasChanged, refresh, setRefresh } = useContext(BasketContext);
     const [show, setShow] = useState(false);
 
     const handleClose = () => setShow(false);
@@ -18,15 +18,16 @@ export default function EmptyBasketButton(props) {
     let history = useHistory()
 
     function emptyBasket(basketContext , api_host, isTokenValid, loginAgain, history){
-        basketContext.setDatasets([])
+        basketContext.clear()
         setHasChanged(true)
         setShow(false)
-        saveBasket(basketContext , api_host, isTokenValid, loginAgain, history)
+        setRefresh(!refresh)
     }
 
 
     if (isAuthenticated)  {
-        if (basketContext.datasets!==[]) {
+        //alert(basketContext.datasets)
+        if (basketContext.datasets.length>0) {
             return (
                 <>
                 <Button
@@ -41,16 +42,16 @@ export default function EmptyBasketButton(props) {
                     <Modal.Header closeButton>
                         <Modal.Title>{getTrashIcon('black')}{' '}Empty Basket</Modal.Title>
                     </Modal.Header>
-                    <Modal.Body>Are you sure you want to empty the shopping basket?</Modal.Body>
+                    <Modal.Body><h5>Are you sure you want to empty the basket?</h5>
+                        <i>(don't forget to click 'Save Basket' afterward)</i>
+                    </Modal.Body>
                     <Modal.Footer>
                         <Button variant="success"
                                 onClick={() => emptyBasket(basketContext, api_host, isTokenValid, loginAgain, history)}
                         >
                             {getOKIcon()}{' '}OK
                         </Button>
-                        <Button variant="warning" onClick={handleClose}>
-                            Cancel
-                        </Button>
+
                     </Modal.Footer>
                 </Modal>
                 </>

src/components/basket/MyBasketPage.js

@@ -49,22 +49,12 @@ function renderRow(item) {
     }
 }
 
-export default function MyBasketPage() {
-    const { api_host, isAuthenticated } = useContext(GlobalContext);
-    const basketContext = useContext(BasketContext);
-    const { preview } = useContext(QueryContext);
-
-    // work on a local copy of datasets, to be able (un)(re)select items before saving
-    const [items, setItems] = useState(basketContext.datasets);
+function renderBasketPage(items) {
 
     if (!items) {
         return null
     }
 
-    //if (items.length === basketContext.datasets.length) {
-    //    basketContext.changed(false)
-    //}
-
     // parse the items and build a line to display
     let my_list = items.map((item, index) => {
         let id = `${index}`
@@ -83,7 +73,7 @@ export default function MyBasketPage() {
         <>
         <Container fluid>
             &nbsp;
-            <h3>Data Checkout &nbsp;&nbsp; <EmptyBasketButton/> <APIButton/></h3>
+            <h3>Data Shopping Basket &nbsp;&nbsp; <EmptyBasketButton/> <APIButton/></h3>
 
             <Table className="mt-3" responsive>
                 <thead>
@@ -105,3 +95,20 @@ export default function MyBasketPage() {
         </>
     );
 }
+
+export default function MyBasketPage() {
+    const { api_host, isAuthenticated } = useContext(GlobalContext);
+    const basketContext = useContext(BasketContext);
+    const { refresh } = useContext(BasketContext);
+    const { preview } = useContext(QueryContext);
+
+    // work on a local copy of datasets, to be able (un)(re)select items before saving
+    const [items, setItems] = useState(basketContext.datasets);
+
+    useEffect(() => {
+        //alert('refresh')
+        setItems(basketContext.datasets)
+    },[refresh])
+
+    return renderBasketPage(items)
+}

src/components/basket/SaveBasketButton.js

@@ -9,7 +9,7 @@ import { getShoppingIcon } from "../../utils/styling";
 
 export function saveBasket(basketContext, api_host, isTokenValid, loginAgain, history){
     const payload = {shopping_cart: basketContext.datasets};
-    console.log('saveBasket()')
+    console.log('saveBasket() '+payload)
     const profileUrl = api_host + "accounts/user-profiles/";
 
     // check if he token is still valid

src/contexts/BasketContext.js

@@ -6,6 +6,7 @@ export function BasketContextProvider({ children }) {
     const [datasets, setDatasets] = useState([]);
 
     const [hasChanged, setHasChanged] = useState(false);
+    const [refresh, setRefresh] = useState(false);
 
     function handleAddDataset(dataset) {
       setDatasets([...datasets, dataset]);
@@ -20,16 +21,22 @@ export function BasketContextProvider({ children }) {
       setHasChanged(true)
     }
 
+    function handleClearDatasets() {
+        const copy = []
+        setDatasets(copy);
+        setHasChanged(true)
+    }
+
     return (
       <BasketContext.Provider
         value={{
-            datasets,
-            setDatasets,
-            hasChanged,
-            setHasChanged,
+            datasets, setDatasets,
+            hasChanged, setHasChanged,
+            refresh, setRefresh,
             add: handleAddDataset,
             remove: handleRemoveDataset,
-            changed: setHasChanged
+            clear: handleClearDatasets,
+            changed: setHasChanged,
         }}
       >
       {children}

src/routes/Routes.js

@@ -87,7 +87,7 @@ export default function Routes() {
 
         </Switch>
 
-      <footer><small>esap-gui version 27 aug 2021 - 11:00</small></footer>
+      <footer><small>esap-gui version 27 aug 2021 - 14:00</small></footer>
     </Router>
   );
 }