Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5f49070a98 | |||
| accda67b22 | |||
| b5b6082d26 |
Symlink
+1
@@ -0,0 +1 @@
|
|||||||
|
../.env
|
||||||
+118
-2
@@ -11,7 +11,116 @@ import { AdminDashboard } from './pages/AdminDashboard';
|
|||||||
import { ShareJourneyPage } from './pages/ShareJourneyPage';
|
import { ShareJourneyPage } from './pages/ShareJourneyPage';
|
||||||
import { TourNavigationPage } from './pages/TourNavigationPage';
|
import { TourNavigationPage } from './pages/TourNavigationPage';
|
||||||
import { ConfirmProvider } from './hooks/useConfirm';
|
import { ConfirmProvider } from './hooks/useConfirm';
|
||||||
import { NotificationProvider } from './hooks/useNotification';
|
import { NotificationProvider, useNotification } from './hooks/useNotification';
|
||||||
|
import { io } from 'socket.io-client';
|
||||||
|
|
||||||
|
interface GlobalNotificationListenerProps {
|
||||||
|
user: any;
|
||||||
|
currentPage: string;
|
||||||
|
currentTourId: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const GlobalNotificationListener: React.FC<GlobalNotificationListenerProps> = ({ user, currentPage, currentTourId }) => {
|
||||||
|
const notify = useNotification();
|
||||||
|
|
||||||
|
// Request browser Notification permission once on mount
|
||||||
|
useEffect(() => {
|
||||||
|
if ('Notification' in window && Notification.permission === 'default') {
|
||||||
|
Notification.requestPermission();
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!user?.id) return;
|
||||||
|
|
||||||
|
const socketInstance = io();
|
||||||
|
|
||||||
|
socketInstance.on('connect', () => {
|
||||||
|
console.log('[WS] Global notification socket connected:', socketInstance.id);
|
||||||
|
socketInstance.emit('joinUser', user.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
socketInstance.on('tourMessageNotification', (data: any) => {
|
||||||
|
// Dispatch custom window event
|
||||||
|
window.dispatchEvent(new CustomEvent('app:tourMessageNotification', { detail: data }));
|
||||||
|
|
||||||
|
// Check if user is actively viewing this specific tour chat
|
||||||
|
const isViewingThisTourChat = currentPage === 'tourDetail' && currentTourId === data.tourId && (window as any).activeTourChatTab;
|
||||||
|
|
||||||
|
if (!isViewingThisTourChat) {
|
||||||
|
notify({
|
||||||
|
title: `Tin nhắn mới trong tour "${data.tourTitle}"`,
|
||||||
|
message: `${data.senderName}: "${data.content.substring(0, 30)}${data.content.length > 30 ? '...' : ''}"`,
|
||||||
|
type: 'success'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show push notification on desktop browser
|
||||||
|
if ('Notification' in window && Notification.permission === 'granted') {
|
||||||
|
try {
|
||||||
|
new Notification(`Tin nhắn mới trong tour "${data.tourTitle}"`, {
|
||||||
|
body: `${data.senderName}: ${data.content}`,
|
||||||
|
icon: '/favicon.ico'
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error('System Notification error:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
socketInstance.on('messageReceived', (message: any) => {
|
||||||
|
// Dispatch custom window event
|
||||||
|
window.dispatchEvent(new CustomEvent('app:messageReceived', { detail: message }));
|
||||||
|
|
||||||
|
// Check if user is actively chatting with the sender
|
||||||
|
const isChattingWithSender = currentPage === 'dashboard' && (window as any).activeChatUserId === message.senderId;
|
||||||
|
|
||||||
|
if (!isChattingWithSender) {
|
||||||
|
notify({
|
||||||
|
title: 'Tin nhắn mới',
|
||||||
|
message: `${message.sender?.name || 'Ai đó'} gửi: "${message.content.substring(0, 30)}${message.content.length > 30 ? '...' : ''}"`,
|
||||||
|
type: 'success'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show push notification on desktop browser
|
||||||
|
if ('Notification' in window && Notification.permission === 'granted') {
|
||||||
|
try {
|
||||||
|
new Notification(`Tin nhắn mới từ ${message.sender?.name || 'Thành viên'}`, {
|
||||||
|
body: message.content,
|
||||||
|
icon: '/favicon.ico'
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error('System Notification error:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
socketInstance.on('connectionAccepted', (data: any) => {
|
||||||
|
window.dispatchEvent(new CustomEvent('app:connectionAccepted', { detail: data }));
|
||||||
|
notify({
|
||||||
|
title: 'Kết nối mới',
|
||||||
|
message: `${data.acceptedByName} đã chấp nhận yêu cầu kết nối của bạn.`,
|
||||||
|
type: 'success'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
socketInstance.on('joinRequestAccepted', (data: any) => {
|
||||||
|
window.dispatchEvent(new CustomEvent('app:joinRequestAccepted', { detail: data }));
|
||||||
|
notify({
|
||||||
|
title: 'Yêu cầu tham gia được duyệt',
|
||||||
|
message: `Yêu cầu tham gia hành trình "${data.tourTitle}" của bạn đã được chấp nhận!`,
|
||||||
|
type: 'success'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
socketInstance.disconnect();
|
||||||
|
};
|
||||||
|
}, [user?.id, currentPage, currentTourId]);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const params = new URLSearchParams(window.location.search);
|
const params = new URLSearchParams(window.location.search);
|
||||||
@@ -223,7 +332,14 @@ function App() {
|
|||||||
return (
|
return (
|
||||||
<ConfirmProvider>
|
<ConfirmProvider>
|
||||||
<NotificationProvider>
|
<NotificationProvider>
|
||||||
{(() => {
|
{user && (
|
||||||
|
<GlobalNotificationListener
|
||||||
|
user={user}
|
||||||
|
currentPage={currentPage}
|
||||||
|
currentTourId={currentTourId}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{(() => {
|
||||||
if (currentPage === 'admin') {
|
if (currentPage === 'admin') {
|
||||||
return (
|
return (
|
||||||
<AdminDashboard
|
<AdminDashboard
|
||||||
|
|||||||
@@ -601,7 +601,7 @@ export const TourChat: React.FC<TourChatProps> = ({ tourId, embedded = false })
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Locked Chat Input Footer */}
|
{/* Locked Chat Input Footer */}
|
||||||
<div className="locked-chat-input-footer !flex-shrink-0 !w-full !border-t border-gray-200 bg-white !z-40" style={{ paddingBottom: 'env(safe-area-inset-bottom, 12px)' }}>
|
<div className="locked-chat-input-footer relative !flex-shrink-0 !w-full !border-t border-gray-200 bg-white !z-40" style={{ paddingBottom: 'env(safe-area-inset-bottom, 12px)' }}>
|
||||||
{/* Mention list dropdown */}
|
{/* Mention list dropdown */}
|
||||||
{showMentionList && filteredParticipants.length > 0 && (
|
{showMentionList && filteredParticipants.length > 0 && (
|
||||||
<div
|
<div
|
||||||
@@ -612,7 +612,14 @@ export const TourChat: React.FC<TourChatProps> = ({ tourId, embedded = false })
|
|||||||
<button
|
<button
|
||||||
key={member.id}
|
key={member.id}
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => insertMention(member)}
|
onMouseDown={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
insertMention(member);
|
||||||
|
}}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
insertMention(member);
|
||||||
|
}}
|
||||||
className={`px-3 py-2 text-left text-xs font-semibold flex items-center gap-2 transition-colors ${
|
className={`px-3 py-2 text-left text-xs font-semibold flex items-center gap-2 transition-colors ${
|
||||||
index === mentionIndex
|
index === mentionIndex
|
||||||
? 'bg-blue-50 text-blue-700'
|
? 'bg-blue-50 text-blue-700'
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -399,6 +399,13 @@ export const TourDetailPage = ({
|
|||||||
const [isAddMemberOpen, setIsAddMemberOpen] = useState(false);
|
const [isAddMemberOpen, setIsAddMemberOpen] = useState(false);
|
||||||
const [isAddPhotoOpen, setIsAddPhotoOpen] = useState(false);
|
const [isAddPhotoOpen, setIsAddPhotoOpen] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
(window as any).activeTourChatTab = activeTab === 'chat';
|
||||||
|
return () => {
|
||||||
|
(window as any).activeTourChatTab = false;
|
||||||
|
};
|
||||||
|
}, [activeTab]);
|
||||||
|
|
||||||
const [isRatingModalOpen, setIsRatingModalOpen] = useState(false);
|
const [isRatingModalOpen, setIsRatingModalOpen] = useState(false);
|
||||||
const [ratingTargetUser, setRatingTargetUser] = useState<any>(null);
|
const [ratingTargetUser, setRatingTargetUser] = useState<any>(null);
|
||||||
const [ratingScores, setRatingScores] = useState({
|
const [ratingScores, setRatingScores] = useState({
|
||||||
|
|||||||
Reference in New Issue
Block a user