weewoo
This commit is contained in:
NotII
@@ -8,9 +8,8 @@ import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { ArrowLeft, Send, RefreshCw, Search, User } from "lucide-react";
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
import { getCookie } from "@/lib/client-utils";
|
||||
import { clientFetch } from "@/lib/client-utils";
|
||||
import debounce from "lodash/debounce";
|
||||
|
||||
interface User {
|
||||
@@ -18,60 +17,63 @@ interface User {
|
||||
telegramUsername: string | null;
|
||||
}
|
||||
|
||||
interface Store {
|
||||
_id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export default function NewChatForm() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
// State management
|
||||
const [buyerId, setBuyerId] = useState("");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [searchResults, setSearchResults] = useState<User[]>([]);
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [initialMessage, setInitialMessage] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingUser, setLoadingUser] = useState(false);
|
||||
const [vendorStores, setVendorStores] = useState<{ _id: string, name: string }[]>([]);
|
||||
const [vendorStores, setVendorStores] = useState<Store[]>([]);
|
||||
const [selectedStore, setSelectedStore] = useState<string>("");
|
||||
const [selectedUser, setSelectedUser] = useState<User | null>(null);
|
||||
|
||||
// Create an axios instance with auth
|
||||
const getAuthAxios = () => {
|
||||
const authToken = getCookie("Authorization");
|
||||
if (!authToken) return null;
|
||||
|
||||
return axios.create({
|
||||
baseURL: process.env.NEXT_PUBLIC_API_URL,
|
||||
headers: { Authorization: `Bearer ${authToken}` }
|
||||
});
|
||||
};
|
||||
// Loading states
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingUser, setLoadingUser] = useState(false);
|
||||
const [loadingStores, setLoadingStores] = useState(false);
|
||||
|
||||
// UI state
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
// Parse URL parameters for buyerId and fetch user details if present
|
||||
useEffect(() => {
|
||||
const buyerIdParam = searchParams.get('buyerId');
|
||||
if (buyerIdParam) {
|
||||
setBuyerId(buyerIdParam);
|
||||
// We'll fetch user details after stores are loaded
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
// Fetch vendor stores on component mount
|
||||
useEffect(() => {
|
||||
fetchVendorStores();
|
||||
}, []);
|
||||
|
||||
// Fetch user information if buyer ID changes
|
||||
useEffect(() => {
|
||||
if (buyerId && vendorStores.length > 0) {
|
||||
fetchUserById(buyerId);
|
||||
}
|
||||
}, [buyerId, vendorStores]);
|
||||
|
||||
// Fetch user information by ID
|
||||
const fetchUserById = async (userId: string) => {
|
||||
if (!userId || !vendorStores[0]?._id) return;
|
||||
|
||||
const authAxios = getAuthAxios();
|
||||
if (!authAxios) {
|
||||
toast.error("You need to be logged in");
|
||||
router.push("/auth/login");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoadingUser(true);
|
||||
try {
|
||||
const response = await authAxios.get(`/chats/user/${userId}`);
|
||||
if (response.data) {
|
||||
setSelectedUser(response.data);
|
||||
setSearchQuery(response.data.telegramUsername || `User ${userId}`);
|
||||
} else {
|
||||
// Just leave the buyerId as is without username display
|
||||
const userData = await clientFetch(`/chats/user/${userId}`);
|
||||
if (userData) {
|
||||
setSelectedUser(userData);
|
||||
setSearchQuery(userData.telegramUsername || `User ${userId}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching user:", error);
|
||||
@@ -81,17 +83,47 @@ export default function NewChatForm() {
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch vendor stores
|
||||
const fetchVendorStores = async () => {
|
||||
setLoadingStores(true);
|
||||
try {
|
||||
// Get stores
|
||||
const stores = await clientFetch('/storefront');
|
||||
|
||||
// Handle both array and single object responses
|
||||
if (Array.isArray(stores)) {
|
||||
setVendorStores(stores);
|
||||
if (stores.length > 0) {
|
||||
setSelectedStore(stores[0]._id);
|
||||
}
|
||||
} else if (stores && typeof stores === 'object' && stores._id) {
|
||||
const singleStore = [stores];
|
||||
setVendorStores(singleStore);
|
||||
setSelectedStore(stores._id);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching stores:", error);
|
||||
toast.error("Failed to load your stores");
|
||||
|
||||
// Redirect if there's a login issue
|
||||
if (error instanceof Error && error.message.includes('logged in')) {
|
||||
router.push("/auth/login");
|
||||
}
|
||||
} finally {
|
||||
setLoadingStores(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Debounced search function
|
||||
const searchUsers = debounce(async (query: string) => {
|
||||
if (!query.trim() || !vendorStores[0]?._id) return;
|
||||
|
||||
const authAxios = getAuthAxios();
|
||||
if (!authAxios) return;
|
||||
if (!query.trim() || !selectedStore) return;
|
||||
|
||||
setSearching(true);
|
||||
try {
|
||||
setSearching(true);
|
||||
const response = await authAxios.get(`/chats/search/users?query=${encodeURIComponent(query)}&storeId=${vendorStores[0]._id}`);
|
||||
setSearchResults(response.data);
|
||||
const results = await clientFetch(
|
||||
`/chats/search/users?query=${encodeURIComponent(query)}&storeId=${selectedStore}`
|
||||
);
|
||||
setSearchResults(results);
|
||||
} catch (error) {
|
||||
console.error("Error searching users:", error);
|
||||
toast.error("Failed to search users");
|
||||
@@ -115,113 +147,40 @@ export default function NewChatForm() {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
// Fetch vendor stores
|
||||
useEffect(() => {
|
||||
const fetchVendorStores = async () => {
|
||||
const authAxios = getAuthAxios();
|
||||
if (!authAxios) {
|
||||
toast.error("You must be logged in to start a chat");
|
||||
router.push("/auth/login");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Get vendor profile first
|
||||
const vendorResponse = await authAxios.get('/auth/me');
|
||||
|
||||
// Extract vendor ID properly
|
||||
const vendorId = vendorResponse.data.vendor?._id;
|
||||
|
||||
if (!vendorId) {
|
||||
console.error("Vendor ID not found in profile response:", vendorResponse.data);
|
||||
toast.error("Could not retrieve vendor information");
|
||||
return;
|
||||
}
|
||||
|
||||
// Fetch store
|
||||
const storeResponse = await authAxios.get(`/storefront`);
|
||||
|
||||
// Handle both array and single object responses
|
||||
if (Array.isArray(storeResponse.data)) {
|
||||
setVendorStores(storeResponse.data);
|
||||
if (storeResponse.data.length > 0) {
|
||||
setSelectedStore(storeResponse.data[0]._id);
|
||||
}
|
||||
} else if (storeResponse.data && typeof storeResponse.data === 'object' && storeResponse.data._id) {
|
||||
const singleStore = [storeResponse.data];
|
||||
setVendorStores(singleStore);
|
||||
setSelectedStore(storeResponse.data._id);
|
||||
} else {
|
||||
console.error("Expected store data but received:", storeResponse.data);
|
||||
setVendorStores([]);
|
||||
toast.error("Failed to load store data in expected format");
|
||||
}
|
||||
|
||||
// Now that we have the store, fetch user details if buyerId was set
|
||||
const buyerIdParam = searchParams.get('buyerId');
|
||||
if (buyerIdParam) {
|
||||
fetchUserById(buyerIdParam);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching store:", error);
|
||||
toast.error("Failed to load store");
|
||||
setVendorStores([]);
|
||||
}
|
||||
};
|
||||
|
||||
fetchVendorStores();
|
||||
}, []);
|
||||
|
||||
// Navigation handlers
|
||||
const handleBackClick = () => {
|
||||
router.push("/dashboard/chats");
|
||||
};
|
||||
|
||||
// Start new chat
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!buyerId) {
|
||||
toast.error("Please select a customer");
|
||||
if (!buyerId || !initialMessage.trim() || !selectedStore) {
|
||||
toast.error("Please fill in all required fields");
|
||||
return;
|
||||
}
|
||||
|
||||
if (vendorStores.length === 0) {
|
||||
toast.error("No store available. Please create a store first.");
|
||||
return;
|
||||
}
|
||||
|
||||
const storeId = vendorStores[0]._id;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const authAxios = getAuthAxios();
|
||||
if (!authAxios) {
|
||||
toast.error("You need to be logged in");
|
||||
router.push("/auth/login");
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await authAxios.post("/chats/create", {
|
||||
buyerId,
|
||||
storeId: storeId,
|
||||
initialMessage: initialMessage.trim() || undefined
|
||||
const response = await clientFetch('/chats', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
buyerId,
|
||||
storeId: selectedStore,
|
||||
initialMessage: initialMessage.trim()
|
||||
}),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
if (response.data.chatId) {
|
||||
toast.success("Chat created successfully!");
|
||||
router.push(`/dashboard/chats/${response.data.chatId}`);
|
||||
} else if (response.data.error === "Chat already exists") {
|
||||
toast.info("Chat already exists, redirecting...");
|
||||
router.push(`/dashboard/chats/${response.data.chatId}`);
|
||||
}
|
||||
} catch (error: any) {
|
||||
// Navigate to the new chat
|
||||
toast.success("Chat created successfully");
|
||||
router.push(`/dashboard/chats/${response._id}`);
|
||||
} catch (error) {
|
||||
console.error("Error creating chat:", error);
|
||||
|
||||
if (error.response?.status === 409) {
|
||||
toast.info("Chat already exists, redirecting...");
|
||||
router.push(`/dashboard/chats/${error.response.data.chatId}`);
|
||||
} else {
|
||||
toast.error("Failed to create chat");
|
||||
}
|
||||
toast.error("Failed to create chat. Please try again.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user