From 17239f9ea8338a97369f9939841eaeec493cd4e7 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Sat, 30 Aug 2025 22:30:45 +0100 Subject: [PATCH] formatted date string and image bug --- src/component/comments/Comments.js | 914 +++++++++++------- src/component/contacts/Contacts.js | 647 +++++++------ src/component/home/TopBar.jsx | 8 +- src/component/layout/layoutcom/UserMenu.jsx | 4 +- src/component/subscription/Subscription.jsx | 4 +- src/helpers/getDateFromDateString.js | 17 + ...String.js => getDateTimeFromDateString.js} | 4 +- 7 files changed, 905 insertions(+), 693 deletions(-) create mode 100644 src/helpers/getDateFromDateString.js rename src/helpers/{GetDateFromDateString.js => getDateTimeFromDateString.js} (91%) diff --git a/src/component/comments/Comments.js b/src/component/comments/Comments.js index 3be6b4b..773dc43 100644 --- a/src/component/comments/Comments.js +++ b/src/component/comments/Comments.js @@ -2,371 +2,557 @@ import React from "react"; import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS"; import getImage from "../../utils/getImage"; -export default function Comments(){ - - return( - <> - -
- {/*
Coming Soon
*/} -
-
-
-
- -
-
-
-
-
-
- - -
-
-
-
-
- - - - - - - - - -
-
-
-
-
-
-
- user -
-
-

Dutca Patrick

-

30 Min ago

-
-
-
-
-

Landing page Designer...

-
-
- {/**/} - {/**/} -
-
-
-

hey adminjon...

-

I truly believe Augustine’s words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.

-

We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.

-

We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.

-
-

Have lovely Day,

-

adminjon

-
-
-
- {/*
*/} - {/*
*/} - {/*
*/} - {/* */} - {/*

Wireframe

*/} - {/*

(220.MB)

*/} - {/*
*/} - {/*
*/} - {/* */} - {/*
*/} -
-
-

Click here to ReplyorForward

- -
-
-
- -
-
-
-
- -
-
-
-
-
    -
    • -
    • -
    • -
-
-
- Send -
-
-
-
-
+export default function Comments() { + return ( + <> + +
+ {/*
Coming Soon
*/} +
+
+
+
+ +
+
+
+
+
+
+ + +
+
+
+
+
+ + + + + + + + + +
+
+
+
+
+
+
+ user +
+
+

Dutca Patrick

+

30 Min ago

+
+
+
+
+

Landing page Designer...

+
+
+ {/**/} + {/**/} +
+
+
+

hey adminjon...

+

+ I truly believe Augustine’s words are true and if you + look at history you know it is true. There are many + people in the world with amazing talents who realize + only a small percentage of their potential. We all know + people who live this truth. +

+

+ We also know those epic stories, those modern-day + legends surrounding the early failures of such supremely + successful folks as Michael Jordan and Bill Gates. We + can look a bit further back in time to Albert Einstein + or even further back to Abraham Lincoln. What made each + of these people so successful? Motivation. +

+

+ We know this in our gut, but what can we do about it? + How can we motivate ourselves? One of the most difficult + aspects of achieving success is staying motivated over + the long haul. +

+
+

Have lovely Day,

+

adminjon

+
+
+
+ {/*
*/} + {/*
*/} + {/*
*/} + {/* */} + {/*

Wireframe

*/} + {/*

(220.MB)

*/} + {/*
*/} + {/*
*/} + {/* */} + {/*
*/} +
+
+

+ Click here to{" "} + + Reply + + or + + Forward + +

+ + + +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+ +
+
+
+
- - ) -} \ No newline at end of file +
+
+
+ + ); +} diff --git a/src/component/contacts/Contacts.js b/src/component/contacts/Contacts.js index 78e0ae8..d896698 100644 --- a/src/component/contacts/Contacts.js +++ b/src/component/contacts/Contacts.js @@ -1,341 +1,344 @@ -"use client" -import React, {useEffect, useState} from "react"; +"use client"; +import React, { useEffect, useState } from "react"; import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS"; import getImage from "../../utils/getImage"; -import {useMutation, useQuery} from "@tanstack/react-query"; -import {contactData} from "../../services/services"; +import { useMutation, useQuery } from "@tanstack/react-query"; +import { contactData } from "../../services/services"; import queryKeys from "../../services/queryKeys"; import getCustomTime from "../../utils/getCustomTime"; export default function Contacts() { + // const {data:contacts, isFetching, isError, error} = useQuery({ + // queryKey: queryKeys.contacts, + // queryFn: () => contactData() + // }) - // const {data:contacts, isFetching, isError, error} = useQuery({ - // queryKey: queryKeys.contacts, - // queryFn: () => contactData() - // }) + const [activeCategoryUID, setActiveCategoryUID] = useState("0"); // HOLDS VALUE OF THE ACTIVE CATEGORY - const [activeCategoryUID, setActiveCategoryUID] = useState('0') // HOLDS VALUE OF THE ACTIVE CATEGORY + const [activeContactUID, setActiveContactUID] = useState(""); + const [activeDetail, setActiveDetail] = useState([]); - const [activeContactUID, setActiveContactUID] = useState('') - const [activeDetail, setActiveDetail] = useState([]) + const [filteredContactData, setFiltererdContactData] = useState([]); - const [filteredContactData, setFiltererdContactData] = useState([]) + const getContactData = useMutation({ + mutationFn: (reqData) => { + return contactData(reqData); + }, + onError: (error) => { + console.log(error); + }, + onSuccess: (res) => { + if (res?.data?.resultCode != "0") { + throw { message: "Something went wrong" }; + } + setFiltererdContactData(res?.data?.contacts); + }, + }); + const changeActiveUID = (uid) => { + setActiveContactUID(uid); + let detail = contactsData.filter((item) => item.uid == uid); + setActiveDetail(detail); + }; - const getContactData = useMutation({ - mutationFn: (reqData) => { - return contactData(reqData) - }, - onError: (error) => { - console.log(error) - }, - onSuccess: (res) => { - if (res?.data?.resultCode != '0') { - throw({message: 'Something went wrong'}) - } - setFiltererdContactData(res?.data?.contacts) - } - }) - - const changeActiveUID = (uid) => { - setActiveContactUID(uid) - let detail = contactsData.filter(item => item.uid == uid) - setActiveDetail(detail) + const changeActiveCategoryUID = (id) => { + let filteredConData = []; + setActiveCategoryUID(id); + if (id == "0") { + filteredConData = contactsData; + } else { + filteredConData = contactsData.filter((item) => item.category == `A00000${id}`); } + setFiltererdContactData(filteredConData); + changeActiveUID(filteredConData[0]?.uid); + }; - const changeActiveCategoryUID = (id) => { - let filteredConData = [] - setActiveCategoryUID(id) - if (id == '0') { - filteredConData = contactsData - } else { - filteredConData = contactsData.filter(item => item.category == id) - } - setFiltererdContactData(filteredConData) - changeActiveUID(filteredConData[0]?.uid) - } + useEffect(() => { + let reqData = { + token: localStorage.getItem("token"), // USER TOKEN + uid: localStorage.getItem("uid"), // USER UID + }; + getContactData.mutate(reqData); + }, []); - useEffect(() => { - let reqData = { - token: localStorage.getItem('token'), // USER TOKEN - uid: localStorage.getItem('uid') // USER UID - } - getContactData.mutate(reqData) - }, []) + const contactsData = getContactData?.data?.data?.contacts; // LIST OF CONTACTS + const contactsCategory = getContactData?.data?.data?.category; // LIST OF CATEGORY - const contactsData = getContactData?.data?.data?.contacts // LIST OF CONTACTS - const contactsCategory = getContactData?.data?.data?.category // LIST OF CATEGORY - - return ( + return ( + <> + + {getContactData?.isPending ? ( <> - - {getContactData?.isPending ? - <> -
-
-

Loading...

-
-
- - : getContactData?.error ? -
-
-

{getContactData?.error?.message}

-
-
- : -
- {/*
Coming Soon
*/} -
-
-
-
-
-
-
-
-
- -
-
-
-
- - -
    -
  • changeActiveCategoryUID('0')} - style={{cursor: 'pointer'}}> -
    - - - - - - All - - -
    -
    • - {contactsCategory && contactsCategory.map(item => ( -
  • changeActiveCategoryUID(`${item?.cid}`)} - style={{cursor: 'pointer'}}> -
    - - - - - - {item?.description} - - -
    -
    • - ))} - {/*
  • - - - - - - - Work - - - -
    • -
  • - - - - - - - Add Category - - - -
    • */} -
-
-
-
-
-
-
-
-
-
-
- {/*
*/} - {/* */} - {/* */} - {/*
*/} -
-
-
-
- {contactsData && filteredContactData?.map((contact, index) => { - const isActive = (contact?.uid == activeContactUID) || (!activeContactUID && index == 0) - const avtarImage = (contact?.category === undefined) ? "avtar/01.jpg" : "avtar/" + contact.category + ".png"; - return ( - - ) - })} -
-
-
-
- -
-
-
- user -
-
-

{activeContactUID ? activeDetail[0]?.sender : filteredContactData[0]?.sender}

-

{activeContactUID ? new Date(activeDetail[0]?.added).toDateString() : new Date(filteredContactData[0]?.added).toDateString()}

-
-
-
-
-

{activeContactUID ? activeDetail[0]?.title : filteredContactData[0]?.title}

-
-
- {/**/} - {/**/} -
-
-
-

{activeContactUID ? activeDetail[0]?.message : filteredContactData[0]?.message}

- {/*

hey adminjon...

-

I truly believe Augustine’s words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.

-

We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.

-

We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.

*/} - {/*
*/} - {/*

Have lovely Day,

*/} - {/*

adminjon

*/} - {/*
*/} -
-
- - {/*
*/} - {/*
*/} - {/*

Click here to ReplyorForward

*/} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!*
    *!/*/} - {/* /!*
    • *!/*/} - {/* /!*
    • *!/*/} - {/* /!*
    • *!/*/} - {/* /!*
*!/*/} - {/*
*/} - {/*
*/} - {/* /!*Send *!/*/} - {/*
*/} - {/*
*/} - {/*
*/} -
-
-
-
-
-
- } +
+
+

Loading...

+
+
- ) + ) : getContactData?.error ? ( +
+
+

{getContactData?.error?.message}

+
+
+ ) : ( +
+ {/*
Coming Soon
*/} +
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+ + +
    +
  • changeActiveCategoryUID("0")} + style={{ cursor: "pointer" }} + > +
    + + + + + + All + + +
    +
    • + {contactsCategory && + contactsCategory.map((item) => ( +
  • + changeActiveCategoryUID(`${item?.cid}`) + } + style={{ cursor: "pointer" }} + > +
    + + + + + + {item?.description} + + +
    +
    • + ))} +
+
+
+
+
+
+
+
+
+
+
+ {/*
*/} + {/* */} + {/* */} + {/*
*/} +
+
+
+
+ {contactsData && + filteredContactData?.map((contact, index) => { + const isActive = + contact?.uid == activeContactUID || + (!activeContactUID && index == 0); + const avtarImage = + contact?.category === undefined + ? "avtar/01.jpg" + : "avtar/" + contact.category + ".png"; + return ( + + ); + })} +
+
+
+
+
+
+
+ user +
+
+

+ {activeContactUID + ? activeDetail[0]?.sender + : filteredContactData[0]?.sender} +

+

+ {activeContactUID + ? new Date(activeDetail[0]?.added).toDateString() + : new Date( + filteredContactData[0]?.added + ).toDateString()} +

+
+
+
+
+

+ {activeContactUID + ? activeDetail[0]?.title + : filteredContactData[0]?.title} +

+
+
+ {/**/} + {/**/} +
+
+
+

+ {activeContactUID + ? activeDetail[0]?.message + : filteredContactData[0]?.message} +

+
+
+
+
+
+
+
+
+ )} + + ); } \ No newline at end of file diff --git a/src/component/home/TopBar.jsx b/src/component/home/TopBar.jsx index 64c4c72..ff0d851 100644 --- a/src/component/home/TopBar.jsx +++ b/src/component/home/TopBar.jsx @@ -57,6 +57,12 @@ export default function TopBar() { <> {data && data?.map((item, index)=>{ let textColor = item?.description == 'Contacts' ? 'text-danger' : item?.description == 'Site Traffic' ? 'text-primary' : item?.description == 'Appointments' ? 'text-orange' : 'text-success' + let dataSpan = '' + if(item?.extra_style){ + const data = item.data_span.split(' ') + dataSpan = `${data[0]} ${data[1]}` + } + return (
@@ -66,7 +72,7 @@ export default function TopBar() {

{item?.value || 0}

- {item?.data_span} + {item?.extra_style ? dataSpan : item?.data_span}
{item?.description}
diff --git a/src/component/layout/layoutcom/UserMenu.jsx b/src/component/layout/layoutcom/UserMenu.jsx index 3c933b9..3a9a139 100644 --- a/src/component/layout/layoutcom/UserMenu.jsx +++ b/src/component/layout/layoutcom/UserMenu.jsx @@ -16,7 +16,7 @@ export default function UserMenu() { return ( <>
-
    +
    • Panel
    • @@ -54,7 +54,7 @@ export default function UserMenu() {
      • -
    • +
    • MERMS Panel
      Log Out
      • diff --git a/src/component/subscription/Subscription.jsx b/src/component/subscription/Subscription.jsx index d40e375..f51cc2b 100644 --- a/src/component/subscription/Subscription.jsx +++ b/src/component/subscription/Subscription.jsx @@ -6,7 +6,7 @@ import {useQuery} from '@tanstack/react-query'; import queryKeys from '../../services/queryKeys'; import siteLinks from "../../links/siteLinks"; import {Link, useNavigate} from 'react-router-dom' -import getDateFromDateString from '../../helpers/GetDateFromDateString'; +import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'; export default function Subscription() { const navigate = useNavigate() @@ -58,7 +58,7 @@ export default function Subscription() {
- Next Payment: {getDateFromDateString(currentSubscription?.next_payment)} + Next Payment: {getDateTimeFromDateString(currentSubscription?.next_payment)}
diff --git a/src/helpers/getDateFromDateString.js b/src/helpers/getDateFromDateString.js new file mode 100644 index 0000000..667a4ca --- /dev/null +++ b/src/helpers/getDateFromDateString.js @@ -0,0 +1,17 @@ +function getDateFromDateString(dateString) { + const date = new Date(dateString); + + // Ensure the date is valid + if (isNaN(date)) { + return "Invalid date string"; + } + + // Get the year, month, and day + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed, so we add 1 + const day = String(date.getDate()).padStart(2, '0'); + + return `${year}-${month}-${day}`; +} + +export default getDateFromDateString \ No newline at end of file diff --git a/src/helpers/GetDateFromDateString.js b/src/helpers/getDateTimeFromDateString.js similarity index 91% rename from src/helpers/GetDateFromDateString.js rename to src/helpers/getDateTimeFromDateString.js index e089893..c3ce5a4 100644 --- a/src/helpers/GetDateFromDateString.js +++ b/src/helpers/getDateTimeFromDateString.js @@ -1,4 +1,4 @@ -function getDateFromDateString(dateString) { +function getDateTimeFromDateString(dateString) { const date = new Date(dateString); const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; @@ -30,4 +30,4 @@ function getDateFromDateString(dateString) { return `${dayName}, ${monthName} ${day}${getOrdinal(day)} ${year} ${hours}:${minutes}${ampm}`; } -export default getDateFromDateString \ No newline at end of file +export default getDateTimeFromDateString \ No newline at end of file