File can be unloaded from the menu

arbre-app · Feb 5, 2021 · fc5b2ef · fc5b2ef
1 parent 9ed51d2
commit fc5b2ef
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 12 deletions.
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -2,6 +2,8 @@
   "menu.about": "About",
   "menu.overview": "Overview",
   "menu.explore": "Explore",
+  "menu.file.title": "File",
+  "menu.file.close": "Close file",
   "menu.search.placeholder": "Global search...",
   "menu.language.title": "Language",
   "menu.language.contribute": "Contribute",

diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
@@ -2,6 +2,8 @@
   "menu.about": "À propos",
   "menu.overview": "Aperçu",
   "menu.explore": "Explorer",
+  "menu.file.title": "Fichier",
+  "menu.file.close": "Fermer le fichier",
   "menu.search.placeholder": "Recherche globale...",
   "menu.language.title": "Langue",
   "menu.language.contribute": "Contribuer",

diff --git a/src/pages/mixed/PageChangelog/changelog.json b/src/pages/mixed/PageChangelog/changelog.json
@@ -44,6 +44,10 @@
       {
         "en": "The spouses are now sorted according to the FAMS field if available",
         "fr": "Les conjoints sont triés par rapport au champ FAMS si disponible"
+      },
+      {
+        "en": "The file can be unloaded without having to refresh the page",
+        "fr": "Le fichier peut être déchargé sans avoir à actualiser la page"
       }
     ],
     "deletions": []

diff --git a/src/pages/private/PrivateLayout/PrivateLayout.js b/src/pages/private/PrivateLayout/PrivateLayout.js
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { Search } from 'react-bootstrap-icons';
+import { Search, XCircle } from 'react-bootstrap-icons';
 import { FormattedMessage } from 'react-intl';
 import { LinkContainer } from 'react-router-bootstrap';
-import { Button, Form, FormControl, InputGroup, Nav, Spinner } from 'react-bootstrap';
+import { Button, Form, FormControl, InputGroup, Nav, NavDropdown, Spinner } from 'react-bootstrap';
 import { AppRoutes } from '../../../routes';
 import history from '../../../history';
 import { Content } from '../../Content';
@@ -30,7 +30,7 @@ export class PrivateLayout extends Component {
     }
 
     render() {
-        const { children, loading } = this.props;
+        const { children, loading, clearGedcomFile } = this.props;
         const { searchQuery } = this.state;
         return (
             <>
@@ -41,8 +41,12 @@ export class PrivateLayout extends Component {
                             <LinkContainer to={AppRoutes.home} exact>
                                 <Nav.Link><FormattedMessage id="menu.overview"/></Nav.Link>
                             </LinkContainer>
-                            {/*<NavDropdown title={<FormattedMessage id="menu.explore"/>} id="basic-nav-dropdown">
-                            </NavDropdown>*/}
+                            <NavDropdown title={<FormattedMessage id="menu.file.title"/>} id="basic-nav-dropdown">
+                                <NavDropdown.Item href="#" onClick={clearGedcomFile}>
+                                    <XCircle className="icon mr-2"/>
+                                    <FormattedMessage id="menu.file.close"/>
+                                </NavDropdown.Item>
+                            </NavDropdown>
                         </>
                     )}
                     right={(
@@ -81,6 +85,7 @@ PrivateLayout.propTypes = {
     children: PropTypes.any,
     /* Redux */
     loading: PropTypes.bool.isRequired,
+    clearGedcomFile: PropTypes.func.isRequired,
 };
 
 PrivateLayout.defaultProps = {

diff --git a/src/pages/private/PrivateLayout/index.js b/src/pages/private/PrivateLayout/index.js
@@ -1,11 +1,16 @@
 import { connect } from 'react-redux';
+import { clearGedcomFile } from '../../../state/gedcom/actions';
 import { PrivateLayout as PrivateLayoutComponent } from './PrivateLayout';
 
 const mapStateToProps = state => ({
     loading: state.gedcomFile.loading,
 });
 
+const mapDispatchToProps = dispatch => ({
+    clearGedcomFile: () => dispatch(clearGedcomFile()),
+});
+
 export const PrivateLayout = connect(
     mapStateToProps,
-    null,
+    mapDispatchToProps,
 )(PrivateLayoutComponent);
diff --git a/src/pages/public/PageLoadFile/PageLoadFile.js b/src/pages/public/PageLoadFile/PageLoadFile.js
@@ -233,12 +233,12 @@ export class PageLoadFile extends Component {
                         <Row className="justify-content-center mt-3">
                             <LoadFileSample loading={loading} onUrlSubmit={this.handleUrlSubmit}/>
                         </Row>
-                        <p className="text-center mb-5">
+                        <p className="text-center mb-0">
                             <small><FormattedMessage id="page.load.samples_constraints"/></small>
                         </p>
                         {SENTRY_ENABLED && !isSentryEnabled && (
                             <Form>
-                                <Form.Group controlId="crashes" className="text-center mb-0">
+                                <Form.Group controlId="crashes" className="text-center mb-0 mt-5">
                                     <FormattedMessage id="page.load.crashes">
                                         {text => (
                                             <Form.Check type="checkbox" label={text} checked={isSentryRequested} onChange={event => this.setState({ isSentryRequested: event.target.checked })} disabled={loading}/>

diff --git a/src/state/gedcom/actions.js b/src/state/gedcom/actions.js
@@ -4,10 +4,11 @@ import { computeAncestors, computeDescendants, computeRelated, createInitialSett
 
 export const LOADING = 'gedcomFile/LOADING';
 export const SUCCESS = 'gedcomFile/SUCCESS';
+export const CLEAR_FILE = 'gedcomFile/CLEAR_FILE';
 export const BLOCK = 'gedcomFile/BLOCK';
 export const SET_ROOT = 'gedcomFile/SET_ROOT';
 export const ERROR = 'gedcomFile/ERROR';
-export const CLEAR = 'gedcomFile/CLEAR';
+export const CLEAR_NOTIFICATIONS = 'gedcomFile/CLEAR_NOTIFICATIONS';
 
 export const loadGedcomUrl = (url, isSentryEnabled = false) => async dispatch => {
     dispatch({
@@ -79,9 +80,15 @@ export const loadGedcomFile = (file, isSentryEnabled = false) => async dispatch
     });
 };
 
+export const clearGedcomFile = () => async dispatch => {
+    dispatch({
+        type: CLEAR_FILE,
+    })
+}
+
 export const clearNotifications = () => async dispatch => {
     dispatch({
-        type: CLEAR,
+        type: CLEAR_NOTIFICATIONS,
     });
 };
 

diff --git a/src/state/gedcom/reducer.js b/src/state/gedcom/reducer.js
@@ -1,4 +1,4 @@
-import { LOADING, SUCCESS, ERROR, CLEAR, BLOCK, SET_ROOT } from './actions';
+import { LOADING, SUCCESS, ERROR, CLEAR_NOTIFICATIONS, BLOCK, SET_ROOT, CLEAR_FILE } from './actions';
 
 export const initialState = {
     loading: false,
@@ -27,6 +27,12 @@ export default (state = initialState, action) => {
                 data: action.data,
                 error: null,
             };
+        case CLEAR_FILE:
+            return {
+                loading: false,
+                data: null,
+                error: null,
+            }
         case BLOCK:
             return {
                 ...state,
@@ -45,7 +51,7 @@ export default (state = initialState, action) => {
                     ...action.data.dependant,
                 },
             };
-        case CLEAR:
+        case CLEAR_NOTIFICATIONS:
             return {
                 ...state,
                 error: null,