Hookize DeleteWeb

components/DeleteWeb.js

@@ -1,51 +1,28 @@
 // @flow
-import * as React from 'react';
+import React from 'react';
 import { DeleteButton } from './core/buttons';
-import withMutation from './core/withMutation';
-import withConfirm, { type Confirm } from './core/withConfirm';
+import useConfirm from '../hooks/useConfirm';
 import Router from 'next/router';
 import type { Href } from '../browser/sitemap';
-import { pipe } from 'ramda';
-import DeleteWebMutation, {
-  type DeleteWebCommit,
-} from '../mutations/DeleteWebMutation';
+import { useDeleteWebMutation } from '../mutations/DeleteWebMutation';
 
-type DeleteWebProps = {|
-  id: string,
-  confirm: Confirm,
-  commit: DeleteWebCommit,
-  pending: boolean,
-|};
+export default function DeleteWeb(props: {| id: string |}) {
+  const confirm = useConfirm();
+  const [commit, , pending] = useDeleteWebMutation();
 
-class DeleteWeb extends React.PureComponent<DeleteWebProps> {
-  handleCompleted = ({ deleteWeb }) => {
-    const id = deleteWeb && deleteWeb.web && deleteWeb.web.id;
-    if (id == null) return;
-    const href: Href = {
-      pathname: '/',
-    };
+  function onSuccess() {
+    const href: Href = { pathname: '/' };
     // $FlowFixMe Wrong libdef.
     Router.replace(href);
-  };
-
-  handleOnPress = () => {
-    if (!this.props.confirm()) return;
-    const input = { id: this.props.id };
-    this.props.commit(input, this.handleCompleted);
-  };
+  }
 
-  render() {
-    return (
-      <DeleteButton
-        color="danger"
-        disabled={this.props.pending}
-        onPress={this.handleOnPress}
-      />
-    );
+  function handleOnPress() {
+    if (!confirm()) return;
+    const input = { id: props.id };
+    commit(input, onSuccess);
   }
-}
 
-export default pipe(
-  withConfirm,
-  withMutation(DeleteWebMutation),
-)(DeleteWeb);
+  return (
+    <DeleteButton color="danger" disabled={pending} onPress={handleOnPress} />
+  );
+}

mutations/DeleteWebMutation.js

@@ -1,10 +1,7 @@
 // @flow
 import { graphql } from 'react-relay';
-import type { Commit, Errors } from '../components/core/withMutation';
 import type { DeleteWebMutation } from './__generated__/DeleteWebMutation.graphql';
-
-export type DeleteWebCommit = Commit<DeleteWebMutation>;
-export type DeleteWebErrors = Errors<DeleteWebMutation, 'setWebName'>;
+import useMutation from '../hooks/useMutation';
 
 const config = {
   mutation: graphql`
@@ -18,4 +15,6 @@ const config = {
   `,
 };
 
-export default config;
+export function useDeleteWebMutation() {
+  return useMutation<DeleteWebMutation, 'deleteWeb'>(config, 'deleteWeb');
+}