add mock api calls for modules viewall component

actions/index.js

@@ -303,3 +303,52 @@ export const createCase = (lpaType, appealType) => {
 //         Xrm.Utility.alertDialog(textStatus + " " + errorThrown);
 //     }
 // });
+
+export const getMyCases = () => {
+    return axios
+
+        .get(BASE_URL + "/api/lookups/myCases", {
+            httpsAgent: new https.Agent({ rejectUnauthorized: false }),
+        })
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("thi serror", error);
+        });
+};
+
+export const getMyRepresentations = () => {
+    return axios
+
+        .get(BASE_URL + "/api/lookups/myRepresentations", {
+            httpsAgent: new https.Agent({ rejectUnauthorized: false }),
+        })
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("thi serror", error);
+        });
+};
+
+export const getWatchedCases = () => {
+    return axios
+
+        .get(BASE_URL + "/api/lookups/watchedCases", {
+            httpsAgent: new https.Agent({ rejectUnauthorized: false }),
+        })
+        .then((res) => res.data)
+        .catch((error) => {
+            w;
+            console.log("thi serror", error);
+        });
+};
+
+export const getAwaitingSubmission = () => {
+    return axios
+
+        .get(BASE_URL + "/api/lookups/awaitingSubmission", {
+            httpsAgent: new https.Agent({ rejectUnauthorized: false }),
+        })
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("thi serror", error);
+        });
+};

components/breadcrumbs.js

@@ -5,16 +5,7 @@ import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 
 const Breadcrumbs = (props) => {
-    const {
-        courseContent,
-        slug,
-        formTitle,
-        activitysub,
-        activity,
-        applicant_id,
-        course_id,
-        applicant_ref,
-    } = props;
+    const { courseContent, slug, currentView } = props;
     const router = useRouter();
     const { appealType, section } = router.query;
 
@@ -143,6 +134,22 @@ const Breadcrumbs = (props) => {
                     ) : (
                         ""
                     )}
+                    {router.pathname == "/myportal/viewall" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link href="/myportal">
+                                    <a className="govuk-breadcrumbs__link">
+                                        My Portal
+                                    </a>
+                                </Link>
+                            </li>
+                            <li className="govuk-breadcrumbs__list-item">
+                                {currentView.viewName}
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
                     {router.pathname == "/case" ? (
                         <>
                             <li className="govuk-breadcrumbs__list-item">

components/myportal.js

@@ -10,7 +10,7 @@ import MyRepresentations from "./myportal/myrepresentations";
 import WatchedCases from "./myportal/watchedcases";
 import YourAccount from "./myportal/youraccount";
 
-export default function MyPortal({ children, pages }) {
+const MyPortal = (props) => {
     let { t } = useTranslation();
 
     const router = useRouter();
@@ -26,11 +26,15 @@ export default function MyPortal({ children, pages }) {
                 <div className="govuk-grid-column-full">
                     <div className="flex-container grid-row govuk-body ">
                         <MakeNewAppeal />
-                        <MyCases />
+                        <MyCases myCases={props.myCases} />
                         <SearchCases />
-                        <AwaitingSubmission />
-                        <MyRepresentations />
-                        <WatchedCases />
+                        <AwaitingSubmission
+                            awaitingSubmission={props.awaitingSubmission}
+                        />
+                        <MyRepresentations
+                            myRepresentations={props.myRepresentations}
+                        />
+                        <WatchedCases watchedCases={props.watchedCases} />
                     </div>
                     <div className="flex-container grid-row govuk-body ">
                         <YourAccount />
@@ -39,4 +43,6 @@ export default function MyPortal({ children, pages }) {
             </div>
         </main>
     );
-}
+};
+
+export default MyPortal;

components/myportal/awaitingsubmission.js

@@ -2,12 +2,16 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import TopThree from "./topthree";
+import { connect } from "react-redux";
+import { setCurrentView } from "../../store/currentView/action";
 
-export default function AwaitingSubmission() {
+const AwaitingSubmission = (props) => {
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
+    const { setCurrentView } = props;
+
     return (
         <div className="card card-3" id="casescomment-card">
             <div className="card-body">
@@ -15,14 +19,37 @@ export default function AwaitingSubmission() {
                     {t("myportal:awatitingsubmission-card-title")}
                 </h3>
                 <div className="cardModuleContainer">
-                    <TopThree />
+                    <TopThree
+                        showTopThree={
+                            props.awaitingSubmission.awaitingSubmission
+                        }
+                    />
                 </div>
                 <div className="cardVieAll">
-                    <Link href="/viewall">
-                        <a>{t("myportal:viewall-link")}</a>
+                    <Link href="/myportal/viewall">
+                        <a
+                            onClick={() => {
+                                setCurrentView({
+                                    "viewName": "Awaiting Submission",
+                                    "viewKey": "awaitingSubmission",
+                                });
+                            }}
+                        >
+                            {t("myportal:viewall-link")}
+                        </a>
                     </Link>
                 </div>
             </div>
         </div>
     );
-}
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentView: (currentView) => {
+            dispatch(setCurrentView(currentView));
+        },
+    };
+};
+
+export default connect(null, mapDispatchToProps)(AwaitingSubmission);

components/myportal/mycases.js

@@ -2,11 +2,15 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import TopThree from "./topthree";
-export default function MyCases() {
+import { connect } from "react-redux";
+import { setCurrentView } from "../../store/currentView/action";
+
+const MyCases = (props) => {
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
+    const { setCurrentView } = props;
     return (
         <div className="card card-3" id="casescomment-card">
             <div className="card-body">
@@ -14,15 +18,34 @@ export default function MyCases() {
                     {t("myportal:mycases-card-title")}
                 </h3>
                 <div className="cardModuleContainer">
-                    <TopThree />
+                    <TopThree showTopThree={props.myCases.myCases} />
                 </div>
 
                 <div className="cardVieAll">
-                    <Link href="/viewall">
-                        <a>{t("myportal:viewall-link")}</a>
+                    <Link href="/myportal/viewall" shallow>
+                        <a
+                            onClick={() => {
+                                setCurrentView({
+                                    "viewName": "My Cases",
+                                    "viewKey": "myCases",
+                                });
+                            }}
+                        >
+                            {t("myportal:viewall-link")}
+                        </a>
                     </Link>
                 </div>
             </div>
         </div>
     );
-}
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentView: (currentView) => {
+            dispatch(setCurrentView(currentView));
+        },
+    };
+};
+
+export default connect(null, mapDispatchToProps)(MyCases);

components/myportal/myrepresentations.js

@@ -2,11 +2,16 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import TopThree from "./topthree";
-export default function MyRepresentations() {
+import { connect } from "react-redux";
+import { setCurrentView } from "../../store/currentView/action";
+
+const MyRepresentations = (props) => {
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
+    const { setCurrentView } = props;
+
     return (
         <div className="card card-3" id="casescomment-card">
             <div className="card-body">
@@ -14,15 +19,36 @@ export default function MyRepresentations() {
                     {t("myportal:myrepresentations-card-title")}
                 </h3>
                 <div className="cardModuleContainer">
-                    <TopThree />{" "}
+                    <TopThree
+                        showTopThree={props.myRepresentations.myRepresentations}
+                    />
                 </div>
 
                 <div className="cardVieAll">
-                    <Link href="/viewall">
-                        <a>{t("myportal:viewall-link")}</a>
+                    <Link href="/myportal/viewall">
+                        <a
+                            onClick={() => {
+                                setCurrentView({
+                                    "viewName": "My Representations",
+                                    "viewKey": "myRepresentations",
+                                });
+                            }}
+                        >
+                            {t("myportal:viewall-link")}
+                        </a>
                     </Link>
                 </div>
             </div>
         </div>
     );
-}
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentView: (currentView) => {
+            dispatch(setCurrentView(currentView));
+        },
+    };
+};
+
+export default connect(null, mapDispatchToProps)(MyRepresentations);

components/myportal/topthree.js

@@ -2,55 +2,34 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 
-export default function TopThree() {
+const TopThree = (props) => {
     let { t } = useTranslation();
+    const { showTopThree } = props;
 
     const router = useRouter();
     const { locale } = router;
-    return (
-        <>
-            <div className="cardModuleItem">
+
+    let topthreeRow = [];
+
+    for (var i = 0; i < 3; i++)
+        topthreeRow.push(
+            <div className="cardModuleItem" key={i}>
                 <div className="cardModuleDetails">
                     <div className="cardModuleReference">
                         <b>Case reference:</b>{" "}
                         <Link href="/case">
-                            <a>CAS-00010-J9W6L5</a>
+                            <a>{props.showTopThree.value[i].reference}</a>
                         </Link>
                     </div>
                     <div className="carModuleAddress">
-                        <b>Address: </b> Beggars Lane
+                        <b>Address: </b> {props.showTopThree.value[i].address}
                     </div>
                 </div>
                 <div className="cardModuleRemoveCase"> &mdash;</div>
             </div>
-            <div className="cardModuleItem">
-                <div className="cardModuleDetails">
-                    <div className="cardModuleReference">
-                        <b>Case reference:</b>{" "}
-                        <Link href="/case">
-                            <a>CAS-00010-J9W6L5</a>
-                        </Link>
-                    </div>
-                    <div className="carModuleAddress">
-                        <b>Address: </b> Beggars Lane
-                    </div>
-                </div>
-                <div className="cardModuleRemoveCase"> &mdash;</div>
-            </div>
-            <div className="cardModuleItem">
-                <div className="cardModuleDetails">
-                    <div className="cardModuleReference">
-                        <b>Case reference:</b>{" "}
-                        <Link href="/case">
-                            <a>CAS-00010-J9W6L5</a>
-                        </Link>
-                    </div>
-                    <div className="carModuleAddress">
-                        <b>Address: </b> Beggars Lane
-                    </div>
-                </div>
-                <div className="cardModuleRemoveCase"> &mdash;</div>
-            </div>
-        </>
-    );
-}
+        );
+
+    return <>{topthreeRow}</>;
+};
+
+export default TopThree;

components/myportal/viewall.js

@@ -0,0 +1,113 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function ViewAllResults(props) {
+    const { searchString, searchResultsObj, currentView } = props;
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    var resultsArr = props[currentView.viewKey][currentView.viewKey].value || [
+        {},
+    ];
+    let resultsRowArr = [];
+    Object.keys(resultsArr).map((key, index) => {
+        resultsRowArr.push(
+            <div className="govuk-summary-list__row" key={key}>
+                <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
+                    <Link href="/case">
+                        <a>
+                            <span className="results-visually-hidden">
+                                Case Reference:
+                            </span>
+                            {resultsArr[index].reference}
+                        </a>
+                    </Link>
+                </dd>
+                <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                    <span className="results-visually-hidden">
+                        Site Address:{" "}
+                    </span>
+                    {resultsArr[index].address1}
+                    <br /> {resultsArr[index].town}
+                    <br />
+                    {resultsArr[index].postcode}
+                </dd>
+                <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                    <span className="results-visually-hidden">
+                        Appellant/Applicant:
+                    </span>
+                    {resultsArr[index].appellantApplicant}
+                </dd>
+                <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                    <span className="results-visually-hidden">Authority:</span>
+                    {resultsArr[index].lpaname}
+                </dd>
+                <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                    <span className="results-visually-hidden">Case Type:</span>
+                    {
+                        resultsArr[index][
+                            "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                        ]
+                    }
+                </dd>
+                <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                    <span className="results-visually-hidden">Status:</span>
+                    {
+                        resultsArr[index][
+                            "statuscode@OData.Community.Display.V1.FormattedValue"
+                        ]
+                    }
+                </dd>
+            </div>
+        );
+    });
+
+    return (
+        <>
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
+                        {currentView.viewName}
+                    </h1>
+
+                    <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 results_wider  govuk-!-padding-left-2">
+                                {t("search:searchresults-case-reference-label")}
+                            </dd>
+                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                                {t("search:searchresults-site-address-label")}
+                            </dd>
+                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                                {t("search:searchresults-applicant-label")}
+                            </dd>
+                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                                {t("search:searchresults-authority-label")}
+                            </dd>
+                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                                {t("search:searchresults-case-type-label")}
+                            </dd>
+                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                                {t("search:searchresults-status-label")}
+                            </dd>
+                        </div>
+
+                        {resultsRowArr}
+                    </dl>
+                </div>
+            </div>
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <div className="govuk-button-group">
+                        <Link href="/myportal">
+                            <a className="govuk-button">Back</a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

components/myportal/watchedcases.js

@@ -2,11 +2,16 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import TopThree from "./topthree";
-export default function WatchedCases() {
+import { connect } from "react-redux";
+import { setCurrentView } from "../../store/currentView/action";
+
+const WatchedCases = (props) => {
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
+    const { setCurrentView } = props;
+
     return (
         <div className="card card-3" id="casescomment-card">
             <div className="card-body">
@@ -14,15 +19,35 @@ export default function WatchedCases() {
                     {t("myportal:watchedcases-card-title")}
                 </h3>
                 <div className="cardModuleContainer">
-                    <TopThree />
+                    <TopThree showTopThree={props.watchedCases.watchedCases} />
                 </div>
 
                 <div className="cardVieAll">
-                    <Link href="/viewall">
-                        <a>{t("myportal:viewall-link")}</a>
+                    <Link href="/myportal/viewall">
+                        <a
+                            onClick={() => {
+                                setCurrentView({
+                                    "viewName": "Watched Cases",
+                                    "viewKey": "watchedCases",
+                                });
+                            }}
+                        >
+                            {t("myportal:viewall-link")}
+                        </a>
                     </Link>
                 </div>
             </div>
         </div>
     );
-}
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentView: (currentView) => {
+            console.log(currentView);
+            dispatch(setCurrentView(currentView));
+        },
+    };
+};
+
+export default connect(null, mapDispatchToProps)(WatchedCases);

components/newappeal/createCase.js

@@ -82,7 +82,7 @@ let CreateCase = (props) => {
                     <div>
                         <select
                             {...input}
-                            className="govuk-select govuk-!-width-one-half"
+                            className="govuk-select govuk-input--error"
                             id="lpatypes"
                             name={name}
                             //onChange={(e) => props.onChangeSelectLPA(e)}
@@ -143,7 +143,7 @@ let CreateCase = (props) => {
                     <div>
                         <select
                             {...input}
-                            className="govuk-select govuk-!-width-one-half"
+                            className="govuk-select"
                             id="appealTypes"
                             name={name}
                             //onChange={(e) => props.onChangeSelectAppealType(e)}

i18n.json

@@ -14,6 +14,9 @@
       "/myportal": [
          "myportal"
       ],
+      "/myportal/viewall": [
+         "search"
+      ],
       "/advancedsearch": [
          "search"
       ],

pages/api/lookups/awaitingSubmission.js

@@ -0,0 +1,48 @@
+const ApiResponse = (req, res) => {
+    res.statusCode = 200;
+    res.json({
+        "value": [
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Vale of Glamorgan Council",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "21 Courtenay Road",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00017-B8X7N0",
+                "appellantApplicant": "Mrs Denise Williams",
+            },
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Bridgend CBC",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "17 Colin Way",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00016-Y9K9Q0",
+                "appellantApplicant": "Mrs Denise Williams",
+            },
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Cardiff County Council	Planning (A)",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "120 Severn Grove",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00011-K1N0J8",
+                "appellantApplicant": "Mrs Denise Williams",
+            },
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Cardiff County Council	Planning",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "25 Merches Gardens",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00015-L7J9H1",
+                "appellantApplicant": "Mrs Denise Williams",
+            },
+        ],
+    });
+};
+export default ApiResponse;

pages/api/lookups/myCases.js

@@ -0,0 +1,72 @@
+const ApiResponse = (req, res) => {
+    res.statusCode = 200;
+    res.json({
+        "value": [
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Vale of Glamorgan Council",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "21 Courtenay Road",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00009-W8N6W4",
+                "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Appeal - S78",
+                "pinswg_appealcasetype": "846040000",
+                "statuscode@OData.Community.Display.V1.FormattedValue":
+                    "In Progress",
+                "statuscode": "1",
+            },
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Bridgend CBC",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "17 Colin Way",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00010-J9W6L5",
+                "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Appeal - S78",
+                "pinswg_appealcasetype": "846040000",
+                "statuscode@OData.Community.Display.V1.FormattedValue":
+                    "In Progress",
+                "statuscode": "1",
+            },
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Cardiff County Council	Planning (A)",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "120 Severn Grove",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00011-K1N0J8",
+                "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Conditions - S73 + S79",
+                "pinswg_appealcasetype": "846040001",
+                "statuscode@OData.Community.Display.V1.FormattedValue":
+                    "In Progress",
+                "statuscode": "1",
+            },
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Cardiff County Council	Planning",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "25 Merches Gardens",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00012-D9W6S8",
+                "appellantApplicant": "Mrs Denise Williams",
+                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue":
+                    "Planning Appeal - S78",
+                "pinswg_appealcasetype": "846040000",
+                "statuscode@OData.Community.Display.V1.FormattedValue":
+                    "In Progress",
+                "statuscode": "1",
+            },
+        ],
+    });
+};
+export default ApiResponse;

pages/api/lookups/myRepresentations.js

@@ -0,0 +1,48 @@
+const ApiResponse = (req, res) => {
+    res.statusCode = 200;
+    res.json({
+        "value": [
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Vale of Glamorgan Council",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "21 Courtenay Road",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00009-W8N6W4",
+                "appellantApplicant": "Mrs Denise Williams",
+            },
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Bridgend CBC",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "17 Colin Way",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00010-J9W6L5",
+                "appellantApplicant": "Mrs Denise Williams",
+            },
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Cardiff County Council	Planning (A)",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "120 Severn Grove",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00011-K1N0J8",
+                "appellantApplicant": "Mrs Denise Williams",
+            },
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Cardiff County Council	Planning",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "25 Merches Gardens",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00012-D9W6S8",
+                "appellantApplicant": "Mrs Denise Williams",
+            },
+        ],
+    });
+};
+export default ApiResponse;

pages/api/lookups/watchedCases.js

@@ -0,0 +1,48 @@
+const ApiResponse = (req, res) => {
+    res.statusCode = 200;
+    res.json({
+        "value": [
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Vale of Glamorgan Council",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "21 Courtenay Road",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00009-W8N6W4",
+                "appellantApplicant": "Mrs Denise Williams",
+            },
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Bridgend CBC",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "17 Colin Way",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00010-J9W6L5",
+                "appellantApplicant": "Mrs Denise Williams",
+            },
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Cardiff County Council	Planning (A)",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "120 Severn Grove",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00011-K1N0J8",
+                "appellantApplicant": "Mrs Denise Williams",
+            },
+            {
+                "@odata.etag": 'W/"547952"',
+                "lpaname": "Cardiff County Council	Planning",
+                "accountid": "56e7ef63-7e64-eb11-aaba-00224800be9c",
+                "address1": "25 Merches Gardens",
+                "town": "Cardiff",
+                "postcode": "CF24 0JL",
+                "reference": "CAS-00012-D9W6S8",
+                "appellantApplicant": "Mrs Denise Williams",
+            },
+        ],
+    });
+};
+export default ApiResponse;

pages/myportal/index.js

@@ -13,9 +13,26 @@ import { wrapper } from "../../store/store";
 import Cookies from "cookies";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import { setMyCases } from "../../store/myCases/action";
+import { setMyRepresentations } from "../../store/myRepresentations/action";
+import { setWatchedCases } from "../../store/watchedCases/action";
+import { setAwaitingSubmission } from "../../store/awaitingSubmission/action";
+import {
+    getMyCases,
+    getMyRepresentations,
+    getWatchedCases,
+    getAwaitingSubmission,
+} from "../../actions";
 
 const Home = (props) => {
-    const { footerLinks, pages } = props;
+    const {
+        footerLinks,
+        pages,
+        myCases,
+        myRepresentations,
+        watchedCases,
+        awaitingSubmission,
+    } = props;
     let { t, lang } = useTranslation();
 
     const router = useRouter();
@@ -35,7 +52,12 @@ const Home = (props) => {
                 <div className="govuk-width-container">
                     <Banner />
                     <Breadcrumbs slug={appealtypes} />
-                    <MyPortal />
+                    <MyPortal
+                        myCases={myCases}
+                        myRepresentations={myRepresentations}
+                        watchedCases={watchedCases}
+                        awaitingSubmission={awaitingSubmission}
+                    />
                 </div>
                 <Footer footerLinks={footerLinks} />
             </div>
@@ -43,38 +65,37 @@ const Home = (props) => {
     );
 };
 
-// export const getServerSideProps = wrapper.getServerSideProps(
-//   async ({ locale, store, req, res }) => {
-//     const token = await getToken();
-//     let accessToken = token.access_token;
+export const getServerSideProps = wrapper.getServerSideProps(
+    (store) =>
+        async ({ query, req, res }) => {
+            //console.log("the query", query);
 
-//     const apiRoot = process.browser ? window.API_ROOT : process.env.API_ROOT;
+            const myCases = await getMyCases();
+            const myRepresentations = await getMyRepresentations();
+            const watchedCases = await getWatchedCases();
+            const awaitingSubmission = await getAwaitingSubmission();
 
-//     const [pages, footerLinks, courseListContent] = await Promise.all([
-//       await getPages(accessToken, locale),
-//       await getFooterLinks(accessToken, locale),
-//       await getCourseList(accessToken, locale),
-//     ]);
-//     //const courseID = await getCourseID
-//     store.dispatch(setApiRoot(apiRoot));
-//     store.dispatch(setPages(pages));
-//     store.dispatch(setFooterLinks(footerLinks));
-//     store.dispatch(setCourseListContent(courseListContent));
-//   }
-// );
+            store.dispatch(setMyCases(myCases));
+            store.dispatch(setMyRepresentations(myRepresentations));
+            store.dispatch(setWatchedCases(watchedCases));
+            store.dispatch(setAwaitingSubmission(awaitingSubmission));
+        }
+);
 
-// const mapStateToProps = (state) => {
-//   //console.log(state);
+const mapStateToProps = (state) => {
+    //console.log(state);
 
-//   return {
-//     apiroot: state.apiroot,
-//     courseListContent: state.courseListContent.courseListContent,
-//     pages: state.pages.pages,
-//     footerLinks: state.footerLinks.footerLinks,
-//     regions: state.regions,
-//     sectors: state.sectors,
-//     form: state.form,
-//   };
-// };
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        form: state.form,
+        myCases: state.myCases,
+        watchedCases: state.watchedCases,
+        myRepresentations: state.myRepresentations,
+        awaitingSubmission: state.awaitingSubmission,
+    };
+};
 
-export default Home; //connect(mapStateToProps)(Home);
+export default connect(mapStateToProps)(Home);

pages/myportal/viewall.js

@@ -0,0 +1,88 @@
+import _ from "lodash";
+import Head from "next/head";
+import Header from "../../components/header";
+import Banner from "../../components/banner";
+import CookieBanner from "../../components/cookieBanner";
+import Breadcrumbs from "../../components/breadcrumbs";
+import ViewAll from "../../components/myportal/viewall";
+import Footer from "../../components/footer";
+import Errorpage from "../../components/errorpage";
+import styles from "../../styles/Home.module.css";
+import { useSelector, shallowEqual, connect } from "react-redux";
+import { wrapper } from "../../store/store";
+import Cookies from "cookies";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+import { setSearch, getSearchObj } from "../../store/search/action";
+import {
+    setSearchResults,
+    getSearchResultsObj,
+} from "../../store/searchOutput/action";
+import { getBasicSearch } from "../../actions";
+
+const Home = (props) => {
+    const { footerLinks, pages } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    return (
+        <div>
+            <Head>
+                <title>
+                    {t("search:page-title")} - {t("common:service-name")}
+                </title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+                <div className="govuk-width-container">
+                    <Banner />
+                    <Breadcrumbs
+                        slug={appealtypes}
+                        currentView={props.currentView.currentView}
+                    />
+                    <ViewAll
+                        searchString={"View All"}
+                        searchResultsObj={props.searchResultsObj}
+                        currentView={props.currentView.currentView}
+                        myCases={props.myCases}
+                        watchedCases={props.watchedCases}
+                        myRepresentations={props.myRepresentations}
+                        awaitingSubmission={props.awaitingSubmission}
+                    />
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+// export const getServerSideProps = wrapper.getServerSideProps(
+//     (store) =>
+//         async ({ req, res }) => {
+//             const searchResultsObj = (await getBasicSearch("View All")) || null;
+//             store.dispatch(setSearchResults(searchResultsObj));
+//             store.dispatch(setSearch("View All"));
+//         }
+// );
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        form: state.form,
+        myCases: state.myCases,
+        watchedCases: state.watchedCases,
+        myRepresentations: state.myRepresentations,
+        awaitingSubmission: state.awaitingSubmission,
+        currentView: state.currentView,
+    };
+};
+
+export default connect(mapStateToProps)(Home);

pages/viewall.js

@@ -45,6 +45,7 @@ const Home = (props) => {
                     <ViewAll
                         searchString={"View All"}
                         searchResultsObj={props.searchResultsObj}
+                        currentView={props.currentView.currentView}
                     />
                 </div>
                 <Footer footerLinks={footerLinks} />
@@ -89,6 +90,7 @@ const mapStateToProps = (state) => {
         search: state.search,
         searchResultsObj: state.searchResultsObj,
         form: state.form,
+        currentView: state.currentView,
     };
 };
 

store/appealType/action.js

@@ -1,5 +1,3 @@
-import { actionTypes } from "redux-form";
-
 export const appealTypeDataActionTypes = {
     GETAPPEALTYPEDATA: "GETAPPEALTYPEDATA",
     SETAPPEALTYPEDATA: "SETAPPEALTYPEDATA",

store/awaitingSubmission/action.js

@@ -0,0 +1,18 @@
+export const awaitingSubmissionActionTypes = {
+    GETAWAITINGSUBMISSION: "GETAWAITINGSUBMISSION",
+    SETAWAITINGSUBMISSION: "SETAWAITINGSUBMISSION",
+    UPDATEAWAITINGSUBMISSION: "UPDATEAWAITINGSUBMISSION",
+};
+
+export const getAwaitingSubmissionObj = () => (dispatch) => {
+    return dispatch({
+        type: awaitingSubmissionActionTypes.GETAWAITINGSUBMISSION,
+    });
+};
+
+export const setAwaitingSubmission = (awaitingSubmission) => (dispatch) => {
+    return dispatch({
+        type: awaitingSubmissionActionTypes.SETAWAITINGSUBMISSION,
+        awaitingSubmission: awaitingSubmission,
+    });
+};

store/awaitingSubmission/reducer.js

@@ -0,0 +1,19 @@
+import { awaitingSubmissionActionTypes } from "./action";
+
+const awaitingSubmissionInitialState = {
+    awaitingSubmission: {},
+};
+
+export default function reducer(
+    state = awaitingSubmissionInitialState,
+    action
+) {
+    switch (action.type) {
+        case awaitingSubmissionActionTypes.SETAWAITINGSUBMISSION:
+            return {
+                awaitingSubmission: action.awaitingSubmission,
+            };
+        default:
+            return state;
+    }
+}

store/currentView/action.js

@@ -0,0 +1,17 @@
+export const currentViewActionTypes = {
+    GETCURRENTVIEW: "GETCURRENTVIEW",
+    SETCURRENTVIEW: "SETCURRENTVIEW",
+};
+
+export const getCurrentViewObj = () => (dispatch) => {
+    return dispatch({
+        type: currentViewActionTypes.GETCURRENTVIEW,
+    });
+};
+
+export const setCurrentView = (currentView) => (dispatch) => {
+    return dispatch({
+        type: currentViewActionTypes.SETCURRENTVIEW,
+        currentView: currentView,
+    });
+};

store/currentView/reducer.js

@@ -0,0 +1,17 @@
+import { currentViewActionTypes } from "./action";
+
+const currentViewInitialState = {
+    currentView: {},
+};
+
+export default function reducer(state = currentViewInitialState, action) {
+    switch (action.type) {
+        case currentViewActionTypes.SETCURRENTVIEW:
+            return {
+                ...state,
+                currentView: action.currentView,
+            };
+        default:
+            return state;
+    }
+}

store/myCases/action.js

@@ -0,0 +1,18 @@
+export const myCasesActionTypes = {
+    GETMYCASES: "GETMYCASES",
+    SETMYCASES: "SETMYCASES",
+    UPDATEMYCASES: "UPDATEMYCASES",
+};
+
+export const getMyCasesObj = () => (dispatch) => {
+    return dispatch({
+        type: myCasesActionTypes.GETMYCASES,
+    });
+};
+
+export const setMyCases = (myCases) => (dispatch) => {
+    return dispatch({
+        type: myCasesActionTypes.SETMYCASES,
+        myCases: myCases,
+    });
+};

store/myCases/reducer.js

@@ -0,0 +1,16 @@
+import { myCasesActionTypes } from "./action";
+
+const myCasesInitialState = {
+    myCases: {},
+};
+
+export default function reducer(state = myCasesInitialState, action) {
+    switch (action.type) {
+        case myCasesActionTypes.SETMYCASES:
+            return {
+                myCases: action.myCases,
+            };
+        default:
+            return state;
+    }
+}

store/myRepresentations/action.js

@@ -0,0 +1,18 @@
+export const myRepresentationsActionTypes = {
+    GETMYREPRESENTATIONS: "GETMYREPRESENTATIONS",
+    SETMYREPRESENTATIONS: "SETMYREPRESENTATIONS",
+    UPDATEMYREPRESENTATIONS: "UPDATEMYREPRESENTATIONS",
+};
+
+export const getMyRepresentationsObj = () => (dispatch) => {
+    return dispatch({
+        type: myRepresentationsActionTypes.GETMYREPRESENTATIONS,
+    });
+};
+
+export const setMyRepresentations = (myRepresentations) => (dispatch) => {
+    return dispatch({
+        type: myRepresentationsActionTypes.SETMYREPRESENTATIONS,
+        myRepresentations: myRepresentations,
+    });
+};

store/myRepresentations/reducer.js

@@ -0,0 +1,16 @@
+import { myRepresentationsActionTypes } from "./action";
+
+const myRepresentationsInitialState = {
+    myRepresentations: {},
+};
+
+export default function reducer(state = myRepresentationsInitialState, action) {
+    switch (action.type) {
+        case myRepresentationsActionTypes.SETMYREPRESENTATIONS:
+            return {
+                myRepresentations: action.myRepresentations,
+            };
+        default:
+            return state;
+    }
+}

store/store.js

@@ -1,24 +1,35 @@
 import { createStore, applyMiddleware, combineReducers } from "redux";
 import { createWrapper, HYDRATE } from "next-redux-wrapper";
 import thunkMiddleware from "redux-thunk";
+import { reducer as formReducer } from "redux-form";
+import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";
+import autoMergeLevel1 from "redux-persist/lib/stateReconciler/autoMergeLevel1";
+import storage from "redux-persist/lib/storage";
+import currentView from "./currentView/reducer";
 import search from "./search/reducer";
 import searchResultsObj from "./searchOutput/reducer";
 import formData from "./formData/reducer";
 import appealType from "./appealType/reducer";
 import LPAData from "./lpa/reducer";
 import accountDetails from "./accountDetails/reducer";
-import { reducer as formReducer } from "redux-form";
-import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";
-import storage from "redux-persist/lib/storage";
+import awaitingSubmission from "./awaitingSubmission/reducer";
+import myCases from "./myCases/reducer";
+import myRepresentations from "./myRepresentations/reducer";
+import watchedCases from "./watchedCases/reducer";
 
 //COMBINING ALL REDUCERS
 const appReducer = combineReducers({
+    currentView,
     search,
     searchResultsObj,
     formData,
     appealType,
     LPAData,
     accountDetails,
+    awaitingSubmission,
+    myCases,
+    myRepresentations,
+    watchedCases,
     form: formReducer,
 });
 
@@ -90,12 +101,17 @@ const makeStore = ({ isServer }) => {
         const persistConfig = {
             key: "acp",
             whitelist: [
+                "currentView",
                 "search",
                 "searchResults",
                 "formData",
                 "appealType",
                 "LPAData",
                 "accountDetails",
+                "awaitingSubmission",
+                "myCases",
+                "myRepresentations",
+                "watchedCases",
                 "form",
             ],
             storage: storage,

store/watchedCases/action.js

@@ -0,0 +1,18 @@
+export const watchedCasesActionTypes = {
+    GETWATCHEDCASES: "GETWATCHEDCASES",
+    SETWATCHEDCASES: "SETWATCHEDCASES",
+    UPDATEWATCHEDCASES: "UPDATEWATCHEDCASES",
+};
+
+export const getWatchedCasesObj = () => (dispatch) => {
+    return dispatch({
+        type: watchedCasesActionTypes.GETWATCHEDCASES,
+    });
+};
+
+export const setWatchedCases = (watchedCases) => (dispatch) => {
+    return dispatch({
+        type: watchedCasesActionTypes.SETWATCHEDCASES,
+        watchedCases: watchedCases,
+    });
+};

store/watchedCases/reducer.js

@@ -0,0 +1,16 @@
+import { watchedCasesActionTypes } from "./action";
+
+const watchedCasesInitialState = {
+    watchedCases: {},
+};
+
+export default function reducer(state = watchedCasesInitialState, action) {
+    switch (action.type) {
+        case watchedCasesActionTypes.SETWATCHEDCASES:
+            return {
+                watchedCases: action.watchedCases,
+            };
+        default:
+            return state;
+    }
+}