@imposium-hub/components 2.4.2-4 → 2.5.1

package/src/components/header/Header.tsx

@@ -16,6 +16,9 @@ import AssetsTableDateCell from '../assets/AssetsTableDateCell';
 import SessionService, { IHubSession } from '../../services/Session';
 import Button from '../button/Button';
 import Select, { createFilter } from 'react-select';
+import { setAccessData } from '../../redux/actions/access';
+import { bindActionCreators } from 'redux';
+import { StoryTableTotalRendersCell } from '../assets/StoryTableTotalRendersCell';
 
 export interface IHeaderProps {
     email?: string;
@@ -49,7 +52,7 @@ export interface IHeaderState {
     activeFirstChar: string;
     order: string;
     orderDirection: string;
-    dataLoading: boolean;
+    totalRendersLoading: boolean;
 }
 
 class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
@@ -87,60 +90,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
     private readonly orgsToggleRef: any = null;
 
-    private readonly COLUMNS: any[] = [
-        {
-            accessor: 'name',
-            Header: 'Name',
-            width: 115,
-            minWidth: 115,
-            disableSortBy: false
-        },
-        {
-            accessor: 'total_renders',
-            Header: 'Total Renders',
-            width: 60,
-            minWidth: 60,
-            maxWidth: 60,
-            disableSortBy: false
-        },
-        {
-            accessor: 'last_modified_by',
-            Header: 'Last Modified By',
-            width: 60,
-            minWidth: 60,
-            maxWidth: 60,
-            disableSortBy: true
-        },
-        {
-            accessor: 'date_modified',
-            Header: 'Last Modified',
-            width: 65,
-            minWidth: 65,
-            maxWidth: 65,
-            disableSortBy: false,
-            Cell: (cell: any) => (
-                <AssetsTableDateCell
-                    cell={cell}
-                    date_created={false}
-                />
-            )
-        },
-        {
-            accessor: 'date_created',
-            Header: 'Created Date',
-            width: 65,
-            minWidth: 65,
-            maxWidth: 65,
-            disableSortBy: false,
-            Cell: (cell: any) => (
-                <AssetsTableDateCell
-                    cell={cell}
-                    date_created={true}
-                />
-            )
-        }
-    ];
-
     constructor(p: IHeaderProps) {
         super(p);
 
@@ -156,7 +105,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             activeFirstChar: '',
             order: 'date_modified',
             orderDirection: 'desc',
-            dataLoading: false
+            totalRendersLoading: false
         };
 
         this.serviceToggleRef = React.createRef();
@@ -321,18 +270,81 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             activeOrganization
         } = this.props;
 
-        this.setState({ dataLoading: true });
+        this.setState({ totalRendersLoading: true });
 
         SessionService.getAccessData(accessToken, baseUrl, true, activeOrganization)
             .then((res) => {
-                this.setState({ dataLoading: false });
                 this.props.setAccessData(res);
+                this.setState({ totalRendersLoading: false });
             })
             .catch((e) => {
                 console.error(e);
             });
     };
 
+    private getStoriesColumns() {
+        return [
+            {
+                accessor: 'name',
+                Header: 'Name',
+                width: 115,
+                minWidth: 115,
+                disableSortBy: false
+            },
+            {
+                accessor: 'total_renders',
+                Header: 'Total Renders',
+                width: 60,
+                minWidth: 60,
+                maxWidth: 60,
+                disableSortBy: false,
+                Cell: (cell: any) => (
+                    <StoryTableTotalRendersCell
+                        loading={this.state.totalRendersLoading}
+                        cell={cell}
+                        date_created={false}
+                    />
+                )
+            },
+            {
+                accessor: 'last_modified_by',
+                Header: 'Last Modified By',
+                width: 60,
+                minWidth: 60,
+                maxWidth: 60,
+                disableSortBy: true
+            },
+            {
+                accessor: 'date_modified',
+                Header: 'Last Modified',
+                width: 65,
+                minWidth: 65,
+                maxWidth: 65,
+                disableSortBy: false,
+                Cell: (cell: any) => (
+                    <AssetsTableDateCell
+                        cell={cell}
+                        date_created={false}
+                    />
+                )
+            },
+            {
+                accessor: 'date_created',
+                Header: 'Created Date',
+                width: 65,
+                minWidth: 65,
+                maxWidth: 65,
+                disableSortBy: false,
+                Cell: (cell: any) => (
+                    <AssetsTableDateCell
+                        cell={cell}
+                        date_created={true}
+                    />
+                )
+            }
+        ];
+    }
+
     public render() {
         const {
             email,
@@ -357,8 +369,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             dropdownToggleColor,
             showServiceDropdown,
             order,
-            orderDirection,
-            dataLoading
+            orderDirection
         } = this.state;
 
         let currentStory: any;
@@ -529,9 +540,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
                 storyMenuInner = (
                     <DataTable
-                        columns={this.COLUMNS}
+                        columns={this.getStoriesColumns()}
                         data={sortedStories}
-                        showInterstitial={dataLoading}
                         sortBy={sortBy}
                         noDataText={ImposiumHeader.NO_STORIES_COPY}
                         itemsPerPage={activeOrganizationBlob.stories.length}
@@ -658,6 +668,15 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
     }
 }
 
+const mapDispatchToProps = (dispatch) => {
+    return bindActionCreators(
+        {
+            setAccessData
+        },
+        dispatch
+    );
+};
+
 const mapStateToProps = (state): any => {
     return {
         auth: state.auth,
@@ -666,4 +685,4 @@ const mapStateToProps = (state): any => {
     };
 };
 
-export default connect(mapStateToProps, null)(ImposiumHeader);
+export default connect(mapStateToProps, mapDispatchToProps)(ImposiumHeader);

package/src/index.ts

@@ -32,6 +32,7 @@ import Spinner from './components/spinner/Spinner';
 import NoAccess from './components/no-access/NoAccess';
 import ServiceIcon from './components/service-icon/ServiceIcon';
 import { DeterminateLoader } from './components/determinate-loader/DeterminateLoader';
+import { StoryTableTotalRendersCell } from './components/assets/StoryTableTotalRendersCell';
 import AssetsTableDateCell from './components/assets/AssetsTableDateCell';
 import AssetsTablePreviewCell from './components/assets/AssetsTablePreviewCell';
 import AssetsTableDurationCell from './components/assets/AssetsTableDurationCell';
@@ -222,6 +223,7 @@ export {
     AssetsTableTagsFilter,
     AssetsTableTagsPivot,
     AssetsTableComplexTagCell,
+    StoryTableTotalRendersCell,
     AssetField,
     AssetsUploadMenu,
     FontAssetPreview,