Merge pull request #257 from acelaya-forks/feature/navigate-back

Feature/navigate back

CHANGELOG.md

@@ -19,7 +19,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Changed
 
-* *Nothing*
+* [#218](https://github.com/shlinkio/shlink-web-client/issues/218) Added back button to sections not displayed in left menu
 
 #### Deprecated
 

src/servers/EditServer.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Button } from 'reactstrap';
 import NoMenuLayout from '../common/NoMenuLayout';
 import { ServerForm } from './helpers/ServerForm';
 import { withSelectedServer } from './helpers/withSelectedServer';
@@ -10,11 +11,12 @@ const propTypes = {
   selectedServer: serverType,
   history: PropTypes.shape({
     push: PropTypes.func,
+    goBack: PropTypes.func,
   }),
 };
 
 export const EditServer = (ServerError) => {
-  const EditServerComp = ({ editServer, selectedServer, history: { push } }) => {
+  const EditServerComp = ({ editServer, selectedServer, history: { push, goBack } }) => {
     const handleSubmit = (serverData) => {
       editServer(selectedServer.id, serverData);
       push(`/server/${selectedServer.id}/list-short-urls/1`);
@@ -23,7 +25,8 @@ export const EditServer = (ServerError) => {
     return (
       <NoMenuLayout>
         <ServerForm initialValues={selectedServer} onSubmit={handleSubmit}>
-          <button className="btn btn-outline-primary">Save</button>
+          <Button outline className="mr-2" onClick={goBack}>Cancel</Button>
+          <Button outline color="primary">Save</Button>
         </ServerForm>
       </NoMenuLayout>
     );

src/tags/TagsList.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { splitEvery } from 'ramda';
 import PropTypes from 'prop-types';
 import Message from '../utils/Message';
@@ -7,78 +7,74 @@ import SearchField from '../utils/SearchField';
 const { ceil } = Math;
 const TAGS_GROUPS_AMOUNT = 4;
 
-const TagsList = (TagCard) => class TagsList extends React.Component {
-  static propTypes = {
-    filterTags: PropTypes.func,
-    forceListTags: PropTypes.func,
-    tagsList: PropTypes.shape({
-      loading: PropTypes.bool,
-      error: PropTypes.bool,
-      filteredTags: PropTypes.arrayOf(PropTypes.string),
-    }),
-    match: PropTypes.object,
+const propTypes = {
+  filterTags: PropTypes.func,
+  forceListTags: PropTypes.func,
+  tagsList: PropTypes.shape({
+    loading: PropTypes.bool,
+    error: PropTypes.bool,
+    filteredTags: PropTypes.arrayOf(PropTypes.string),
+  }),
+  match: PropTypes.object,
+};
+
+const TagsList = (TagCard) => {
+  const TagListComp = ({ filterTags, forceListTags, tagsList, match }) => {
+    useEffect(() => {
+      forceListTags();
+    }, []);
+
+    const renderContent = () => {
+      if (tagsList.loading) {
+        return <Message noMargin loading />;
+      }
+
+      if (tagsList.error) {
+        return (
+          <div className="col-12">
+            <div className="bg-danger p-2 text-white text-center">Error loading tags :(</div>
+          </div>
+        );
+      }
+
+      const tagsCount = tagsList.filteredTags.length;
+
+      if (tagsCount < 1) {
+        return <Message>No tags found</Message>;
+      }
+
+      const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags);
+
+      return (
+        <React.Fragment>
+          {tagsGroups.map((group, index) => (
+            <div key={index} className="col-md-6 col-xl-3">
+              {group.map((tag) => (
+                <TagCard
+                  key={tag}
+                  tag={tag}
+                  currentServerId={match.params.serverId}
+                />
+              ))}
+            </div>
+          ))}
+        </React.Fragment>
+      );
+    };
+
+    return (
+      <React.Fragment>
+        {!tagsList.loading && <SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />}
+        <div className="row">
+          {renderContent()}
+        </div>
+      </React.Fragment>
+    );
   };
 
-  componentDidMount() {
-    const { forceListTags } = this.props;
+  TagListComp.propTypes = propTypes;
 
-    forceListTags();
-  }
-
-  renderContent() {
-    const { tagsList, match } = this.props;
-
-    if (tagsList.loading) {
-      return <Message noMargin loading />;
-    }
-
-    if (tagsList.error) {
-      return (
-        <div className="col-12">
-          <div className="bg-danger p-2 text-white text-center">Error loading tags :(</div>
-        </div>
-      );
-    }
-
-    const tagsCount = tagsList.filteredTags.length;
-
-    if (tagsCount < 1) {
-      return <Message>No tags found</Message>;
-    }
-
-    const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags);
-
-    return (
-      <React.Fragment>
-        {tagsGroups.map((group, index) => (
-          <div key={index} className="col-md-6 col-xl-3">
-            {group.map((tag) => (
-              <TagCard
-                key={tag}
-                tag={tag}
-                currentServerId={match.params.serverId}
-              />
-            ))}
-          </div>
-        ))}
-      </React.Fragment>
-    );
-  }
-
-  render() {
-    const { filterTags } = this.props;
-
-    return (
-      <React.Fragment>
-        {!this.props.tagsList.loading &&
-          <SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />
-        }
-        <div className="row">
-          {this.renderContent()}
-        </div>
-      </React.Fragment>
-    );
-  }
+  return TagListComp;
 };
 
 export default TagsList;

src/visits/ShortUrlVisits.js

@@ -21,6 +21,9 @@ import { shortUrlDetailType } from './reducers/shortUrlDetail';
 import VisitsTable from './VisitsTable';
 
 const propTypes = {
+  history: PropTypes.shape({
+    goBack: PropTypes.func,
+  }),
   match: PropTypes.shape({
     params: PropTypes.object,
   }),
@@ -53,6 +56,7 @@ let selectedBar;
 
 const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBtn) => {
   const ShortUrlVisitsComp = ({
+    history,
     match,
     location,
     shortUrlVisits,
@@ -204,7 +208,7 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
 
     return (
       <React.Fragment>
-        <VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} />
+        <VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={history.goBack} />
 
         <section className="mt-4">
           <div className="row flex-md-row-reverse">

src/visits/VisitsHeader.js

@@ -1,7 +1,10 @@
-import { Card, UncontrolledTooltip } from 'reactstrap';
+import { Button, Card, UncontrolledTooltip } from 'reactstrap';
 import Moment from 'react-moment';
 import React from 'react';
+import PropTypes from 'prop-types';
 import { ExternalLink } from 'react-external-link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import ShortUrlVisitsCount from '../short-urls/helpers/ShortUrlVisitsCount';
 import { shortUrlDetailType } from './reducers/shortUrlDetail';
 import { shortUrlVisitsType } from './reducers/shortUrlVisits';
@@ -10,9 +13,10 @@ import './VisitsHeader.scss';
 const propTypes = {
   shortUrlDetail: shortUrlDetailType.isRequired,
   shortUrlVisits: shortUrlVisitsType.isRequired,
+  goBack: PropTypes.func.isRequired,
 };
 
-export default function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
+export default function VisitsHeader({ shortUrlDetail, shortUrlVisits, goBack }) {
   const { shortUrl, loading } = shortUrlDetail;
   const { visits } = shortUrlVisits;
   const shortLink = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
@@ -26,17 +30,28 @@ export default function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
       </UncontrolledTooltip>
     </span>
   );
+  const visitsStatsTitle = (
+    <React.Fragment>
+      Visit stats for <ExternalLink href={shortLink} />
+    </React.Fragment>
+  );
 
   return (
     <header>
       <Card className="bg-light" body>
-        <h2>
-          <span className="badge badge-main float-right">
+        <h2 className="d-flex justify-content-between align-items-center">
+          <Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}>
+            <FontAwesomeIcon icon={faArrowLeft} />
+          </Button>
+          <span className="text-center d-none d-sm-block">
+            {visitsStatsTitle}
+          </span>
+          <span className="badge badge-main ml-3">
             Visits:{' '}
             <ShortUrlVisitsCount visitsCount={visits.length} shortUrl={shortUrl} />
           </span>
-          Visit stats for <ExternalLink href={shortLink} />
         </h2>
+        <h3 className="text-center d-block d-sm-none mb-0">{visitsStatsTitle}</h3>
         <hr />
         <div>Created: {renderDate()}</div>
         <div>

test/visits/ShortUrlVisits.test.js

@@ -18,6 +18,9 @@ describe('<ShortUrlVisits />', () => {
     params: { shortCode: 'abc123' },
   };
   const location = { search: '' };
+  const history = {
+    goBack: jest.fn(),
+  };
 
   const createComponent = (shortUrlVisits) => {
     const ShortUrlVisits = createShortUrlVisits({ processStatsFromVisits, normalizeVisits: identity }, () => '');
@@ -28,6 +31,7 @@ describe('<ShortUrlVisits />', () => {
         getShortUrlVisits={getShortUrlVisitsMock}
         match={match}
         location={location}
+        history={history}
         shortUrlVisits={shortUrlVisits}
         shortUrlDetail={{}}
         cancelGetShortUrlVisits={identity}

test/visits/VisitsHeader.test.js

@@ -17,9 +17,10 @@ describe('<VisitsHeader />', () => {
   const shortUrlVisits = {
     visits: [{}, {}, {}],
   };
+  const goBack = jest.fn();
 
   beforeEach(() => {
-    wrapper = shallow(<VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} />);
+    wrapper = shallow(<VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={goBack} />);
   });
   afterEach(() => wrapper.unmount());