comments page cleanup
This commit is contained in:
CHIEFSOFT\ameye
+215
-424
@@ -1,24 +1,103 @@
|
|||||||
import React from "react";
|
"use client";
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||||
import getImage from "../../utils/getImage";
|
import getImage from "../../utils/getImage";
|
||||||
|
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 Comments() {
|
export default function Comments() {
|
||||||
|
// const {data:contacts, isFetching, isError, error} = useQuery({
|
||||||
|
// queryKey: queryKeys.contacts,
|
||||||
|
// queryFn: () => contactData()
|
||||||
|
// })
|
||||||
|
|
||||||
|
const [activeCategoryUID, setActiveCategoryUID] = useState("0"); // HOLDS VALUE OF THE ACTIVE CATEGORY
|
||||||
|
|
||||||
|
const [activeContactUID, setActiveContactUID] = useState("");
|
||||||
|
const [activeDetail, setActiveDetail] = 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 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);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const contactsData = getContactData?.data?.data?.contacts; // LIST OF CONTACTS
|
||||||
|
const contactsCategory = getContactData?.data?.data?.category; // LIST OF CATEGORY
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<BreadcrumbComBS title="Comments" paths={["Dashboard", "Comments"]} />
|
<BreadcrumbComBS title="Comments" paths={["Dashboard", "Comments"]} />
|
||||||
|
{getContactData?.isPending ? (
|
||||||
|
<>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-12">
|
||||||
|
<p className="text-mute">Loading...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : getContactData?.error ? (
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-12">
|
||||||
|
<p className="text-danger">{getContactData?.error?.message}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
{/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
{/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<div className="card card-statistics mail-contant">
|
<div
|
||||||
|
className="card card-statistics mail-contant"
|
||||||
|
style={{ minHeight: "200px", borderRadius: "10px" }}
|
||||||
|
>
|
||||||
<div className="card-body p-0">
|
<div className="card-body p-0">
|
||||||
<div className="row no-gutters">
|
<div className="row no-gutters">
|
||||||
<div className="col-md-4 col-xxl-2 col-md-4">
|
<div className="col-md-4 col-xxl-2 col-md-4">
|
||||||
<div className="mail-sidebar">
|
<div className="mail-sidebar">
|
||||||
<div className="row justify-content-center">
|
<div className="row justify-content-center">
|
||||||
<div className="col-12">
|
<div className="d-none col-12">
|
||||||
<div className="text-center mail-sidebar-title px-4">
|
<div className="text-center mail-sidebar-title px-4">
|
||||||
<a
|
<a
|
||||||
href="javascript:void(0)"
|
href="#"
|
||||||
className="btn btn-primary btn-block py-3 font-weight-bold font-18"
|
className="btn btn-primary btn-block py-3 font-weight-bold font-18"
|
||||||
>
|
>
|
||||||
<i className="fa fa-plus pl-2"></i>
|
<i className="fa fa-plus pl-2"></i>
|
||||||
@@ -29,7 +108,7 @@ export default function Comments() {
|
|||||||
<div className="px-4 py-4">
|
<div className="px-4 py-4">
|
||||||
<ul className="pl-0">
|
<ul className="pl-0">
|
||||||
<li className="py-2">
|
<li className="py-2">
|
||||||
<a href="javascript:void(0)">
|
<a href="#">
|
||||||
<span className="nav align-items-center">
|
<span className="nav align-items-center">
|
||||||
<span>
|
<span>
|
||||||
<i className="fa fa-envelope-o text-primary pr-4"></i>
|
<i className="fa fa-envelope-o text-primary pr-4"></i>
|
||||||
@@ -39,93 +118,121 @@ export default function Comments() {
|
|||||||
</span>
|
</span>
|
||||||
<span className="nav-item ml-auto text-right">
|
<span className="nav-item ml-auto text-right">
|
||||||
<span className="badge badge-pill badge-primary float-right">
|
<span className="badge badge-pill badge-primary float-right">
|
||||||
0+
|
{contactsData?.length}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className="py-2">
|
{/*<li className="py-2">*/}
|
||||||
<a href="javascript:void(0)">
|
{/* <a href="#">*/}
|
||||||
<span className="nav align-items-center">
|
{/* <span*/}
|
||||||
<span>
|
{/* className="nav align-items-center">*/}
|
||||||
<i className="fa fa-paper-plane-o pr-4"></i>
|
{/* <span>*/}
|
||||||
</span>
|
{/* <i className="fa fa-paper-plane-o pr-4"></i>*/}
|
||||||
<span>
|
{/* </span>*/}
|
||||||
<span>Sent Mail</span>
|
{/* <span>*/}
|
||||||
</span>
|
{/* <span>Replied Mail</span>*/}
|
||||||
</span>
|
{/* </span>*/}
|
||||||
</a>
|
{/* </span>*/}
|
||||||
</li>
|
{/* </a>*/}
|
||||||
|
{/*</li>*/}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul className="pl-0 mt-5">
|
<ul className="pl-0 mt-5">
|
||||||
<li className="py-2">
|
<li
|
||||||
<a href="javascript:void(0)">
|
className="py-2"
|
||||||
|
onClick={() => changeActiveCategoryUID("0")}
|
||||||
|
style={{ cursor: "pointer" }}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
<span className="nav align-items-center">
|
<span className="nav align-items-center">
|
||||||
<span>
|
<span>
|
||||||
<i className="fa fa-circle-o text-danger pr-4"></i>
|
<i
|
||||||
|
className={`fa fa-circle-o pr-4 ${
|
||||||
|
activeCategoryUID == "0"
|
||||||
|
? "text-primary"
|
||||||
|
: "text-warning"
|
||||||
|
}`}
|
||||||
|
></i>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<span>Personal</span>
|
<span>All</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li className="py-2">
|
{contactsCategory &&
|
||||||
<a href="javascript:void(0)">
|
contactsCategory.map((item) => (
|
||||||
|
<li
|
||||||
|
key={item?.cid}
|
||||||
|
className="py-2"
|
||||||
|
onClick={() =>
|
||||||
|
changeActiveCategoryUID(`${item?.cid}`)
|
||||||
|
}
|
||||||
|
style={{ cursor: "pointer" }}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
<span className="nav align-items-center">
|
<span className="nav align-items-center">
|
||||||
<span>
|
<span>
|
||||||
<i className="fa fa-circle-o pr-4 text-warning"></i>
|
<i
|
||||||
|
className={`fa fa-circle-o pr-4 ${
|
||||||
|
activeCategoryUID ==
|
||||||
|
`${item?.cid}`
|
||||||
|
? "text-primary"
|
||||||
|
: "text-warning"
|
||||||
|
}`}
|
||||||
|
></i>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<span>Work</span>
|
<span>{item?.description}</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</div>
|
||||||
</li>
|
|
||||||
<li className="py-2">
|
|
||||||
<a href="javascript:void(0)">
|
|
||||||
<span className="nav align-items-center">
|
|
||||||
<span>
|
|
||||||
<i className="fa fa-plus pr-4"></i>
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
<span>Add Category</span>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-8 col-xxl-4 border-md-t">
|
<div className={`${filteredContactData.length > 0 ? 'col-md-8 col-xxl-4' : 'col-md-8 col-xxl-10'} border-md-t`}>
|
||||||
<div className="mail-content border-right border-n h-100">
|
<div className="mail-content border-right border-n h-100" style={{placeContent: 'center'}}>
|
||||||
<div className="mail-search border-bottom">
|
{/* <div className="mail-search border-bottom">
|
||||||
<div className="row align-items-center mx-0">
|
<div className="row align-items-center mx-0">
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<div className="form-group pt-3">
|
<div className="form-group pt-3">
|
||||||
<input
|
<input type="text" className="form-control" id="search" placeholder="Search.." />
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
id="search"
|
|
||||||
placeholder="Search.."
|
|
||||||
/>
|
|
||||||
<i className="fa fa-search"></i>
|
<i className="fa fa-search"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
<div className="mail-msg scrollbar scroll_dark">
|
<div className="mail-msg scrollbar scroll_dark">
|
||||||
<div className="mail-msg-item">
|
{ filteredContactData.length ?
|
||||||
<a href="javascript:void(0)">
|
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 (
|
||||||
|
<div
|
||||||
|
key={contact?.uid}
|
||||||
|
onClick={() => changeActiveUID(contact?.uid)}
|
||||||
|
className={`mail-msg-item ${
|
||||||
|
isActive && "bg-light"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<a href="#">
|
||||||
<div className="media align-items-center">
|
<div className="media align-items-center">
|
||||||
<div className="mr-3">
|
<div className="mr-3">
|
||||||
<div className="bg-img">
|
<div className="bg-img">
|
||||||
<img
|
<img
|
||||||
src={getImage("avtar/01.jpg")}
|
src={getImage(avtarImage)}
|
||||||
className="img-fluid"
|
className="img-fluid"
|
||||||
alt="user"
|
alt="user"
|
||||||
/>
|
/>
|
||||||
@@ -133,301 +240,88 @@ export default function Comments() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="w-100">
|
<div className="w-100">
|
||||||
<div className="mail-msg-item-titel justify-content-between">
|
<div className="mail-msg-item-titel justify-content-between">
|
||||||
<p>Martin smith</p>
|
|
||||||
<p className="d-none d-xl-block">
|
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
|
||||||
<p>
|
<p>
|
||||||
Since there is not an "all the above" category,
|
<span
|
||||||
I'll take the opportunity to enthusiastically
|
style={{
|
||||||
congratulate you on the very high quality.
|
fontSize: "14px",
|
||||||
|
color: "#148399",
|
||||||
|
fontWeight: "bolder",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{contact?.sender}
|
||||||
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="d-xl-none">
|
{/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="mail-msg-item">
|
|
||||||
<a href="javascript:void(0)">
|
|
||||||
<div className="media align-items-center">
|
|
||||||
<div className="mr-3">
|
|
||||||
<div className="bg-img">
|
|
||||||
<img
|
|
||||||
src={getImage("avtar/02.jpg")}
|
|
||||||
className="img-fluid"
|
|
||||||
alt="user"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-100">
|
|
||||||
<div className="mail-msg-item-titel justify-content-between">
|
|
||||||
<p>DutcaPatrick</p>
|
|
||||||
<p className="d-none d-xl-block">
|
<p className="d-none d-xl-block">
|
||||||
06:59 <span> PM </span>
|
<span style={{ fontSize: "14px" }}>
|
||||||
|
{new Date(
|
||||||
|
contact?.added
|
||||||
|
).toDateString()}
|
||||||
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<h5 className="mb-0 my-2">
|
<h5 className="mb-0 my-2">
|
||||||
Mobile app Designer{" "}
|
{contact?.title}
|
||||||
</h5>
|
</h5>
|
||||||
<p>
|
<p>
|
||||||
Very nice template, lots of pages and good
|
{contact?.message?.length < 100
|
||||||
documentation.
|
? contact?.message
|
||||||
|
: contact?.message.substring(0, 101) +
|
||||||
|
" ..."}
|
||||||
</p>
|
</p>
|
||||||
<p className="d-xl-none">
|
<p className="d-xl-none">
|
||||||
06:59 <span> PM </span>
|
<span>
|
||||||
</p>
|
{new Date(
|
||||||
</div>
|
contact?.added
|
||||||
</div>
|
).toDateString()}
|
||||||
</a>
|
{/* {getCustomTime(contact.added)} */}
|
||||||
</div>
|
</span>
|
||||||
<div className="mail-msg-item">
|
|
||||||
<a href="javascript:void(0)">
|
|
||||||
<div className="media align-items-center">
|
|
||||||
<div className="mr-3">
|
|
||||||
<div className="bg-img">
|
|
||||||
<img
|
|
||||||
src={getImage("avtar/03.jpg")}
|
|
||||||
className="img-fluid"
|
|
||||||
alt="user"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-100">
|
|
||||||
<div className="mail-msg-item-titel justify-content-between">
|
|
||||||
<p>m_morsch</p>
|
|
||||||
<p className="d-none d-xl-block">
|
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<h5 className="mb-0 my-2">
|
|
||||||
Landing page Designer
|
|
||||||
</h5>
|
|
||||||
<p>
|
|
||||||
Excellent and at a great price... thank you very
|
|
||||||
much!
|
|
||||||
</p>
|
|
||||||
<p className="d-xl-none">
|
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="mail-msg-item">
|
|
||||||
<a href="javascript:void(0)">
|
|
||||||
<div className="media align-items-center">
|
|
||||||
<div className="mr-3">
|
|
||||||
<div className="bg-img">
|
|
||||||
<img
|
|
||||||
src={getImage("avtar/04.jpg")}
|
|
||||||
className="img-fluid"
|
|
||||||
alt="user"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-100">
|
|
||||||
<div className="mail-msg-item-titel justify-content-between">
|
|
||||||
<p>AnnaHorno</p>
|
|
||||||
<p className="d-none d-xl-block">
|
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<h5 className="mb-0 my-2">Re-Design ios app</h5>
|
|
||||||
<p>
|
|
||||||
Solved my theme problem in 10 minutes. We thank
|
|
||||||
you.
|
|
||||||
</p>
|
|
||||||
<p className="d-xl-none">
|
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="mail-msg-item">
|
|
||||||
<a href="javascript:void(0)">
|
|
||||||
<div className="media align-items-center">
|
|
||||||
<div className="mr-3">
|
|
||||||
<div className="bg-img">
|
|
||||||
<img
|
|
||||||
src={getImage("avtar/05.jpg")}
|
|
||||||
className="img-fluid"
|
|
||||||
alt="user"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-100">
|
|
||||||
<div className="mail-msg-item-titel justify-content-between">
|
|
||||||
<p>Wdcorbitt</p>
|
|
||||||
<p className="d-none d-xl-block">
|
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<h5 className="mb-0 my-2">
|
|
||||||
Mobil UX/UI Designer
|
|
||||||
</h5>
|
|
||||||
<p>
|
|
||||||
Asked for information and received it EXTREMELY
|
|
||||||
quickly. Great layout - good code - great price!{" "}
|
|
||||||
</p>
|
|
||||||
<p className="d-xl-none">
|
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="mail-msg-item">
|
|
||||||
<a href="javascript:void(0)">
|
|
||||||
<div className="media align-items-center">
|
|
||||||
<div className="mr-3">
|
|
||||||
<div className="bg-img">
|
|
||||||
<img
|
|
||||||
src={getImage("avtar/06.jpg")}
|
|
||||||
className="img-fluid"
|
|
||||||
alt="user"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-100">
|
|
||||||
<div className="mail-msg-item-titel justify-content-between">
|
|
||||||
<p>Anne Smith</p>
|
|
||||||
<p className="d-none d-xl-block">
|
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<h5 className="mb-0 my-2">Jobly Opportunity</h5>
|
|
||||||
<p>
|
|
||||||
Mentor has so many features and layouts. Its a
|
|
||||||
great choice.
|
|
||||||
</p>
|
|
||||||
<p className="d-xl-none">
|
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="mail-msg-item">
|
|
||||||
<a href="javascript:void(0)">
|
|
||||||
<div className="media align-items-center">
|
|
||||||
<div className="mr-3">
|
|
||||||
<div className="bg-img">
|
|
||||||
<img
|
|
||||||
src={getImage("avtar/07.jpg")}
|
|
||||||
className="img-fluid"
|
|
||||||
alt="user"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-100">
|
|
||||||
<div className="mail-msg-item-titel justify-content-between">
|
|
||||||
<p>Paul Flavius</p>
|
|
||||||
<p className="d-none d-xl-block">
|
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
|
||||||
<p>
|
|
||||||
There are many people in the world with amazing
|
|
||||||
talents who realize only a small percentage of
|
|
||||||
their potential.{" "}
|
|
||||||
</p>
|
|
||||||
<p className="d-xl-none">
|
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="mail-msg-item">
|
|
||||||
<a href="javascript:void(0)">
|
|
||||||
<div className="media align-items-center">
|
|
||||||
<div className="mr-3">
|
|
||||||
<div className="bg-img">
|
|
||||||
<img
|
|
||||||
src={getImage("avtar/08.jpg")}
|
|
||||||
className="img-fluid"
|
|
||||||
alt="user"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-100">
|
|
||||||
<div className="mail-msg-item-titel justify-content-between">
|
|
||||||
<p>Sara Lisbon</p>
|
|
||||||
<p className="d-none d-xl-block">
|
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<h5 className="mb-0 my-2">UI Designer</h5>
|
|
||||||
<p>
|
|
||||||
We can look a bit further back in time to Albert
|
|
||||||
Einstein or even further back to Abraham
|
|
||||||
Lincoln.
|
|
||||||
</p>
|
|
||||||
<p className="d-xl-none">
|
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="mail-msg-item">
|
|
||||||
<a href="javascript:void(0)">
|
|
||||||
<div className="media align-items-center">
|
|
||||||
<div className="mr-3">
|
|
||||||
<div className="bg-img">
|
|
||||||
<img
|
|
||||||
src={getImage("avtar/09.jpg")}
|
|
||||||
className="img-fluid"
|
|
||||||
alt="user"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-100">
|
|
||||||
<div className="mail-msg-item-titel justify-content-between">
|
|
||||||
<p>Annahorno</p>
|
|
||||||
<p className="d-none d-xl-block">
|
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
|
||||||
<p>
|
|
||||||
One of the most difficult aspects of achieving
|
|
||||||
success is staying motivated over the long haul.
|
|
||||||
</p>
|
|
||||||
<p className="d-xl-none">
|
|
||||||
06:59 <span> PM </span>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
:
|
||||||
|
<p className="text-center">Messages will appear here as soon as they are available for selection</p>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{filteredContactData.length > 0 &&
|
||||||
<div className="col-xxl-6 border-t border-xxl-t">
|
<div className="col-xxl-6 border-t border-xxl-t">
|
||||||
<div className="mail-chat py-5 px-5">
|
<div className="mail-chat py-5 px-5">
|
||||||
<div className="media align-items-center">
|
<div className="media align-items-center">
|
||||||
<div className="bg-img mr-3">
|
<div className="bg-img mr-3">
|
||||||
<img
|
<img
|
||||||
src={getImage("avtar/03.jpg")}
|
src={activeContactUID ? getImage("avtar/" + activeDetail[0].category + ".png") : getImage(filteredContactData[0] == undefined ? "avtar/01.jpg": "avtar/" + filteredContactData[0].category + ".png")}
|
||||||
className="img-fluid"
|
className="img-fluid"
|
||||||
alt="user"
|
alt="user"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h4 className="mb-0">Dutca Patrick</h4>
|
<h4 className="mb-0" style={{ color: "#148399" }}>
|
||||||
<p>30 Min ago</p>
|
{activeContactUID
|
||||||
|
? activeDetail[0]?.sender
|
||||||
|
: filteredContactData[0]?.sender}
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
{activeContactUID
|
||||||
|
? new Date(activeDetail[0]?.added).toDateString()
|
||||||
|
: new Date(
|
||||||
|
filteredContactData[0]?.added
|
||||||
|
).toDateString()}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-4 d-flex justify-content-between">
|
<div className="mt-4 d-flex justify-content-between">
|
||||||
<div>
|
<div>
|
||||||
<h3>Landing page Designer...</h3>
|
<h3>
|
||||||
|
{activeContactUID
|
||||||
|
? activeDetail[0]?.title
|
||||||
|
: filteredContactData[0]?.title}
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
{/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
|
{/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
|
||||||
@@ -435,124 +329,21 @@ export default function Comments() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="my-4">hey adminjon...</p>
|
|
||||||
<p className="mb-2">
|
|
||||||
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.
|
|
||||||
</p>
|
|
||||||
<p>
|
<p>
|
||||||
We also know those epic stories, those modern-day
|
{activeContactUID
|
||||||
legends surrounding the early failures of such supremely
|
? activeDetail[0]?.message
|
||||||
successful folks as Michael Jordan and Bill Gates. We
|
: filteredContactData[0]?.message}
|
||||||
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.
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
|
||||||
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.
|
|
||||||
</p>
|
|
||||||
<div className="my-5">
|
|
||||||
<p>Have lovely Day,</p>
|
|
||||||
<p>adminjon</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/*<div className="d-md-flex px-5 py-4">*/}
|
|
||||||
{/* <div className="flex-fill align-items-center">*/}
|
|
||||||
{/* <div className="d-flex">*/}
|
|
||||||
{/* <i className="ti ti-clip pr-3 font-22"></i>*/}
|
|
||||||
{/* <p className="pr-3 font-weight-bold">Wireframe</p>*/}
|
|
||||||
{/* <p>(220.MB)</p>*/}
|
|
||||||
{/* </div>*/}
|
|
||||||
{/* </div>*/}
|
|
||||||
{/* <div className="flex-fill text-left text-md-right"><a href="javascript:void(0)" className="text-primary"><i className="ti ti-download pr-2"></i><span>Download</span></a></div>*/}
|
|
||||||
{/*</div>*/}
|
|
||||||
<div className="bg-light mail-f px-4 py-3">
|
|
||||||
<div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
|
|
||||||
<p>
|
|
||||||
Click here to{" "}
|
|
||||||
<a
|
|
||||||
href="#editer"
|
|
||||||
data-toggle="collapse"
|
|
||||||
className="text-primary px-1"
|
|
||||||
>
|
|
||||||
Reply
|
|
||||||
</a>
|
|
||||||
or
|
|
||||||
<a
|
|
||||||
href="#forward"
|
|
||||||
data-toggle="collapse"
|
|
||||||
className="text-primary px-1"
|
|
||||||
>
|
|
||||||
Forward
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
<a href="javascript:void(0)" className="text-primary">
|
|
||||||
<i className="fa fa-microphone"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="collapse" id="editer">
|
|
||||||
<div className="form-group">
|
|
||||||
<textarea
|
|
||||||
className="form-control mt-3"
|
|
||||||
id="exampleFormControlTextarea1"
|
|
||||||
rows="3"
|
|
||||||
placeholder="Type here..."
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="collapse" id="forward">
|
|
||||||
<div className="form-group">
|
|
||||||
<input
|
|
||||||
className="form-control mt-3"
|
|
||||||
id="exampleFormControl"
|
|
||||||
placeholder="Email Address"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="d-flex align-items-center justify-content-between py-2">
|
|
||||||
<div>
|
|
||||||
<ul className="nav">
|
|
||||||
<li className="nav-item pr-3">
|
|
||||||
<a href="javascript:void(0)">
|
|
||||||
<i className="ti ti-clip font-20"></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-item pr-3">
|
|
||||||
<a href="javascript:void(0)">
|
|
||||||
<i className="ti ti-face-smile font-20"></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="nav-item">
|
|
||||||
<a href="javascript:void(0)">
|
|
||||||
<i className="ti ti-gallery font-20"></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a
|
|
||||||
href="javascript:void(0)"
|
|
||||||
className="btn btn-primary"
|
|
||||||
>
|
|
||||||
<span>Send</span>{" "}
|
|
||||||
<i className="fa fa-paper-plane"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user