add basic delete functionality

client/src/components/card/details.tsx

@@ -1,6 +1,5 @@
 import { transparentize } from 'polished';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 import withParsedDomain from 'src/containers/with_parsed_domain';

client/src/components/card/header.tsx

@@ -46,9 +46,9 @@ const UserPending = styled.span`
 const CardHeader = ({ domain: { root: host = '' } = {}, username, score, counted, pending }) => (
   <HeaderWrapper>
     <UserHeading>
-      <a href={userPath({ host, username })}>
+      <StyledLink href={userPath({ host, username })}>
         { username }
-      </a>
+      </StyledLink>
     </UserHeading>
     <UserScore score={score}>
       <span>{ prettyPercent(score, 2) }</span>

client/src/components/modal/delete.tsx

@@ -0,0 +1,13 @@
+import Swal from 'sweetalert2';
+
+const DeleteModal = () => Swal.fire({
+  cancelButtonText: 'No, cancel!',
+  confirmButtonText: 'Yes, delete it!',
+  reverseButtons: true,
+  showCancelButton: true,
+  text: "You won't be able to revert this!",
+  title: 'Are you sure?',
+  type: 'warning',
+});
+
+export default DeleteModal;

client/src/components/styled/link.tsx

@@ -1,9 +1,8 @@
-import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { white } from 'lib/theme/colors';
 
-const StyledLink = styled(Link)`
+const StyledLink = styled.a`
   color: ${white};
   text-decoration: none;
 `;

client/src/views/edit.tsx

@@ -11,6 +11,7 @@ import PromiseDeleteButton from 'src/components/button/delete';
 import PromiseSubmitButton from 'src/components/button/submit';
 import DatePicker from 'src/components/form/picker/date';
 import LoadableContainer from 'src/components/loading/loadable';
+import DeleteModal from 'src/components/modal/delete';
 import PromiseCard from 'src/components/promise/card';
 import withParsedDomain from 'src/containers/with_parsed_domain';
 
@@ -85,29 +86,49 @@ class PromiseEdit extends React.Component<IPromiseEditProps, IPromiseEditState>
       });
   }
 
-  public handleDelete(evt) {
+  public handleDelete = (evt) => {
     evt.preventDefault();
 
-    alert('delete'); // TODO
+    const { promise: { id = '' } = {} } = this.state;
+    DeleteModal().then((result) => {
+      if (result.value) {
+        // FIXME abstract these out
+        fetch('/api/v1/promise/delete', {
+          body: JSON.stringify({ id }),
+          headers: {
+            'content-type': 'application/json',
+          },
+          method: 'POST',
+        }).then(({ status }) => {
+          if (status === 200) {
+            window.location.replace(`//${window.location.host}`);
+          }
+        });
+      }
+    });
   }
 
   public handleSubmit = (values, { setSubmitting }) => {
-    setTimeout(() => {
-      fetch('/api/v1/promise/edit', {
-        body: JSON.stringify(values),
-        headers: {
-          'content-type': 'application/json',
-        },
-        method: 'POST',
-      });
-      this.setState(({ promise }) => ({ promise: { ...promise, ...values } }));
-      setSubmitting(false);
-    }, 400);
+    // FIXME abstract these out
+    fetch('/api/v1/promise/edit', {
+      body: JSON.stringify(values),
+      headers: {
+        'content-type': 'application/json',
+      },
+      method: 'POST',
+    }).then(({ status }) => {
+      if (status === 200) {
+        this.setState(({ promise }) => ({ promise: { ...promise, ...values } }));
+        setSubmitting(false);
+      }
+    });
   }
 
   public validateFields(values) {
     const errors = {};
 
+    // TODO
+
     // if (!values.email) {
     //   errors.email = 'Required';
     // } else if (
@@ -175,7 +196,7 @@ class PromiseEdit extends React.Component<IPromiseEditProps, IPromiseEditState>
                   </FormGroup>
 
                   <PromiseSubmitButton type="submit" disabled={isSubmitting}>
-                    Submit
+                    Save
                   </PromiseSubmitButton>
                 </Form>
               )}

package.json

@@ -57,7 +57,7 @@
     "sequelize": "^4.37.6",
     "sherlockjs": "^1.4.0",
     "styled-components": "^4.2.0",
-    "sweetalert2": "^8.10.0",
+    "sweetalert2": "^8.11.7",
     "ts-loader": "^5.4.5",
     "tslint": "^5.16.0",
     "tslint-react": "^4.0.0",

server/api/v1/promise.js

@@ -115,13 +115,13 @@ api.post('/complete', (req, resp) => {
   })
 })
 
-api.post('/remove', (req, resp) => {
+api.post('/delete', (req, resp) => {
   Promises.destroy({
     where: {
       id: req.body.id
     },
   }).then(function (deletedRows) {
-    log.info('promise removed', req.body, deletedRows)
+    log.info('promise deleted', req.body, deletedRows)
     actionNotifier({
       resource: 'promise',
       action: 'deleted',