fix #2132: Remember ModalRemoveFile check boxes

lbryio · Jul 11, 2019 · bd3a557 · bd3a557
1 parent 65a3c62
commit bd3a557
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 71 deletions.
diff --git a/src/ui/modal/modalRemoveFile/view.jsx b/src/ui/modal/modalRemoveFile/view.jsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { Modal } from 'modal/modal';
 import { FormField } from 'component/common/form';
+import usePersistedState from 'util/use-persisted-state';
 
 type Props = {
   claim: StreamClaim,
@@ -14,80 +15,50 @@ type Props = {
   },
 };
 
-type State = {
-  deleteChecked: boolean,
-  abandonClaimChecked: boolean,
-};
-
-class ModalRemoveFile extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      deleteChecked: false,
-      abandonClaimChecked: true,
-    };
-
-    (this: any).handleDeleteCheckboxClicked = this.handleDeleteCheckboxClicked.bind(this);
-    (this: any).handleAbandonClaimCheckboxClicked = this.handleAbandonClaimCheckboxClicked.bind(this);
-  }
+function ModalRemoveFile(props: Props) {
+  const { claim, claimIsMine, closeModal, deleteFile, fileInfo, title } = props;
+  const [deleteChecked, setDeleteChecked] = usePersistedState('modal-remove-file:delete', true);
+  const [abandonChecked, setAbandonChecked] = usePersistedState('modal-remove-file:abandon', true);
+  const { txid, nout } = claim;
+  const outpoint = fileInfo ? fileInfo.outpoint : `${txid}:${nout}`;
 
-  handleDeleteCheckboxClicked() {
-    const { deleteChecked } = this.state;
-    this.setState({
-      deleteChecked: !deleteChecked,
-    });
-  }
+  return (
+    <Modal
+      isOpen
+      title="Remove File"
+      contentLabel={__('Confirm File Remove')}
+      type="confirm"
+      confirmButtonLabel={__('Remove')}
+      confirmButtonDisabled={!deleteChecked && !abandonChecked}
+      onConfirmed={() => deleteFile(outpoint || '', deleteChecked, abandonChecked)}
+      onAborted={closeModal}
+    >
+      <section className="card__content">
+        <p>
+          {__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite> {__('from the LBRY app?')}
+        </p>
+      </section>
+      <section className="card__content">
+        <FormField
+          name="file_delete"
+          label={__('Also delete this file from my computer')}
+          type="checkbox"
+          checked={deleteChecked}
+          onChange={() => setDeleteChecked(!deleteChecked)}
+        />
 
-  handleAbandonClaimCheckboxClicked() {
-    const { abandonClaimChecked } = this.state;
-    this.setState({
-      abandonClaimChecked: !abandonClaimChecked,
-    });
-  }
-
-  render() {
-    const { claim, claimIsMine, closeModal, deleteFile, fileInfo, title } = this.props;
-    const { deleteChecked, abandonClaimChecked } = this.state;
-    const { txid, nout } = claim;
-    const outpoint = fileInfo ? fileInfo.outpoint : `${txid}:${nout}`;
-
-    return (
-      <Modal
-        isOpen
-        title="Remove File"
-        contentLabel={__('Confirm File Remove')}
-        type="confirm"
-        confirmButtonLabel={__('Remove')}
-        onConfirmed={() => deleteFile(outpoint || '', deleteChecked, abandonClaimChecked)}
-        onAborted={closeModal}
-      >
-        <section className="card__content">
-          <p>
-            {__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite> {__('from the LBRY app?')}
-          </p>
-        </section>
-        <section className="card__content">
+        {claimIsMine && (
           <FormField
-            name="file_delete"
-            label={__('Also delete this file from my computer')}
+            name="claim_abandon"
+            label={__('Abandon the claim for this URI')}
             type="checkbox"
-            checked={deleteChecked}
-            onChange={this.handleDeleteCheckboxClicked}
+            checked={abandonChecked}
+            onChange={() => setAbandonChecked(!abandonChecked)}
           />
-
-          {claimIsMine && (
-            <FormField
-              name="claim_abandon"
-              label={__('Abandon the claim for this URI')}
-              type="checkbox"
-              checked={abandonClaimChecked}
-              onChange={this.handleAbandonClaimCheckboxClicked}
-            />
-          )}
-        </section>
-      </Modal>
-    );
-  }
+        )}
+      </section>
+    </Modal>
+  );
 }
 
 export default ModalRemoveFile;
diff --git a/src/ui/util/use-persisted-state.js b/src/ui/util/use-persisted-state.js
@@ -14,7 +14,7 @@ export default function usePersistedState(key, firstTimeDefault) {
     }
   }
 
-  if (!defaultValue) {
+  if (!defaultValue && defaultValue !== false) {
     defaultValue = firstTimeDefault;
   }
 

diff --git a/static/locales/en.json b/static/locales/en.json
@@ -540,5 +540,6 @@
   "During the alpha, comments are not decentralized or censorship resistant (but we repeat ourselves).": "During the alpha, comments are not decentralized or censorship resistant (but we repeat ourselves).",
   "When the alpha ends, we will attempt to transition comments, but do not promise to do so. Any transition will likely involve publishing previous comments under a single archive handle.": "When the alpha ends, we will attempt to transition comments, but do not promise to do so. Any transition will likely involve publishing previous comments under a single archive handle.",
   "Upgrade is ready to install": "Upgrade is ready to install",
-  "Upgrade is ready": "Upgrade is ready"
+  "Upgrade is ready": "Upgrade is ready",
+  "Abandon the claim for this URI": "Abandon the claim for this URI"
 }