Added viewing all CSI responses + read only version of configurable form BOD-154

client/src/components/csi-response-form/csi-response-form.container.jsx

@@ -0,0 +1,43 @@
+import { useQuery } from "@apollo/react-hooks";
+import { Form } from "antd";
+import queryString from "query-string";
+import React, { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { QUERY_CSI_RESPONSE_BY_PK } from "../../graphql/csi.queries";
+import ConfigFormComponents from "../config-form-components/config-form-components.component";
+import { useTranslation } from "react-i18next";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import AlertComponent from "../alert/alert.component";
+
+export default function CsiResponseFormContainer() {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const searchParams = queryString.parse(useLocation().search);
+  const { responseid } = searchParams;
+  const { loading, error, data } = useQuery(QUERY_CSI_RESPONSE_BY_PK, {
+    variables: {
+      id: responseid,
+    },
+    skip: !!!responseid,
+  });
+
+  useEffect(() => {
+    form.resetFields();
+  }, [data, form]);
+
+  if (!!!responseid) return <div>{t("csi.labels.noneselected")}</div>;
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <div>
+      <Form form={form} initialValues={data.csi_by_pk.response}>
+        <ConfigFormComponents
+          readOnly
+          componentList={data.csi_by_pk.csiquestion.config}
+        />
+      </Form>
+    </div>
+  );
+}