PropTypes and refactoring
This commit is contained in:
@@ -13,6 +13,177 @@ import { notifyError, notifyInfo } from '../../redux/actions/error_actions';
|
||||
|
||||
const Constants = require('../../constants');
|
||||
|
||||
class PinnedManager extends IPCContainer {
|
||||
state = {
|
||||
active_directory: '/',
|
||||
items: [],
|
||||
previous: [],
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.setRequestHandler(Constants.IPC_Get_Directory_Items_Reply, this.onGetDirectoryItemsReply);
|
||||
this.grabDirectoryItems();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
super.componentWillUnmount();
|
||||
}
|
||||
|
||||
grabDirectoryItems = () => {
|
||||
this.sendRequest(Constants.IPC_Get_Directory_Items, {
|
||||
Provider: this.props.DisplayConfiguration,
|
||||
Remote: this.props.DisplayRemoteConfiguration,
|
||||
S3: this.props.DisplayS3Configuration,
|
||||
Version: this.props.version,
|
||||
Path: this.state.active_directory,
|
||||
});
|
||||
};
|
||||
|
||||
onGetDirectoryItemsReply = (_, { data }) => {
|
||||
if (data.Success) {
|
||||
const items = data.Items.filter(
|
||||
(i) =>
|
||||
i.path !== '.' && (this.state.active_directory !== '/' || i.path.substr(0, 1) !== '.')
|
||||
).map((i) => {
|
||||
return {
|
||||
...i,
|
||||
name: i.path === '..' ? i.path : i.path.substr(i.path.lastIndexOf('/') + 1),
|
||||
meta: {
|
||||
...i.meta,
|
||||
pinned: i.meta.pinned === '1',
|
||||
},
|
||||
};
|
||||
});
|
||||
this.setState({
|
||||
items,
|
||||
});
|
||||
} else {
|
||||
this.props.notifyError(data.Error, () => {
|
||||
this.props.displayPinnedManager(false);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
createDirectory = (name, path, idx, total, item_idx) => {
|
||||
const style = {};
|
||||
if (item_idx + 1 !== total) {
|
||||
style.marginBottom = '4px';
|
||||
}
|
||||
return (
|
||||
<div key={'dir_' + idx} style={{ ...style }}>
|
||||
<Button
|
||||
buttonStyles={{ textAlign: 'left' }}
|
||||
clicked={() => {
|
||||
const previous = [...this.state.previous];
|
||||
if (path === '..') {
|
||||
path = previous.pop();
|
||||
} else {
|
||||
previous.push(this.state.active_directory);
|
||||
}
|
||||
this.setState(
|
||||
{
|
||||
items: [],
|
||||
active_directory: path,
|
||||
previous,
|
||||
},
|
||||
() => {
|
||||
this.grabDirectoryItems();
|
||||
}
|
||||
);
|
||||
}}>
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
fixedWidth
|
||||
color={'var(--heading_text_color)'}
|
||||
style={{ padding: 0, margin: 0 }}
|
||||
/>
|
||||
{name}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
createFile = (name, path, pinned, idx, total, item_idx) => {
|
||||
const style = { textAlign: 'left' };
|
||||
if (item_idx + 1 !== total) {
|
||||
style.marginBottom = '2px';
|
||||
}
|
||||
return (
|
||||
<div key={'file_' + idx} style={{ ...style }}>
|
||||
<CheckBox
|
||||
checked={pinned}
|
||||
changed={() => {
|
||||
const items = JSON.parse(JSON.stringify(this.state.items));
|
||||
const pinned = (items[item_idx].meta.pinned = !items[item_idx].meta.pinned);
|
||||
this.setState(
|
||||
{
|
||||
items,
|
||||
},
|
||||
() => {
|
||||
this.sendSyncRequest(Constants.IPC_Set_Pinned, {
|
||||
Provider: this.props.DisplayConfiguration,
|
||||
Remote: this.props.DisplayRemoteConfiguration,
|
||||
S3: this.props.DisplayS3Configuration,
|
||||
Version: this.props.version,
|
||||
Path: path,
|
||||
Pinned: pinned,
|
||||
});
|
||||
}
|
||||
);
|
||||
}}
|
||||
label={name}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
let idx = 0;
|
||||
return (
|
||||
<Box
|
||||
dxDark
|
||||
dxStyle={{
|
||||
height: 'calc(100vh - (var(--default_spacing) * 4)',
|
||||
padding: 'var(--default_spacing)',
|
||||
width: 'calc(100vw - (var(--default_spacing) * 4)',
|
||||
}}>
|
||||
<div className={'PinnedManager'}>
|
||||
<div className={'PinnedManagerHeading'}>
|
||||
<div className={'PinnedManagerClose'}>
|
||||
<a
|
||||
href={'#'}
|
||||
onClick={() => this.props.displayPinnedManager(false)}
|
||||
style={{ cursor: 'pointer', flex: '0' }}>
|
||||
X
|
||||
</a>
|
||||
</div>
|
||||
<h1 style={{ width: '100%', textAlign: 'center' }}>{'Pinned File Manager'}</h1>
|
||||
<div className={'PinnedManagerActiveDirectory'}>
|
||||
<b> {this.state.active_directory}</b>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'PinnedManagerItemsOwner'}>
|
||||
<div className={'PinnedManagerItems'}>
|
||||
{this.state.items.map((i, k) => {
|
||||
return i.directory
|
||||
? this.createDirectory(i.name, i.path, idx++, this.state.items.length, k)
|
||||
: this.createFile(
|
||||
i.name,
|
||||
i.path,
|
||||
i.meta.pinned,
|
||||
idx++,
|
||||
this.state.items.length,
|
||||
k
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
DisplayConfiguration: state.mounts.DisplayConfiguration,
|
||||
@@ -30,181 +201,4 @@ const mapDispatchToProps = (dispatch) => {
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(
|
||||
class extends IPCContainer {
|
||||
state = {
|
||||
active_directory: '/',
|
||||
items: [],
|
||||
previous: [],
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.setRequestHandler(
|
||||
Constants.IPC_Get_Directory_Items_Reply,
|
||||
this.onGetDirectoryItemsReply
|
||||
);
|
||||
this.grabDirectoryItems();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
super.componentWillUnmount();
|
||||
}
|
||||
|
||||
grabDirectoryItems = () => {
|
||||
this.sendRequest(Constants.IPC_Get_Directory_Items, {
|
||||
Provider: this.props.DisplayConfiguration,
|
||||
Remote: this.props.DisplayRemoteConfiguration,
|
||||
S3: this.props.DisplayS3Configuration,
|
||||
Version: this.props.version,
|
||||
Path: this.state.active_directory,
|
||||
});
|
||||
};
|
||||
|
||||
onGetDirectoryItemsReply = (_, { data }) => {
|
||||
if (data.Success) {
|
||||
const items = data.Items.filter(
|
||||
(i) =>
|
||||
i.path !== '.' && (this.state.active_directory !== '/' || i.path.substr(0, 1) !== '.')
|
||||
).map((i) => {
|
||||
return {
|
||||
...i,
|
||||
name: i.path === '..' ? i.path : i.path.substr(i.path.lastIndexOf('/') + 1),
|
||||
meta: {
|
||||
...i.meta,
|
||||
pinned: i.meta.pinned === '1',
|
||||
},
|
||||
};
|
||||
});
|
||||
this.setState({
|
||||
items,
|
||||
});
|
||||
} else {
|
||||
this.props.notifyError(data.Error, () => {
|
||||
this.props.displayPinnedManager(false);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
createDirectory = (name, path, idx, total, item_idx) => {
|
||||
const style = {};
|
||||
if (item_idx + 1 !== total) {
|
||||
style.marginBottom = '4px';
|
||||
}
|
||||
return (
|
||||
<div key={'dir_' + idx} style={{ ...style }}>
|
||||
<Button
|
||||
buttonStyles={{ textAlign: 'left' }}
|
||||
clicked={() => {
|
||||
const previous = [...this.state.previous];
|
||||
if (path === '..') {
|
||||
path = previous.pop();
|
||||
} else {
|
||||
previous.push(this.state.active_directory);
|
||||
}
|
||||
this.setState(
|
||||
{
|
||||
items: [],
|
||||
active_directory: path,
|
||||
previous,
|
||||
},
|
||||
() => {
|
||||
this.grabDirectoryItems();
|
||||
}
|
||||
);
|
||||
}}>
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
fixedWidth
|
||||
color={'var(--heading_text_color)'}
|
||||
style={{ padding: 0, margin: 0 }}
|
||||
/>
|
||||
{name}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
createFile = (name, path, pinned, idx, total, item_idx) => {
|
||||
const style = { textAlign: 'left' };
|
||||
if (item_idx + 1 !== total) {
|
||||
style.marginBottom = '2px';
|
||||
}
|
||||
return (
|
||||
<div key={'file_' + idx} style={{ ...style }}>
|
||||
<CheckBox
|
||||
checked={pinned}
|
||||
changed={() => {
|
||||
const items = JSON.parse(JSON.stringify(this.state.items));
|
||||
const pinned = (items[item_idx].meta.pinned = !items[item_idx].meta.pinned);
|
||||
this.setState(
|
||||
{
|
||||
items,
|
||||
},
|
||||
() => {
|
||||
this.sendSyncRequest(Constants.IPC_Set_Pinned, {
|
||||
Provider: this.props.DisplayConfiguration,
|
||||
Remote: this.props.DisplayRemoteConfiguration,
|
||||
S3: this.props.DisplayS3Configuration,
|
||||
Version: this.props.version,
|
||||
Path: path,
|
||||
Pinned: pinned,
|
||||
});
|
||||
}
|
||||
);
|
||||
}}
|
||||
label={name}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
let idx = 0;
|
||||
return (
|
||||
<Box
|
||||
dxDark
|
||||
dxStyle={{
|
||||
height: 'calc(100vh - (var(--default_spacing) * 4)',
|
||||
padding: 'var(--default_spacing)',
|
||||
width: 'calc(100vw - (var(--default_spacing) * 4)',
|
||||
}}>
|
||||
<div className={'PinnedManager'}>
|
||||
<div className={'PinnedManagerHeading'}>
|
||||
<div className={'PinnedManagerClose'}>
|
||||
<a
|
||||
href={'#'}
|
||||
onClick={() => this.props.displayPinnedManager(false)}
|
||||
style={{ cursor: 'pointer', flex: '0' }}>
|
||||
X
|
||||
</a>
|
||||
</div>
|
||||
<h1 style={{ width: '100%', textAlign: 'center' }}>{'Pinned File Manager'}</h1>
|
||||
<div className={'PinnedManagerActiveDirectory'}>
|
||||
<b> {this.state.active_directory}</b>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'PinnedManagerItemsOwner'}>
|
||||
<div className={'PinnedManagerItems'}>
|
||||
{this.state.items.map((i, k) => {
|
||||
return i.directory
|
||||
? this.createDirectory(i.name, i.path, idx++, this.state.items.length, k)
|
||||
: this.createFile(
|
||||
i.name,
|
||||
i.path,
|
||||
i.meta.pinned,
|
||||
idx++,
|
||||
this.state.items.length,
|
||||
k
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(PinnedManager);
|
||||
|
||||
Reference in New Issue
Block a user