Properly handle navigating to previous page if 'backHref' is undefined

app/soapbox/components/ui/column/column.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 
 import Helmet from 'soapbox/components/helmet';
 
 import { Card, CardBody, CardHeader, CardTitle } from '../card/card';
 
-interface IColumn {
+interface IColumn extends RouteComponentProps {
   backHref?: string,
   label?: string,
   transparent?: boolean,
@@ -12,7 +13,20 @@ interface IColumn {
 }
 
 const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => {
-  const { backHref, children, label, transparent = false, withHeader = true } = props;
+  const { backHref, children, label, history, transparent = false, withHeader = true } = props;
+
+  const handleBackClick = () => {
+    if (backHref) {
+      history.push(backHref);
+      return;
+    }
+
+    if (history.length === 1) {
+      history.push('/');
+    } else {
+      history.goBack();
+    }
+  };
 
   const renderChildren = () => {
     if (transparent) {
@@ -22,7 +36,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
     return (
       <Card variant='rounded'>
         {withHeader ? (
-          <CardHeader backHref={backHref}>
+          <CardHeader onBackClick={handleBackClick}>
             <CardTitle title={label} />
           </CardHeader>
         ) : null}
@@ -43,4 +57,4 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
   );
 });
 
-export default Column;
+export default withRouter(Column);

app/soapbox/features/edit_profile/index.js

@@ -22,7 +22,7 @@ import { makeGetAccount } from 'soapbox/selectors';
 import { getFeatures } from 'soapbox/utils/features';
 import resizeImage from 'soapbox/utils/resize_image';
 
-import { Button, Card, CardBody, CardHeader, CardTitle, Column, Form, FormActions, FormGroup, Input, Textarea } from '../../components/ui';
+import { Button, Column, Form, FormActions, FormGroup, Input, Textarea } from '../../components/ui';
 
 import ProfilePreview from './components/profile_preview';
 
@@ -246,13 +246,7 @@ class EditProfile extends ImmutablePureComponent {
     const canEditName = verifiedCanEditName || !verified;
 
     return (
-      <Column label='Edit Profile' transparent withHeader={false}>
-        <Card variant='rounded'>
-          <CardHeader backHref='/settings'>
-            <CardTitle title={intl.formatMessage(messages.heading)} />
-          </CardHeader>
-
-          <CardBody>
+      <Column label='Edit Profile'>
         <Form onSubmit={this.handleSubmit}>
           <FormGroup
             labelText={<FormattedMessage id='edit_profile.fields.display_name_label' defaultMessage='Display name' />}
@@ -414,8 +408,6 @@ class EditProfile extends ImmutablePureComponent {
             </Button>
           </FormActions>
         </Form>
-          </CardBody>
-        </Card>
       </Column>
     );
   }