Uploads: Add 'All,Uploads,Reposts' filter

## Issue
- Closes item 2 of 4563: Publish page + reposts
- Requires [lbry-redux::392](https://github.com/lbryio/lbry-redux/pull/392/files)

Also removed the redundant double spinner.

package.json

@@ -141,7 +141,7 @@
     "imagesloaded": "^4.1.4",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#f449d7916cacb9e61f19afc84cecac6182cde6d6",
+    "lbry-redux": "lbryio/lbry-redux#d75e7725feb1584937c405ddfda91f0f30ee8749",
     "lbryinc": "lbryio/lbryinc#7faea40d87b78ec91b901c62f501499dc4737025",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",

ui/page/fileListPublished/index.js

@@ -30,9 +30,10 @@ const select = (state, props) => {
   };
 };
 
-const perform = dispatch => ({
+const perform = (dispatch) => ({
   checkPendingPublishes: () => dispatch(doCheckPendingClaims()),
-  fetchClaimListMine: (page, pageSize) => dispatch(doFetchClaimListMine(page, pageSize)),
+  fetchClaimListMine: (page, pageSize, resolve, filterBy) =>
+    dispatch(doFetchClaimListMine(page, pageSize, resolve, filterBy)),
   clearPublish: () => dispatch(doClearPublish()),
 });
 

ui/page/fileListPublished/view.jsx

@@ -10,16 +10,21 @@ import { PAGE_PARAM, PAGE_SIZE_PARAM } from 'constants/claim';
 import WebUploadList from 'component/webUploadList';
 import Spinner from 'component/spinner';
 import Yrbl from 'component/yrbl';
+import classnames from 'classnames';
+
+const FILTER_ALL = 'stream,repost';
+const FILTER_UPLOADS = 'stream';
+const FILTER_REPOSTS = 'repost';
 
 type Props = {
   uploadCount: number,
   checkPendingPublishes: () => void,
   clearPublish: () => void,
-  fetchClaimListMine: (number, number) => void,
+  fetchClaimListMine: (number, number, boolean, Array<string>) => void,
   fetching: boolean,
   urls: Array<string>,
   urlTotal: number,
-  history: { replace: string => void, push: string => void },
+  history: { replace: (string) => void, push: (string) => void },
   page: number,
   pageSize: number,
 };
@@ -37,6 +42,7 @@ function FileListPublished(props: Props) {
     pageSize,
   } = props;
 
+  const [filterBy, setFilterBy] = React.useState(FILTER_ALL);
   const params = {};
 
   params[PAGE_PARAM] = Number(page);
@@ -51,9 +57,9 @@ function FileListPublished(props: Props) {
   useEffect(() => {
     if (paramsString && fetchClaimListMine) {
       const params = JSON.parse(paramsString);
-      fetchClaimListMine(params.page, params.page_size);
+      fetchClaimListMine(params.page, params.page_size, true, filterBy.split(','));
     }
-  }, [uploadCount, paramsString, fetchClaimListMine]);
+  }, [uploadCount, paramsString, filterBy, fetchClaimListMine]);
 
   return (
     <Page>
@@ -71,7 +77,7 @@ function FileListPublished(props: Props) {
                       button="alt"
                       label={__('Refresh')}
                       icon={ICONS.REFRESH}
-                      onClick={() => fetchClaimListMine(params.page, params.page_size)}
+                      onClick={() => fetchClaimListMine(params.page, params.page_size, true, filterBy.split(','))}
                     />
                   )}
                   <Button
@@ -81,9 +87,34 @@ function FileListPublished(props: Props) {
                     navigate={`/$/${PAGES.UPLOAD}`}
                     onClick={() => clearPublish()}
                   />
+                  <span>
+                    <Button
+                      button="alt"
+                      label={__('All')}
+                      onClick={() => setFilterBy(FILTER_ALL)}
+                      className={classnames(`button-toggle`, {
+                        'button-toggle--active': filterBy === FILTER_ALL,
+                      })}
+                    />
+                    <Button
+                      button="alt"
+                      label={__('Uploads')}
+                      onClick={() => setFilterBy(FILTER_UPLOADS)}
+                      className={classnames(`button-toggle`, {
+                        'button-toggle--active': filterBy === FILTER_UPLOADS,
+                      })}
+                    />
+                    <Button
+                      button="alt"
+                      label={__('Reposts')}
+                      onClick={() => setFilterBy(FILTER_REPOSTS)}
+                      className={classnames(`button-toggle`, {
+                        'button-toggle--active': filterBy === FILTER_REPOSTS,
+                      })}
+                    />
+                  </span>
                 </div>
               }
-              loading={fetching}
               persistedStorageKey="claim-list-published"
               uris={urls}
             />

yarn.lock

@@ -6898,9 +6898,9 @@ lazy-val@^1.0.4:
     yargs "^13.2.2"
     zstd-codec "^0.1.1"
 
-lbry-redux@lbryio/lbry-redux#f449d7916cacb9e61f19afc84cecac6182cde6d6:
+lbry-redux@lbryio/lbry-redux#d75e7725feb1584937c405ddfda91f0f30ee8749:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/f449d7916cacb9e61f19afc84cecac6182cde6d6"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/d75e7725feb1584937c405ddfda91f0f30ee8749"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"