From 9cd159742f7d97d3d038207b347d54620d77becd Mon Sep 17 00:00:00 2001 From: Daniel Valadas Date: Tue, 1 Sep 2020 01:21:08 -0400 Subject: [PATCH 1/3] Fixes frontend build warnings in resource-manager The frontend build of the new resource-manager had many warnings which this PR resolves. (whitespace and unused vars and method parameters). --- .../app/components/FolderDetails.jsx | 4 +- .../app/components/Permissions.jsx | 74 ++--- .../app/containers/AssetsPanelContainer.jsx | 294 +++++++++--------- .../ResourceManager.Web/app/globals/dnnSf.js | 36 +-- .../ResourceManager.Web/webpack.config.js | 5 +- 5 files changed, 208 insertions(+), 205 deletions(-) diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/components/FolderDetails.jsx b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/components/FolderDetails.jsx index ceb152b22b7..a0993db1157 100644 --- a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/components/FolderDetails.jsx +++ b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/components/FolderDetails.jsx @@ -31,8 +31,8 @@ const FolderDetails = ({folder, handlers, validationErrors}) => (
handlers.changePermissions(permissions)} + folderBeingEdited={folder} + updateFolderBeingEdited={(permissions) => handlers.changePermissions(permissions)} >
diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/components/Permissions.jsx b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/components/Permissions.jsx index eaa5ec0ac36..a7b4853ee5c 100644 --- a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/components/Permissions.jsx +++ b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/components/Permissions.jsx @@ -6,52 +6,52 @@ import { PermissionGrid } from "@dnnsoftware/dnn-react-common"; import DnnSf from "../globals/dnnSf"; class Permissions extends React.Component { - constructor(props) { - super(props); - - this.state = { - permissions: JSON.parse( - JSON.stringify(props.folderBeingEdited.permissions) - ), - }; - } - - onPermissionsChanged(permissions) { - const { state } = this; - - let newPermissions = Object.assign({}, state.permissions, permissions); - this.props.updateFolderBeingEdited(newPermissions); - this.setState({ permissions: newPermissions }); - } - - render() { - const { props, state } = this; - const dnnSf = new DnnSf(); - const grid = ( - {}} - permissions={state.permissions} - service={dnnSf} - onPermissionsChanged={this.onPermissionsChanged.bind(this)} - /> - ); - return
{grid}
; - } + constructor(props) { + super(props); + + this.state = { + permissions: JSON.parse( + JSON.stringify(props.folderBeingEdited.permissions) + ), + }; + } + + onPermissionsChanged(permissions) { + const { state } = this; + + let newPermissions = Object.assign({}, state.permissions, permissions); + this.props.updateFolderBeingEdited(newPermissions); + this.setState({ permissions: newPermissions }); + } + + render() { + const { props, state } = this; + const dnnSf = new DnnSf(); + const grid = ( + {}} + permissions={state.permissions} + service={dnnSf} + onPermissionsChanged={this.onPermissionsChanged.bind(this)} + /> + ); + return
{grid}
; + } } Permissions.propTypes = { - updateFolderBeingEdited: PropTypes.func, - folderBeingEdited: PropTypes.object, + updateFolderBeingEdited: PropTypes.func, + folderBeingEdited: PropTypes.object, }; function mapStateToProps(state) { - return {}; + return {}; } function mapDispatchToProps(dispatch) { - return { - ...bindActionCreators({}, dispatch), - }; + return { + ...bindActionCreators({}, dispatch), + }; } export default connect(mapStateToProps, mapDispatchToProps)(Permissions); diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/containers/AssetsPanelContainer.jsx b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/containers/AssetsPanelContainer.jsx index 18e258485db..4ef6ff85984 100644 --- a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/containers/AssetsPanelContainer.jsx +++ b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/containers/AssetsPanelContainer.jsx @@ -13,176 +13,176 @@ import localizeService from "../services/localizeService.js"; import ReactCSSTransitionGroup from "react-transition-group/CSSTransitionGroup"; class AssetsPanelContainer extends React.Component { - constructor(props) { - super(props); - this.mainContainer = React.createRef(); - } - componentWillMount() { - window.addEventListener("scroll", this.handleScroll.bind(this)); - } - - getDetailsPosition(i) { - const itemWidth = this.props.itemWidth; - const container = this.mainContainer; - const containerWidth = container.clientWidth; - const itemsPerRow = Math.floor(containerWidth / itemWidth); - let position = Math.floor(i / itemsPerRow) * itemsPerRow + itemsPerRow - 1; - - return position; - } - - getDetailsPanel(showPanel, i) { - return ( - - {showPanel && } - - ); - } - - handleScroll() { - const { folderPanelState, loadContent, searchFiles } = this.props; - const { totalCount, loadedItems, search, loading } = folderPanelState; - - const bodyHeight = document.body.offsetHeight; - const windowHeight = window.innerHeight; - const totalScrolled = window.pageYOffset; - const scrollMax = bodyHeight - windowHeight; - - if (loadedItems < totalCount && totalScrolled + 100 > scrollMax) { - if (!loading) { - this.setState({ - loadingFlag: true, - }); - - if (search) { - searchFiles(folderPanelState, search, true); - } else { - loadContent(folderPanelState); + constructor(props) { + super(props); + this.mainContainer = React.createRef(); + } + componentWillMount() { + window.addEventListener("scroll", this.handleScroll.bind(this)); + } + + getDetailsPosition(i) { + const itemWidth = this.props.itemWidth; + const container = this.mainContainer; + const containerWidth = container.clientWidth; + const itemsPerRow = Math.floor(containerWidth / itemWidth); + let position = Math.floor(i / itemsPerRow) * itemsPerRow + itemsPerRow - 1; + + return position; + } + + getDetailsPanel(showPanel, i) { + return ( + + {showPanel && } + + ); + } + + handleScroll() { + const { folderPanelState, loadContent, searchFiles } = this.props; + const { totalCount, loadedItems, search, loading } = folderPanelState; + + const bodyHeight = document.body.offsetHeight; + const windowHeight = window.innerHeight; + const totalScrolled = window.pageYOffset; + const scrollMax = bodyHeight - windowHeight; + + if (loadedItems < totalCount && totalScrolled + 100 > scrollMax) { + if (!loading) { + this.setState({ + loadingFlag: true, + }); + + if (search) { + searchFiles(folderPanelState, search, true); + } else { + loadContent(folderPanelState); + } + } } - } } - } - - render() { - const { - items, - itemEditing, - search, - itemContainerDisabled, - loading, - } = this.props; - let propsPosition = -1; - - let result = []; - for (let i = 0; i < items.length; i++) { - const item = items[i]; - const { itemId, itemName, isFolder } = item; - result.push(); - - if ( - itemEditing && + + render() { + const { + items, + itemEditing, + search, + itemContainerDisabled, + loading, + } = this.props; + let propsPosition = -1; + + let result = []; + for (let i = 0; i < items.length; i++) { + const item = items[i]; + const { itemId, itemName, isFolder } = item; + result.push(); + + if ( + itemEditing && ((isFolder && itemEditing.folderId === itemId) || (!isFolder && itemEditing.fileId === itemId)) - ) { - propsPosition = this.getDetailsPosition(i); - } + ) { + propsPosition = this.getDetailsPosition(i); + } - let showPanel = + let showPanel = i === propsPosition || (propsPosition >= items.length && i === items.length - 1); - result.push(this.getDetailsPanel(showPanel, i)); - } + result.push(this.getDetailsPanel(showPanel, i)); + } - return ( -
e.stopPropagation()}> - -
- -
(this.mainContainer = c)} - className={"main-container" + (loading ? " loading" : "")} - > - - -
e.stopPropagation()}> + +
+ +
(this.mainContainer = c)} + className={"main-container" + (loading ? " loading" : "")} + > + + +
- {result} -
- - {localizeService.getString("AssetsPanelNoSearchResults")} - -
-
- - {localizeService.getString("AssetsPanelEmpty_Title")} - - - {localizeService.getString("AssetsPanelEmpty_Subtitle")} - -
+ } + > + {result} +
+ + {localizeService.getString("AssetsPanelNoSearchResults")} + +
+
+ + {localizeService.getString("AssetsPanelEmpty_Title")} + + + {localizeService.getString("AssetsPanelEmpty_Subtitle")} + +
+
+
+
-
-
-
- ); - } + ); + } } AssetsPanelContainer.propTypes = { - folderPanelState: PropTypes.object, - items: PropTypes.array, - search: PropTypes.string, - itemContainerDisabled: PropTypes.bool, - loading: PropTypes.bool, - itemEditing: PropTypes.object, - itemWidth: PropTypes.number, - loadContent: PropTypes.func, - searchFiles: PropTypes.func, + folderPanelState: PropTypes.object, + items: PropTypes.array, + search: PropTypes.string, + itemContainerDisabled: PropTypes.bool, + loading: PropTypes.bool, + itemEditing: PropTypes.object, + itemWidth: PropTypes.number, + loadContent: PropTypes.func, + searchFiles: PropTypes.func, }; function mapDispatchToProps(dispatch) { - return { - ...bindActionCreators( - { - loadContent: folderPanelActions.loadContent, - searchFiles: folderPanelActions.searchFiles, - }, - dispatch - ), - }; + return { + ...bindActionCreators( + { + loadContent: folderPanelActions.loadContent, + searchFiles: folderPanelActions.searchFiles, + }, + dispatch + ), + }; } function mapStateToProps(state) { - const folderPanelState = state.folderPanel; - const addFolderPanelState = state.addFolderPanel; - const addAssetPanelState = state.addAssetPanel; - const itemDetailsState = state.itemDetails; - - return { - folderPanelState, - items: folderPanelState.items || [], - search: folderPanelState.search, - itemContainerDisabled: + const folderPanelState = state.folderPanel; + const addFolderPanelState = state.addFolderPanel; + const addAssetPanelState = state.addAssetPanel; + const itemDetailsState = state.itemDetails; + + return { + folderPanelState, + items: folderPanelState.items || [], + search: folderPanelState.search, + itemContainerDisabled: addFolderPanelState.expanded || addAssetPanelState.expanded, - loading: folderPanelState.loading, - itemEditing: itemDetailsState.itemEditing, - itemWidth: folderPanelState.itemWidth, - }; + loading: folderPanelState.loading, + itemEditing: itemDetailsState.itemEditing, + itemWidth: folderPanelState.itemWidth, + }; } export default connect( - mapStateToProps, - mapDispatchToProps + mapStateToProps, + mapDispatchToProps )(AssetsPanelContainer); diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/globals/dnnSf.js b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/globals/dnnSf.js index b360874f5c9..5ef8f918664 100644 --- a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/globals/dnnSf.js +++ b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/globals/dnnSf.js @@ -5,31 +5,31 @@ export default class DnnSf { tabId = -1; antiForgeryToken = ""; - constructor(){ + constructor() { this.siteRoot = window.top.dnn.getVar("sf_siteRoot", "/"); this.tabId = parseInt(window.top.dnn.getVar("sf_tabId", "-1")); this.antiForgeryToken = window.top.document.querySelector("input[name=__RequestVerificationToken]").value; } get = (method, params, success, failure, loading, beforeSend) => { - return this.call('GET', method, params, success, failure, loading, beforeSend, false, false); + return this.call("GET", method, params, success, failure, loading, beforeSend, false, false); } call = (httpMethod, method, params, success, failure, loading, beforeSend, sync, silence, postFile) => { - let url = this.getServiceRoot() + this.controller + '/' + method; - this.moduleRoot = 'personaBar'; - this.controller = ''; + let url = this.getServiceRoot() + this.controller + "/" + method; + this.moduleRoot = "personaBar"; + this.controller = ""; return this.rawCall(httpMethod, url, params, success, failure, loading, beforeSend, sync, silence, postFile); } getServiceRoot = () => { - return this.siteRoot + 'API/' + this.moduleRoot + '/'; + return this.siteRoot + "API/" + this.moduleRoot + "/"; } rawCall = (httpMethod, url, params, success, failure, loading, beforeSend, sync, silence, postFile) => { let beforeCallback; - if (typeof beforeSend === 'function'){ + if (typeof beforeSend === "function") { beforeCallback = (xhr) => { this.setHeaders(xhr); return beforeSend(xhr); @@ -45,31 +45,31 @@ export default class DnnSf { type: httpMethod, async: sync === false, success: function (d) { - if (typeof loading === 'function') { + if (typeof loading === "function") { loading(false); } - if (typeof success === 'function') { + if (typeof success === "function") { success(d || {}); } }, error: function (xhr, status, err) { - if (typeof loading === 'function') { + if (typeof loading === "function") { loading(false); } - if (typeof failure === 'function') { + if (typeof failure === "function") { if (xhr) { failure(xhr, err); } else { - failure(null, 'Unknown error'); + failure(null, "Unknown error"); } } } }; - if (httpMethod === 'GET') { + if (httpMethod === "GET") { options.data = params; } else if (postFile) { options.processData = false; @@ -77,12 +77,12 @@ export default class DnnSf { options.data = params; } else { - options.contentType = 'application/json; charset=UTF-8'; + options.contentType = "application/json; charset=UTF-8"; options.data = JSON.stringify(params); - options.dataType = 'json'; + options.dataType = "json"; } - if (typeof loading === 'function') { + if (typeof loading === "function") { loading(true); } @@ -91,11 +91,11 @@ export default class DnnSf { setHeaders = (xhr) => { if (this.tabId) { - xhr.setRequestHeader('TabId', this.tabId); + xhr.setRequestHeader("TabId", this.tabId); } if (this.antiForgeryToken.length > 0) { - xhr.setRequestHeader("RequestVerificaitonToken", this.antiForgeryToken); + xhr.setRequestHeader("RequestVerificaitonToken", this.antiForgeryToken); } } } \ No newline at end of file diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/webpack.config.js b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/webpack.config.js index 0ad0dd1793a..daa40408e81 100644 --- a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/webpack.config.js +++ b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/webpack.config.js @@ -38,7 +38,10 @@ module.exports = { test: /\.(js|jsx)$/, exclude: /node_modules/, enforce: "pre", - use: ["eslint-loader"] + loader: "eslint-loader", + options: { + fix: true + } }, { test: /\.less$/, From 4049031fd29071969632bc8517a02a4a753135dd Mon Sep 17 00:00:00 2001 From: Daniel Valadas Date: Tue, 1 Sep 2020 01:54:46 -0400 Subject: [PATCH 2/3] Removed unused vars in Permissions.jsx --- .../ResourceManager.Web/app/components/Permissions.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/components/Permissions.jsx b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/components/Permissions.jsx index a7b4853ee5c..1d34801acb9 100644 --- a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/components/Permissions.jsx +++ b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/components/Permissions.jsx @@ -25,11 +25,11 @@ class Permissions extends React.Component { } render() { - const { props, state } = this; + const { state } = this; const dnnSf = new DnnSf(); const grid = ( {}} + dispatch={()=>{}} permissions={state.permissions} service={dnnSf} onPermissionsChanged={this.onPermissionsChanged.bind(this)} @@ -44,7 +44,7 @@ Permissions.propTypes = { folderBeingEdited: PropTypes.object, }; -function mapStateToProps(state) { +function mapStateToProps() { return {}; } From 0e0112cb268a946c6e0583724e6f21bce50d86f8 Mon Sep 17 00:00:00 2001 From: Daniel Valadas Date: Tue, 1 Sep 2020 02:09:35 -0400 Subject: [PATCH 3/3] Removed unused vars in DropZoneContainer.jsx --- .../ResourceManager.Web/app/containers/DropZoneContainer.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/containers/DropZoneContainer.jsx b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/containers/DropZoneContainer.jsx index e8f3c140ea1..043151329c6 100644 --- a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/containers/DropZoneContainer.jsx +++ b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/app/containers/DropZoneContainer.jsx @@ -71,7 +71,7 @@ class DropZoneContainer extends React.Component { className={className} onDrop={this.uploadFilesHandler.bind(this)} > - {({ getRootProps, getInputProps }) => this.props.children} + {() => this.props.children} ) : (
{this.props.children}