81 lines
2.2 KiB
JavaScript
81 lines
2.2 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { useAuth } from '../../context/AuthContext';
|
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { selectPersonById, fetchPerson } from '../../store/features/peopleSlice';
|
|
import JKMessageButton from '../profile/JKMessageButton';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import ProfileAvatar from '../profile/JKProfileAvatar';
|
|
import TimeAgo from '../common/JKTimeAgo';
|
|
|
|
function JKTextMessageNotification(props) {
|
|
const { source_user, source_user_id, message, created_at } = props.notification;
|
|
const handleOnAccept = props.handleOnAccept;
|
|
|
|
const { currentUser } = useAuth();
|
|
//const [user, setUser] = useState(null);
|
|
const dispatch = useDispatch();
|
|
|
|
const user = useSelector(state => state.people.people.find(person => person.id === source_user_id));
|
|
|
|
// const user = useSelector(selectPersonById)
|
|
|
|
const loadSourceUser = () => {
|
|
if (!user) {
|
|
dispatch(fetchPerson({ userId: source_user_id }))
|
|
.unwrap()
|
|
.then(resp => {
|
|
console.log('after fetch person', resp);
|
|
})
|
|
.catch(error => console.log(error));
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadSourceUser();
|
|
return () => {
|
|
//cleanup
|
|
};
|
|
}, []);
|
|
|
|
const truncate = msg => {
|
|
if (msg.length <= 200) {
|
|
return msg;
|
|
} else {
|
|
return `${msg.substring(0, 200)}...`;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="notification-avatar mr-3">
|
|
<ProfileAvatar />
|
|
</div>
|
|
<div className="notification-body">
|
|
<p className="mb-1">
|
|
{source_user.name} said: {truncate(message)}
|
|
</p>
|
|
<span className="notification-time">
|
|
<TimeAgo date={created_at} />
|
|
</span>
|
|
<div>
|
|
{user && (
|
|
<JKMessageButton
|
|
currentUser={currentUser}
|
|
user={user}
|
|
cssClasses="fs--1 px-2 py-1 mr-1"
|
|
color="secondary"
|
|
size="sm"
|
|
outline={true}
|
|
>
|
|
<span>Reply</span>
|
|
</JKMessageButton>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default JKTextMessageNotification;
|