Move 'currentUploads' to 'publish' reducer

`publish` is currently rehydrated, so we can ride on that and don't need to store the `currentUploads` in `localStorage` for persistence. This would allow us to store Markdown Post data too, as `localStorage` has a 5MB limit per app.

We could have also made `webReducer` rehydrate, but in this repo, there is no need to split it to another reducer. It also makes more sense to be part of publish anyway (at least to me).

This change is mostly moving items between files, with the exception of
1. An additional REHYDRATE in the publish reducer to clean up the tusUploader.
2. Not clearing `currentUploads` in CLEAR_PUBLISH.

extras/lbryinc/constants/action_types.js

@@ -83,9 +83,6 @@ export const SYNC_APPLY_FAILED = 'SYNC_APPLY_FAILED';
 export const SYNC_APPLY_BAD_PASSWORD = 'SYNC_APPLY_BAD_PASSWORD';
 export const SYNC_RESET = 'SYNC_RESET';
 
-// Lbry.tv
-export const UPDATE_UPLOAD_PROGRESS = 'UPDATE_UPLOAD_PROGRESS';
-
 // User
 export const GENERATE_AUTH_TOKEN_FAILURE = 'GENERATE_AUTH_TOKEN_FAILURE';
 export const GENERATE_AUTH_TOKEN_STARTED = 'GENERATE_AUTH_TOKEN_STARTED';

extras/lbryinc/index.js

@@ -27,7 +27,6 @@ export {
   doResetSync,
   doSyncEncryptAndDecrypt,
 } from 'redux/actions/sync';
-export { doUpdateUploadAdd, doUpdateUploadProgress, doUpdateUploadRemove } from './redux/actions/web';
 
 // reducers
 export { authReducer } from './redux/reducers/auth';
@@ -37,7 +36,6 @@ export { filteredReducer } from './redux/reducers/filtered';
 // export { homepageReducer } from './redux/reducers/homepage';
 export { statsReducer } from './redux/reducers/stats';
 export { syncReducer } from './redux/reducers/sync';
-export { webReducer } from './redux/reducers/web';
 
 // selectors
 export { selectAuthToken, selectIsAuthenticating } from './redux/selectors/auth';
@@ -70,4 +68,3 @@ export {
   selectSyncApplyErrorMessage,
   selectSyncApplyPasswordError,
 } from './redux/selectors/sync';
-export { selectCurrentUploads, selectUploadCount } from './redux/selectors/web';

extras/lbryinc/redux/actions/web.js

@@ -1,30 +0,0 @@
-// @flow
-import * as ACTIONS from 'constants/action_types';
-
-export function doUpdateUploadAdd(file: File, params: { [key: string]: any }, tusUploader: any) {
-  return (dispatch: Dispatch, getState: GetState) => {
-    dispatch({
-      type: ACTIONS.UPDATE_UPLOAD_ADD,
-      data: { file, params, tusUploader },
-    });
-  };
-}
-
-export const doUpdateUploadProgress = (props: {
-  params: { [key: string]: any },
-  progress?: string,
-  status?: string,
-}) => (dispatch: Dispatch) =>
-  dispatch({
-    type: ACTIONS.UPDATE_UPLOAD_PROGRESS,
-    data: props,
-  });
-
-export function doUpdateUploadRemove(params: { [key: string]: any }) {
-  return (dispatch: Dispatch, getState: GetState) => {
-    dispatch({
-      type: ACTIONS.UPDATE_UPLOAD_REMOVE,
-      data: { params },
-    });
-  };
-}

extras/lbryinc/redux/reducers/web.js

@@ -1,81 +0,0 @@
-// @flow
-import * as ACTIONS from 'constants/action_types';
-import { serializeFileObj } from 'util/file';
-
-const CURRENT_UPLOADS = 'current_uploads';
-const getKeyFromParam = (params) => `${params.name}#${params.channel || 'anonymous'}`;
-
-export type TvState = {
-  currentUploads: { [key: string]: FileUploadItem },
-};
-
-const reducers = {};
-
-const defaultState: TvState = {
-  currentUploads: {},
-};
-
-try {
-  const uploads = JSON.parse(window.localStorage.getItem(CURRENT_UPLOADS));
-  if (uploads) {
-    defaultState.currentUploads = uploads;
-    Object.keys(defaultState.currentUploads).forEach((key) => {
-      delete defaultState.currentUploads[key].tusUploader;
-    });
-  }
-} catch (e) {
-  console.log(e);
-}
-
-reducers[ACTIONS.UPDATE_UPLOAD_ADD] = (state: TvState, action) => {
-  const { file, params, tusUploader } = action.data;
-  const key = getKeyFromParam(params);
-  const currentUploads = Object.assign({}, state.currentUploads);
-
-  currentUploads[key] = {
-    file,
-    fileFingerprint: serializeFileObj(file), // TODO: get hash instead?
-    progress: '0',
-    params,
-    tusUploader,
-  };
-
-  window.localStorage.setItem(CURRENT_UPLOADS, JSON.stringify(currentUploads));
-  return { ...state, currentUploads };
-};
-
-reducers[ACTIONS.UPDATE_UPLOAD_PROGRESS] = (state: TvState, action) => {
-  const { params, progress, status } = action.data;
-  const key = getKeyFromParam(params);
-  const currentUploads = Object.assign({}, state.currentUploads);
-
-  if (progress) {
-    currentUploads[key].progress = progress;
-    delete currentUploads[key].status;
-  } else if (status) {
-    currentUploads[key].status = status;
-    if (status === 'error') {
-      delete currentUploads[key].tusUploader;
-    }
-  }
-
-  window.localStorage.setItem(CURRENT_UPLOADS, JSON.stringify(currentUploads));
-  return { ...state, currentUploads };
-};
-
-reducers[ACTIONS.UPDATE_UPLOAD_REMOVE] = (state: TvState, action) => {
-  const { params } = action.data;
-  const key = getKeyFromParam(params);
-  const currentUploads = Object.assign({}, state.currentUploads);
-
-  delete currentUploads[key];
-
-  window.localStorage.setItem(CURRENT_UPLOADS, JSON.stringify(currentUploads));
-  return { ...state, currentUploads };
-};
-
-export function webReducer(state: TvState = defaultState, action: any) {
-  const handler = reducers[action.type];
-  if (handler) return handler(state, action);
-  return state;
-}

extras/lbryinc/redux/selectors/web.js

@@ -1,10 +0,0 @@
-import { createSelector } from 'reselect';
-
-const selectState = (state) => state.web || {};
-
-export const selectCurrentUploads = (state) => selectState(state).currentUploads;
-
-export const selectUploadCount = createSelector(
-  selectCurrentUploads,
-  (currentUploads) => currentUploads && Object.keys(currentUploads).length
-);

flow-typed/File.js

@@ -76,12 +76,3 @@ declare type DeletePurchasedUri = {
     uri: string,
   },
 };
-
-declare type FileUploadItem = {
-  params: UpdatePublishFormData,
-  file: File,
-  fileFingerprint: string,
-  progress: string,
-  status?: string,
-  tusUploader?: any,
-};

flow-typed/publish.js

@@ -52,3 +52,12 @@ declare type PublishParams = {
   nsfw: boolean,
   tags: Array<Tag>,
 };
+
+declare type FileUploadItem = {
+  params: UpdatePublishFormData,
+  file: File,
+  fileFingerprint: string,
+  progress: string,
+  status?: string,
+  tusUploader?: any,
+};

ui/component/app/index.js

@@ -1,6 +1,5 @@
 import { hot } from 'react-hot-loader/root';
 import { connect } from 'react-redux';
-import { selectUploadCount } from 'lbryinc';
 import { selectGetSyncErrorMessage, selectSyncFatalError } from 'redux/selectors/sync';
 import { doFetchAccessToken, doUserSetReferrer } from 'redux/actions/user';
 import { selectUser, selectAccessToken, selectUserVerifiedEmail } from 'redux/selectors/user';
@@ -22,6 +21,7 @@ import {
   selectActiveChannelClaim,
   selectIsReloadRequired,
 } from 'redux/selectors/app';
+import { selectUploadCount } from 'redux/selectors/publish';
 import { doGetWalletSyncPreference, doSetLanguage } from 'redux/actions/settings';
 import { doSyncLoop } from 'redux/actions/sync';
 import {

ui/component/webUploadList/index.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
-import { selectCurrentUploads, selectUploadCount, doUpdateUploadRemove } from 'lbryinc';
 import { doOpenModal } from 'redux/actions/app';
-import { doPublishResume } from 'redux/actions/publish';
+import { doPublishResume, doUpdateUploadRemove } from 'redux/actions/publish';
+import { selectCurrentUploads, selectUploadCount } from 'redux/selectors/publish';
 import WebUploadList from './view';
 
 const select = (state) => ({

ui/constants/action_types.js

@@ -331,6 +331,9 @@ export const PUBLISH_FAIL = 'PUBLISH_FAIL';
 export const CLEAR_PUBLISH_ERROR = 'CLEAR_PUBLISH_ERROR';
 export const REMOVE_PENDING_PUBLISH = 'REMOVE_PENDING_PUBLISH';
 export const DO_PREPARE_EDIT = 'DO_PREPARE_EDIT';
+export const UPDATE_UPLOAD_ADD = 'UPDATE_UPLOAD_ADD';
+export const UPDATE_UPLOAD_PROGRESS = 'UPDATE_UPLOAD_PROGRESS';
+export const UPDATE_UPLOAD_REMOVE = 'UPDATE_UPLOAD_REMOVE';
 
 // Media
 export const MEDIA_PLAY = 'MEDIA_PLAY';
@@ -491,11 +494,6 @@ export const FETCH_SUB_COUNT_STARTED = 'FETCH_SUB_COUNT_STARTED';
 export const FETCH_SUB_COUNT_FAILED = 'FETCH_SUB_COUNT_FAILED';
 export const FETCH_SUB_COUNT_COMPLETED = 'FETCH_SUB_COUNT_COMPLETED';
 
-// Lbry.tv
-export const UPDATE_UPLOAD_ADD = 'UPDATE_UPLOAD_ADD';
-export const UPDATE_UPLOAD_PROGRESS = 'UPDATE_UPLOAD_PROGRESS';
-export const UPDATE_UPLOAD_REMOVE = 'UPDATE_UPLOAD_REMOVE';
-
 // User
 export const GENERATE_AUTH_TOKEN_FAILURE = 'GENERATE_AUTH_TOKEN_FAILURE';
 export const GENERATE_AUTH_TOKEN_STARTED = 'GENERATE_AUTH_TOKEN_STARTED';

ui/page/fileListPublished/index.js

@@ -5,9 +5,9 @@ import {
   selectMyClaimsPageItemCount,
   selectFetchingMyClaimsPageError,
 } from 'redux/selectors/claims';
+import { selectUploadCount } from 'redux/selectors/publish';
 import { doFetchClaimListMine, doCheckPendingClaims } from 'redux/actions/claims';
 import { doClearPublish } from 'redux/actions/publish';
-import { selectUploadCount } from 'lbryinc';
 import FileListPublished from './view';
 import { withRouter } from 'react-router';
 import { MY_CLAIMS_PAGE_SIZE, PAGE_PARAM, PAGE_SIZE_PARAM } from 'constants/claim';

ui/reducers.js

@@ -1,6 +1,6 @@
 import { combineReducers } from 'redux';
 import { connectRouter } from 'connected-react-router';
-import { costInfoReducer, blacklistReducer, filteredReducer, statsReducer, webReducer } from 'lbryinc';
+import { costInfoReducer, blacklistReducer, filteredReducer, statsReducer } from 'lbryinc';
 import { claimsReducer } from 'redux/reducers/claims';
 import { fileInfoReducer } from 'redux/reducers/file_info';
 import { walletReducer } from 'redux/reducers/wallet';
@@ -50,6 +50,5 @@ export default (history) =>
     user: userReducer,
     wallet: walletReducer,
     sync: syncReducer,
-    web: webReducer,
     collections: collectionsReducer,
   });

ui/redux/actions/publish.js

@@ -688,3 +688,31 @@ export const doCheckReflectingFiles = () => (dispatch: Dispatch, getState: GetSt
     }, 5000);
   }
 };
+
+export function doUpdateUploadAdd(file: File | string, params: { [key: string]: any }, tusUploader: any) {
+  return (dispatch: Dispatch, getState: GetState) => {
+    dispatch({
+      type: ACTIONS.UPDATE_UPLOAD_ADD,
+      data: { file, params, tusUploader },
+    });
+  };
+}
+
+export const doUpdateUploadProgress = (props: {
+  params: { [key: string]: any },
+  progress?: string,
+  status?: string,
+}) => (dispatch: Dispatch) =>
+  dispatch({
+    type: ACTIONS.UPDATE_UPLOAD_PROGRESS,
+    data: props,
+  });
+
+export function doUpdateUploadRemove(params: { [key: string]: any }) {
+  return (dispatch: Dispatch, getState: GetState) => {
+    dispatch({
+      type: ACTIONS.UPDATE_UPLOAD_REMOVE,
+      data: { params },
+    });
+  };
+}

ui/redux/reducers/publish.js

@@ -1,10 +1,13 @@
 // @flow
 import { handleActions } from 'util/redux-utils';
 import { buildURI } from 'util/lbryURI';
+import { serializeFileObj } from 'util/file';
 import * as ACTIONS from 'constants/action_types';
 import * as THUMBNAIL_STATUSES from 'constants/thumbnail_upload_statuses';
 import { CHANNEL_ANONYMOUS } from 'constants/claim';
 
+const getKeyFromParam = (params) => `${params.name}#${params.channel || 'anonymous'}`;
+
 type PublishState = {
   editingURI: ?string,
   fileText: ?string,
@@ -38,6 +41,7 @@ type PublishState = {
   tags: Array<string>,
   optimize: boolean,
   useLBRYUploader: boolean,
+  currentUploads: { [key: string]: FileUploadItem },
 };
 
 const defaultState: PublishState = {
@@ -78,6 +82,7 @@ const defaultState: PublishState = {
   publishError: undefined,
   optimize: false,
   useLBRYUploader: false,
+  currentUploads: {},
 };
 
 export const publishReducer = handleActions(
@@ -96,6 +101,7 @@ export const publishReducer = handleActions(
       bid: state.bid,
       optimize: state.optimize,
       language: state.language,
+      currentUploads: state.currentUploads,
     }),
     [ACTIONS.PUBLISH_START]: (state: PublishState): PublishState => ({
       ...state,
@@ -127,8 +133,66 @@ export const publishReducer = handleActions(
         ...publishData,
         editingURI: uri,
         uri: shortUri,
+        currentUploads: state.currentUploads,
       };
     },
+    [ACTIONS.UPDATE_UPLOAD_ADD]: (state: PublishState, action) => {
+      const { file, params, tusUploader } = action.data;
+      const key = getKeyFromParam(params);
+      const currentUploads = Object.assign({}, state.currentUploads);
+
+      currentUploads[key] = {
+        file,
+        fileFingerprint: serializeFileObj(file), // TODO: get hash instead?
+        progress: '0',
+        params,
+        tusUploader,
+      };
+
+      return { ...state, currentUploads };
+    },
+    [ACTIONS.UPDATE_UPLOAD_PROGRESS]: (state: PublishState, action) => {
+      const { params, progress, status } = action.data;
+      const key = getKeyFromParam(params);
+      const currentUploads = Object.assign({}, state.currentUploads);
+
+      if (progress) {
+        currentUploads[key].progress = progress;
+        delete currentUploads[key].status;
+      } else if (status) {
+        currentUploads[key].status = status;
+        if (status === 'error') {
+          delete currentUploads[key].tusUploader;
+        }
+      }
+
+      return { ...state, currentUploads };
+    },
+    [ACTIONS.UPDATE_UPLOAD_REMOVE]: (state: PublishState, action) => {
+      const { params } = action.data;
+      const key = getKeyFromParam(params);
+      const currentUploads = Object.assign({}, state.currentUploads);
+
+      delete currentUploads[key];
+
+      return { ...state, currentUploads };
+    },
+    [ACTIONS.REHYDRATE]: (state: PublishState, action) => {
+      if (action && action.payload && action.payload.publish) {
+        const newPublish = { ...action.payload.publish };
+
+        // Cleanup for 'publish::currentUploads'
+        if (newPublish.currentUploads) {
+          Object.keys(newPublish.currentUploads).forEach((key) => {
+            delete newPublish.currentUploads[key].tusUploader;
+          });
+        }
+
+        return newPublish;
+      }
+
+      return state;
+    },
   },
   defaultState
 );

ui/redux/selectors/publish.js

@@ -119,3 +119,10 @@ export const selectTakeOverAmount = createSelector(
     return null;
   }
 );
+
+export const selectCurrentUploads = (state) => selectState(state).currentUploads;
+
+export const selectUploadCount = createSelector(
+  selectCurrentUploads,
+  (currentUploads) => currentUploads && Object.keys(currentUploads).length
+);

web/setup/publish.js

@@ -9,7 +9,7 @@
  */
 import * as tus from 'tus-js-client';
 import { X_LBRY_AUTH_TOKEN } from '../../ui/constants/token';
-import { doUpdateUploadAdd, doUpdateUploadProgress, doUpdateUploadRemove } from 'lbryinc';
+import { doUpdateUploadAdd, doUpdateUploadProgress, doUpdateUploadRemove } from '../../ui/redux/actions/publish';
 
 const UPLOAD_CHUNK_SIZE_BYTE = 100000000;