Added update dataset.

package.json

@@ -16,6 +16,7 @@
     "@material-ui/lab": "^4.0.0-alpha.46",
     "axios": "^0.19.0",
     "clsx": "^1.1.0",
+    "lodash": "^4.17.15",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.0",

src/utils/api.js

 import axios from "axios";
+import set from "lodash/set";
+import get from "lodash/get";
 import config from "../auth_config.json";
 import keys from "../api_keys.json";
 
@@ -38,8 +40,38 @@ const apiInstance = axios.create({
 
 apiInstance.interceptors.response.use((response) => response.data || response);
 
+const updateData = (path, payload, method) => {
+  console.log("path", path);
+  if (!path) {
+    throw new Error("Error, path must be specified when calling updateData endpoint");
+  }
+  if (path.split(".").length < 2) {
+    throw new Error(`Error, path must have proper namespace in format "team.dataset".`);
+  }
+  if (!method || !["replace", "add"].includes(method)) {
+    throw new Error(`Update method is not specified. It muset be one of ["replace", "add"]`);
+  }
+  return apiInstance.get("/rest/customdata").then((data) => {
+    const [namespace, ...paths] = path.split(".");
+    const destination = paths.join("");
+    const index = data.findIndex(({ team }) => team === namespace);
+    if (index === -1) {
+      throw new Error(`${target} is not valid namepsace. Available namespaces ${data.map(({ team }) => team)}`);
+    }
+    let target = `[${index}].data.${destination}`;
+    let newData;
+    if (method === "replace") {
+      newData = set(data, target, payload);
+    } else {
+      newData = set(data, `${target}[${[...(get(data, target) || [])].length}]`, payload);
+    }
+    return apiInstance.post("/rest/customdata", newData);
+  });
+};
+
 const Api = {
   ...instances,
+  updateData,
   get: (path) => apiInstance.get(path),
   post: (path, payload) => apiInstance.post(path, payload)
 };

src/views/HomePage.js

@@ -57,10 +57,10 @@ const DataTable = ({ rows }) => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {rows.map((data) => {
+          {rows.map((data, index) => {
             const row = createData(data);
             return (
-              <TableRow key={row.name} onClick={() => history.push(`/detail/${data._id}`)} className={classes.tableRow}>
+              <TableRow key={`${row.name}-${index}`} onClick={() => history.push(`/detail/${data._id}`)} className={classes.tableRow}>
                 <TableCell component="th" scope="row">
                   {row.year}
                 </TableCell>
@@ -109,9 +109,14 @@ const HomePage = () => {
       </div>
     );
   }
+
+  const addMessage = () => Api.updateData("professors.messages", { message: "Hola" }, "add");
+  const replaceMessage = () => Api.updateData("professors.messages", { message: "Hola" }, "replace");
   return (
     <div>
       <h1>Home page</h1>
+      <button onClick={addMessage}>Add message</button>
+      <button onClick={replaceMessage}>replace message</button>
       <Pagination count={Math.ceil(count / max)} page={skip / max + 1} onChange={handlePagination} />
       <DataTable rows={data} />
     </div>