Can post new jobs through the jobs form and do GraphQL mutations

Also add specific react-error-overlay dependency to fix facebook/create-react-app#11773 (comment)

client/package.json

@@ -13,7 +13,8 @@
     "react-router-dom": "5.2.0"
   },
   "devDependencies": {
-    "react-scripts": "4.0.3"
+    "react-scripts": "4.0.3",
+    "react-error-overlay": "6.0.9"
   },
   "browserslist": {
     "production": [

client/src/JobForm.js

@@ -1,65 +1,48 @@
-import React, { Component } from "react";
+import React from "react";
+import { postNewJob } from "./requests";
+import { useHistory } from "react-router-dom";
 
-export class JobForm extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { title: "", description: "" };
-  }
-
-  handleChange(event) {
-    const { name, value } = event.target;
-    this.setState({ [name]: value });
-  }
-
-  handleClick(event) {
+export function JobForm() {
+  const history = useHistory();
+  async function handleSubmit(event) {
     event.preventDefault();
-    console.log("should post a new job:", this.state);
+    const {
+      title: { value: titleValue },
+      description: { value: descriptionValue },
+    } = event.target;
+    const { id } = await postNewJob(titleValue, descriptionValue);
+    history.push(`/jobs/${id}`);
   }
 
-  render() {
-    const { title, description } = this.state;
-    return (
-      <div>
-        <h1 className="title">New Job</h1>
-        <div className="box">
-          <form>
-            <div className="field">
-              <label className="label">Title</label>
-              <div className="control">
-                <input
-                  className="input"
-                  type="text"
-                  name="title"
-                  value={title}
-                  onChange={this.handleChange.bind(this)}
-                />
-              </div>
+  return (
+    <div>
+      <h1 className="title">New Job</h1>
+      <div className="box">
+        <form onSubmit={handleSubmit}>
+          <div className="field">
+            <label className="label">Title</label>
+            <div className="control">
+              <input className="input" type="text" name="title" id="title" />
             </div>
-            <div className="field">
-              <label className="label">Description</label>
-              <div className="control">
-                <textarea
-                  className="input"
-                  style={{ height: "10em" }}
-                  name="description"
-                  value={description}
-                  onChange={this.handleChange.bind(this)}
-                />
-              </div>
+          </div>
+          <div className="field">
+            <label className="label">Description</label>
+            <div className="control">
+              <textarea
+                className="input"
+                style={{ height: "10em" }}
+                name="description"
+                id="description"
+              />
             </div>
-            <div className="field">
-              <div className="control">
-                <button
-                  className="button is-link"
-                  onClick={this.handleClick.bind(this)}
-                >
-                  Submit
-                </button>
-              </div>
+          </div>
+          <div className="field">
+            <div className="control">
+              <input type="submit" className="button is-link" />
             </div>
-          </form>
-        </div>
+          </div>
+        </form>
       </div>
-    );
-  }
+    </div>
+  );
 }

client/src/JobList.js

@@ -5,7 +5,7 @@ export function JobList({ jobs }) {
   return (
     <ul className="box">
       {jobs.map((job) => (
-        <Job job={job} />
+        <Job job={job} key={job.id} />
       ))}
     </ul>
   );
@@ -14,7 +14,7 @@ function Job({ job }) {
   const title = job.company ? `${job.title} at ${job.company.name}` : job.title;
 
   return (
-    <li className="media" key={job.id}>
+    <li className="media">
       <div className="media-content">
         <Link to={`/jobs/${job.id}`}>{title}</Link>
       </div>

client/src/requests.js

@@ -80,3 +80,17 @@ export async function getCompanyJobs(id) {
   const data = await fetchGraphQL(query, variables);
   return data.company.jobs;
 }
+
+// TODO: get company id from somewhere. Probably after authentication has been done
+export async function postNewJob(title, description, companyId = "HJRa-DOuG") {
+  const mutation = `
+    mutation PostNewJob($newJob: CreateJobRequest) {
+      job: createJob(newJob: $newJob) {
+        id
+      }
+    }
+  `;
+  const variables = { newJob: { title, description, companyId } };
+  const data = await fetchGraphQL(mutation, variables);
+  return data.job;
+}

server/resolvers.js

@@ -1,18 +1,24 @@
 const db = require("./db");
 
 const Query = {
-  job: (root, args) => db.jobs.get(args.id),
+  job: (parent, args) => db.jobs.get(args.id),
   jobs: () => db.jobs.list(),
-  company: (root, args) => db.companies.get(args.id),
+  company: (parent, args) => db.companies.get(args.id),
+};
+
+const Mutation = {
+  createJob: (parent, { newJob }) => {
+    const newJobId = db.jobs.create(newJob);
+    return db.jobs.get(newJobId);
+  },
 };
 
 const Job = {
-  company: (job) => db.companies.get(job.companyId),
+  company: (parent) => db.companies.get(parent.companyId),
 };
 
 const Company = {
-  jobs: (company) =>
-    db.jobs.list().filter((job) => job.companyId === company.id),
+  jobs: (parent) => db.jobs.list().filter((job) => job.companyId === parent.id),
 };
 
-module.exports = { Company, Job, Query };
+module.exports = { Company, Job, Query, Mutation };

server/schema.graphql

@@ -18,3 +18,13 @@ type Job {
     description: String
     company: Company
 }
+
+type Mutation {
+    createJob(newJob: CreateJobRequest): Job
+}
+
+input CreateJobRequest {
+    title: String
+    description: String
+    companyId: String
+}