pedwfrontend/components/case/documents.js

import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import jsonpath from "jsonpath";
import { useState, useEffect, useRef } from "react";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";

import {
    getBasicSearch,
    getBasicSearchDetails,
    getSearchDocumentDetails1,
    getSearchDocumentHistory1,
    getSASToken,
} from "../../actions";

import {
    setSearchResults,
    setSearchDetails,
    setDocumentDetails,
    setDocumentHistory,
    getSearchResultsObj,
} from "../../store/searchOutput/action";

const DocumentDetails = (props) => {
    let { t } = useTranslation();
    const firstRender = useRef(false);
    const {
        incidentid,
        caseReference,
        searchResultsObj,
        searchDetailsObj,
        documentDetailsObj,
        documentHistoryObj,
        setDocumentDetails,
        setDocumentHistory,
    } = props;

    const router = useRouter();
    const { locale } = router;

    var documentDetailsArr = documentDetailsObj || [];

    const DocumentView = (documentDetailsArr) => {
        console.log(documentDetailsArr);

        documentDetailsArr = documentDetailsArr.value;

        return (
            <dl className="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-14 govuk-!-padding-left-2">
                        {t("case:documents-name-label")}
                    </dd>
                    <dd className="govuk-summary-list__key govuk-!-font-size-14">
                        {t("case:documents-doc-type-label")}
                    </dd>
                    <dd className="govuk-summary-list__key govuk-!-font-size-14">
                        {t("case:documents-date-published-label")}
                    </dd>
                    <dd className="govuk-summary-list__key govuk-!-font-size-14">
                        {t("case:documents-size-label")}
                    </dd>
                </div>

                {documentDetailsArr.map((item) => {
                    let detailsObj = jsonpath.query(
                        item,
                        "$..[?(@._pinswg_documentids_value=='" +
                            incidentid +
                            "')]"
                    );
                    detailsObj = item;

                    if (typeof detailsObj != "undefined") {
                        var documentHistoryArr = documentHistoryObj || [];
                        return documentHistoryArr.map((historyItem, key) => {
                            let historyObj = jsonpath.query(
                                documentHistoryObj[key],
                                "$..value[?(@._pinswg_documentid_value=='" +
                                    detailsObj.pinswg_documentid +
                                    "')]"
                            );

                            historyObj = historyObj[0];
                            return !_.isEmpty(historyObj) ? (
                                <div
                                    className="govuk-summary-list__row"
                                    key={key}
                                >
                                    <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
                                        <Link href="/">
                                            <a>
                                                <span className="results-visually-hidden">
                                                    {t(
                                                        "case:documents-name-label"
                                                    )}
                                                    :
                                                </span>
                                                {_.has(historyObj, [
                                                    "_pinswg_documentid_value@OData.Community.Display.V1.FormattedValue",
                                                ])
                                                    ? historyObj[
                                                          "_pinswg_documentid_value@OData.Community.Display.V1.FormattedValue"
                                                      ]
                                                    : ""}
                                            </a>
                                        </Link>
                                    </dd>
                                    <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                        <span className="results-visually-hidden">
                                            {t("case:documents-doc-type-label")}
                                            :
                                        </span>
                                        {
                                            detailsObj[
                                                "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
                                            ]
                                        }
                                    </dd>
                                    <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                        <span className="results-visually-hidden">
                                            {t(
                                                "case:documents-date-published-label"
                                            )}
                                            :
                                        </span>

                                        {_.has(historyObj, [
                                            "pinswg_publisheddate@OData.Community.Display.V1.FormattedValue",
                                        ])
                                            ? historyObj[
                                                  "pinswg_publisheddate@OData.Community.Display.V1.FormattedValue"
                                              ]
                                            : ""}
                                    </dd>
                                    <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                        <span className="results-visually-hidden">
                                            {t("case:documents-size-label")}:
                                        </span>
                                        92
                                    </dd>
                                </div>
                            ) : (
                                ""
                            );
                        });
                    }
                })}
            </dl>
        );
    };

    useEffect(() => {
        const docDetailsObj = async () => {
            let docObj = await getSearchDocumentDetails1(incidentid)
                .then((data) => {
                    setDocumentDetails(data);
                    return data;
                })
                .then((data) => {
                    let historyObj = getDocumentHistory(data.value).then(
                        (result) => {
                            setDocumentHistory(result);
                            return result;
                        }
                    );

                    return data;
                });

            return docObj;
        };

        const getDocumentHistory = async (searchDocumentDetailsObj) => {
            let historyArr = [];
            searchDocumentDetailsObj = searchDocumentDetailsObj || [];

            const detailsObj = searchDocumentDetailsObj.map(
                (historyDetail, index) => {
                    if (historyDetail.pinswg_publishtoweb != true) {
                        console.log(historyDetail.pinswg_documentid);
                    } else {
                        historyArr.push(
                            getSearchDocumentHistory1(
                                historyDetail.pinswg_documentid
                            )
                        );
                    }
                }
            );
            return Promise.all(historyArr);
        };

        const searchDocumentResultsObj = docDetailsObj();
    }, [incidentid, setDocumentHistory, setDocumentDetails]);

    return (
        <div>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <h2>Documents</h2>
                    {_.isEmpty(documentHistoryObj) ? (
                        <div className="govuk-grid-row">
                            <div className="govuk-grid-column-two-thirds">
                                <h3>There are no documents for this appeal</h3>
                            </div>
                        </div>
                    ) : (
                        DocumentView(documentDetailsArr)
                    )}
                </div>
            </div>
        </div>
    );
};

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

const mapDispatchToProps = (dispatch) => {
    return {
        setDocumentDetails: (detailsObj) => {
            dispatch(setDocumentDetails(detailsObj));
        },
        setDocumentHistory: (historyObj) => {
            dispatch(setDocumentHistory(historyObj));
        },
    };
};

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