From a462d4902b940b9255cb21db7ccec47b099261e3 Mon Sep 17 00:00:00 2001 From: Chris Butler Date: Sat, 1 Jun 2019 14:27:45 -0400 Subject: [PATCH] add basic delete functionality --- client/src/components/card/details.tsx | 1 - client/src/components/card/header.tsx | 4 +-- client/src/components/modal/delete.tsx | 13 +++++++ client/src/components/styled/link.tsx | 3 +- client/src/views/edit.tsx | 49 ++++++++++++++++++-------- package-lock.json | 6 ++-- package.json | 2 +- server/api/v1/promise.js | 4 +-- 8 files changed, 57 insertions(+), 25 deletions(-) create mode 100644 client/src/components/modal/delete.tsx diff --git a/client/src/components/card/details.tsx b/client/src/components/card/details.tsx index 00be1196..e02dfafd 100644 --- a/client/src/components/card/details.tsx +++ b/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'; diff --git a/client/src/components/card/header.tsx b/client/src/components/card/header.tsx index fe60ebb4..d9185761 100644 --- a/client/src/components/card/header.tsx +++ b/client/src/components/card/header.tsx @@ -46,9 +46,9 @@ const UserPending = styled.span` const CardHeader = ({ domain: { root: host = '' } = {}, username, score, counted, pending }) => ( - + { username } - + { prettyPercent(score, 2) } diff --git a/client/src/components/modal/delete.tsx b/client/src/components/modal/delete.tsx new file mode 100644 index 00000000..b76e1734 --- /dev/null +++ b/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; diff --git a/client/src/components/styled/link.tsx b/client/src/components/styled/link.tsx index 2c7f2c92..c818433f 100644 --- a/client/src/components/styled/link.tsx +++ b/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; `; diff --git a/client/src/views/edit.tsx b/client/src/views/edit.tsx index af046366..91a32cb1 100644 --- a/client/src/views/edit.tsx +++ b/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 }); } - 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 - Submit + Save )} diff --git a/package-lock.json b/package-lock.json index a25b0a57..a7269f85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19457,9 +19457,9 @@ } }, "sweetalert2": { - "version": "8.10.0", - "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-8.10.0.tgz", - "integrity": "sha512-7N1Zld9uEZfy1h5jNGFVmcrb4hQmcZBcpQSZbBgs+gyQr5sy0wrWKMH+8go0WO+IHdzK5YPHNWQGf5NbbCWJOQ==" + "version": "8.11.7", + "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-8.11.7.tgz", + "integrity": "sha512-WC5x+L9ejKpWERNc3aAyxeUs+nchGNEBZeB7CPP/bRVOUVEBZsKw2Ibt1qdV4Ap90JOTK/4/xrCnZ/XyUNzqBw==" }, "symbol-observable": { "version": "1.2.0", diff --git a/package.json b/package.json index 0b8123d9..a17bf926 100644 --- a/package.json +++ b/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", diff --git a/server/api/v1/promise.js b/server/api/v1/promise.js index 56f90d12..eddd3401 100644 --- a/server/api/v1/promise.js +++ b/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',