v1.1.1 (#7)

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>

src/components/render/link/LinksPanel.tsx

@@ -1,14 +1,14 @@
 import { Link } from '@siren-js/core';
+import { Panel } from '../../util';
 import LinkPanelBlock from './LinkPanelBlock';
 
 export default function LinksPanel({ links, onClick }: LinksProps) {
   return (
-    <article className="panel is-info">
-      <p className="panel-heading">Links</p>
+    <Panel title="Links">
       {links.map((link, index) => (
         <LinkPanelBlock key={index} link={link} onClick={onClick} />
       ))}
-    </article>
+    </Panel>
   );
 }
 

src/components/render/link/index.tsx

@@ -1 +1,2 @@
-export { default } from './LinksPanel';
+export { default as LinksPanel } from './LinksPanel';
+export { default as LinkPanelBlock } from './LinkPanelBlock';

src/components/render/sub-entity/EmbeddedEntityPanelBlock.tsx

@@ -1,4 +1,5 @@
 import { EmbeddedEntity } from '@siren-js/core';
+import { withPreventDefault } from '../../../with';
 
 export default function EmbeddedEntityPanelBlock({
   embeddedEntity,
@@ -9,14 +10,7 @@ export default function EmbeddedEntityPanelBlock({
     embeddedEntity.getLinksByRel('self')[0]?.title ??
     embeddedEntity.rel.join(', ');
   return (
-    <a
-      href="/#"
-      className="panel-block"
-      onClick={(e) => {
-        e.preventDefault();
-        onClick();
-      }}
-    >
+    <a href="/#" className="panel-block" onClick={withPreventDefault(onClick)}>
       <span className="panel-icon">
         <i className="fas fa-bullhorn" aria-hidden="true"></i>
       </span>

src/components/render/sub-entity/SubEntitiesPanel.tsx

@@ -1,6 +1,8 @@
 import { Action, EmbeddedLink, SubEntity } from '@siren-js/core';
 import React from 'react';
-import LinkPanelBlock from '../link/LinkPanelBlock';
+import withFn from '../../../with';
+import { Panel } from '../../util';
+import { LinkPanelBlock } from '../link';
 import EmbeddedEntityModal from './EmbeddedEntityModal';
 import EmbeddedEntityPanelBlock from './EmbeddedEntityPanelBlock';
 
@@ -28,8 +30,7 @@ export default class SubEntitiesPanel extends React.Component<
 
   render() {
     return (
-      <article className="panel is-info">
-        <p className="panel-heading">Sub-Entites</p>
+      <Panel title="Sub-Entities">
         {this.props.subEntities.map((subEntity, index) =>
           subEntity instanceof EmbeddedLink ? (
             <LinkPanelBlock
@@ -47,13 +48,13 @@ export default class SubEntitiesPanel extends React.Component<
                 embeddedEntity={subEntity}
                 active={index === this.state.activeModal}
                 onClose={this.deactivate}
-                onFollow={this.props.onFollow}
-                onSubmit={this.props.onSubmit}
+                onFollow={withFn(this.props.onFollow, this.deactivate)}
+                onSubmit={withFn(this.props.onSubmit, this.deactivate)}
               />
             </React.Fragment>
           )
         )}
-      </article>
+      </Panel>
     );
   }
 }

src/components/render/sub-entity/index.tsx

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

src/components/util/Panel.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export interface PanelProps {
+  children: React.ReactNode;
+  title: string;
+}
+
+export default function Panel(props: PanelProps) {
+  return (
+    <article className="panel is-info">
+      <p className="panel-heading">{props.title}</p>
+      {props.children}
+    </article>
+  );
+}

src/components/util/index.ts

@@ -1,3 +1,4 @@
 export * from './Icon';
 export * from './Modal';
+export { default as Panel } from './Panel';
 export { default as Tags } from './Tags';

src/with.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+
+/**
+ * Creates a function that calls the function `g` before calling the function
+ * `f`
+ */
+export default function withFn<T>(f: AnyFn<T>, g: AnyFn): AnyFn<T> {
+  return (...args: any[]) => {
+    g(...args);
+    return f(...args);
+  };
+}
+
+export function withPreventDefault(f: AnyFn<void>): AnyFn<void> {
+  return withFn(f, (event: React.BaseSyntheticEvent) => {
+    event.preventDefault();
+  });
+}
+
+export type AnyFn<T = any> = (...args: any[]) => T;