3dtours/travelplanning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tạo hook useNotification.tsx để dùng chung toàn hệ thống

Browse Source
This commit is contained in:
3dtours
2026-06-16 12:41:00 +07:00
parent 29d39ae7b0
commit bfd18e05dd
9 changed files with 241 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AddLocationModal.tsx
+5 -3
View File
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useMemo } from 'react';
import { format, parseISO } from 'date-fns';
import { X, MapPin, Loader2, Clock, Map as MapIcon, Navigation, Search } from 'lucide-react';
import { useTourStore } from '@/store/useTourStore';
import { useNotification } from '@/hooks/useNotification';
import { MapContainer, TileLayer, Marker, useMapEvents, useMap } from 'react-leaflet';
import L from 'leaflet';
@@ -85,6 +86,7 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
// Gom các selector lại để giảm số lượng Hook gọi nội bộ và tăng hiệu năng
const { legs, addLocation, updateLocation, mapCenter, currentTour, userRole } = useTourStore();
const notify = useNotification();
// 1. Luôn khai báo Hook ở cấp cao nhất, không đặt code logic/return giữa các Hook
useEffect(() => {
@@ -222,7 +224,7 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
const handleUseCurrentLocation = () => {
if (!navigator.geolocation) {
alert("Trình duyệt hoặc thiết bị của bạn không hỗ trợ định vị GPS.");
notify({ title: 'Thông báo', message: "Trình duyệt hoặc thiết bị của bạn không hỗ trợ định vị GPS.", type: 'info' });
return;
}
@@ -262,7 +264,7 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
break;
default: errorMessage += err.message;
}
alert(errorMessage);
notify({ title: 'Lỗi định vị', message: errorMessage, type: 'error' });
},
{
enableHighAccuracy: true, // Ưu tiên dùng GPS thay vì Wifi/Cell tower
@@ -294,7 +296,7 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
}
onClose();
} catch (error) {
alert('Lỗi khi lưu địa điểm');
notify({ title: 'Lỗi', message: 'Lỗi khi lưu địa điểm', type: 'error' });
} finally {
setIsLoading(false);
}
frontend/src/components/AddMemberModal.tsx
+16 -35
View File
@@ -1,5 +1,7 @@
import React, { useState, useEffect, useMemo } from 'react';
import { X, Search, UserPlus, Loader2, Shield, Trash2, Clock, Check } from 'lucide-react';
import { useConfirm } from '@/hooks/useConfirm';
import { useNotification } from '@/hooks/useNotification';
interface AddMemberModalProps {
isOpen: boolean;
@@ -22,10 +24,11 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
const [submitting, setSubmitting] = useState(false);
const [fetchError, setFetchError] = useState('');
const [submitError, setSubmitError] = useState('');
const [isConfirmOpen, setIsConfirmOpen] = useState(false);
const [confirmTarget, setConfirmTarget] = useState<{ userId: string; name: string } | null>(null);
const [actionLoading, setActionLoading] = useState<string | null>(null);
const confirm = useConfirm();
const notify = useNotification();
const participantIds = useMemo(() => new Set(participants.map((p) => p.userId)), [participants]);
const requestUserIds = useMemo(() => new Set(joinRequests.map((r) => (r as any).userId)), [joinRequests]);
const visibleUsers = useMemo(() => users.filter((u) => !participantIds.has(u.id)), [users, participantIds]);
@@ -66,19 +69,17 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
const handleRemove = async (userId: string, memberName: string) => {
if (!onRemoveMember) return;
setConfirmTarget({ userId, name: memberName });
setIsConfirmOpen(true);
};
const isConfirmed = await confirm({
title: 'Xóa thành viên',
message: `Bạn có chắc chắn muốn xóa ${memberName} khỏi tour?`
});
const confirmRemove = async () => {
if (!confirmTarget || !onRemoveMember) return;
try {
await onRemoveMember(confirmTarget.userId);
} catch (err: any) {
setSubmitError(err.message || 'Không thể xóa thành viên');
} finally {
setIsConfirmOpen(false);
setConfirmTarget(null);
if (isConfirmed) {
try {
await onRemoveMember(userId);
} catch (err: any) {
setSubmitError(err.message || 'Không thể xóa thành viên');
}
}
};
@@ -99,7 +100,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
}
await onMemberAdded();
} catch (err: any) {
alert(err.message || 'Thao tác thất bại');
notify({ title: 'Lỗi', message: err.message || 'Thao tác thất bại', type: 'error' });
} finally {
setActionLoading(null);
}
@@ -319,26 +320,6 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
</button>
</div>
</div>
{isConfirmOpen && (
<div className="fixed inset-0 z-[2100] flex items-center justify-center p-4">
<div className="absolute inset-0 bg-gray-900/70 backdrop-blur-sm" onClick={() => setIsConfirmOpen(false)} />
<div className="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5">
<h3 className="text-base font-bold text-gray-900">Xác nhận xóa thành viên</h3>
<p className="mt-2 text-sm text-gray-600">
Bạn có chắc muốn xóa <span className="font-semibold text-gray-800">{confirmTarget?.name}</span> khỏi tour này?
</p>
<div className="mt-4 flex justify-end gap-2">
<button onClick={() => setIsConfirmOpen(false)} className="px-3 py-2 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors">
Hủy
</button>
<button onClick={confirmRemove} className="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold transition-colors">
Xóa
</button>
</div>
</div>
</div>
)}
</div>
);
};
frontend/src/components/ItineraryTimeline.tsx
+22 -31
View File
@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react';
import { format, differenceInMinutes, parseISO } from 'date-fns';
import { CheckCircle2, Circle, Clock, MapPin, AlertCircle, Zap, Navigation, Edit2, Trash2, Plus, List, X, Calendar as CalendarIcon, AlignLeft, MessageSquare } from 'lucide-react';
import { useTourStore } from '@/store/useTourStore';
import { ConfirmModal } from '@/components/ConfirmModal';
import { useConfirm } from '@/hooks/useConfirm';
import { useNotification } from '@/hooks/useNotification';
import { CommentModal } from '@/components/CommentModal';
const TimeVariance = ({ planned, actual }: { planned: string, actual: string | null }) => {
@@ -58,7 +59,8 @@ export const ItineraryTimeline = ({
// Khai báo logic canEdit để sử dụng trong toàn bộ component
const canEdit = isPublicView ? false : ['OWNER', 'MANAGER'].includes(userRole || '');
const [confirmState, setConfirmState] = useState<{ open: boolean; title?: string; message?: string; onConfirm?: () => void }>({ open: false });
const confirm = useConfirm();
const notify = useNotification();
const [isLegCountModalOpen, setIsLegCountModalOpen] = useState(false);
const [tempLegCount, setTempLegCount] = useState(3);
const [isCommentModalOpen, setIsCommentModalOpen] = useState(false);
@@ -151,35 +153,31 @@ export const ItineraryTimeline = ({
};
const handleDeleteLeg = async (legId: string) => {
setConfirmState({
open: true,
const isConfirmed = await confirm({
title: 'Xóa chặng',
message: 'Bạn có chắc chắn muốn xóa chặng này?',
onConfirm: async () => {
try {
await deleteLeg(legId);
} catch (err: any) {
alert(err.message);
} finally {
setConfirmState({ open: false });
}
},
message: 'Bạn có chắc chắn muốn xóa chặng này?'
});
if (isConfirmed) {
try {
await deleteLeg(legId);
} catch (err: any) {
notify({ title: 'Lỗi', message: err.message, type: 'error' });
}
}
};
const handleDeleteLocation = async (id: string) => {
setConfirmState({
open: true,
const isConfirmed = await confirm({
title: 'Xóa địa điểm',
message: 'Bạn có chắc chắn muốn xóa địa điểm này?',
onConfirm: async () => {
try {
await deleteLocation(id);
} catch (err: any) { alert(err.message); } finally {
setConfirmState({ open: false });
}
},
message: 'Bạn có chắc chắn muốn xóa địa điểm này?'
});
if (isConfirmed) {
try {
await deleteLocation(id);
} catch (err: any) {
notify({ title: 'Lỗi', message: err.message, type: 'error' });
}
}
};
return (
@@ -454,13 +452,6 @@ export const ItineraryTimeline = ({
</div>
)}
</div>
<ConfirmModal
isOpen={confirmState.open}
title={confirmState.title}
message={confirmState.message}
onConfirm={() => confirmState.onConfirm?.()}
onCancel={() => setConfirmState({ open: false })}
/>
{/* Modal Khai báo số chặng (Popover) */}
{isLegCountModalOpen && (