added proptype checks to components

react/components/AssetDisplay/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import ProgressBar from 'components/ProgressBar';
 import Request from 'utils/request';
 import { LOCAL_CHECK, SEARCHING, UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states';
-import PropTypes from 'prop-types';
 
 class AssetDisplay extends React.Component {
   constructor (props) {
@@ -128,7 +128,6 @@ AssetDisplay.propTypes = {
   contentType: PropTypes.string.isRequired,
   fileExt    : PropTypes.string.isRequired,
   thumbnail  : PropTypes.string,
-  // shortId    : PropTypes.string.isRequired,
 };
 
 export default AssetDisplay;

react/components/AssetInfo/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 class AssetInfo extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
       showDetails: false,
-    }
+    };
     this.toggleDetails = this.toggleDetails.bind(this);
     this.copyToClipboard = this.copyToClipboard.bind(this);
   }
@@ -80,7 +81,7 @@ class AssetInfo extends React.Component {
                   {(this.props.contentType === 'video/mp4') ? (
                     <input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
                            onClick={this.select} spellCheck="false"
-                           value={`<video width="100%" controls poster="${this.props.thumbnail}" src="${this.props.host}/{claimInfo.claimId}/${this.props.name}.${this.props.fileExt}"/></video>`}/>
+                           value={`<video width="100%" controls poster="${this.props.thumbnail}" src="${this.props.host}/${this.props.claimId}/${this.props.name}.${this.props.fileExt}"/></video>`}/>
                   ) : (
                     <input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
                            onClick={this.select} spellCheck="false"
@@ -162,5 +163,17 @@ class AssetInfo extends React.Component {
 
 // required props
 // {channelName, certificateId, description, shortClaimId, name, fileExt, claimId, contentType, thumbnail, host}
+AssetInfo.propTypes = {
+  channelName  : PropTypes.string,
+  certificateId: PropTypes.string,
+  description  : PropTypes.string,
+  // shortClaimId : PropsTypes.string.isRequired,
+  name         : PropTypes.string.isRequired,
+  claimId      : PropTypes.string.isRequired,
+  contentType  : PropTypes.string.isRequired,
+  fileExt      : PropTypes.string.isRequired,
+  thumbnail    : PropTypes.string,
+  host         : PropTypes.string.isRequired,
+};
 
 export default AssetInfo;

react/components/AssetPreview/index.js

@@ -5,12 +5,11 @@ const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
   const directSourceLink = `${claimId}/${name}.${fileExt}`;
   const showUrlLink = `${claimId}/${name}`;
   const previewHolderStyle = {
-    clear          : 'both',
+    clear  : 'both',
-    display        : 'inline-block',
+    display: 'inline-block',
-    width          : '31%',
+    width  : '31%',
-    padding        : '0px',
+    padding: '0px',
-    margin         : '1%',
+    margin : '1%',
-    backgroundColor: 'black',
   };
   const assetStyle = {
     width  : '100%',

react/components/ShowAssetDetails/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import NavBar from 'containers/NavBar';
 import AssetTitle from 'components/AssetTitle';
 import AssetDisplay from 'components/AssetDisplay';
@@ -39,10 +40,10 @@ class ShowAssetDetails extends React.Component {
                 channelName={this.props.claimData.channelName}
                 certificateId={this.props.claimData.certificateId}
                 description={this.props.claimData.description}
-                shortClaimId={this.props.claimData.shortClaimId}
                 name={this.props.claimData.name}
-                fileExt={this.props.claimData.fileExt}
                 claimId={this.props.claimData.claimId}
+                shortClaimId={this.props.claimData.shortClaimId}
+                fileExt={this.props.claimData.fileExt}
                 contentType={this.props.claimData.contentType}
                 thumbnail={this.props.claimData.thumbnail}
                 host={this.props.claimData.host}
@@ -56,11 +57,10 @@ class ShowAssetDetails extends React.Component {
   }
 };
 
-// required props
+ShowAssetDetails.propTypes = {
-// isChannel
+  error    : PropTypes.string,
-// channelName
+  claimData: PropTypes.object.isRequired,
-// channelClaimId
+  // shortUrl: PropTypes.string.isRequired,
-// claimId
+};
-// claimName
 
 export default ShowAssetDetails;

react/components/ShowAssetLite/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import AssetDisplay from 'components/AssetDisplay';
 
@@ -27,4 +28,9 @@ class ShowLite extends React.Component {
   }
 };
 
+ShowLite.propTypes = {
+  error    : PropTypes.string,
+  claimData: PropTypes.object.isRequired,
+};
+
 export default ShowLite;

react/containers/ChannelClaimsDisplay/view.jsx

@@ -82,8 +82,4 @@ class ChannelClaimsDisplay extends React.Component {
   }
 };
 
-// PropTypes
-// name
-// id
-
 export default ChannelClaimsDisplay;

react/containers/ShowAsset/view.jsx

@@ -82,21 +82,30 @@ class ShowAsset extends React.Component {
         });
     });
   }
+  componentWillUnmount () {
+    this.props.onAssetClaimDataClear();
+  }
   render () {
-    if (this.props.extension) {
+    if (this.props.claimData) {
       return (
-        <ShowAssetLite
+        <div>
-          error={this.state.error}
+          { this.props.extension ? (
-          claimData={this.props.claimData}
+            <ShowAssetLite
-        />
+              error={this.state.error}
+              claimData={this.props.claimData}
+            />
+          ) : (
+            <ShowAssetDetails
+              error={this.state.error}
+              claimData={this.props.claimData}
+              // shortUrl={this.props.shortUrl}
+            />
+          )}
+        </div>
       );
     }
     return (
-      <ShowAssetDetails
+      <div></div>
-        error={this.state.error}
-        claimData={this.props.claimData}
-        // shortUrl={this.props.shortUrl}
-      />
     );
   }
 };