Sửa lỗi người nhận được liên kết chia sẻ không xem được nội dung Tour

2026-06-16 09:54:32 +07:00
parent 63da413b3c
commit 302a82e887
7 changed files with 217 additions and 183 deletions
@@ -1,88 +1,105 @@
 import React, { useState, useEffect } from 'react';
-import { LandingPage } from '@/pages/LandingPage';
-import { TourDetailPage } from '@/pages/TourDetailPage';
-import { ExploreMap } from '@/pages/ExploreMap';
-import { SignupPage } from '@/pages/SignupPage';
-import { useTourStore } from '@/store/useTourStore';
+import { LandingPage } from './pages/LandingPage';
+import { ExploreMap } from './pages/ExploreMap';
+import { TourDetailPage } from './pages/TourDetailPage';
+import { SignupPage } from './pages/SignupPage';
+import { useTourStore } from './store/useTourStore';
+
+function App() {
+  const params = new URLSearchParams(window.location.search);
+  const viewTourId = params.get('viewTour');

-const App = () => {
-  type View = 'landing' | 'explore' | 'detail' | 'signup';
-  const [view, setView] = useState<View>('landing');
-  const [isInitialSetup, setIsInitialSetup] = useState(false);
  const [user, setUser] = useState<any>(null);
-  const [isUserLoaded, setIsUserLoaded] = useState(false); // Trạng thái để biết user đã được load từ localStorage chưa
+  const [currentPage, setCurrentPage] = useState<'landing' | 'explore' | 'tourDetail' | 'signup'>(viewTourId ? 'tourDetail' : 'landing');
+  const [currentTourId, setCurrentTourId] = useState<string | null>(viewTourId);
+  const [isPublicTourView, setIsPublicTourView] = useState(!!viewTourId);
+
+  // Lấy action từ store
  const fetchTour = useTourStore(state => state.fetchTour);
+  const fetchPublicTourDetails = useTourStore(state => state.fetchPublicTourDetails);

  useEffect(() => {
-    // Khôi phục phiên đăng nhập từ localStorage
-    const savedUser = localStorage.getItem('user');
-    if (savedUser) {
-      const parsedUser = JSON.parse(savedUser);
-      setUser(parsedUser);
+    const params = new URLSearchParams(window.location.search);
+    const viewTourId = params.get('viewTour');
+
+    if (viewTourId) {
+      // Không gọi replaceState ngay để tránh mất ID khi component re-render hoặc refresh
+    } else {
+      // Kiểm tra đăng nhập bình thường nếu không có tham số viewTour
+      const token = localStorage.getItem('token');
+      const storedUser = localStorage.getItem('user');
+      if (token && storedUser) {
+        try {
+          setUser(JSON.parse(storedUser));
+          setCurrentPage('explore'); // Chuyển đến bản đồ khám phá nếu đã đăng nhập
+        } catch (e) {
+          console.error("Lỗi khi phân tích dữ liệu người dùng từ localStorage", e);
+          localStorage.removeItem('token');
+          localStorage.removeItem('user');
+          setCurrentPage('landing'); // Quay về trang Landing nếu dữ liệu lỗi
+        }
+      } else {
+        setCurrentPage('landing'); // Quay về trang Landing nếu chưa đăng nhập
+      }
    }
-    setIsUserLoaded(true); // Đánh dấu user đã được load
+  }, []); // Chỉ chạy một lần khi component mount

-    // Kiểm tra xem hệ thống đã được cài đặt chưa
-    fetch(`/api/v1/auth/status`)
-      .then(res => res.ok ? res.json() : Promise.reject())
-      .then(data => setIsInitialSetup(!!data.isInitialSetup))
-      .catch(() => setIsInitialSetup(false));
-  }, []); // Chạy một lần khi component mount
-
-  // Effect để xử lý chuyển hướng nếu user đã đăng nhập và đang ở trang landing
-  useEffect(() => {
-    if (isUserLoaded && user && view === 'landing') {
-      setView('explore');
-    }
-  }, [isUserLoaded, user, view]);
-
-  const handleLoginSuccess = (userData: any) => {
-    setUser(userData);
+  const handleLoginSuccess = (loggedInUser: any) => {
+    setUser(loggedInUser);
+    setCurrentPage('explore');
  };

  const handleLogout = () => {
-    localStorage.removeItem('user');
    localStorage.removeItem('token');
+    localStorage.removeItem('user');
    setUser(null);
-    setView('landing');
+    setCurrentPage('landing');
  };

-  return (
-    <div className="app-container">
-      {view === 'landing' && (
-        <LandingPage 
-          isInitialSetup={isInitialSetup}
-          onContinue={() => setView('explore')} 
-          onGoToSignup={() => setView('signup')} 
-          onGoToMap={() => setView('explore')}
-          onLoginSuccess={handleLoginSuccess}
-        />
-      )}
+  const handleViewTour = (tourId: string) => {
+    setCurrentTourId(tourId);
+    setIsPublicTourView(false); // Không phải chế độ công khai nếu đến từ bản đồ khám phá
+    setCurrentPage('tourDetail');
+  };

-      {view === 'signup' && (
-        <SignupPage 
-          onBack={() => setView('landing')} 
-          onSuccess={() => setView('landing')} 
-        />
-      )}
-      
-      {view === 'explore' && (
-        <ExploreMap 
-          onBack={() => setView('landing')} 
-          onLogout={user ? handleLogout : undefined}
-          user={user}
-          onViewTour={(id) => {
-            fetchTour(id);
-            setView('detail');
-          }}
-        />
-      )}
+  const handleBackFromTourDetail = () => {
+    setCurrentTourId(null);
+    setIsPublicTourView(false);
+    // Quay về trang khám phá nếu đã đăng nhập, ngược lại quay về Landing
+    if (user) {
+      setCurrentPage('explore');
+    } else {
+      setCurrentPage('landing');
+    }
+  };

-      {view === 'detail' && (
-        <TourDetailPage onBack={() => setView('explore')} />
-      )}
-    </div>
-  );
-};
+  const handleBackFromSignup = () => {
+    setCurrentPage('landing');
+  };
+
+  const handleSignupSuccess = () => {
+    setCurrentPage('landing'); // Quay về trang Landing sau khi đăng ký thành công
+  };
+
+  if (currentPage === 'tourDetail') {
+    return (
+      <TourDetailPage
+        tourId={currentTourId!} // tourId được đảm bảo không null ở đây
+        onBack={handleBackFromTourDetail}
+        isPublicView={isPublicTourView}
+      />
+    );
+  }
+
+  if (currentPage === 'explore') {
+    return <ExploreMap onBack={handleBackFromTourDetail} onLogout={handleLogout} user={user} onViewTour={handleViewTour} />;
+  }
+
+  if (currentPage === 'signup') {
+    return <SignupPage onBack={handleBackFromSignup} onSuccess={handleSignupSuccess} />;
+  }
+
+  return <LandingPage onContinue={() => setCurrentPage('explore')} onGoToSignup={() => setCurrentPage('signup')} onGoToMap={() => setCurrentPage('explore')} onLoginSuccess={handleLoginSuccess} isInitialSetup={false} />;
+}

 export default App;