secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Working through ReactJS lifecycle deprecations

Browse Source
This commit is contained in:
James Barnsley
2019-11-15 13:50:39 +13:00
parent f5db13f17c
commit 0206fb7c69
18 changed files with 20078 additions and 15360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/js/App.js
View File

@ -66,16 +66,6 @@ export class App extends React.Component {
this.handleFocusAndBlur = this.handleFocusAndBlur.bind(this);
}
componentWillMount() {
window.addEventListener(
'beforeinstallprompt',
this.handleInstallPrompt,
false,
);
window.addEventListener('focus', this.handleFocusAndBlur, false);
window.addEventListener('blur', this.handleFocusAndBlur, false);
}
componentWillUnmount() {
window.removeEventListener(
'beforeinstallprompt',
@ -87,6 +77,14 @@ export class App extends React.Component {
}
componentDidMount() {
window.addEventListener(
'beforeinstallprompt',
this.handleInstallPrompt,
false,
);
window.addEventListener('focus', this.handleFocusAndBlur, false);
window.addEventListener('blur', this.handleFocusAndBlur, false);
if (this.props.allow_reporting) {
ReactGA.initialize('UA-64701652-3');
}

40
src/js/components/ContextMenu.js
View File

@ -41,16 +41,30 @@ class ContextMenu extends React.Component {
window.removeEventListener('touchstart', this.handleTouchStart, false);
}
componentWillReceiveProps(nextProps) {
componentDidUpdate(prevProps) {
const {
menu: prevMenu,
lastfm_authorized: prevLastfm_authorized,
tracks: prevTracks,
} = prevProps;
const {
menu,
tracks,
lastfm_authorized,
spotify_authorized,
spotifyActions,
lastfmActions,
} = this.props;
// if we've been given a menu object (ie activated) when we didn't have one prior
if (nextProps.menu && !this.props.menu) {
if (!prevMenu && menu) {
this.setState({ submenu: null });
const context = this.getContext(nextProps);
const context = this.getContext(this.props);
// if we're able to be in the library, run a check
if (nextProps.spotify_authorized && context.source == 'spotify') {
switch (nextProps.menu.context) {
if (spotify_authorized && context.source === 'spotify') {
switch (menu.context) {
case 'artist':
case 'album':
case 'playlist':
@ -59,23 +73,27 @@ class ContextMenu extends React.Component {
case 'playlist-track':
case 'editable-playlist-track':
case 'queue-track':
this.props.spotifyActions.following(nextProps.menu.items[0].uri);
spotifyActions.following(menu.items[0].uri);
break;
default:
break;
}
}
// if we're able to be in the LastFM library, run a check
if (nextProps.lastfm_authorized && context.is_track && context.items_count == 1) {
if (nextProps.menu.items[0].uri && this.props.tracks[nextProps.menu.items[0].uri] !== undefined && this.props.tracks[nextProps.menu.items[0].uri].userloved === undefined) {
this.props.lastfmActions.getTrack(nextProps.menu.items[0].uri);
if (lastfm_authorized && context.is_track && context.items_count == 1) {
if (menu.items[0].uri && prevTracks[menu.items[0].uri] !== undefined && tracks[menu.items[0].uri].userloved === undefined) {
lastfmActions.getTrack(menu.items[0].uri);
}
}
}
}
handleScroll(e) {
if (this.props.menu) {
this.props.uiActions.hideContextMenu();
const { menu, uiActions } = this.props;
if (menu) {
uiActions.hideContextMenu();
}
}

6
src/js/components/Fields/Dropzone.js
View File

@ -5,7 +5,7 @@ import { bindActionCreators } from 'redux';
import Icon from '../Icon';
export default class Dropzone extends React.Component {
export default class Dropzone extends React.Component {
constructor(props) {
super(props);
@ -17,7 +17,7 @@ export default class Dropzone extends React.Component {
this.handleMouseOut = this.handleMouseOut.bind(this);
}
componentWillMount() {
componentDidMount() {
window.addEventListener('mouseover', this.handleMouseOver, false);
window.addEventListener('mouseout', this.handleMouseOut, false);
}
@ -45,4 +45,4 @@ export default class Dropzone extends React.Component {
</div>
);
}
}
}

2
src/js/components/Fields/FilterField.js
View File

@ -15,7 +15,7 @@ export default class FilterField extends React.Component {
this.handleKeyUp = this.handleKeyUp.bind(this);
}
componentWillMount() {
componentDidMount() {
window.addEventListener('keyup', this.handleKeyUp, false);
this.setState({ value: this.props.initialValue });
}

2
src/js/components/Hotkeys.js
View File

@ -11,7 +11,7 @@ class Hotkeys extends React.Component {
this.handleKeyDown = this.handleKeyDown.bind(this);
}
componentWillMount() {
componentDidMount() {
window.addEventListener('keydown', this.handleKeyDown, false);
}

6
src/js/components/Parallax.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import * as helpers from '../helpers';
export default class Parallax extends React.Component {
export default class Parallax extends React.Component {
constructor(props) {
super(props);
@ -13,7 +13,7 @@ export default class Parallax extends React.Component {
};
}
componentWillMount() {
componentDidMount() {
if (this.props.image) {
this.loadImage(this.props.image);
}
@ -26,7 +26,7 @@ export default class Parallax extends React.Component {
}
loadImage(url) {
if (url && url !== '') {
if (url && url !== '') {
this.setState({
loaded: helpers.isCached(url),
url,

34
src/js/components/TrackList.js
View File

@ -10,7 +10,7 @@ import * as helpers from '../helpers';
import * as mopidyActions from '../services/mopidy/actions';
import * as uiActions from '../services/ui/actions';
class TrackList extends React.Component {
class TrackList extends React.Component {
constructor(props) {
super(props);
@ -21,7 +21,7 @@ class TrackList extends React.Component {
this.handleTouchEnd = this.handleTouchEnd.bind(this);
}
componentWillMount() {
componentDidMount() {
window.addEventListener('keydown', this.handleKeyDown, false);
window.addEventListener('touchmove', this.handleTouchMove, false);
window.addEventListener('touchend', this.handleTouchEnd, false);
@ -33,7 +33,7 @@ class TrackList extends React.Component {
window.removeEventListener('touchend', this.handleTouchEnd, false);
}
handleKeyDown(e) {
handleKeyDown(e) {
// When we're focussed on certian elements, don't fire any shortcuts
// Typically form inputs
const ignoreNodes = ['INPUT', 'TEXTAREA'];
@ -83,7 +83,7 @@ class TrackList extends React.Component {
}
}
handleDrag(e, track_key) {
handleDrag(e, track_key) {
let selected_tracks = [];
// Dragging a non-selected track. We need to deselect everything
@ -107,7 +107,7 @@ class TrackList extends React.Component {
}
handleDrop(e, track_key) {
if (this.props.dragger && this.props.dragger.active) {
if (this.props.dragger && this.props.dragger.active) {
// if this tracklist handles sorting, handle it
if (this.props.reorderTracks !== undefined) {
const indexes = this.props.dragger.victims_indexes;
@ -118,11 +118,11 @@ class TrackList extends React.Component {
this.touch_dragging_tracks_keys = false;
}
handleTouchDrag(e, track_key) {
handleTouchDrag(e, track_key) {
console.log('touchDragging', e, track_key);
// Drag initiated on a selected track
if (this.props.selected_tracks.includes(track_key)) {
if (this.props.selected_tracks.includes(track_key)) {
// They're all dragging
this.touch_dragging_tracks_keys = this.props.selected_tracks;
@ -134,7 +134,7 @@ class TrackList extends React.Component {
}
handleTouchMove(e) {
if (this.touch_dragging_tracks_keys) {
if (this.touch_dragging_tracks_keys) {
const touch = e.touches[0];
let over = $(document.elementFromPoint(touch.clientX, touch.clientY));
if (!over.is('.track')) {
@ -198,7 +198,7 @@ class TrackList extends React.Component {
this.updateSelection(e, track_key);
}
handleContextMenu(e, track_key = null) {
handleContextMenu(e, track_key = null) {
// Do our best to stop any flow-on events
e.preventDefault();
e.stopPropagation();
@ -231,7 +231,7 @@ class TrackList extends React.Component {
updateSelection(e, track_key, touched = false) {
let { selected_tracks } = this.props;
if ((e.ctrlKey || e.metaKey) || touched) {
if ((e.ctrlKey || e.metaKey) || touched) {
// Already selected, so unselect it
if (selected_tracks.includes(track_key)) {
const index = selected_tracks.indexOf(track_key);
@ -240,8 +240,8 @@ class TrackList extends React.Component {
// Not selected, so add it
} else {
selected_tracks.push(track_key);
}
} else if (e.shiftKey) {
}
} else if (e.shiftKey) {
const last_selected_track = this.digestTracksKeys(selected_tracks[selected_tracks.length - 1]);
const last_selected_track_index = last_selected_track.index;
const newly_selected_track = this.digestTracksKeys(track_key);
@ -302,7 +302,7 @@ class TrackList extends React.Component {
// Default to playing the URIs
}
const selected_tracks_uris = helpers.arrayOf('uri', selected_tracks);
return this.props.mopidyActions.playURIs(selected_tracks_uris, this.props.uri);
return this.props.mopidyActions.playURIs(selected_tracks_uris, this.props.uri);
}
removeTracks() {
@ -315,7 +315,7 @@ class TrackList extends React.Component {
// No handler? We can't really do anything then, so notify user
}
this.props.uiActions.createNotification({ content: `Cannot delete ${selected_tracks.length > 1 ? 'these tracks' : 'this track'}`, type: 'bad' });
this.props.uiActions.createNotification({ content: `Cannot delete ${selected_tracks.length > 1 ? 'these tracks' : 'this track'}`, type: 'bad' });
}
@ -363,7 +363,7 @@ class TrackList extends React.Component {
const key_components = key.split('@@');
if (indexes_only) {
array.push(key_components[0]);
array.push(key_components[0]);
} else {
array.push({
key,
@ -379,7 +379,7 @@ class TrackList extends React.Component {
if (singleton && array.length > 0) {
return array[0];
}
return array;
return array;
}
@ -418,7 +418,7 @@ class TrackList extends React.Component {
handleDrop={(e) => this.handleDrop(e, track_key)}
handleTap={(e) => this.handleTap(e, track_key)}
handleDoubleTap={(e) => this.handleDoubleTap(e, track_key)}
handleTouchDrag={(e) => this.handleTouchDrag(e, track_key)}
handleTouchDrag={(e) => this.handleTouchDrag(e, track_key)}
/>
);
},

6
src/js/views/Playlist.js
View File

@ -27,16 +27,14 @@ import * as spotifyActions from '../services/spotify/actions';
class Playlist extends React.Component {
constructor(props) {
super(props);
}
componentWillMount() {
let { uri } = this.props;
let { uri } = props;
// Spotify upgraded their playlists URI to remove user component (Sept 2018)
// We accept the old format, and redirect to the new one
if (uri.includes('spotify:user:')) {
uri = uri.replace(/spotify:user:([^:]*?):/i, 'spotify:');
this.props.history.push(`/playlist/${encodeURIComponent(uri)}`);
props.history.push(`/playlist/${encodeURIComponent(uri)}`);
}
}

12
src/js/views/Queue.js
View File

@ -30,17 +30,15 @@ class Queue extends React.Component {
};
}
componentWillMount() {
// Before we mount, restore any limit defined in our location state
componentDidMount() {
// Restore any limit defined in our location state
const state = this.props.location.state ? this.props.location.state : {};
if (state.limit) {
this.setState({
limit: state.limit,
});
}
}
componentDidMount() {
this.props.uiActions.setWindowTitle('Now playing');
}
@ -147,7 +145,7 @@ class Queue extends React.Component {
switch (uri_type){
case 'radio':
const radio_seeds = helpers.getFromUri('seeds', added_from_uri);
for (let seed of radio_seeds) {
let item_type = helpers.uriType(seed);
let item_library = this.props[`${item_type}s`];
@ -180,13 +178,13 @@ class Queue extends React.Component {
<URILink
uri={items[0].uri}
className="current-track__added-from__thumbnail"
>
>
<Thumbnail
images={items[0].images}
size="small"
circle={helpers.uriType(items[0].uri) === 'artist'}
/>
</URILink>
</URILink>
)}
<div className="current-track__added-from__text">
{'Playing from '}

6
src/js/views/library/LibraryAlbums.js
View File

@ -29,17 +29,15 @@ class LibraryAlbums extends React.Component {
};
}
componentWillMount() {
// Before we mount, restore any limit defined in our location state
componentDidMount() {
// Restore any limit defined in our location state
const state = (this.props.location.state ? this.props.location.state : {});
if (state.limit) {
this.setState({
limit: state.limit,
});
}
}
componentDidMount() {
this.props.uiActions.setWindowTitle('Albums');
if (this.props.mopidy_connected && this.props.mopidy_library_albums_status != 'finished' && this.props.mopidy_library_albums_status != 'started' && (this.props.source == 'all' || this.props.source == 'local')) {

6
src/js/views/library/LibraryArtists.js
View File

@ -29,17 +29,15 @@ class LibraryArtists extends React.Component {
};
}
componentWillMount() {
// Before we mount, restore any limit defined in our location state
componentDidMount() {
// Restore any limit defined in our location state
const state = (this.props.location.state ? this.props.location.state : {});
if (state.limit) {
this.setState({
limit: state.limit,
});
}
}
componentDidMount() {
this.props.uiActions.setWindowTitle('Artists');
if (!this.props.mopidy_library_artists && this.props.mopidy_connected && (this.props.source == 'all' || this.props.source == 'local')) {

6
src/js/views/library/LibraryPlaylists.js
View File

@ -29,17 +29,15 @@ class LibraryPlaylists extends React.Component {
};
}
componentWillMount() {
// Before we mount, restore any limit defined in our location state
componentDidMount() {
// Restore any limit defined in our location state
const state = (this.props.location.state ? this.props.location.state : {});
if (state.limit) {
this.setState({
limit: state.limit,
});
}
}
componentDidMount() {
this.props.uiActions.setWindowTitle('Playlists');
if (!this.props.mopidy_library_playlists && this.props.mopidy_connected && (this.props.source == 'all' || this.props.source == 'local')) {

12
src/js/views/modals/Modal.js
View File

@ -6,12 +6,12 @@ import { bindActionCreators } from 'redux';
import * as helpers from '../../helpers';
import Icon from '../../components/Icon';
class Modal extends React.Component {
class Modal extends React.Component {
constructor(props) {
super(props);
}
componentWillMount() {
componentDidMount() {
$('body').addClass('modal-open');
}
@ -19,7 +19,7 @@ class Modal extends React.Component {
$('body').removeClass('modal-open');
}
render() {
render() {
let className = 'modal';
if (this.props.className) {
className += ` ${this.props.className}`;
@ -29,10 +29,10 @@ class Modal extends React.Component {
<div className={className}>
<div className="controls">
{this.props.noclose ? null : (
{this.props.noclose ? null : (
<div className="control close" onClick={(e) => window.history.back()}>
<Icon name="close" className="white" />
</div>
</div>
) }
</div>
@ -50,4 +50,4 @@ const mapStateToProps = (state, ownProps) => ({
const mapDispatchToProps = (dispatch) => ({});
export default connect(mapStateToProps, mapDispatchToProps)(Modal);
export default connect(mapStateToProps, mapDispatchToProps)(Modal);