Transfer.

client/src/components/job-tombstone/job-tombstone.component.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import AlertComponent from "../alert/alert.component";
-import { Form, Icon, Input, Row, Col } from "antd";
+import { Form, Input, Row, Col, Button } from "antd";
 
 function JobTombstone({ job, ...otherProps }) {
   const [jobContext, setJobContext] = useState(job);
@@ -16,7 +16,8 @@ function JobTombstone({ job, ...otherProps }) {
 
   const handleSubmit = e => {
     e.preventDefault();
-    this.props.form.validateFieldsAndScroll((err, values) => {
+
+    otherProps.form.validateFieldsAndScroll((err, values) => {
       if (!err) {
         console.log("Received values of form: ", values);
       }
@@ -41,6 +42,11 @@ function JobTombstone({ job, ...otherProps }) {
             })(<Input name="ro_number" onChange={handleChange} />)}
           </Form.Item>
         </Row>
+        <Form.Item>
+          <Button type="primary" htmlType="submit">
+            Save
+          </Button>
+        </Form.Item>
       </Col>
     </Form>
   );

client/src/pages/jobs-detail/jobs-detail.page.jsx

@@ -6,12 +6,8 @@ import JobTombstone from "../../components/job-tombstone/job-tombstone.component
 import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
 import { Breadcrumb } from "antd";
 
-import Test from "./test";
+function JobsDetailPage({ match }) {
-
+  const { jobId } = match.params;
-export default function JobsDetailPage({
-  match: { routes, params, children }
-}) {
-  const { jobId } = params;
   const { loading, error, data } = useSubscription(GET_JOB_BY_PK, {
     variables: { id: jobId },
     fetchPolicy: "network-only"
@@ -19,11 +15,12 @@ export default function JobsDetailPage({
   if (loading) return <SpinComponent />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
-  console.log('routes', routes)
+  console.log("routes", match);
   return (
     <div>
-      <Breadcrumb routes={routes} params={params} />
+      <Breadcrumb />
       <JobTombstone job={data.jobs_by_pk} />
     </div>
   );
 }
+export default JobsDetailPage;

client/src/pages/jobs-detail/test.jsx

@@ -1,219 +0,0 @@
-import React from "react";
-import { Table, Input, Button, Popconfirm, Form } from "antd";
-
-const EditableContext = React.createContext();
-
-const EditableRow = ({ form, index, ...props }) => (
-  <EditableContext.Provider value={form}>
-    <tr {...props} />
-  </EditableContext.Provider>
-);
-
-const EditableFormRow = Form.create()(EditableRow);
-
-class EditableCell extends React.Component {
-  state = {
-    editing: false
-  };
-
-  toggleEdit = () => {
-    const editing = !this.state.editing;
-    this.setState({ editing }, () => {
-      if (editing) {
-        this.input.focus();
-      }
-    });
-  };
-
-  save = e => {
-    const { record, handleSave } = this.props;
-    this.form.validateFields((error, values) => {
-      if (error && error[e.currentTarget.id]) {
-        return;
-      }
-      this.toggleEdit();
-      handleSave({ ...record, ...values });
-    });
-  };
-
-  renderCell = form => {
-    this.form = form;
-    const { children, dataIndex, record, title } = this.props;
-    const { editing } = this.state;
-    return editing ? (
-      <Form.Item style={{ margin: 0 }}>
-        {form.getFieldDecorator(dataIndex, {
-          rules: [
-            {
-              required: true,
-              message: `${title} is required.`
-            }
-          ],
-          initialValue: record[dataIndex]
-        })(
-          <Input
-            ref={node => (this.input = node)}
-            onPressEnter={this.save}
-            onBlur={this.save}
-          />
-        )}
-      </Form.Item>
-    ) : (
-      <div
-        className="editable-cell-value-wrap"
-        style={{ paddingRight: 24 }}
-        onClick={this.toggleEdit}
-      >
-        {children}
-      </div>
-    );
-  };
-
-  render() {
-    const {
-      editable,
-      dataIndex,
-      title,
-      record,
-      index,
-      handleSave,
-      children,
-      ...restProps
-    } = this.props;
-    return (
-      <td {...restProps}>
-        {editable ? (
-          <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
-        ) : (
-          children
-        )}
-      </td>
-    );
-  }
-}
-
-export default class EditableTable extends React.Component {
-  constructor(props) {
-    super(props);
-    this.columns = [
-      {
-        title: "name",
-        dataIndex: "name",
-        width: "30%",
-        editable: true
-      },
-      {
-        title: "age",
-        dataIndex: "age"
-      },
-      {
-        title: "address",
-        dataIndex: "address"
-      },
-      {
-        title: "operation",
-        dataIndex: "operation",
-        render: (text, record) =>
-          this.state.dataSource.length >= 1 ? (
-            <Popconfirm
-              title="Sure to delete?"
-              onConfirm={() => this.handleDelete(record.key)}
-            >
-              <a>Delete</a>
-            </Popconfirm>
-          ) : null
-      }
-    ];
-
-    this.state = {
-      dataSource: [
-        {
-          key: "0",
-          name: "Edward King 0",
-          age: "32",
-          address: "London, Park Lane no. 0"
-        },
-        {
-          key: "1",
-          name: "Edward King 1",
-          age: "32",
-          address: "London, Park Lane no. 1"
-        }
-      ],
-      count: 2
-    };
-  }
-
-  handleDelete = key => {
-    const dataSource = [...this.state.dataSource];
-    this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
-  };
-
-  handleAdd = () => {
-    const { count, dataSource } = this.state;
-    const newData = {
-      key: count,
-      name: `Edward King ${count}`,
-      age: 32,
-      address: `London, Park Lane no. ${count}`
-    };
-    this.setState({
-      dataSource: [...dataSource, newData],
-      count: count + 1
-    });
-  };
-
-  handleSave = row => {
-    const newData = [...this.state.dataSource];
-    const index = newData.findIndex(item => row.key === item.key);
-    const item = newData[index];
-    newData.splice(index, 1, {
-      ...item,
-      ...row
-    });
-    this.setState({ dataSource: newData });
-  };
-
-  render() {
-    const { dataSource } = this.state;
-    const components = {
-      body: {
-        row: EditableFormRow,
-        cell: EditableCell
-      }
-    };
-    const columns = this.columns.map(col => {
-      if (!col.editable) {
-        return col;
-      }
-      return {
-        ...col,
-        onCell: record => ({
-          record,
-          editable: col.editable,
-          dataIndex: col.dataIndex,
-          title: col.title,
-          handleSave: this.handleSave
-        })
-      };
-    });
-    return (
-      <div>
-        <Button
-          onClick={this.handleAdd}
-          type="primary"
-          style={{ marginBottom: 16 }}
-        >
-          Add a row
-        </Button>
-        <Table
-          components={components}
-          rowClassName={() => "editable-row"}
-          bordered
-          dataSource={dataSource}
-          columns={columns}
-        />
-      </div>
-    );
-  }
-}