pedwfrontend/components/case/representationList.js

import { JSONPath as jsonpath } from "jsonpath-plus";
import _ from "lodash";
import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { connect } from "react-redux";
import transLookup from "../../data/lookuptranslations.json";

import { getRepresentations } from "../../actions";
import { setRepresentations } from "../../store/searchOutput/action";
import { formatDates } from "../utils";

const RepresentationList = (props) => {
    const { incidentid, representationsObj, setRepresentations } = props;
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    //const [showSpinnerState, setShowSpinnerState] = useState(false);

    // let spinnerState = () => {
    //     showSpinnerState == true
    //         ? setShowSpinnerState(false)
    //         : setShowSpinnerState(true);
    // };

    var representationsArr = representationsObj || [];

    const RepresentationsView = (representationsArr) => {
        representationsArr = representationsArr.value;
        return (
            <>
                <p>
                    {representationsObj["@odata.count"] > 1
                        ? t("case:documents-count-label-1")
                        : t("case:documents-count-label-1a")}{" "}
                    {representationsObj["@odata.count"]}{" "}
                    {
                        representationsObj["@odata.count"] > 1
                            ? "representations " //t("case:documents-count-label-2")
                            : "representations " //t("case:documents-count-label-2a")
                    }
                </p>
                <dl className="documentList govuk-summary-list govuk-!-margin-bottom-9 results">
                    <div className="govuk-summary-list__row results-headings">
                        <dd className="govuk-summary-list__key govuk-!-font-size-16 ">
                            {
                                "Type of representation" //t("case:documents-name-label")
                            }
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            {t("case:documents-doc-type-label")}
                        </dd>
                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
                            {t("case:documents-date-published-label")}
                        </dd>
                    </div>

                    {representationsArr.map((item, key) => {
                        let detailsObj = jsonpath(
                            "$..[?(@.pinswg_representationsid=='" +
                                incidentid +
                                "')]",
                            item
                        );
                        detailsObj = item;

                        console.log(detailsObj);

                        return (
                            <div className="govuk-summary-list__row" key={key}>
                                <dd className="govuk-summary-list__value govuk-!-font-size-16 ">
                                    <a href={detailsObj.pinswg_hashlink}>
                                        <span className="results-visually-hidden">
                                            {t("case:documents-name-label")}:
                                        </span>
                                        {
                                            detailsObj[
                                                "pinswg_whatkind@OData.Community.Display.V1.FormattedValue"
                                            ]
                                        }
                                    </a>
                                </dd>
                                <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                    <span className="results-visually-hidden">
                                        {t("case:documents-doc-type-label")}:
                                    </span>

                                    {router.locale == "cy"
                                        ? jsonpath(
                                              '$..[?(@.value=="' +
                                                  detailsObj[
                                                      "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
                                                  ] +
                                                  '")].value_cy',
                                              transLookup
                                          )
                                        : detailsObj[
                                              "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
                                          ] ||
                                          t(
                                              "case:summary-no-date-entered-label"
                                          )}
                                </dd>
                                <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                    <span className="results-visually-hidden">
                                        {t(
                                            "case:documents-date-published-label"
                                        )}
                                        :
                                    </span>

                                    {formatDates(
                                        detailsObj[
                                            "createdon@OData.Community.Display.V1.FormattedValue"
                                        ]
                                    )}
                                </dd>
                                {/* <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                        <span className="results-visually-hidden">
                                            {t("case:documents-size-label")}:
                                        </span>
                                        92
                                    </dd> */}
                            </div>
                        );
                    })}
                </dl>
            </>
        );
    };

    useEffect(() => {
        const representationDetailsObj = async () => {
            let docObj = await getRepresentations(incidentid).then((data) => {
                console.log(data);
                setRepresentationSearchState(true);
                setRepresentations(data);
                return data;
            });

            return docObj;
        };
        const representationResultsObj = representationDetailsObj();
    }, [incidentid, setRepresentations]);

    const pagesCount = Math.ceil(representationsObj["@odata.count"] / 10);

    let currentPage = 0;

    currentPage = decodeURI(representationsObj["@odata.nextLink"]).split(
        "skiptoken="
    )[1];
    currentPage =
        typeof currentPage != "undefined"
            ? parseInt(
                  decodeURI(currentPage)
                      .split('pagenumber="')[1]
                      .slice(
                          0,
                          decodeURI(currentPage)
                              .split('pagenumber="')[1]
                              .indexOf('"')
                      ) - 1
              )
            : pagesCount;

    //const [showSpinnerState, setShowSpinnerState] = useState(false);

    // let spinnerState = () => {
    //     showSpinnerState == true
    //         ? setShowSpinnerState(false)
    //         : setShowSpinnerState(true);
    // };

    const [showReperesentationSearchState, setRepresentationSearchState] =
        useState(false);

    let representationSearchState = () => {
        showReperesentationSearchState == true
            ? setRepresentationSearchState(false)
            : setRepresentationSearchState(true);
    };

    return (
        <>
            <div className="card">
                <div className="govuk-grid-row card-body">
                    <div className="govuk-grid-column-full">
                        <h2>Representations</h2>
                        {_.isEmpty(representationsObj) ? (
                            <div className="govuk-grid-row">
                                <div className="govuk-grid-column-two-thirds">
                                    <h3>
                                        {showReperesentationSearchState == false
                                            ? "Checking for representations "
                                            : t(
                                                  "case:documents-non-available-label"
                                              )}
                                    </h3>
                                </div>
                            </div>
                        ) : (
                            RepresentationsView(representationsArr)
                        )}
                    </div>
                </div>
            </div>
        </>
    );
};

const mapStateToProps = (state) => {
    return {
        ...state,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setRepresentations: (representationObj) => {
            dispatch(setRepresentations(representationObj));
        },
    };
};

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