fix #2132: Remember ModalRemoveFile check boxes

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 = {
+function ModalRemoveFile(props: Props) {
-  deleteChecked: boolean,
+  const { claim, claimIsMine, closeModal, deleteFile, fileInfo, title } = props;
-  abandonClaimChecked: boolean,
+  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}`;
 
-class ModalRemoveFile extends React.PureComponent<Props, State> {
+  return (
-  constructor(props: Props) {
+    <Modal
-    super(props);
+      isOpen
-    this.state = {
+      title="Remove File"
-      deleteChecked: false,
+      contentLabel={__('Confirm File Remove')}
-      abandonClaimChecked: true,
+      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)}
+        />
 
-    (this: any).handleDeleteCheckboxClicked = this.handleDeleteCheckboxClicked.bind(this);
+        {claimIsMine && (
-    (this: any).handleAbandonClaimCheckboxClicked = this.handleAbandonClaimCheckboxClicked.bind(this);
-  }
-
-  handleDeleteCheckboxClicked() {
-    const { deleteChecked } = this.state;
-    this.setState({
-      deleteChecked: !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">
           <FormField
-            name="file_delete"
+            name="claim_abandon"
-            label={__('Also delete this file from my computer')}
+            label={__('Abandon the claim for this URI')}
             type="checkbox"
-            checked={deleteChecked}
+            checked={abandonChecked}
-            onChange={this.handleDeleteCheckboxClicked}
+            onChange={() => setAbandonChecked(!abandonChecked)}
           />
-
+        )}
-          {claimIsMine && (
+      </section>
-            <FormField
+    </Modal>
-              name="claim_abandon"
+  );
-              label={__('Abandon the claim for this URI')}
-              type="checkbox"
-              checked={abandonClaimChecked}
-              onChange={this.handleAbandonClaimCheckboxClicked}
-            />
-          )}
-        </section>
-      </Modal>
-    );
-  }
 }
 
 export default ModalRemoveFile;

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;
   }
 

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"
 }