Converting PermalinkAction to a functional component.

mlibrary · Sep 13, 2023 · e9c22c1 · e9c22c1
1 parent f8e4ba0
commit e9c22c1
Showing 1 changed file with 32 additions and 41 deletions.
diff --git a/src/modules/lists/components/PermalinkAction/index.js b/src/modules/lists/components/PermalinkAction/index.js
@@ -1,48 +1,39 @@
-/** @jsxImportSource @emotion/react */
 import React from 'react';
 import { Button } from '../../../reusable';
 import PropTypes from 'prop-types';
 
-class PermalinkAction extends React.Component {
-  state = {
-    permalink: document.location.origin + document.location.pathname,
-    status: undefined
-  };
-
-  handleSubmitCallback = (data) => {
-    this.setState({ status: data });
-  };
-
-  handleSubmit = (event) => {
-    event.preventDefault();
-    navigator.clipboard.writeText(this.state.permalink);
-    this.props.setAlert({
-      intent: 'success',
-      text: 'Link copied!'
-    });
-    this.props.setActive('');
-    this.setState({ status: undefined });
-  };
-
-  render () {
-    if (this.state.status?.status_code === 'action.response.success') return null;
-
-    return (
-      <form className='lists-action-form' onSubmit={this.handleSubmit}>
-        <div className='lists-action-field-container'>
-          <label htmlFor='permalink-action'>Copy link</label>
-          <input
-            id='permalink-action'
-            type='text'
-            readOnly
-            value={this.state.permalink}
-            autoComplete='off'
-          />
-        </div>
-        <Button type='submit' style={{ whiteSpace: 'nowrap' }}>Copy link</Button>
-      </form>
-    );
-  }
+function PermalinkAction (props) {
+  return (
+    <form
+      className='lists-action-form'
+      onSubmit={(event) => {
+        event.preventDefault();
+        navigator.clipboard.writeText(event.target.permalink.value);
+        props.setAlert({
+          intent: 'success',
+          text: 'Link copied!'
+        });
+        props.setActive('');
+      }}
+    >
+      <div className='lists-action-field-container'>
+        <label htmlFor='permalink'>
+          Copy link
+        </label>
+        <input
+          id='permalink'
+          name='permalink'
+          type='url'
+          readOnly
+          value={document.location.origin + document.location.pathname}
+          autoComplete='off'
+        />
+      </div>
+      <Button type='submit'>
+        Copy link
+      </Button>
+    </form>
+  );
 }
 
 PermalinkAction.propTypes = {