fix(react-formio-container): Fix some issues with hook and container

packages/react-formio-container/src/hooks/useForm.hook.ts

@@ -8,9 +8,9 @@ import {
   resetSubmission,
   resetSubmissions,
   saveForm as saveFormAction,
+  selectAuth,
   selectError,
-  selectForm,
-  selectRoot
+  selectForm
 } from "@tsed/react-formio";
 import { push } from "connected-react-router";
 import noop from "lodash/noop";
@@ -45,7 +45,7 @@ export function useForm(props: UseFormProps) {
   const basePath = path.replace(":formType", formType);
   const dispatch = useDispatch();
 
-  const auth: AuthState = useSelector(selectRoot("auth"));
+  const auth: AuthState = useSelector(selectAuth);
   const error = useSelector((state) => selectError(type, state));
   const form = useSelector((state) => selectForm(type, state));
 
@@ -104,7 +104,7 @@ export function useForm(props: UseFormProps) {
         data: form
       });
     },
-    [basePath, form._id]
+    [basePath, type, form]
   );
 
   const onSaveDone = useCallback(
@@ -137,12 +137,12 @@ export function useForm(props: UseFormProps) {
         });
       }
     },
-    [formType, form._id]
+    [formType, formAction, form._id]
   );
 
   const saveForm = useCallback(
     (form: FormSchema) => {
-      dispatch(saveFormAction(formType, form, onSaveDone));
+      dispatch(saveFormAction(type, form, onSaveDone));
     },
     [formType, form._id, onSaveDone]
   );
@@ -153,6 +153,7 @@ export function useForm(props: UseFormProps) {
 
   return {
     ...props,
+    basePath,
     formId,
     formAction,
     auth,
@@ -174,8 +175,11 @@ export function useForm(props: UseFormProps) {
     saveForm,
     removeForm,
     duplicateForm,
-    goEdit() {
+    gotoEdit() {
       dispatch(push([basePath, formId, "edit"].join("/")));
+    },
+    gotoRemove() {
+      dispatch(push([basePath, formId, "remove"].join("/")));
     }
   };
 }

packages/react-formio-container/src/hooks/useSubmission.hook.tsx

@@ -2,6 +2,7 @@ import {
   deleteSubmission,
   getSubmission as getSubmissionAction,
   getSubmissions,
+  receiveForm,
   refreshSubmissions,
   saveSubmission as saveSubmissionAction,
   selectAuth,
@@ -91,7 +92,7 @@ export function useSubmission(props: UseSubmissionProps) {
     dispatch(
       deleteSubmission(submissionType, formId, submissionId, onRemoveDone)
     );
-  }, [basePath, formId, submissionId, onRemoveDone]);
+  }, [basePath, formAction, formId, submissionId, onRemoveDone]);
 
   const onSaveDone = useCallback(
     async (err: Error | null, updatedSubmission: Submission) => {
@@ -135,6 +136,17 @@ export function useSubmission(props: UseSubmissionProps) {
     [formId, onSaveDone]
   );
 
+  const duplicateSubmission = useCallback(() => {
+    dispatch(receiveForm(formType, { ...submission, _id: undefined }));
+    dispatch(push([basePath, "create"].join("/")));
+    onSuccess({
+      name: `duplicate:${submissionType}`,
+      title: `${submissionType} duplicated`,
+      message: `The ${submissionType} has been successfully duplicated!`,
+      data: form
+    });
+  }, [basePath, submission, submissionType]);
+
   useEffect(() => {
     getSubmission();
   }, [submissionAction]);
@@ -151,11 +163,15 @@ export function useSubmission(props: UseSubmissionProps) {
     getSubmission,
     saveSubmission,
     removeSubmission,
+    duplicateSubmission,
     onFormReady(formio: any) {
       formioRef.current = formio;
     },
-    goEdit() {
+    gotoEdit() {
       dispatch(push([basePath, submissionId, "edit"].join("/")));
+    },
+    gotoRemove() {
+      dispatch(push([basePath, submissionId, "delete"].join("/")));
     }
   };
 }

packages/react-formio-container/src/hooks/useSubmissions.hook.tsx

@@ -24,9 +24,9 @@ export function useSubmissions(props: UseSubmissionsProps) {
 
   const fetch = useCallback(
     (options?: any) => {
-      dispatch(getSubmissions(formType, formId, options));
+      dispatch(getSubmissions(formAction, formId, options));
     },
-    [formType, formId]
+    [formAction, formId]
   );
 
   const auth = useSelector(selectAuth);

packages/react-formio-container/src/views/form.view.tsx

@@ -1,10 +1,9 @@
-import { Alert, Tabs } from "@tsed/react-formio";
+import { Alert, Tabs, RemoveModal } from "@tsed/react-formio";
 import React from "react";
 import { Route, Switch, useParams } from "react-router";
 import { FormEditView } from "./formEdit.view";
 import { useForm } from "../hooks/useForm.hook";
 import { UseFormsProps } from "../hooks/useForms.hook";
-import { RemoveModal } from "@tsed/react-formio/dist/src/components/modal/removeModal";
 
 function FormComponent(props: ReturnType<typeof useForm>) {
   const {
@@ -16,7 +15,7 @@ function FormComponent(props: ReturnType<typeof useForm>) {
     currentRoute,
     setCurrentRoute,
     routes,
-    goEdit
+    gotoEdit
   } = props;
 
   return (
@@ -64,7 +63,7 @@ function FormComponent(props: ReturnType<typeof useForm>) {
                 valueToCompare={props.form.name}
                 itemType={props.formType}
                 onSubmit={removeForm}
-                onClose={goEdit}
+                onClose={gotoEdit}
               />
             </Route>
             <Route path={[basePath, formId].join("/")} exact={true}>

packages/react-formio-container/src/views/submission.view.tsx

@@ -1,9 +1,13 @@
-import { Form } from "@tsed/react-formio";
+import { Form, iconClass, RemoveModal, useTooltip } from "@tsed/react-formio";
+import classnames from "classnames";
+import startCase from "lodash/startCase";
+import toLower from "lodash/toLower";
 import React from "react";
 import { useParams } from "react-router";
 import { UseFormProps } from "../hooks/useForm.hook";
 import { useSubmission } from "../hooks/useSubmission.hook";
-import { RemoveModal } from "@tsed/react-formio/dist/src/components/modal/removeModal";
+
+const ucfirst = (t: string) => startCase(toLower(t));
 
 export interface SubmissionViewProps extends UseFormProps {
   formAction: string;
@@ -20,7 +24,9 @@ export function SubmissionView(props: SubmissionViewProps) {
     submissionAction,
     form,
     submission,
-    goEdit,
+    gotoEdit,
+    gotoRemove,
+    duplicateSubmission,
     removeSubmission,
     saveSubmission,
     onFormReady,
@@ -30,10 +36,54 @@ export function SubmissionView(props: SubmissionViewProps) {
     ...params
   });
 
+  const copyRef = useTooltip({
+    trigger: "hover",
+    placement: "top",
+    title: "Copy"
+  });
+
+  const removeRef = useTooltip({
+    trigger: "hover",
+    placement: "top",
+    title: "Remove"
+  });
+
   return (
     <div className={"p-4"}>
-      <h2 className={"border-b-1 border-gray-300 text-xl mb-4"}>
-        {submissionAction} data
+      <h2
+        className={
+          "border-b-1 border-gray-300 text-lg mb-4 pb-1 flex items-center"
+        }
+      >
+        <div className={"flex items-center flex-1"}>
+          {ucfirst(form.type)} {form.title}{" "}
+          <i
+            className={classnames(
+              iconClass(undefined, "chevron-right"),
+              "text-md text-secondary mx-1"
+            )}
+          />{" "}
+          <span className={"text-gray-500"}>
+            {ucfirst(submissionAction)} data
+          </span>
+        </div>
+        <div>
+          <button
+            onClick={duplicateSubmission}
+            className={classnames("btn btn-light btn-sm mr-2")}
+            ref={copyRef}
+          >
+            <i className={iconClass(undefined, "copy")} />
+          </button>
+
+          <button
+            onClick={gotoRemove}
+            className={classnames("btn btn-danger btn-sm")}
+            ref={removeRef}
+          >
+            <i className={iconClass(undefined, "trash")} />
+          </button>
+        </div>
       </h2>
       <Form
         form={form}
@@ -49,7 +99,7 @@ export function SubmissionView(props: SubmissionViewProps) {
           valueToCompare={form.name}
           itemType={formAction}
           onSubmit={removeSubmission}
-          onClose={goEdit}
+          onClose={gotoEdit}
         />
       )}
     </div>

packages/react-formio/src/components/modal/removeModal.component.tsx

@@ -57,7 +57,7 @@ export function RemoveModal(props: RemoveModalProps) {
     >
       <div className={"px-4 pt-3 pb-5"}>
         <div className={"pb-1"}>
-          To drop <strong>{props.valueToCompare}</strong> type the{" "}
+          To drop <strong>{props.valueToCompare}</strong>, type the{" "}
           <strong>{props.itemType?.toLowerCase()}</strong> name{" "}
           <strong>{props.valueToCompare}</strong>.
         </div>

packages/react-formio/src/stores/forms/forms.actions.ts

@@ -42,6 +42,6 @@ export const getForms = (
 export const refreshForms = (name: string, done = noop) => {
   return async (dispatch: any, getState: any) => {
     const parameters = selectFormsParameters(name, getState());
-    getForms(name, parameters, done);
+    return getForms(name, parameters, done)(dispatch, getState);
   };
 };

packages/react-formio/src/stores/root/root.selectors.ts

@@ -1,3 +1,5 @@
+import get from "lodash/get";
+
 export function selectRoot<State = any>(name: string): (state: any) => State;
 export function selectRoot<State = any>(name: string, state: any): State;
 export function selectRoot<State = any>(name: string, state?: any): any {
@@ -9,7 +11,7 @@ export function selectRoot<State = any>(name: string, state?: any): any {
 }
 
 export const selectError = (name: string, state: any): null | Error =>
-  selectRoot(name, state).error;
+  get(selectRoot(name, state), "error");
 
 export const selectIsActive = (name: string, state: any): boolean =>
-  selectRoot(name, state).isActive;
+  get(selectRoot(name, state), "isActive");

packages/react-formio/src/stores/submissions/submissions.actions.ts

@@ -41,6 +41,6 @@ export const refreshSubmissions = (
 ) => {
   return async (dispatch: any, getState: any) => {
     const parameters = selectSubmissionsParameters(name, getState());
-    getSubmissions(name, formId, parameters, done);
+    return getSubmissions(name, formId, parameters, done)(dispatch, getState);
   };
 };