From 8c00b157ade38304fabcf3680b27e4c29db623b9 Mon Sep 17 00:00:00 2001 From: Ebube Date: Mon, 11 Sep 2023 14:29:11 +0100 Subject: [PATCH] Modified the content layout and added formatted date --- src/components/FamilyAcc/FamilyTable.jsx | 206 +++++++++--------- src/components/Partials/Layout.jsx | 2 +- .../Settings/Tabs/DeleteCardPopout.jsx | 2 +- src/components/jobPopout/DeleteJobPopout.jsx | 2 +- src/lib/fomattedDate.js | 25 ++- src/lib/index.js | 3 +- src/middleware/AuthRoute.jsx | 2 +- src/services/SiteService.js | 190 ++++++++-------- 8 files changed, 237 insertions(+), 195 deletions(-) diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx index f09ae6e..274aabf 100644 --- a/src/components/FamilyAcc/FamilyTable.jsx +++ b/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
- ) - : - familyList?.length > 0 ? - ( - - - - - - - - - - - {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 ( - - - */} + + + + ); + })} + +
NameLast LoginNo of Tasks
-
-
- data -
-
-

- {`${firstname} ${lastname} (${age})`} -

- - Added:{" "} - - {addedDate} - - -
-
- 		+ ) : familyList?.length > 0 ? ( + + + + + {/* */} + + + + + + {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 ( + + + {/* - - - - ); - }) - } - -
NameLast LoginNo of Tasks
+
+
+ data +
+
+

+ {`${firstname} ${lastname} (${age})`} +

+ + Added:{" "} + + {addedDate} + + + + Last Login:{" "} + + {LoginDate} + + +
+
+
{LoginDate}
- 		-
- - {task_count} - -
- 		- -
- ) - : - ( + 		+
+ + {task_count} + +
+ 		+ +
+ ) : (
-

Add your family, assign tasks, and get the whole team engaged.

+

+ Add your family, assign tasks, and get the whole team engaged. +

- Add Family + Add Family
- ) - } + )} - {/* PAGINATION BUTTON */} - - + - + - + { const apiCall = useMemo(() => new usersService(), []); diff --git a/src/services/SiteService.js b/src/services/SiteService.js index e574ef1..82532aa 100644 --- a/src/services/SiteService.js +++ b/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;