increase the wallet font and made it navigable

src/components/FamilyAcc/FamilyTable.jsx

@@ -1,21 +1,29 @@
 import React, { useState } from "react";
-import dataImage1 from "../../assets/images/data-table-user-1.png";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useNavigate } from "react-router-dom";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
-import familyImage from '../../assets/images/no-family-side.png'
+import familyImage from "../../assets/images/no-family-side.png";
+import { formatDateString } from "../../lib";
 import localImgLoad from "../../lib/localImgLoad";
 
-export default function FamilyTable({ className, familyList, loader, popUpHandler }) {
+export default function FamilyTable({
+  className,
+  familyList,
+  loader,
+  popUpHandler,
+}) {
   const navigate = useNavigate();
 
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
     Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentFamilyList = familyList?.slice(indexOfFirstItem, indexOfLastItem);
+  const currentFamilyList = familyList?.slice(
+    indexOfFirstItem,
+    indexOfLastItem
+  );
 
   const handlePagination = (e) => {
     handlePagingFunc(e, setCurrentPage);
@@ -32,100 +40,105 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
           <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
             <LoadingSpinner size="16" color="sky-blue" />
           </div>
-        ) 
-        :
-        familyList?.length > 0 ?
-          (
-            <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
-              <thead className="sticky top-0">
-                <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
-                  <th className="py-4">Name</th>
-                  <th className="py-4 text-center">Last Login</th>
-                  <th className="py-4 text-center">No of Tasks</th>
-                  <th className="py-4 text-right"></th>
-                </tr>
-              </thead>
-              <tbody className="h-full">
-                  {currentFamilyList?.map((props, idx) => {
-                      let {
-                        firstname,
-                        lastname,
-                        age,
-                        added,
-                        last_login,
-                        task_count,
-                        family_uid,
-                        banner
-                      } = props;
-                      let addedDate = added?.split(" ")[0];
-                      let LoginDate = last_login?.split(" ")[0];
-                      return (
-                        <tr
-                          className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
-                          key={family_uid}
-                        >
-                          <td className=" py-4">
-                            <div className="flex space-x-2 items-center w-full">
-                              <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1]">
-                                <img
-                                  // src={dataImage1}
-                                  src={localImgLoad(`images/icons/${banner}`)}
-                                  alt="data"
-                                  className="w-full h-full"
-                                />
-                              </div>
-                              <div className="flex flex-col flex-[0.9]">
-                                <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                                  {`${firstname} ${lastname} (${age})`}
-                                </h1>
-                                <span className="text-sm text-thin-light-gray">
-                                  Added:{" "}
-                                  <span className="text-purple ml-1">
-                                    {addedDate}
-                                  </span>
-                                </span>
-                              </div>
-                            </div>
-                          </td>
-                          <td className="text-center py-4 px-2">
+        ) : familyList?.length > 0 ? (
+          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
+            <thead className="sticky top-0">
+              <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
+                <th className="py-4">Name</th>
+                {/* <th className="py-4 text-center">Last Login</th> */}
+                <th className="py-4 text-center">No of Tasks</th>
+                <th className="py-4 text-right"></th>
+              </tr>
+            </thead>
+            <tbody className="h-full">
+              {currentFamilyList?.map((props, idx) => {
+                let {
+                  firstname,
+                  lastname,
+                  age,
+                  added,
+                  last_login,
+                  task_count,
+                  family_uid,
+                  banner,
+                } = props;
+                let addedDate = added?.split(" ")[0];
+                let LoginDate =
+                  last_login === ""
+                    ? "never logged in"
+                    : formatDateString(last_login);
+                return (
+                  <tr
+                    className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
+                    key={family_uid}
+                  >
+                    <td className=" py-4">
+                      <div className="flex space-x-2 items-center w-full">
+                        <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1]">
+                          <img
+                            // src={dataImage1}
+                            src={localImgLoad(`images/icons/${banner}`)}
+                            alt="data"
+                            className="w-full h-full"
+                          />
+                        </div>
+                        <div className="flex flex-col flex-[0.9]">
+                          <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                            {`${firstname} ${lastname} (${age})`}
+                          </h1>
+                          <span className="text-sm text-thin-light-gray">
+                            Added:{" "}
+                            <span className="text-purple ml-1">
+                              {addedDate}
+                            </span>
+                          </span>
+                          <span className="text-sm text-thin-light-gray">
+                            Last Login:{" "}
+                            <span className="text-purple ml-1">
+                              {LoginDate}
+                            </span>
+                          </span>
+                        </div>
+                      </div>
+                    </td>
+                    {/* <td className="text-center py-4 px-2">
                             <div className="flex space-x-1 items-center justify-center">
                               <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
                                 {LoginDate}
                               </span>
                             </div>
-                          </td>
-                          <td className="text-center py-4 px-2">
-                            <div className="flex space-x-1 items-center justify-center">
-                              <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                                {task_count}
-                              </span>
-                            </div>
-                          </td>
-                          <td className="text-right py-4 px-2 flex items-center justify-center">
-                            <button
-                              onClick={() => {
-                                navigate("/manage-family", {
-                                  state: { ...props },
-                                });
-                              }}
-                              type="button"
-                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                            >
-                              Manage
-                            </button>
-                          </td>
-                        </tr>
-                      );
-                    })
-                  }
-              </tbody>
-            </table>
-          )
-          : 
-          (
+                          </td> */}
+                    <td className="text-center py-4 px-2">
+                      <div className="flex space-x-1 items-center justify-center">
+                        <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                          {task_count}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="text-right py-4 px-2 flex items-center justify-center">
+                      <button
+                        onClick={() => {
+                          navigate("/manage-family", {
+                            state: { ...props },
+                          });
+                        }}
+                        type="button"
+                        className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                      >
+                        Manage
+                      </button>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        ) : (
           <div className="font-bold text-center text-xl md:text-2xl lg:text-4xl text-dark-gray md:flex items-center justify-between">
             <div className="p-2 w-full md:w-1/2">
-              <p className="mb-4 p-3 md:p-16">Add your family, assign tasks, and get the whole team engaged.</p>
+              <p className="mb-4 p-3 md:p-16">
+                Add your family, assign tasks, and get the whole team engaged.
+              </p>
               <button
                 onClick={popUpHandler}
                 type="button"
@@ -135,14 +148,13 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
               </button>
             </div>
             <div className="p-2 w-full md:w-1/2">
-              <img className='w-full' src={familyImage} alt="Add Family" />
+              <img className="w-full" src={familyImage} alt="Add Family" />
             </div>
           </div>
-          )
-        }
+        )}
       </div>
-        {/* PAGINATION BUTTON */}
-        <PaginatedList
+      {/* PAGINATION BUTTON */}
+      <PaginatedList
         onClick={handlePagination}
         prev={currentPage == 0 ? true : false}
         next={

src/components/MyWallet/WalletHeader.jsx

@@ -13,6 +13,12 @@ export default function WalletHeader(props) {
   //props.myWalletList.result_list
   let { pathname } = useLocation();
   let navigate = useNavigate();
+
+  const onWalletClick = () => {
+    if (pathname == "/my-wallet")
+      props.setBalanceDropdown.toggle();
+    else navigate("/my-wallet", { replace: true });
+  }
   return (
     <>
       <div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-sky-blue pr-1.5 pl-4">
@@ -49,6 +55,7 @@ export default function WalletHeader(props) {
                     <li
                       key={index}
                       className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
+                      onClick={onWalletClick}
                     >
                       <div className="sm:flex justify-between items-center">
                         <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
@@ -56,7 +63,7 @@ export default function WalletHeader(props) {
                             <img src={localImgLoad(`images/currency/${image}`)} className="w-14 h-14" alt="" />
                           </div>
                           <div className="name">
-                            <p className="text-base text-dark-gray dark:text-white font-medium">
+                            <p className="text-2xl font-bold text-dark-gray dark:text-white">
                               {value.description}
                             </p>
                           </div>
@@ -178,11 +185,7 @@ export default function WalletHeader(props) {
                             </button> */}
               <Link
                 to="/my-wallet"
-                onClick={() => {
-                  if (pathname == "/my-wallet")
-                    props.setBalanceDropdown.toggle();
-                  else navigate("/my-wallet", { replace: true });
-                }}
+                onClick={onWalletClick}
                 className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
               >
                 Manage

src/components/Partials/Layout.jsx

@@ -156,7 +156,7 @@ export default function Layout({ children }) {
                   fill="none"
                   xmlns="http://www.w3.org/2000/svg"
                 >
-                  <circle cx="68" cy="68" r="68" fill="#5356FB" />
+                  <circle cx="68" cy="68" r="68" fill="#4687ba" />
                   <path
                     d="M69.8844 35.7891C71.1588 36.0357 72.4569 36.1967 73.7044 36.5423C81.5447 38.7098 87.2705 45.5378 87.9574 53.6156C88.5113 60.1147 86.3075 65.6006 81.5043 70.0195C79.8359 71.5545 78.0497 72.9604 76.3408 74.4534C76.127 74.6397 75.9654 75.0037 75.9604 75.2872C75.9284 77.2752 75.9435 79.2649 75.9435 81.2965C70.8895 81.2965 65.8758 81.2965 60.7915 81.2965C60.7915 81.0616 60.7915 80.8385 60.7915 80.6137C60.7915 76.5454 60.7999 72.4772 60.7797 68.4106C60.778 67.9392 60.9312 67.649 61.2831 67.3537C64.5643 64.5957 67.8271 61.8175 71.1033 59.0545C72.2616 58.0781 72.9215 56.8702 72.9081 55.3419C72.8878 52.916 70.8608 50.9146 68.423 50.8911C65.9701 50.8693 63.9145 52.8053 63.832 55.2328C63.8084 55.8988 63.8286 56.5665 63.8286 57.2695C58.7745 57.2695 53.7744 57.2695 48.6917 57.2695C48.6917 56.3149 48.6462 55.3385 48.6984 54.3655C49.222 44.699 56.7442 36.8745 66.4331 35.8914C66.5762 35.8763 66.7142 35.8243 66.854 35.7891C67.8641 35.7891 68.8742 35.7891 69.8844 35.7891Z"
                     fill="white"

src/components/Settings/Tabs/DeleteCardPopout.jsx

@@ -69,7 +69,7 @@ function DeleteCardPopout({action, situation, data, setReloadCardList}) {
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"
                 >
-                    <circle cx="68" cy="68" r="68" fill="#5356FB" />
+                    <circle cx="68" cy="68" r="68" fill="#4687ba" />
                     <path
                     d="M69.8844 35.7891C71.1588 36.0357 72.4569 36.1967 73.7044 36.5423C81.5447 38.7098 87.2705 45.5378 87.9574 53.6156C88.5113 60.1147 86.3075 65.6006 81.5043 70.0195C79.8359 71.5545 78.0497 72.9604 76.3408 74.4534C76.127 74.6397 75.9654 75.0037 75.9604 75.2872C75.9284 77.2752 75.9435 79.2649 75.9435 81.2965C70.8895 81.2965 65.8758 81.2965 60.7915 81.2965C60.7915 81.0616 60.7915 80.8385 60.7915 80.6137C60.7915 76.5454 60.7999 72.4772 60.7797 68.4106C60.778 67.9392 60.9312 67.649 61.2831 67.3537C64.5643 64.5957 67.8271 61.8175 71.1033 59.0545C72.2616 58.0781 72.9215 56.8702 72.9081 55.3419C72.8878 52.916 70.8608 50.9146 68.423 50.8911C65.9701 50.8693 63.9145 52.8053 63.832 55.2328C63.8084 55.8988 63.8286 56.5665 63.8286 57.2695C58.7745 57.2695 53.7744 57.2695 48.6917 57.2695C48.6917 56.3149 48.6462 55.3385 48.6984 54.3655C49.222 44.699 56.7442 36.8745 66.4331 35.8914C66.5762 35.8763 66.7142 35.8243 66.854 35.7891C67.8641 35.7891 68.8742 35.7891 69.8844 35.7891Z"
                     fill="white"

src/components/jobPopout/DeleteJobPopout.jsx

@@ -103,7 +103,7 @@ function DeleteJobPopout({ details, onClose, situation }) {
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <circle cx="68" cy="68" r="68" fill="#5356FB" />
+              <circle cx="68" cy="68" r="68" fill="#4687ba" />
               <path
                 d="M69.8844 35.7891C71.1588 36.0357 72.4569 36.1967 73.7044 36.5423C81.5447 38.7098 87.2705 45.5378 87.9574 53.6156C88.5113 60.1147 86.3075 65.6006 81.5043 70.0195C79.8359 71.5545 78.0497 72.9604 76.3408 74.4534C76.127 74.6397 75.9654 75.0037 75.9604 75.2872C75.9284 77.2752 75.9435 79.2649 75.9435 81.2965C70.8895 81.2965 65.8758 81.2965 60.7915 81.2965C60.7915 81.0616 60.7915 80.8385 60.7915 80.6137C60.7915 76.5454 60.7999 72.4772 60.7797 68.4106C60.778 67.9392 60.9312 67.649 61.2831 67.3537C64.5643 64.5957 67.8271 61.8175 71.1033 59.0545C72.2616 58.0781 72.9215 56.8702 72.9081 55.3419C72.8878 52.916 70.8608 50.9146 68.423 50.8911C65.9701 50.8693 63.9145 52.8053 63.832 55.2328C63.8084 55.8988 63.8286 56.5665 63.8286 57.2695C58.7745 57.2695 53.7744 57.2695 48.6917 57.2695C48.6917 56.3149 48.6462 55.3385 48.6984 54.3655C49.222 44.699 56.7442 36.8745 66.4331 35.8914C66.5762 35.8763 66.7142 35.8243 66.854 35.7891C67.8641 35.7891 68.8742 35.7891 69.8844 35.7891Z"
                 fill="white"

src/lib/fomattedDate.js

@@ -1,4 +1,4 @@
-export default function formattedDate(dateString) {
+export function formattedDate(dateString) {
   const parts = dateString.split(" ");
   const datePart = parts[0];
   const timePart = parts[1];
@@ -15,3 +15,26 @@ export default function formattedDate(dateString) {
 
   return new Date(year, month - 1, day, hour, minute);
 }
+
+export function formatDateString(inputDateString) {
+  // Parse the input date string
+  const parsedDate = new Date(inputDateString);
+
+  // Get day, month, year, and time components
+  const day = parsedDate.toLocaleDateString(undefined, { weekday: "long" });
+  const month = parsedDate.toLocaleDateString(undefined, { month: "short" });
+  const date = parsedDate.toLocaleDateString(undefined, { day: "numeric" });
+  const year = parsedDate.toLocaleDateString(undefined, { year: "numeric" });
+
+  // Get the time in 12-hour format with 'AM' or 'PM'
+  const hours = parsedDate.getHours();
+  const minutes = parsedDate.getMinutes();
+  const time = `${hours % 12 || 12}:${minutes.toString().padStart(2, "0")} ${
+    hours < 12 ? "AM" : "PM"
+  }`;
+
+  // Combine the components into the desired format
+  const formattedDate = `${day}, ${month} ${date} ${year} - ${time}`;
+
+  return formattedDate;
+}

src/lib/index.js

@@ -1,12 +1,13 @@
 import ClearCookies from "./ClearCookies";
 import checkAndSetError from "./checkAndSetError";
-import formattedDate from "./fomattedDate";
+import { formatDateString, formattedDate } from "./fomattedDate";
 import getTimeAgo from "./getTimeAgo";
 import localImgLoad from "./localImgLoad";
 
 export {
   ClearCookies,
   checkAndSetError,
+  formatDateString,
   formattedDate,
   getTimeAgo,
   localImgLoad,

src/middleware/AuthRoute.jsx

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Navigate, Outlet, useNavigate } from "react-router-dom";
 import LoadingSpinner from "../components/Spinners/LoadingSpinner";
-import formattedDate from "../lib/fomattedDate";
 import usersService from "../services/UsersService";
 import { commonHeadBanner } from "../store/CommonHeadBanner";
 import { recentActivitiesData } from "../store/RecentActivitiesData";
@@ -11,6 +10,7 @@ import { updateJobs } from "../store/jobLists";
 import { updateNotifications } from "../store/notifications";
 import { updateUserJobList } from "../store/userJobList";
 import { updateWalletDetails } from "../store/walletDetails";
+import { formattedDate } from "../lib";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const apiCall = useMemo(() => new usersService(), []);

src/services/SiteService.js

@@ -1,107 +1,113 @@
-import React from "react";
 import Axios from "axios";
 
 class SiteService {
-    constructor() {
-        console.log("Er are here anyway");
-    }
-    // Blog Data {Get}
-    blogData() {
-        return this.getAuxEnd("/blogdata", null);
-    }
+  constructor() {
+    console.log("Er are here anyway");
+  }
+  // Blog Data {Get}
+  blogData() {
+    return this.getAuxEnd("/blogdata", null);
+  }
 
-    // Country Data {GET}
-    countryData() {
-        return this.getAuxEnd("/country", null);
-    }
+  // Country Data {GET}
+  countryData() {
+    return this.getAuxEnd("/country", null);
+  }
 
-    // Contact Data{POST}
-    contactData() {
-        return this.postAuxEnd("/contact", null)
-    }
+  // Contact Data{POST}
+  contactData() {
+    return this.postAuxEnd("/contact", null);
+  }
 
-    faqData() {
-        return this.getAuxEnd("/faq", null);
-    }
+  faqData() {
+    return this.getAuxEnd("/faq", null);
+  }
 
-    priceData() {
-        return this.getAuxEnd("/pricing", null);
-    }
+  priceData() {
+    return this.getAuxEnd("/pricing", null);
+  }
 
-    addFamily(reqData) {
-        return this.postAuxEnd('/familyadd', reqData)
-    }
+  addFamily(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 22015,
+      ...reqData,
+    };
+    return this.postAuxEnd("/familyadd", postData);
+  }
 
-    familyListings(reqData) {
-        var postData = {
-            uid: localStorage.getItem("uid"),
-            member_id: localStorage.getItem("member_id"),
-            sessionid: localStorage.getItem("session_token"),
-           ...reqData
-          };
-        return this.postAuxEnd('/familylist', postData)
-    }
+  familyListings(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      ...reqData,
+    };
+    return this.postAuxEnd("/familylist", postData);
+  }
 
-    assignJobTask(reqData) {
-        var postData = {
-            uid: localStorage.getItem("uid"),
-            member_id: localStorage.getItem("member_id"),
-            sessionid: localStorage.getItem("session_token"),
-           ...reqData
-          };
-        return this.postAuxEnd('/assigntask', postData)
-    }
+  assignJobTask(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      ...reqData,
+    };
+    return this.postAuxEnd("/assigntask", postData);
+  }
 
-    //----------------------------------------  -----
-    //----------------------------------------  -----
-    // Unified call below
-    //----------------------------------------  -----
-    //----------------------------------------  -----
-    getAuxEnd(uri, reqData) {
-        const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
-        return Axios.get(endPoint)
-            .then((response) => {
-                // console.log(response);
-                // res = response;
-                // console.log("~~~~~~~ Toks2 GET ~~~~~~~~");
-                return response;
-            })
-            .catch((error) => {
-                if (error.response) {
-                    //response status is an error code
-                    console.log(error.response.status);
-                } else if (error.request) {
-                    //response not received though the request was sent
-                    console.log(error.request);
-                } else {
-                    //an error occurred when setting up the request
-                    console.log(error.message);
-                }
-            });
-    }
+  //----------------------------------------  -----
+  //----------------------------------------  -----
+  // Unified call below
+  //----------------------------------------  -----
+  //----------------------------------------  -----
+  getAuxEnd(uri, reqData) {
+    const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
+    return Axios.get(endPoint)
+      .then((response) => {
+        // console.log(response);
+        // res = response;
+        // console.log("~~~~~~~ Toks2 GET ~~~~~~~~");
+        return response;
+      })
+      .catch((error) => {
+        if (error.response) {
+          //response status is an error code
+          console.log(error.response.status);
+        } else if (error.request) {
+          //response not received though the request was sent
+          console.log(error.request);
+        } else {
+          //an error occurred when setting up the request
+          console.log(error.message);
+        }
+      });
+  }
 
-    postAuxEnd(uri, reqData) {
-        const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
-        return Axios.post(endPoint, reqData)
-            .then((response) => {
-                console.log(response);
-                // res = response;
-                console.log("~~~~~~~ Toks2 POST ~~~~~~~~");
-                return response;
-            })
-            .catch((error) => {
-                if (error.response) {
-                    //response status is an error code
-                    console.log(error.response.status);
-                } else if (error.request) {
-                    //response not received though the request was sent
-                    console.log(error.request);
-                } else {
-                    //an error occurred when setting up the request
-                    console.log(error.message);
-                }
-            });
-    }
+  postAuxEnd(uri, reqData) {
+    const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
+    return Axios.post(endPoint, reqData)
+      .then((response) => {
+        console.log(response);
+        // res = response;
+        console.log("~~~~~~~ Toks2 POST ~~~~~~~~");
+        return response;
+      })
+      .catch((error) => {
+        if (error.response) {
+          //response status is an error code
+          console.log(error.response.status);
+        } else if (error.request) {
+          //response not received though the request was sent
+          console.log(error.request);
+        } else {
+          //an error occurred when setting up the request
+          console.log(error.message);
+        }
+      });
+  }
 }
 
 export default SiteService;