Fix: Allow transcripts to work without timestamp (#63)

Also updates some test files

Author: priyajeet

src/components/Transcript/Transcript.js

@@ -38,9 +38,15 @@ const Transcript = ({ skill: { entries } }: Props) =>
             >
                 <Column
                     dataKey='appears'
-                    width={35}
+                    className='buik-transcript-time-column'
+                    width={45}
                     flexShrink={0}
-                    cellRenderer={({ cellData }) => formatTime(cellData[0].start)}
+                    cellRenderer={({ cellData }): string => {
+                        if (Array.isArray(cellData) && !!cellData[0] && typeof cellData[0].start === 'number') {
+                            return formatTime(cellData[0].start);
+                        }
+                        return '--';
+                    }}
                 />
                 <Column
                     dataKey='text'

src/components/Transcript/Transcript.scss

@@ -13,3 +13,7 @@
 .buik-transcript-column {
     padding: 8px 15px 8px 0;
 }
+
+.buik-transcript-time-column {
+    text-align: center;
+}

src/util/Xhr.js

@@ -195,13 +195,17 @@ class Xhr {
             headers[HEADER_CLIENT_VERSION] = this.version;
         }
 
-        return this.getToken(id).then((token) => {
-            if (token) {
-                // Only add a token when there was one found
-                headers.Authorization = `Bearer ${token}`;
-            }
-            return headers;
-        });
+        return this.getToken(id)
+            .then((token) => {
+                if (token) {
+                    // Only add a token when there was one found
+                    headers.Authorization = `Bearer ${token}`;
+                }
+                return headers;
+            })
+            .catch(() => {
+                throw error;
+            });
     }
 
     /**

test/explorer-no-react.html

@@ -39,9 +39,13 @@
         <div class="inputs">
             <div>
                 <label>
-                    <div>Folder Id</div>
+                    <div>Root Folder Id</div>
                     <input class="folder" type="text" placeholder="Enter root folder id" value="0" />
                 </label>
+                <label>
+                    <div>Current Folder Id</div>
+                    <input class="currentFolder" type="text" placeholder="Enter root folder id" value="38437418331" />
+                </label>
                 <label>
                     <div>Auth Token</div>
                     <input class="token" type="text" placeholder="Enter auth token" />
@@ -50,7 +54,7 @@
             <button type="button" onclick="load()">Submit</button>
         </div>
         <div class="container">
-            <h1>Content Explorer</h1>
+            <h1>Content Explorer With Filtering to folders and navigating to another folder on load and token generator</h1>
             <div class="explorer1"></div>
         </div>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
@@ -61,30 +65,20 @@ <h1>Content Explorer</h1>
                 const { ContentExplorer } = Box;
                 const token = document.querySelector('.token').value || localStorage.getItem('token');
                 const folderId = document.querySelector('.folder').value || localStorage.getItem('folder');
+                const currentFolderId = document.querySelector('.currentFolder').value || localStorage.getItem('currentFolder');
 
                 localStorage.setItem('token', token);
                 localStorage.setItem('folder', folderId);
 
-                const tokenGenerator1 = (id) => {
-                    if (id === `folder_${folderId}`) {
-                        return Promise.resolve(token);
-                    } else {
-                        return Promise.reject()
-                    }
-                };
-                const tokenGenerator2 = (id) => {
-                    if (id === `folder_${folderId}`) {
-                        return Promise.resolve({ [`folder_${folderId}`]: token });
-                    } else {
-                        return Promise.reject()
-                    }
+                const tokenGenerator = (id) => {
+                    return Promise.resolve({ [id]: token });
                 };
 
                 const explorer1 = new ContentExplorer();
                 document.querySelector('.explorer1').innerHTML = '';
-                explorer1.show(folderId, token, {
+                explorer1.show(folderId, tokenGenerator, {
                     container: '.explorer1',
-                    currentFolderId: '4579229774',
+                    currentFolderId: currentFolderId,
                     canShare: false,
                     autoFocus: true,
                     logoUrl: 'https://d30y9cdsu7xlg0.cloudfront.net/png/12458-200.png',

test/pickers.html

@@ -90,18 +90,10 @@ <h1>Folder Picker (max 3 items / token generator / no upload)</h1>
                 localStorage.setItem('folder', folderId);
 
                 const tokenGenerator1 = (id) => {
-                    if (id === `folder_${folderId}`) {
-                        return Promise.resolve(token);
-                    } else {
-                        return Promise.reject()
-                    }
+                    return Promise.resolve(token);
                 };
                 const tokenGenerator2 = (id) => {
-                    if (id === `folder_${folderId}`) {
-                        return Promise.resolve({ [`folder_${folderId}`]: token });
-                    } else {
-                        return Promise.reject()
-                    }
+                    return Promise.resolve({ [id]: token });
                 };
 
                 const filePicker1 = new FilePicker();

test/preview.html

@@ -22,7 +22,7 @@
             window.onload = function() {
                 const { ContentExplorer } = Box;
                 const explorer = new ContentExplorer();
-                explorer.show('0', 'nBG3XQcNNNcoJfX0qowIDT8hrmeIVWI5', {
+                explorer.show('0', 'HlswnEPcgSbDR2KC9CQeMLwcLohSovTp', {
                     hasPreviewSidebar: true
                 });
             }