IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring. moved the onLoading function to redux

Browse Source
This commit is contained in:
Artem Tarasov 2020-08-24 17:25:41 +03:00
parent 35c1b08547
commit 5a494b3c2c
6 changed files with 70 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
products/ASC.Files/Client/src/components/Article/Body/index.js
View File

@ -9,7 +9,8 @@ import {
setTreeFolders, setTreeFolders,
setDragItem, setDragItem,
setDragging, setDragging,
setNewTreeFilesBadge setNewTreeFilesBadge,
setIsLoading
} from "../../../store/files/actions"; } from "../../../store/files/actions";
import store from "../../../store/store"; import store from "../../../store/store";
import isEqual from "lodash/isEqual"; import isEqual from "lodash/isEqual";
@ -54,16 +55,16 @@ class ArticleBodyContent extends React.Component {
} }
onSelect = data => { onSelect = data => {
const { selectedKeys, filter, onLoading } = this.props; const { selectedKeys, filter, setIsLoading } = this.props;
if (selectedKeys[0] !== data[0]) { if (selectedKeys[0] !== data[0]) {
onLoading(true); setIsLoading(true);
const newFilter = filter.clone(); const newFilter = filter.clone();
newFilter.page = 0; newFilter.page = 0;
newFilter.startIndex = 0; newFilter.startIndex = 0;
fetchFiles(data[0], newFilter, store.dispatch) fetchFiles(data[0], newFilter, store.dispatch)
.catch(err => toastr.error(err)) .catch(err => toastr.error(err))
.finally(() => onLoading(false)); .finally(() => setIsLoading(false));
} }
}; };
@ -86,7 +87,7 @@ class ArticleBodyContent extends React.Component {
filter, filter,
setFilter, setFilter,
setTreeFolders, setTreeFolders,
onLoading, setIsLoading,
isLoading, isLoading,
dragging, dragging,
setDragItem, setDragItem,
@ -111,7 +112,7 @@ class ArticleBodyContent extends React.Component {
visible={showNewFilesPanel} visible={showNewFilesPanel}
onClose={this.onShowNewFilesPanel} onClose={this.onShowNewFilesPanel}
setNewFilesCount={this.setNewFilesCount} setNewFilesCount={this.setNewFilesCount}
onLoading={onLoading} onLoading={setIsLoading}
folderId={newFolderId} folderId={newFolderId}
treeFolders={data} treeFolders={data}
setTreeFolders={setTreeFolders} setTreeFolders={setTreeFolders}
@ -127,7 +128,7 @@ class ArticleBodyContent extends React.Component {
setFilter={setFilter} setFilter={setFilter}
setTreeFolders={setTreeFolders} setTreeFolders={setTreeFolders}
expandedKeys={expandedKeys} expandedKeys={expandedKeys}
onLoading={onLoading} onLoading={setIsLoading}
isLoading={isLoading} isLoading={isLoading}
dragging={dragging} dragging={dragging}
setDragging={setDragging} setDragging={setDragging}
@ -149,7 +150,7 @@ class ArticleBodyContent extends React.Component {
} }
function mapStateToProps(state) { function mapStateToProps(state) {
const { treeFolders, selectedFolder, filter, selection, dragging, updateTreeNew } = state.files; const { treeFolders, selectedFolder, filter, selection, dragging, updateTreeNew, isLoading } = state.files;
const currentFolderId = selectedFolder.id.toString(); const currentFolderId = selectedFolder.id.toString();
const myFolderIndex = 0; const myFolderIndex = 0;
const shareFolderIndex = 1; const shareFolderIndex = 1;
@ -184,10 +185,11 @@ function mapStateToProps(state) {
isAdmin: state.auth.user.isAdmin, isAdmin: state.auth.user.isAdmin,
selection, selection,
dragging, dragging,
updateTreeNew updateTreeNew,
isLoading
}; };
} }
export default connect(mapStateToProps, { setFilter, setTreeFolders, setDragItem, setDragging, setNewTreeFilesBadge })( export default connect(mapStateToProps, { setFilter, setTreeFolders, setDragItem, setDragging, setNewTreeFilesBadge, setIsLoading })(
ArticleBodyContent ArticleBodyContent
); );

32
products/ASC.Files/Client/src/components/pages/Home/index.js
View File

@ -28,7 +28,8 @@ import {
setNewTreeFilesBadge, setNewTreeFilesBadge,
setProgressBarData, setProgressBarData,
setSelected, setSelected,
setTreeFolders setTreeFolders,
setIsLoading
} from "../../../store/files/actions"; } from "../../../store/files/actions";
import { import {
loopTreeFolders, loopTreeFolders,
@ -52,7 +53,6 @@ class PureHome extends React.Component {
isHeaderVisible: false, isHeaderVisible: false,
isHeaderIndeterminate: false, isHeaderIndeterminate: false,
isHeaderChecked: false, isHeaderChecked: false,
isLoading: false,
overwriteSetting: false, overwriteSetting: false,
uploadOriginalFormatSetting: false, uploadOriginalFormatSetting: false,
@ -214,10 +214,6 @@ class PureHome extends React.Component {
} }
}; };
onLoading = status => {
this.setState({ isLoading: status });
};
onChangeOverwrite = () => onChangeOverwrite = () =>
this.setState({ overwriteSetting: !this.state.overwriteSetting }); this.setState({ overwriteSetting: !this.state.overwriteSetting });
@ -405,12 +401,11 @@ class PureHome extends React.Component {
isHeaderIndeterminate, isHeaderIndeterminate,
isHeaderChecked, isHeaderChecked,
selected, selected,
isLoading,
overwriteSetting, overwriteSetting,
uploadOriginalFormatSetting, uploadOriginalFormatSetting,
hideWindowSetting hideWindowSetting
} = this.state; } = this.state;
const { t, progressData, viewAs, convertDialogVisible } = this.props; const { t, progressData, viewAs, isLoading, convertDialogVisible, setIsLoading } = this.props;
const progressBarContent = ( const progressBarContent = (
<div> <div>
@ -468,12 +463,12 @@ class PureHome extends React.Component {
</PageLayout.ArticleHeader> </PageLayout.ArticleHeader>
<PageLayout.ArticleMainButton> <PageLayout.ArticleMainButton>
<ArticleMainButtonContent onLoading={this.onLoading} /> <ArticleMainButtonContent onLoading={setIsLoading} />
</PageLayout.ArticleMainButton> </PageLayout.ArticleMainButton>
<PageLayout.ArticleBody> <PageLayout.ArticleBody>
<ArticleBodyContent <ArticleBodyContent
onLoading={this.onLoading} onLoading={setIsLoading}
isLoading={isLoading} isLoading={isLoading}
onTreeDrop={this.onDrop} onTreeDrop={this.onDrop}
/> />
@ -486,21 +481,21 @@ class PureHome extends React.Component {
onCheck={this.onSectionHeaderContentCheck} onCheck={this.onSectionHeaderContentCheck}
onSelect={this.onSectionHeaderContentSelect} onSelect={this.onSectionHeaderContentSelect}
onClose={this.onClose} onClose={this.onClose}
onLoading={this.onLoading} onLoading={setIsLoading}
isLoading={isLoading} isLoading={isLoading}
loopFilesOperations={this.loopFilesOperations} loopFilesOperations={this.loopFilesOperations}
/> />
</PageLayout.SectionHeader> </PageLayout.SectionHeader>
<PageLayout.SectionFilter> <PageLayout.SectionFilter>
<SectionFilterContent onLoading={this.onLoading} /> <SectionFilterContent onLoading={setIsLoading} />
</PageLayout.SectionFilter> </PageLayout.SectionFilter>
<PageLayout.SectionBody> <PageLayout.SectionBody>
<SectionBodyContent <SectionBodyContent
selected={selected} selected={selected}
isLoading={isLoading} isLoading={isLoading}
onLoading={this.onLoading} onLoading={setIsLoading}
onChange={this.onRowChange} onChange={this.onRowChange}
loopFilesOperations={this.loopFilesOperations} loopFilesOperations={this.loopFilesOperations}
onDropZoneUpload={this.onDrop} onDropZoneUpload={this.onDrop}
@ -508,7 +503,7 @@ class PureHome extends React.Component {
</PageLayout.SectionBody> </PageLayout.SectionBody>
<PageLayout.SectionPaging> <PageLayout.SectionPaging>
<SectionPagingContent onLoading={this.onLoading} /> <SectionPagingContent onLoading={setIsLoading} />
</PageLayout.SectionPaging> </PageLayout.SectionPaging>
</PageLayout> </PageLayout>
</> </>
@ -545,7 +540,8 @@ function mapStateToProps(state) {
selectedFolder, selectedFolder,
selection, selection,
treeFolders, treeFolders,
viewAs viewAs,
isLoading
} = state.files; } = state.files;
const { id } = selectedFolder; const { id } = selectedFolder;
const indexOfTrash = 3; const indexOfTrash = 3;
@ -563,7 +559,8 @@ function mapStateToProps(state) {
selected, selected,
selection, selection,
treeFolders, treeFolders,
viewAs viewAs,
isLoading
}; };
} }
@ -580,6 +577,7 @@ export default connect(
setProgressBarData, setProgressBarData,
setSelected, setSelected,
setTreeFolders, setTreeFolders,
startUpload startUpload,
setIsLoading
} }
)(withRouter(Home)); )(withRouter(Home));

29
products/ASC.Files/Client/src/components/pages/Settings/index.js
View File

@ -8,6 +8,7 @@ import {
ArticleMainButtonContent ArticleMainButtonContent
} from "../../Article"; } from "../../Article";
import { SectionHeaderContent, SectionBodyContent } from "./Section"; import { SectionHeaderContent, SectionBodyContent } from "./Section";
import { setIsLoading } from '../../../store/files/actions';
import { withTranslation, I18nextProvider } from "react-i18next"; import { withTranslation, I18nextProvider } from "react-i18next";
import { createI18N } from "../../../helpers/i18n"; import { createI18N } from "../../../helpers/i18n";
@ -24,7 +25,6 @@ class PureSettings extends React.Component {
super(props) super(props)
this.state = { this.state = {
isLoading: false,
intermediateVersion: false, intermediateVersion: false,
thirdParty: false, thirdParty: false,
originalCopy: false, originalCopy: false,
@ -37,10 +37,6 @@ class PureSettings extends React.Component {
} }
} }
onLoading = status => {
this.setState({ isLoading: status });
};
render() { render() {
console.log('Settings render()'); console.log('Settings render()');
const { const {
@ -54,8 +50,9 @@ class PureSettings extends React.Component {
updateOrCreate, updateOrCreate,
keepIntermediate, keepIntermediate,
} = this.state; } = this.state;
const { match, t } = this.props; const { match, t, isLoading, setIsLoading } = this.props;
const { setting } = match.params; const { setting } = match.params;
console.log(setting)
return ( return (
<PageLayout> <PageLayout>
@ -64,13 +61,14 @@ class PureSettings extends React.Component {
</PageLayout.ArticleHeader> </PageLayout.ArticleHeader>
<PageLayout.ArticleMainButton> <PageLayout.ArticleMainButton>
<ArticleMainButtonContent onLoading={this.onLoading} /> <ArticleMainButtonContent onLoading={setIsLoading} />
</PageLayout.ArticleMainButton> </PageLayout.ArticleMainButton>
<PageLayout.ArticleBody> <PageLayout.ArticleBody>
<ArticleBodyContent <ArticleBodyContent
onLoading={this.onLoading} onLoading={setIsLoading}
isLoading={this.state.isLoading} isLoading={isLoading}
/> />
</PageLayout.ArticleBody> </PageLayout.ArticleBody>
@ -91,7 +89,7 @@ class PureSettings extends React.Component {
updateOrCreate={updateOrCreate} updateOrCreate={updateOrCreate}
keepIntermediate={keepIntermediate} keepIntermediate={keepIntermediate}
t={t} t={t}
onLoading={this.onLoading} onLoading={setIsLoading}
isCheckedThirdParty={this.isCheckedThirdParty} isCheckedThirdParty={this.isCheckedThirdParty}
isCheckedIntermediate={this.isCheckedIntermediate} isCheckedIntermediate={this.isCheckedIntermediate}
/> />
@ -113,7 +111,14 @@ const Settings = props => {
} }
function mapStateToProps(state) { function mapStateToProps(state) {
return {}; return {
isLoading: state.files.isLoading
};
} }
export default connect(mapStateToProps)(withRouter(Settings)); export default connect(
mapStateToProps,
{
setIsLoading
}
)(withRouter(Settings));

23
products/ASC.Files/Client/src/components/pages/VersionHistory/index.js
View File

@ -10,6 +10,7 @@ import {
ArticleBodyContent, ArticleBodyContent,
ArticleMainButtonContent ArticleMainButtonContent
} from "../../Article"; } from "../../Article";
import { setIsLoading } from "../../../store/files/actions";
import { SectionHeaderContent, SectionBodyContent } from "./Section"; import { SectionHeaderContent, SectionBodyContent } from "./Section";
import { createI18N } from "../../../helpers/i18n"; import { createI18N } from "../../../helpers/i18n";
const i18n = createI18N({ const i18n = createI18N({
@ -27,7 +28,6 @@ class PureVersionHistory extends React.Component {
const { fileId } = match.params; const { fileId } = match.params;
this.state = { this.state = {
isLoading: false,
fileId, fileId,
versions: null versions: null
}; };
@ -50,18 +50,14 @@ class PureVersionHistory extends React.Component {
.then(versions => this.setState({ versions })); .then(versions => this.setState({ versions }));
}; };
onLoading = status => {
this.setState({ isLoading: status });
};
render() { render() {
const { versions } = this.state; const { versions } = this.state;
const { t, settings } = this.props; const { t, settings, isLoading } = this.props;
return ( return (
<> <>
<RequestLoader <RequestLoader
visible={this.state.isLoading} visible={isLoading}
zIndex={256} zIndex={256}
loaderSize="16px" loaderSize="16px"
loaderColor={"#999"} loaderColor={"#999"}
@ -77,15 +73,15 @@ class PureVersionHistory extends React.Component {
<PageLayout.ArticleMainButton> <PageLayout.ArticleMainButton>
<ArticleMainButtonContent <ArticleMainButtonContent
onLoading={this.onLoading} onLoading={setIsLoading}
startUpload={this.startUpload} startUpload={this.startUpload}
/> />
</PageLayout.ArticleMainButton> </PageLayout.ArticleMainButton>
<PageLayout.ArticleBody> <PageLayout.ArticleBody>
<ArticleBodyContent <ArticleBodyContent
onLoading={this.onLoading} onLoading={setIsLoading}
isLoading={this.state.isLoading} isLoading={isLoading}
/> />
</PageLayout.ArticleBody> </PageLayout.ArticleBody>
@ -96,7 +92,7 @@ class PureVersionHistory extends React.Component {
<PageLayout.SectionBody> <PageLayout.SectionBody>
<SectionBodyContent <SectionBodyContent
getFileVersions={this.getFileVersions} getFileVersions={this.getFileVersions}
onLoading={this.onLoading} onLoading={setIsLoading}
versions={versions} versions={versions}
culture={settings.culture} culture={settings.culture}
/> />
@ -145,8 +141,9 @@ VersionHistory.propTypes = {
function mapStateToProps(state) { function mapStateToProps(state) {
return { return {
settings: state.auth.settings, settings: state.auth.settings,
isLoaded: state.auth.isLoaded isLoaded: state.auth.isLoaded,
isLoading: state.files.isLoading
}; };
} }
export default connect(mapStateToProps)(withRouter(VersionHistory)); export default connect(mapStateToProps, { setIsLoading })(withRouter(VersionHistory));

8
products/ASC.Files/Client/src/store/files/actions.js
View File

@ -41,6 +41,7 @@ export const SET_NEW_TREE_FILES = "SET_NEW_TREE_FILES";
export const SET_NEW_ROW_ITEMS = "SET_NEW_ROW_ITEMS"; export const SET_NEW_ROW_ITEMS = "SET_NEW_ROW_ITEMS";
export const SET_SELECTED_SETTING = "SET_SELECTED_SETTING"; export const SET_SELECTED_SETTING = "SET_SELECTED_SETTING";
export const SET_EXPAND_SETTINGS_TREE = "SET_EXPAND_SETTINGS_TREE"; export const SET_EXPAND_SETTINGS_TREE = "SET_EXPAND_SETTINGS_TREE";
export const SET_IS_LOADING = "SET_IS_LOADING";
export function setFile(file) { export function setFile(file) {
return { return {
@ -203,6 +204,13 @@ export function setExpandSettingsTree(setting) {
} }
} }
export function setIsLoading(isLoading) {
return {
type: SET_IS_LOADING,
isLoading
}
}
export function setFilterUrl(filter) { export function setFilterUrl(filter) {
const defaultFilter = FilesFilter.getDefault(); const defaultFilter = FilesFilter.getDefault();
const params = []; const params = [];

10
products/ASC.Files/Client/src/store/files/reducers.js
View File

@ -21,7 +21,8 @@ import {
SET_NEW_TREE_FILES, SET_NEW_TREE_FILES,
SET_NEW_ROW_ITEMS, SET_NEW_ROW_ITEMS,
SET_SELECTED_SETTING, SET_SELECTED_SETTING,
SET_EXPAND_SETTINGS_TREE SET_EXPAND_SETTINGS_TREE,
SET_IS_LOADING
} from "./actions"; } from "./actions";
import { api } from "asc-web-common"; import { api } from "asc-web-common";
import { isFileSelected, skipFile, getFilesBySelected } from "./selectors"; import { isFileSelected, skipFile, getFilesBySelected } from "./selectors";
@ -47,7 +48,8 @@ const initialState = {
updateTreeNew: false, updateTreeNew: false,
newRowItems: [], newRowItems: [],
selectedSetting: [], selectedSetting: [],
expandedSetting: [] expandedSetting: [],
isLoading: false
}; };
const filesReducer = (state = initialState, action) => { const filesReducer = (state = initialState, action) => {
@ -153,6 +155,10 @@ const filesReducer = (state = initialState, action) => {
return Object.assign({}, state, { return Object.assign({}, state, {
expandedSetting: action.setting expandedSetting: action.setting
}) })
case SET_IS_LOADING:
return Object.assign({}, state, {
isLoading: action.isLoading
})
default: default:
return state; return state;
} }