Last Accession is not removed from the list

locales/en/translations.json

@@ -493,6 +493,7 @@
         "title": "Selected accessions",
         "subTitle": "As you explore the millions of accessions held in Genesys, you can create your own list to keep track of the results of your search. Your selections are stored here so you can return to them at any time.",
         "sendRequest": "Send request",
+        "clearMyList": "Clear list",
         "noAccessions": "You have not added any accessions to the list."
       }
     }

src/list/reducers/public.ts

@@ -27,7 +27,6 @@ export default function listPublic(state = INITIAL_STATE, action: { type?: strin
           count: {$apply: (oldCount) => oldCount + 1},
           accessions: {$push: [action.payload]},
         },
-        accessions: {$set: []},
       });
     }
     case MY_LIST_ACCESSION_REMOVE: {

src/list/translations.json

@@ -5,6 +5,7 @@
         "title": "Selected accessions",
         "subTitle": "As you explore the millions of accessions held in Genesys, you can create your own list to keep track of the results of your search. Your selections are stored here so you can return to them at any time.",
         "sendRequest": "Send request",
+        "clearMyList": "Clear list",
         "noAccessions": "You have not added any accessions to the list."
       }
     }

src/list/ui/BrowsePage.tsx

@@ -10,11 +10,13 @@ import ContentHeader from 'ui/common/heading/ContentHeader';
 import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
 import ActionButton from 'ui/common/buttons/ActionButton';
 import navigateTo from 'actions/navigation';
+import {clearMyList} from 'list/actions/public';
 
 interface IMyListPageProps extends React.ClassAttributes<any> {
   myList: any[];
   navigateTo: any;
   t: any;
+  clearMyList: () => void;
 }
 
 class MyListPage extends React.Component<IMyListPageProps> {
@@ -39,6 +41,10 @@ class MyListPage extends React.Component<IMyListPageProps> {
       AccessionService.listAllByUuid(myList).then((accessions) => {
         this.setState({accessions});
       });
+    } else {
+      if (myList.length === 0) {
+        this.setState({accessions: []});
+      }
     }
   }
 
@@ -47,6 +53,11 @@ class MyListPage extends React.Component<IMyListPageProps> {
      navigateTo('/requests/create');
   }
 
+  private clearListAction = () => {
+    const {clearMyList} = this.props;
+    clearMyList();
+  }
+
   public render() {
     const {accessions} = this.state;
     const {t} =  this.props;
@@ -61,7 +72,12 @@ class MyListPage extends React.Component<IMyListPageProps> {
             <div>
               <ContentHeaderWithButton
                 title={ `${accessions.length} ${ t('accessions.common.modelName', {count: accessions.length})}` }
-                buttons={ <ActionButton title={ t('list.public.p.browse.sendRequest') } action={ this.sendRequestAction }/> }
+                buttons={
+                  <div>
+                    <ActionButton title={ t('list.public.p.browse.sendRequest') } action={ this.sendRequestAction }/>
+                    <ActionButton title={ t('list.public.p.browse.clearMyList') } action={ this.clearListAction }/>
+                  </div>
+                }
               />
               { accessions.map((accession, index) => <div key={ index } className="pr-20 pb-10 pt-10 pl-20"><AccessionCard index={ index } accession={ accession }/></div>) }
             </div>
@@ -81,6 +97,7 @@ const mapStateToProps = (state, ownProps) => ({
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({
   navigateTo,
+  clearMyList,
 }, dispatch);