Found graphql input objects.

client/src/App/App.js

@@ -30,17 +30,17 @@ export default () => {
         const idTokenResult = await user.getIdTokenResult();
         const hasuraClaim =
           idTokenResult.claims["https://hasura.io/jwt/claims"];
-        if (hasuraClaim) {
-        } else {
-          // Check if refresh is required.
-          const metadataRef = firebase
-            .database()
-            .ref("metadata/" + user.uid + "/refreshTime");
-          metadataRef.on("value", async () => {
-            // Force refresh to pick up the latest custom claims changes.
-            token = await user.getIdToken(true);
-          });
-        }
+
+        // Check if refresh is required.
+        const metadataRef = firebase
+          .database()
+          .ref("metadata/" + user.uid + "/refreshTime");
+        metadataRef.on("value", async params => {
+          console.log("params", params);
+          // Force refresh to pick up the latest custom claims changes.
+          token = await user.getIdToken(true);
+        });
+
         apolloClient.writeData({
           data: {
             currentUser: {

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

@@ -25,7 +25,7 @@ function JobTombstone({ job, ...otherProps }) {
         console.log("Received values of form: ", values);
 
         mutationUpdateJob({
-          variables: { jobId: jobContext.id, job: JSON.stringify(values) }
+          variables: { jobId: jobContext.id, job: values }
         }).then(r => console.log("result", r));
       }
     });

client/src/components/jobs-list/jobs-list.component.jsx

@@ -1,18 +1,24 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import { Table, Divider, Icon } from "antd";
+import { Table, Divider, Icon, Input } from "antd";
 import { alphaSort } from "../../utils/sorters";
 
 export default function JobsPage({ loading, jobs }) {
-  const [sortedInfo, setSortedInfo] = useState({});
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: null
+  });
 
   const columns = [
     {
       title: "RO #",
       dataIndex: "ro_number",
       key: "ro_number",
+      onFilter: (value, record) => record.ro_number.includes(value),
+      filteredValue: state.filteredInfo.text || null,
       sorter: (a, b) => alphaSort(a, b),
-      sortOrder: sortedInfo.columnKey === "ro_number" && sortedInfo.order,
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
       ellipsis: true,
       render: (text, record) => (
         <span>
@@ -30,7 +36,8 @@ export default function JobsPage({ loading, jobs }) {
       dataIndex: "status",
       key: "status",
       sorter: (a, b) => alphaSort(a, b),
-      sortOrder: sortedInfo.columnKey === "status" && sortedInfo.order,
+      sortOrder:
+        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
       ellipsis: true
     },
     {
@@ -76,19 +83,25 @@ export default function JobsPage({ loading, jobs }) {
     }
   ];
 
-  const handleChange = (pagination, filters, sorter) => {
-    setSortedInfo(sorter);
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  const handleChange = event => {
+    const { name, value } = event.target;
+    setState({ ...state, filterinfo: { text: [value] } });
   };
 
   return (
     <div>
+      <Input name="searchCriteria" onChange={handleChange} />
       <Table
         loading={loading}
         pagination={{ position: "bottom" }}
         columns={columns.map(item => ({ ...item }))}
         rowKey="id"
         dataSource={jobs}
-        onChange={handleChange}
+        onChange={handleTableChange}
       />
     </div>
   );

client/src/graphql/client.js

@@ -1,40 +0,0 @@
-// import ApolloClient from "apollo-client";
-// import { InMemoryCache } from "apollo-cache-inmemory";
-// import { HttpLink } from "apollo-link-http";
-// import { setContext } from "apollo-link-context";
-// import { resolvers, typeDefs } from "./resolvers";
-// import apolloLogger from "apollo-link-logger";
-// import { ApolloLink } from "apollo-boost";
-
-// const httpLink = new HttpLink({
-//   uri: process.env.REACT_APP_GRAPHQL_ENDPOINT
-// });
-
-// const authLink = setContext((_, { headers }) => {
-//   // get the authentication token from local storage if it exists
-//   const token = localStorage.getItem("token");
-//   // return the headers to the context so httpLink can read them
-//   if (token) {
-//     return {
-//       headers: {
-//         ...headers,
-//         authorization: token ? `Bearer ${token}` : ""
-//       }
-//     };
-//   } else {
-//     return { headers };
-//   }
-// });
-
-// const middlewares = [];
-// if (process.env.NODE_ENV === "development") {
-//   middlewares.push(apolloLogger);
-// }
-// middlewares.push(authLink.concat(httpLink));
-
-// export const client = new ApolloClient({
-//   link: ApolloLink.from(middlewares),
-//   cache: new InMemoryCache({ addTypename: false }),
-//   typeDefs,
-//   resolvers
-// });

client/src/graphql/jobs.queries.js

@@ -105,7 +105,7 @@ export const GET_JOB_BY_PK = gql`
 `;
 
 export const UPDATE_JOB = gql`
-  mutation UPDATE_JOB($jobId: uuid!, $job: json!) {
+  mutation UPDATE_JOB($jobId: uuid!, $job: jobs_set_input!) {
     update_jobs(where: { id: { _eq: $jobId } }, _set: $job) {
       returning {
         id

client/src/graphql/resolvers.js

@@ -1,10 +1,12 @@
 import { gql } from "apollo-boost";
-import { GET_CURRENT_USER, GET_WHITE_BOARD_LEFT_SIDER_VISIBLE } from "./local.queries";
+import {
+  GET_CURRENT_USER,
+  GET_WHITE_BOARD_LEFT_SIDER_VISIBLE
+} from "./local.queries";
 
 export const typeDefs = gql`
   extend type Mutation {
     SetCurrentUser(user: User!): User!
-    ToggleWhiteBoardLeftSiderVisible: Boolean!
   }
 
   extend type User {
@@ -12,6 +14,10 @@ export const typeDefs = gql`
     displayName: String!
     token: String!
   }
+
+  extend type Jobs {
+    id: uuid!
+  }
 `;
 
 export const resolvers = {
@@ -23,20 +29,6 @@ export const resolvers = {
       });
 
       return user;
-    },
-
-    toggleWhiteBoardLeftSiderVisible: (_root, _args, { cache }) => {
-      const { whiteBoardLeftSiderVisible } = cache.readQuery({
-        query: GET_WHITE_BOARD_LEFT_SIDER_VISIBLE
-      });
-
-      cache.writeQuery({
-        query: GET_WHITE_BOARD_LEFT_SIDER_VISIBLE,
-        data: { whiteBoardLeftSiderVisible: !whiteBoardLeftSiderVisible }
-      });
-
-      return !whiteBoardLeftSiderVisible;
-    },
-
+    }
   }
 };

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

@@ -5,6 +5,7 @@ import AlertComponent from "../../components/alert/alert.component";
 import { SUBSCRIPTION_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
 
 import JobsList from "../../components/jobs-list/jobs-list.component";
+import Test from "./test";
 
 export default function JobsPage() {
   const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS, {
@@ -13,5 +14,10 @@ export default function JobsPage() {
 
   if (error) return <AlertComponent message={error.message} />;
 
-  return <JobsList loading={loading} jobs={data ? data.jobs : null} />;
+  return (
+    <div>
+      <JobsList loading={loading} jobs={data ? data.jobs : null} />
+      <Test />
+    </div>
+  );
 }

client/src/pages/jobs/test.jsx

@@ -0,0 +1,123 @@
+import React from "react";
+import { Table, Button } from "antd";
+
+const data = [
+  {
+    key: "1",
+    name: "John Brown",
+    age: 32,
+    address: "New York No. 1 Lake Park"
+  },
+  {
+    key: "2",
+    name: "Jim Green",
+    age: 42,
+    address: "London No. 1 Lake Park"
+  },
+  {
+    key: "3",
+    name: "Joe Black",
+    age: 32,
+    address: "Sidney No. 1 Lake Park"
+  },
+  {
+    key: "4",
+    name: "Jim Red",
+    age: 32,
+    address: "London No. 2 Lake Park"
+  }
+];
+
+export default class Test extends React.Component {
+  state = {
+    filteredInfo: null,
+    sortedInfo: null
+  };
+
+  handleChange = (pagination, filters, sorter) => {
+    console.log("Various parameters", pagination, filters, sorter);
+    this.setState({
+      filteredInfo: filters,
+      sortedInfo: sorter
+    });
+  };
+
+  clearFilters = () => {
+    this.setState({ filteredInfo: null });
+  };
+
+  clearAll = () => {
+    this.setState({
+      filteredInfo: null,
+      sortedInfo: null
+    });
+  };
+
+  setAgeSort = () => {
+    this.setState({
+      sortedInfo: {
+        order: "descend",
+        columnKey: "age"
+      }
+    });
+  };
+
+  render() {
+    let { sortedInfo, filteredInfo } = this.state;
+    sortedInfo = sortedInfo || {};
+    filteredInfo = filteredInfo || {};
+    console.log("filteredInfo", filteredInfo);
+    const columns = [
+      {
+        title: "Name",
+        dataIndex: "name",
+        key: "name",
+        filters: [
+          { text: "Joe", value: "Joe" },
+          { text: "Jim", value: "Jim" }
+        ],
+        filteredValue: filteredInfo.name || null,
+        onFilter: (value, record) => record.name.includes(value),
+        sorter: (a, b) => a.name.length - b.name.length,
+        sortOrder: sortedInfo.columnKey === "name" && sortedInfo.order,
+        ellipsis: true
+      },
+      {
+        title: "Age",
+        dataIndex: "age",
+        key: "age",
+        sorter: (a, b) => a.age - b.age,
+        sortOrder: sortedInfo.columnKey === "age" && sortedInfo.order,
+        ellipsis: true
+      },
+      {
+        title: "Address",
+        dataIndex: "address",
+        key: "address",
+        filters: [
+          { text: "London", value: "London" },
+          { text: "New York", value: "New York" }
+        ],
+        filteredValue: filteredInfo.address || null,
+        onFilter: (value, record) => record.address.includes(value),
+        sorter: (a, b) => a.address.length - b.address.length,
+        sortOrder: sortedInfo.columnKey === "address" && sortedInfo.order,
+        ellipsis: true
+      }
+    ];
+    return (
+      <div>
+        <div className="table-operations">
+          <Button onClick={this.setAgeSort}>Sort age</Button>
+          <Button onClick={this.clearFilters}>Clear filters</Button>
+          <Button onClick={this.clearAll}>Clear filters and sorters</Button>
+        </div>
+        <Table
+          columns={columns}
+          dataSource={data}
+          onChange={this.handleChange}
+        />
+      </div>
+    );
+  }
+}