bodyshop/client/src/pages/csi/csi.container.page.jsx

// import { useMutation, useQuery } from "@apollo/client";
import { Button, Form, Layout, Result, Typography } from "antd";
import axios from "axios";
import React, { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useParams } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import AlertComponent from "../../components/alert/alert.component";
import ConfigFormComponents from "../../components/config-form-components/config-form-components.component";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import { selectCurrentUser } from "../../redux/user/user.selectors";
import { DateTimeFormat } from "./../../utils/DateFormatter";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
});
const mapDispatchToProps = (dispatch) => ({});

export default connect(mapStateToProps, mapDispatchToProps)(CsiContainerPage);

export function CsiContainerPage({ currentUser }) {
  const { surveyId } = useParams();
  const [form] = Form.useForm();
  const [axiosResponse, setAxiosResponse] = useState(null);
  const [submitting, setSubmitting] = useState({
    loading: false,
    submitted: false,
  });
  const { t } = useTranslation();

  const getAxiosData = useCallback(async () => {
    try {
      setSubmitting((prevSubmitting) => ({ ...prevSubmitting, loading: true }));
      const response = await axios.post("/csi/lookup", { surveyId });
      setSubmitting((prevSubmitting) => ({
        ...prevSubmitting,
        loading: false,
      }));
      setAxiosResponse(response.data);
    } catch (error) {
      console.error(`Something went wrong...: ${error.message}`);
      console.dir({
        stack: error?.stack,
        message: error?.message,
      });
    }
  }, [setAxiosResponse, surveyId]);

  useEffect(() => {
    getAxiosData().catch((err) =>
      console.error(
        `Something went wrong fetching axios data: ${err.message || ""}`
      )
    );
  }, [getAxiosData]);

  // Return if authorized
  if (currentUser && currentUser.authorized) {
    return (
      <Layout
        style={{ height: "100vh", display: "flex", flexDirection: "column" }}
      >
        <Result
          status="error"
          title={t("csi.labels.nologgedinuser")}
          subTitle={t("csi.labels.nologgedinuser_sub")}
        />
      </Layout>
    );
  }

  if (submitting.loading) return <LoadingSpinner />;

  const handleFinish = async (values) => {
    try {
      setSubmitting({ ...submitting, loading: true, submitting: true });
      const result = await axios.post("/csi/submit", { surveyId, values });
      console.log("result", result);
      if (!!!result.errors && result.data.update_csi.affected_rows > 0) {
        setSubmitting({ ...submitting, loading: false, submitted: true });
      }
    } catch (error) {
      console.error(`Something went wrong...: ${error.message}`);
      console.dir({
        stack: error?.stack,
        message: error?.message,
      });
    }
  };

  if (!axiosResponse || axiosResponse.csi_by_pk === null) {
    // Do something here , this is where you would return a loading box or something
    return (
      <>
        <Layout style={{ display: "flex", flexDirection: "column" }}>
          <Layout.Content
            style={{
              backgroundColor: "#fff",
              margin: "2em 4em",
              padding: "2em",
              overflowY: "auto",
              textAlign: "center",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Form>
              <Result
                status="error"
                title={t("csi.errors.notfoundtitle")}
                subTitle={t("csi.errors.notfoundsubtitle")}
              />
            </Form>
          </Layout.Content>
          <Layout.Footer>
            {`Copyright ImEX.Online. Survey ID: ${surveyId}`}
          </Layout.Footer>
        </Layout>
      </>
    );
  } else {
    const {
      relateddata: { bodyshop, job },
      csiquestion: { config: csiquestions },
    } = axiosResponse.csi_by_pk;

    return (
      <Layout style={{ display: "flex", flexDirection: "column" }}>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          }}
        >
          <div style={{ display: "flex", alignItems: "center", margin: "2em" }}>
            {bodyshop.logo_img_path && bodyshop.logo_img_path.src ? (
              <img src={bodyshop.logo_img_path.src} alt="Logo" />
            ) : null}
            <div style={{ margin: "2em", verticalAlign: "middle" }}>
              <Typography.Title level={4} style={{ margin: 0 }}>
                {bodyshop.shopname || ""}
              </Typography.Title>
              <Typography.Paragraph style={{ margin: 0 }}>
                {`${bodyshop.address1 || ""}${bodyshop.address2 ? ", " : ""}${
                  bodyshop.address2 || ""
                }`.trim()}
              </Typography.Paragraph>
              <Typography.Paragraph style={{ margin: 0 }}>
                {`${bodyshop.city || ""}${
                  bodyshop.city && bodyshop.state ? ", " : ""
                }${bodyshop.state || ""} ${bodyshop.zip_post || ""}`.trim()}
              </Typography.Paragraph>
            </div>
          </div>
          <Typography.Title>{t("csi.labels.title")}</Typography.Title>
          <strong>
            {t("csi.labels.greeting", {
              name: job.ownr_co_nm || job.ownr_fn || "",
            })}
          </strong>
          <Typography.Paragraph>
            {t("csi.labels.intro", { shopname: bodyshop.shopname || "" })}
          </Typography.Paragraph>
        </div>

        {submitting.error ? (
          <AlertComponent message={submitting.error} type="error" />
        ) : null}

        {submitting.submitted ? (
          <Layout.Content
            style={{
              backgroundColor: "#fff",
              margin: "2em 4em",
              padding: "2em",
              overflowY: "auto",
            }}
          >
            <Result
              status="success"
              title={t("csi.successes.submitted")}
              subTitle={t("csi.successes.submittedsub")}
            />
          </Layout.Content>
        ) : (
          <Layout.Content
            style={{
              backgroundColor: "#fff",
              margin: "2em 4em",
              padding: "2em",
              overflowY: "auto",
            }}
          >
            <Form form={form} onFinish={handleFinish}>
              {axiosResponse.csi_by_pk.valid ? (
                <>
                  <ConfigFormComponents componentList={csiquestions} />
                  <Button
                    loading={submitting.loading}
                    type="primary"
                    htmlType="submit"
                    style={{ float: "right" }}
                  >
                    {t("general.actions.submit")}
                  </Button>
                </>
              ) : (
                <>
                  <Result
                    title={t("csi.errors.surveycompletetitle")}
                    status="warning"
                    subTitle={t("csi.errors.surveycompletesubtitle", {
                      date: DateTimeFormat(axiosResponse.csi_by_pk.completedon),
                    })}
                  />
                  <Typography.Paragraph
                    type="secondary"
                    style={{ textAlign: "center" }}
                  >
                    {t("csi.successes.submittedsub")}
                  </Typography.Paragraph>
                </>
              )}
            </Form>
          </Layout.Content>
        )}
        <Layout.Footer>
          {t("csi.labels.copyright")}{" "}
          {t("csi.fields.surveyid", { surveyId: surveyId })}
        </Layout.Footer>
      </Layout>
    );
  }
}