[CPCN-27] Show segment instead of version for transcripts (superdesk#659

)

* [CPCN-27] Show segment instead of version for transcripts

* Improve ts types

* fix lint

* add `extra.type?: 'transcript'` to IArticle interface

assets/interfaces/common.ts

@@ -1,3 +1,7 @@
+import {IUser} from './user';
+import {IArticle} from './content';
+import {IAgendaItem} from './agenda';
+
 export type TDatetime = string; // ISO8601 format
 
 export interface IFilterGroup {
@@ -25,3 +29,27 @@ export interface ICountry {
 }
 
 export type IListConfig = {[key: string]: string | number | boolean};
+
+interface IBaseAction {
+    _id: string;
+    id: string;
+    name: string;
+    shortcut: boolean;
+    icon: string;
+    tooltip: string;
+    multi: boolean;
+    visited?(user: IUser['_id'], item: IArticle | IAgendaItem): void;
+    when?(props: any, item: IArticle | IAgendaItem): boolean;
+}
+
+interface ISingleItemAction extends IBaseAction {
+    multi: false;
+    action(item: IArticle | IAgendaItem, group: string, plan: IAgendaItem): void;
+}
+
+interface IMultiItemAction extends IBaseAction {
+    multi: true;
+    action(items: Array<IArticle | IAgendaItem>): void;
+}
+
+export type IItemAction = ISingleItemAction | IMultiItemAction;

assets/interfaces/content.ts

@@ -13,11 +13,19 @@ export interface IArticle {
     _id: string;
     guid: string;
     type: IContentType;
-    associations: {[key: string]: IArticle};
+    ancestors?: Array<IArticle['_id']>;
+    nextversion?: IArticle['_id'];
+    associations?: {[key: string]: IArticle};
     renditions?: {[key: string]: IRendition};
     slugline: string;
     headline: string;
     anpa_take_key?: string;
     source: string;
     versioncreated: string;
+    extra?: {
+        type?: 'transcript';
+        [key: string]: any;
+    };
+    es_highlight?: {[field: string]: Array<string>}
+    deleted?: boolean; // Used only in the front-end, populated by wire/reducer
 }

assets/interfaces/index.ts

@@ -1,4 +1,4 @@
-export {TDatetime, IFilterGroup, ISection, ICountry, IListConfig} from './common';
+export {TDatetime, IFilterGroup, ISection, ICountry, IListConfig, IItemAction} from './common';
 export {ICompany, ICompanyType, IAuthProvider, IService} from './company';
 export {IClientConfig} from './config';
 export {INavigation} from './navigation';

assets/wire/actions.ts

@@ -1,5 +1,6 @@
 import {get, isEmpty} from 'lodash';
 
+import {IArticle} from 'interfaces';
 import server from 'server';
 import analytics from 'analytics';
 
@@ -387,11 +388,9 @@ export function removeBookmarks(items: any) {
  * @param {Object} item
  * @return {Promise}
  */
-export function fetchVersions(item: any) {
-    return () => server.get(`/wire/${item._id}/versions`)
-        .then((data: any) => {
-            return data._items;
-        });
+export function fetchVersions(item: IArticle): Promise<Array<IArticle>> {
+    return server.get(`/wire/${item._id}/versions`)
+        .then((data: {_items: Array<IArticle>}) => (data._items));
 }
 
 /**
@@ -524,14 +523,12 @@ export function fetchNewItems() {
         .then((response: any) => dispatch(setNewItems(response)));
 }
 
-export function fetchNext(item: any) {
-    return () => {
-        if (!item.nextversion) {
-            return Promise.reject();
-        }
+export function fetchNext(item: IArticle): Promise<IArticle> {
+    if (item.nextversion == null) {
+        return Promise.reject();
+    }
 
-        return server.get(`/wire/${item.nextversion}?format=json`);
-    };
+    return server.get(`/wire/${item.nextversion}?format=json`);
 }
 
 export const TOGGLE_FILTER = 'TOGGLE_FILTER';

assets/wire/components/ListItemNextVersion.tsx

@@ -1,48 +1,73 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 
+import {IArticle} from 'interfaces';
 import {gettext} from 'utils';
+import {getVersionsLabelText} from 'wire/utils';
 import ItemVersion from './ItemVersion';
 import {fetchNext, openItem} from '../actions';
 
-class ListItemNextVersion extends React.Component<any, any> {
-    static propTypes: any;
-    constructor(props: any) {
+interface IOwnProps {
+    item: IArticle;
+    displayConfig: {[field: string]: boolean};
+}
+
+interface IState {
+    next: IArticle | null;
+}
+
+interface IDispatchProps {
+    openItem(item: IArticle): void;
+}
+
+type IProps = IDispatchProps & IOwnProps;
+
+const mapDispatchToProps = (dispatch: any) => ({
+    openItem: (item: IArticle) => dispatch(openItem(item)),
+});
+
+
+class ListItemNextVersion extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
         super(props);
         this.state = {next: null};
         this.open = this.open.bind(this);
-        this.fetch(props);
+        this.fetch();
     }
 
-    componentWillReceiveProps(nextProps: any) {
-        if (nextProps.item.nextversion !== this.props.item.nextversion) {
-            this.fetch(nextProps);
+    componentDidUpdate(prevProps: Readonly<IProps>) {
+        if (prevProps.item.nextversion !== this.props.item.nextversion) {
+            this.fetch();
         }
     }
 
-    fetch(props: any) {
-        props.dispatch(fetchNext(props.item))
-            .then((next: any) => this.setState({next}))
+    fetch() {
+        fetchNext(this.props.item)
+            .then((next) => this.setState({next}))
             .catch(() => this.setState({next: null}));
     }
 
-    open(version: any, event: any) {
+    open(version: IArticle, event: React.MouseEvent) {
+        if (this.state.next == null) {
+            return;
+        }
+
         event.stopPropagation();
-        this.props.dispatch(openItem(this.state.next));
+        this.props.openItem(this.state.next);
     }
 
     render() {
         if (!this.state.next) {
             return null;
         }
 
+        const versionLabelText = getVersionsLabelText(this.props.item);
         const baseClass = 'wire-column__preview';
 
         return (
             <div className={`${baseClass}__versions`}>
                 <span className={`${baseClass}__versions__box-headline`}>
-                    {gettext('Next version')}
+                    {gettext('Next {{ versionsLabel }}', {versionsLabel: versionLabelText})}
                 </span>
 
                 <ItemVersion
@@ -56,12 +81,6 @@ class ListItemNextVersion extends React.Component<any, any> {
     }
 }
 
-ListItemNextVersion.propTypes = {
-    item: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    displayConfig: PropTypes.object,
-};
-
-const component: React.ComponentType<any> = connect()(ListItemNextVersion);
+const component = connect(null, mapDispatchToProps)(ListItemNextVersion);
 
 export default component;

assets/wire/components/ListItemPreviousVersions.tsx

@@ -1,40 +1,64 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 
+import {IArticle, IListConfig} from 'interfaces';
 import {gettext} from 'utils';
+import {getVersionsLabelText} from 'wire/utils';
 import {fetchVersions, openItem} from '../actions';
 
 import ItemVersion from './ItemVersion';
 
+interface IOwnProps {
+    item: IArticle;
+    isPreview: boolean;
+    inputId?: string;
+    displayConfig?: IListConfig;
+    matchedIds?: Array<IArticle['_id']>
+}
+
+interface IState {
+    versions: Array<IArticle>;
+    loading: boolean;
+    error: boolean;
+}
+
+interface IDispatchProps {
+    openItem(item: IArticle): void;
+}
+
+type IProps = IDispatchProps & IOwnProps;
+
+const mapDispatchToProps = (dispatch: any) => ({
+    openItem: (item: IArticle) => dispatch(openItem(item)),
+});
+
 
-class ListItemPreviousVersions extends React.Component<any, any> {
+class ListItemPreviousVersions extends React.Component<IProps, IState> {
     baseClass: string;
-    static propTypes: any;
-    static defaultProps: any;
+    static defaultProps = {matchedIds: []};
 
-    constructor(props: any) {
+    constructor(props: IProps) {
         super(props);
         this.state = {versions: [], loading: true, error: false};
         this.baseClass = this.props.isPreview ? 'wire-column__preview' : 'wire-articles';
         this.open = this.open.bind(this);
-        this.fetch(props);
+        this.fetch();
     }
 
-    componentWillReceiveProps(nextProps: any) {
-        if (nextProps.item._id !== this.props.item._id) {
-            this.fetch(nextProps);
+    componentDidUpdate(prevProps: Readonly<IProps>) {
+        if (prevProps.item._id !== this.props.item._id) {
+            this.fetch();
         }
     }
 
-    open(version: any, event: any) {
+    open(version: IArticle, event: React.MouseEvent) {
         event.stopPropagation();
-        this.props.dispatch(openItem(version));
+        this.props.openItem(version);
     }
 
-    fetch(props: any) {
-        props.dispatch(fetchVersions(props.item))
-            .then((versions: any) => this.setState({versions, loading: false}))
+    fetch() {
+        fetchVersions(this.props.item)
+            .then((versions) => this.setState({versions, loading: false}))
             .catch(() => this.setState({error: true}));
     }
 
@@ -47,6 +71,7 @@ class ListItemPreviousVersions extends React.Component<any, any> {
             );
         }
 
+        const versionLabelText = getVersionsLabelText(this.props.item, this.state.versions.length > 1);
         const versions = this.state.versions.map((version: any) => (
             <ItemVersion
                 key={version._id}
@@ -63,30 +88,16 @@ class ListItemPreviousVersions extends React.Component<any, any> {
             this.props.item.ancestors ?
                 <div className={this.baseClass + '__versions'} id={this.props.inputId}>
                     {this.props.isPreview && (
-                        <span className="wire-column__preview__versions__box-headline">{gettext('Previous versions')}</span>
+                        <span className="wire-column__preview__versions__box-headline">
+                            {gettext('Previous {{ versionsLabel }}', {versionsLabel: versionLabelText})}
+                        </span>
                     )}
                     {versions}
                 </div> : null
         );
     }
 }
 
-ListItemPreviousVersions.propTypes = {
-    item: PropTypes.shape({
-        _id: PropTypes.string,
-        ancestors: PropTypes.array,
-    }).isRequired,
-    isPreview: PropTypes.bool.isRequired,
-    dispatch: PropTypes.func,
-    inputId: PropTypes.string,
-    displayConfig: PropTypes.object,
-    matchedIds: PropTypes.array,
-};
-
-ListItemPreviousVersions.defaultProps = {
-    matchedIds: [],
-};
-
-const component: React.ComponentType<any> = connect()(ListItemPreviousVersions);
+const component = connect(null, mapDispatchToProps)(ListItemPreviousVersions);
 
 export default component;