pedwfrontend/components/myportal/topthree.js

import Link from "next/link";
import _ from "lodash";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { setCurrentReference } from "../../store/currentView/action";
import { connect } from "react-redux";

const TopThree = (props) => {
    let { t } = useTranslation();
    const { showTopThree, showDetails, setCurrentReference, topThreeType } =
        props;

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

    let topthreeRow = [];

    // for (var i = 0; i < 3; i++) {
    //     (function (i) {
    //         topthreeRow.push(
    //             <div className="cardModuleItem" key={i}>
    //                 <div className="cardModuleDetails">
    //                     <div className="cardModuleReference">
    //                         <b>Case reference:</b>{" "}
    //                         <Link
    //                             href={
    //                                 topThreeType == "awaitingSubmission"
    //                                     ? "/representation"
    //                                     : "/case"
    //                             }
    //                         >
    //                             <a
    //                                 data-id={i}
    //                                 onClick={() => {
    //                                     setCurrentReference({
    //                                         "currentReference":
    //                                             showTopThree.value[i]
    //                                                 .ticketnumber,
    //                                         "currentType": topThreeType,
    //                                     });
    //                                 }}
    //                             >
    //                                 {showTopThree.value[i].ticketnumber}
    //                             </a>
    //                         </Link>
    //                     </div>
    //                     {topThreeType != "awaitingSubmission" ? (
    //                         <div className="carModuleAddress">
    //                             <b>Addressaa: </b>
    //                             {showDetails[i].value[0]
    //                                 .pinswg_siteaddressline1 == null
    //                                 ? "not entered"
    //                                 : showDetails[i].value[0]
    //                                       .pinswg_siteaddressline1}
    //                         </div>
    //                     ) : (
    //                         ""
    //                     )}

    //                     {topThreeType == "awaitingSubmission" ? (
    //                         <div className="carModuleAddress">
    //                             Make Representation on Case Incomplete, not
    //                             submitted
    //                         </div>
    //                     ) : (
    //                         ""
    //                     )}
    //                 </div>
    //                 <div className="cardModuleRemoveCase"> &mdash;</div>
    //             </div>
    //         );
    //     })(i);
    // }

    let showTopThreeArr = showTopThree.value;

    Object.keys(showTopThreeArr).map((key, index) => {
        topthreeRow.push(
            <div className="cardModuleItem" key={index}>
                <div className="cardModuleDetails">
                    <div className="cardModuleReference">
                        <b>{t("myportal:case-reference")}:</b>{" "}
                        <Link
                            href={
                                topThreeType == "awaitingSubmission"
                                    ? router.locale == "cy"
                                        ? "/fymhorth/cynrychiolaeth"
                                        : "/myportal/representation"
                                    : router.locale == "cy"
                                    ? "/fymhorth/achos"
                                    : "/myportal/case"
                            }
                        >
                            <a
                                data-id={index}
                                onClick={() => {
                                    setCurrentReference({
                                        "currentReference":
                                            showTopThreeArr[key].ticketnumber,
                                        "currentType": topThreeType,
                                    });
                                }}
                            >
                                {showTopThreeArr[key].ticketnumber}
                            </a>
                        </Link>
                    </div>
                    {topThreeType != "awaitingSubmission" ? (
                        <div className="carModuleAddress">
                            <b>{t("myportal:case-address")}:</b>{" "}
                            {_.isEmpty(showDetails)
                                ? t("myportal:case-address-not-entered")
                                : _.isEmpty(showDetails[index])
                                ? t("myportal:case-address-not-entered")
                                : _.isEmpty(showDetails[index].value[0])
                                ? t("myportal:case-address-not-entered")
                                : _.isEmpty(
                                      showDetails[index].value[0]
                                          .pinswg_siteaddressline1
                                  )
                                ? t("myportal:case-address-not-entered")
                                : showDetails[index].value[0]
                                      .pinswg_siteaddressline1}
                        </div>
                    ) : (
                        ""
                    )}

                    {topThreeType == "awaitingSubmission" ? (
                        <div className="carModuleAddress">
                            Make Representation on Case Incomplete, not
                            submitted
                        </div>
                    ) : (
                        ""
                    )}
                </div>
                <div className="cardModuleRemoveCase"> &mdash;</div>
            </div>
        );
    });

    let noRecordsLabel = "";
    switch (topThreeType) {
        case "watchedCases":
            noRecordsLabel = "You are not watching any cases";
            break;
        case "myRepresentations":
            noRecordsLabel = "You have no representations";
            break;
        case "myCases":
            noRecordsLabel = "You have no cases";
            break;
        case "awaitingSubmission":
            noRecordsLabel = "You have no awaiting submissions";
            break;
    }
    return (
        <>
            {topthreeRow.length == 0 ? (
                <div>{noRecordsLabel}</div>
            ) : (
                topthreeRow
            )}
        </>
    );
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentReference: (currentReference) => {
            dispatch(setCurrentReference(currentReference));
        },
    };
};

export default connect(null, mapDispatchToProps)(TopThree);