Add /teams/:teamId/sites/:siteId/stories client-side

packages/client/src/crud/CRUDList.tsx

@@ -5,41 +5,64 @@ import {Link} from '../components'
 
 export interface ICRUDListProps<T> {
   nameKey: keyof T
-  editLink: (item: T) => string
+  editLink?: (item: T) => string
   itemIds: ReadonlyArray<number>
   itemsById: Record<number, T>
-  newLink: string
-  onRemove: (t: T) => void
+  newLink?: string
+  onRemove?: (t: T) => void
   title: string
+  Info?: React.ComponentType<ICRUDItemInfoProps<T>>
 }
 
 export interface ICRUDItemRowProps<T> {
+  Info?: React.ComponentType<ICRUDItemInfoProps<T>>
   nameKey: keyof T
-  editLink: string
+  editLink?: string
   item: T
-  onRemove: (t: T) => void
+  onRemove?: (t: T) => void
+}
+
+export interface ICRUDItemInfoProps<T> {
+  item: T
+  nameKey: keyof T
+}
+
+export class CRUDItemInfo<T>
+extends React.PureComponent<ICRUDItemInfoProps<T>> {
+  render() {
+    const {item, nameKey} = this.props
+    return <span>{item[nameKey]}</span>
+  }
 }
 
 export class CRUDItemRow<T> extends React.PureComponent<ICRUDItemRowProps<T>> {
   handleRemove = () => {
     const {onRemove, item} = this.props
+    if (onRemove) {
       onRemove(item)
     }
+  }
   render() {
     const {nameKey, editLink, item} = this.props
 
     return (
       <React.Fragment>
         <div className='item-info'>
-          {item[nameKey]}
+          {this.props.Info
+            ? <this.props.Info item={item} nameKey={nameKey} />
+            : <CRUDItemInfo<T> item={item} nameKey={nameKey} />
+          }
         </div>
         <div className='ml-auto'>
+          {!!editLink && (
             <Link to={editLink}>
               <Button isInverted isColor='link' aria-label='Edit'>
                 <FaEdit />
               </Button>
             </Link>
+          )}
           &nbsp;
+          {!!this.props.onRemove && (
             <Button
               aria-label='Remove'
               onClick={this.handleRemove}
@@ -48,6 +71,7 @@ export class CRUDItemRow<T> extends React.PureComponent<ICRUDItemRowProps<T>> {
             >
               <FaTimes />
             </Button>
+          )}
         </div>
       </React.Fragment>
     )
@@ -63,12 +87,14 @@ export class CRUDList<T> extends React.PureComponent<ICRUDListProps<T>> {
         <PanelHeading>
           <span className='is-flex v-centered'>
             <span>{title}</span>
+            {!!newLink && (
               <Link
                 className='ml-auto button is-link is-small'
                 to={newLink}
               >
                 <FaPlus />&nbsp; New
               </Link>
+            )}
           </span>
         </PanelHeading>
         {itemIds.map(itemId => {
@@ -76,8 +102,9 @@ export class CRUDList<T> extends React.PureComponent<ICRUDListProps<T>> {
           return (
             <PanelBlock key={itemId}>
               <CRUDItemRow<T>
+                Info={this.props.Info}
                 nameKey={nameKey}
-                editLink={editLink(item)}
+                editLink={editLink && editLink(item)}
                 item={item}
                 onRemove={this.props.onRemove}
               />

packages/client/src/login/LoginReducer.ts

@@ -23,10 +23,11 @@ export function Login(
     // sync actions
     case 'LOGIN_REDIRECT_SET':
       return {...state, redirectTo: action.payload.redirectTo}
-    default:
+    case 'LOGIN':
+    case 'LOGIN_LOGOUT':
+    case 'LOGIN_REGISTER':
       // async actions
       switch (action.status) {
-        // FIXME this will trigger for all async actions with status pending
         case 'pending':
           return {
             ...state,
@@ -48,6 +49,6 @@ export function Login(
               return {...state, user: action.payload, error: ''}
           }
       }
+  }
   return state
 }
-}