v1.1.1 (#7)

Author: dillonredding

CHANGELOG.md

@@ -23,6 +23,15 @@ The format is based on [Keep a Changelog][kac], and this project adheres to
 - Fetch button disabled while fetching
 - Location field aligns with current representation
 
+## 1.1.1
+
+### Fixed
+
+- [#2]: Modals now close properly after navigation
+- Typo in sub-entities panel
+
+[#2]: https://github.com/siren-js/api-browser/issues/2
+
 ## 1.1.0 - 2021-06-16
 
 ### Added

src/components/Location.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { withPreventDefault } from '../with';
 
 export interface LocationProps {
   onNavigate: (url: string) => void;
@@ -20,8 +21,7 @@ export default class Location extends React.Component<
     this.updateUrl = this.updateUrl.bind(this);
   }
 
-  submit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault();
+  submit() {
     this.props.onNavigate(this.state.url);
   }
 
@@ -31,7 +31,7 @@ export default class Location extends React.Component<
 
   render() {
     return (
-      <form onSubmit={this.submit}>
+      <form onSubmit={withPreventDefault(this.submit)}>
         <div className="columns is-mobile is-vcentered">
           <div className="column is-2 has-text-right">
             <label className="label" htmlFor="location">

src/components/navbar/NavbarBrand.tsx

@@ -1,3 +1,5 @@
+import { withPreventDefault } from '../../with';
+
 export interface NavbarBrandProps {
   targetElementId: string;
   active: boolean;
@@ -10,10 +12,7 @@ export default function NavbarBrand(props: NavbarBrandProps) {
       <a
         className={`navbar-burger${props.active ? ' is-active' : ''}`}
         href="/#"
-        onClick={(event) => {
-          event.preventDefault();
-          props.onBurgerClick();
-        }}
+        onClick={withPreventDefault(props.onBurgerClick)}
         role="button"
         aria-label="menu"
         aria-expanded={props.active}

src/components/navbar/SettingsItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Icon, IconSize, IconStyle } from '../util';
 import { SettingsModal } from '../settings';
+import { withPreventDefault } from '../../with';
 
 export interface SettingsItemState {
   isModalActive: boolean;
@@ -34,10 +35,7 @@ export default class SettingsItem extends React.Component<
         <a
           href="/#"
           className="navbar-item"
-          onClick={(event) => {
-            event.preventDefault();
-            this.activateModal();
-          }}
+          onClick={withPreventDefault(this.activateModal)}
         >
           <Icon name="cog" style={IconStyle.Solid} size={IconSize.Large} />
         </a>

src/components/render/Rendering.tsx

@@ -5,10 +5,10 @@ import {
   RenderProps
 } from '../../types';
 import { Tags } from '../util';
-import ActionsPanel from './action';
-import LinksPanel from './link';
+import { ActionsPanel } from './action';
+import { LinksPanel } from './link';
 import Properties from './Properties';
-import SubEntitiesPanel from './sub-entity';
+import { SubEntitiesPanel } from './sub-entity';
 
 export default function Rendering(props: RenderingProps) {
   const { cols } = props;

src/components/render/Tabs.tsx

@@ -1,3 +1,5 @@
+import { withPreventDefault } from '../../with';
+
 export enum View {
   Rendering,
   Source
@@ -33,13 +35,7 @@ interface TabProps {
 
 const Tab = (props: TabProps) => (
   <li className={props.isActive ? 'is-active' : ''}>
-    <a
-      href="/#"
-      onClick={(e) => {
-        e.preventDefault();
-        props.onClick(props.view);
-      }}
-    >
+    <a href="/#" onClick={withPreventDefault(() => props.onClick(props.view))}>
       {View[props.view]}
     </a>
   </li>

src/components/render/action/ActionForm.tsx

@@ -1,13 +1,7 @@
 import { Field } from '@siren-js/core';
-import React from 'react';
+import { withPreventDefault } from '../../../with';
 import InputControl from '../field';
 
-const withPreventDefault =
-  (fn: () => void) => (event: React.BaseSyntheticEvent) => {
-    event.preventDefault();
-    fn();
-  };
-
 export default function ActionForm({
   fields,
   onSubmit,

src/components/render/action/ActionsPanel.tsx

@@ -1,5 +1,7 @@
-import React from 'react';
 import { Action } from '@siren-js/core';
+import React from 'react';
+import withFn, { withPreventDefault } from '../../../with';
+import { Panel } from '../../util';
 import ActionFormModal from './ActionFormModal';
 
 export default class ActionsPanel extends React.Component<
@@ -26,20 +28,19 @@ export default class ActionsPanel extends React.Component<
 
   render() {
     return (
-      <article className="panel is-info">
-        <p className="panel-heading">Actions</p>
+      <Panel title="Actions">
         {this.props.actions.map((action, index) => (
           <React.Fragment key={index}>
             <ActionPanelBlock action={action} onClick={this.activate} />
             <ActionFormModal
               active={this.state.activeModal === action.name}
               action={action}
               onClose={this.deactivate}
-              onSubmit={this.props.onSubmit}
+              onSubmit={withFn(this.props.onSubmit, this.deactivate)}
             />
           </React.Fragment>
         ))}
-      </article>
+      </Panel>
     );
   }
 }
@@ -57,10 +58,7 @@ const ActionPanelBlock = ({ action, onClick }: ActionPanelBlockProps) => (
   <a
     href="/#"
     className="panel-block"
-    onClick={(e) => {
-      e.preventDefault();
-      onClick(action.name);
-    }}
+    onClick={withPreventDefault(() => onClick(action.name))}
   >
     <span className="panel-icon">
       <i className="fas fa-file-alt" aria-hidden="true"></i>

src/components/render/action/index.tsx

@@ -1 +1 @@
-export { default } from './ActionsPanel';
+export { default as ActionsPanel } from './ActionsPanel';

src/components/render/link/LinkPanelBlock.tsx

@@ -1,15 +1,13 @@
 import { Link } from '@siren-js/core';
+import { withPreventDefault } from '../../../with';
 
 export default function LinkPanelBlock({ link, onClick }: LinkProps) {
   const isActive = link.rel.includes('self');
   return (
     <a
       href="/#"
       className={`panel-block${isActive ? ' is-active' : ''}`}
-      onClick={(e) => {
-        e.preventDefault();
-        onClick(link);
-      }}
+      onClick={withPreventDefault(() => onClick(link))}
     >
       <span className="panel-icon">
         <i className="fas fa-link" aria-hidden="true"></i>