Merge pull request #227 from AntlerVC/develop

Reuse same action button component between table & sidedrawer

www/src/components/SideDrawer/Form/Fields/Action.tsx

@@ -2,21 +2,10 @@ import React, { useContext, useState } from "react";
 import { Controller, useWatch } from "react-hook-form";
 import { IFieldProps } from "../utils";
 
-import {
-  createStyles,
-  makeStyles,
-  Grid,
-  Typography,
-  Fab,
-  CircularProgress,
-} from "@material-ui/core";
-import PlayIcon from "@material-ui/icons/PlayArrow";
-import RefreshIcon from "@material-ui/icons/Refresh";
-
-import { SnackContext } from "contexts/snackContext";
-import { cloudFunction } from "firebase/callables";
-import { sanitiseCallableName, isUrl, sanitiseRowData } from "util/fns";
+import { createStyles, makeStyles, Grid, Typography } from "@material-ui/core";
+import { sanitiseCallableName, isUrl } from "util/fns";
 
+import { ActionFab } from "../../../Table/formatters/Action";
 const useStyles = makeStyles((theme) =>
   createStyles({
     root: {},
@@ -49,40 +38,11 @@ function Action({ control, name, docRef, editable, config }: IActionProps) {
   const classes = useStyles();
   const docData = useWatch({ control });
 
-  const [isRunning, setIsRunning] = useState(false);
-
-  const snack = useContext(SnackContext);
-  const disabled = editable === false;
-
   return (
     <Controller
       control={control}
       name={name}
       render={({ onChange, onBlur, value }) => {
-        const handleRun = () => {
-          setIsRunning(true);
-          console.log("RUN");
-
-          cloudFunction(
-            config.callableName,
-            {
-              ref: { path: docRef.path, id: docRef.id },
-              row: sanitiseRowData(Object.assign({}, docData)),
-            },
-            (response) => {
-              const { message, cellValue } = response.data;
-              setIsRunning(false);
-              snack.open({ message, severity: "success" });
-              if (cellValue) onChange(cellValue);
-            },
-            (error) => {
-              console.error("ERROR", config.callableName, error);
-              setIsRunning(false);
-              snack.open({ message: JSON.stringify(error), severity: "error" });
-            }
-          );
-        };
-
         const hasRan = value && value.status;
 
         return (
@@ -111,29 +71,19 @@ function Action({ control, name, docRef, editable, config }: IActionProps) {
                   ) : hasRan ? (
                     value.status
                   ) : (
-                    sanitiseCallableName(config.callableName)
+                    sanitiseCallableName(name)
                   )}
                 </Typography>
               </Grid>
             </Grid>
 
             <Grid item>
-              <Fab
-                onClick={handleRun}
-                disabled={isRunning || !!(hasRan && !value.redo) || disabled}
-              >
-                {isRunning ? (
-                  <CircularProgress
-                    color="secondary"
-                    size={24}
-                    thickness={4.6}
-                  />
-                ) : hasRan ? (
-                  <RefreshIcon />
-                ) : (
-                  <PlayIcon />
-                )}
-              </Fab>
+              <ActionFab
+                row={{ ...docData, ref: docRef }}
+                column={{ config, key: name }}
+                onSubmit={onChange}
+                value={value}
+              />
             </Grid>
           </Grid>
         );

www/src/components/Table/ColumnMenu/Settings/ConfigFields/OptionsInput.tsx

@@ -33,8 +33,8 @@ export default function OptionsInput(props: any) {
   const [newOption, setNewOption] = useState("");
   const handleAdd = () => {
     // setOptions([...options, newOption]);
-    if (newOption !== "") {
-      handleChange([...options, newOption]);
+    if (newOption.trim() !== "") {
+      handleChange([...options, newOption.trim()]);
       setNewOption("");
     }
   };

www/src/components/Table/formatters/Action.tsx

@@ -42,16 +42,13 @@ const getStateIcon = (actionState) => {
       return <PlayIcon />;
   }
 };
-export default function Action({
-  column,
-  row,
-  value,
-  onSubmit,
-}: CustomCellProps) {
+
+export const ActionFab = ({ row, column, onSubmit, value }) => {
   const classes = useStyles();
 
   const { createdAt, updatedAt, id, ref, ...docData } = row;
   const { config } = column as any;
+
   const action = !value
     ? "run"
     : value.undo
@@ -99,7 +96,7 @@ export default function Action({
       ? "undo"
       : "redo"
     : "run";
-  let component = (
+  let fabButton = (
     <Fab
       size="small"
       color="secondary"
@@ -123,8 +120,8 @@ export default function Action({
     </Fab>
   );
 
-  if (typeof config.confirmation === "string") {
-    component = (
+  if (typeof config.confirmation === "string")
+    return (
       <Confirmation
         message={{
           title: `${column.name} Confirmation`,
@@ -135,10 +132,24 @@ export default function Action({
         }}
         functionName="onClick"
       >
-        {component}
+        {fabButton}
       </Confirmation>
     );
-  }
+
+  return fabButton;
+};
+
+export default function Action({
+  column,
+  row,
+  value,
+  onSubmit,
+}: CustomCellProps) {
+  const classes = useStyles();
+
+  const { createdAt, updatedAt, id, ref, ...docData } = row;
+  const { name } = column as any;
+  const hasRan = value && value.status;
   return (
     <Grid
       container
@@ -154,11 +165,18 @@ export default function Action({
         ) : hasRan ? (
           value.status
         ) : (
-          sanitiseCallableName(callableName ?? config.callableName)
+          sanitiseCallableName(name)
         )}
       </Grid>
 
-      <Grid item>{component}</Grid>
+      <Grid item>
+        <ActionFab
+          row={row}
+          column={column}
+          onSubmit={onSubmit}
+          value={value}
+        />
+      </Grid>
     </Grid>
   );
 }