Merge branch 'remove-react-redux-loading-bar' into 'develop'

Rip out react-redux-loading-bar

See merge request soapbox-pub/soapbox-fe!771

app/soapbox/features/ui/components/image_loader.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { LoadingBar } from 'react-redux-loading-bar';
 import ZoomableImage from './zoomable_image';
 
 export default class ImageLoader extends React.PureComponent {
@@ -138,7 +137,6 @@ export default class ImageLoader extends React.PureComponent {
 
     return (
       <div className={className}>
-        <LoadingBar loading={loading ? 1 : 0} className='loading-bar' style={{ width: this.state.width || width }} />
         {loading ? (
           <canvas
             className='image-loader__preview-canvas'

app/soapbox/features/ui/containers/loading_bar_container.js

@@ -1,8 +0,0 @@
-import { connect }    from 'react-redux';
-import LoadingBar from 'react-redux-loading-bar';
-
-const mapStateToProps = (state, ownProps) => ({
-  loading: state.get('loadingBar')[ownProps.scope || 'default'],
-});
-
-export default connect(mapStateToProps)(LoadingBar.WrappedComponent);

app/soapbox/features/ui/index.js

@@ -10,7 +10,6 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
 import NotificationsContainer from './containers/notifications_container';
-import LoadingBarContainer from './containers/loading_bar_container';
 import ModalContainer from './containers/modal_container';
 import { debounce } from 'lodash';
 import { uploadCompose, resetCompose } from '../../actions/compose';
@@ -660,7 +659,6 @@ class UI extends React.PureComponent {
           {me && floatingActionButton}
 
           <NotificationsContainer />
-          <LoadingBarContainer className='loading-bar' />
           <ModalContainer />
           <UploadArea active={draggingOver} onClose={this.closeUploadModal} />
           {me && <SidebarMenu />}

app/soapbox/middleware/loading_bar.js

@@ -1,25 +0,0 @@
-import { showLoading, hideLoading } from 'react-redux-loading-bar';
-
-const defaultTypeSuffixes = ['PENDING', 'FULFILLED', 'REJECTED'];
-
-export default function loadingBarMiddleware(config = {}) {
-  const promiseTypeSuffixes = config.promiseTypeSuffixes || defaultTypeSuffixes;
-
-  return ({ dispatch }) => next => (action) => {
-    if (action.type && !action.skipLoading) {
-      const [PENDING, FULFILLED, REJECTED] = promiseTypeSuffixes;
-
-      const isPending = new RegExp(`${PENDING}$`, 'g');
-      const isFulfilled = new RegExp(`${FULFILLED}$`, 'g');
-      const isRejected = new RegExp(`${REJECTED}$`, 'g');
-
-      if (action.type.match(isPending)) {
-        dispatch(showLoading());
-      } else if (action.type.match(isFulfilled) || action.type.match(isRejected)) {
-        dispatch(hideLoading());
-      }
-    }
-
-    return next(action);
-  };
-}

app/soapbox/reducers/index.js

@@ -5,7 +5,6 @@ import dropdown_menu from './dropdown_menu';
 import timelines from './timelines';
 import meta from './meta';
 import alerts from './alerts';
-import { loadingBarReducer } from 'react-redux-loading-bar';
 import modal from './modal';
 import user_lists from './user_lists';
 import domain_lists from './domain_lists';
@@ -61,7 +60,6 @@ const appReducer = combineReducers({
   timelines,
   meta,
   alerts,
-  loadingBar: loadingBarReducer,
   modal,
   user_lists,
   domain_lists,

app/soapbox/store/configureStore.js

@@ -1,14 +1,12 @@
 import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import appReducer from '../reducers';
-import loadingBarMiddleware from '../middleware/loading_bar';
 import errorsMiddleware from '../middleware/errors';
 import soundsMiddleware from '../middleware/sounds';
 
 export default function configureStore() {
   return createStore(appReducer, compose(applyMiddleware(
     thunk,
-    loadingBarMiddleware({ promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'] }),
     errorsMiddleware(),
     soundsMiddleware(),
   ), window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f));

app/styles/loading.scss

@@ -148,14 +148,6 @@
   animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s 2 both;
 }
 
-.loading-bar {
-  background-color: var(--highlight-text-color);
-  height: 3px;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
 .load-more {
   display: block;
   color: var(--primary-text-color);

app/styles/ui.scss

@@ -279,10 +279,6 @@
     object-fit: contain;
   }
 
-  .loading-bar {
-    position: relative;
-  }
-
   &.image-loader--amorphous .image-loader__preview-canvas {
     display: none;
   }

docs/store.md

@@ -104,15 +104,6 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
   alerts: []
     ```
 
-- `loadingBar` - Managed by [react-redux-loading-bar](https://github.com/mironov/react-redux-loading-bar)
-
-    Sample:
-    ```
-  loadingBar: {
-    'default': 0
-  }
-    ```
-
 - `modal`
 
     Sample:

package.json

@@ -125,7 +125,6 @@
     "react-overlays": "^0.9.0",
     "react-popper": "^2.2.3",
     "react-redux": "^7.2.5",
-    "react-redux-loading-bar": "^5.0.0",
     "react-router-dom": "^4.3.1",
     "react-router-scroll-4": "^1.0.0-beta.1",
     "react-sparklines": "^1.7.0",

yarn.lock

@@ -7879,14 +7879,6 @@ react-popper@^2.2.3, react-popper@^2.2.5:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-redux-loading-bar@^5.0.0:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/react-redux-loading-bar/-/react-redux-loading-bar-5.0.2.tgz#e62d527892b0a7682baa2ebbb3fd34c0b807e485"
-  integrity sha512-M+gK/Q79UG3iVljv6myRJptdQ5sIKdYDigeukwGocvWLCgWFdtpeP8IY8lBIYsqHXtuFBP/gj7E3qvGwCtcpRQ==
-  dependencies:
-    prop-types "^15.7.2"
-    react-lifecycles-compat "^3.0.4"
-
 react-redux@^7.2.5:
   version "7.2.5"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.5.tgz#213c1b05aa1187d9c940ddfc0b29450957f6a3b8"