Refactor NewChatForm for improved readability
Reformatted code in NewChatForm.tsx for better readability and maintainability, including consistent spacing, line breaks, and minor style adjustments. No functional changes were made.
This commit is contained in:
@@ -1,8 +1,14 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
@@ -29,7 +35,9 @@ export default function NewChatForm() {
|
||||
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<
|
||||
{ _id: string; name: string }[]
|
||||
>([]);
|
||||
const [selectedStore, setSelectedStore] = useState<string>("");
|
||||
const [selectedUser, setSelectedUser] = useState<User | null>(null);
|
||||
|
||||
@@ -40,13 +48,13 @@ export default function NewChatForm() {
|
||||
|
||||
return axios.create({
|
||||
baseURL: process.env.NEXT_PUBLIC_API_URL,
|
||||
headers: { Authorization: `Bearer ${authToken}` }
|
||||
headers: { Authorization: `Bearer ${authToken}` },
|
||||
});
|
||||
};
|
||||
|
||||
// Parse URL parameters for buyerId and fetch user details if present
|
||||
useEffect(() => {
|
||||
const buyerIdParam = searchParams.get('buyerId');
|
||||
const buyerIdParam = searchParams.get("buyerId");
|
||||
if (buyerIdParam) {
|
||||
setBuyerId(buyerIdParam);
|
||||
// We'll fetch user details after stores are loaded
|
||||
@@ -90,7 +98,9 @@ export default function NewChatForm() {
|
||||
|
||||
try {
|
||||
setSearching(true);
|
||||
const response = await authAxios.get(`/chats/search/users?query=${encodeURIComponent(query)}&storeId=${vendorStores[0]._id}`);
|
||||
const response = await authAxios.get(
|
||||
`/chats/search/users?query=${encodeURIComponent(query)}&storeId=${vendorStores[0]._id}`,
|
||||
);
|
||||
setSearchResults(response.data);
|
||||
} catch (error) {
|
||||
console.error("Error searching users:", error);
|
||||
@@ -127,13 +137,16 @@ export default function NewChatForm() {
|
||||
|
||||
try {
|
||||
// Get vendor profile first
|
||||
const vendorResponse = await authAxios.get('/auth/me');
|
||||
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);
|
||||
console.error(
|
||||
"Vendor ID not found in profile response:",
|
||||
vendorResponse.data,
|
||||
);
|
||||
toast.error("Could not retrieve vendor information");
|
||||
return;
|
||||
}
|
||||
@@ -147,18 +160,25 @@ export default function NewChatForm() {
|
||||
if (storeResponse.data.length > 0) {
|
||||
setSelectedStore(storeResponse.data[0]._id);
|
||||
}
|
||||
} else if (storeResponse.data && typeof storeResponse.data === 'object' && storeResponse.data._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);
|
||||
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');
|
||||
const buyerIdParam = searchParams.get("buyerId");
|
||||
if (buyerIdParam) {
|
||||
fetchUserById(buyerIdParam);
|
||||
}
|
||||
@@ -203,7 +223,7 @@ export default function NewChatForm() {
|
||||
const response = await authAxios.post("/chats/create", {
|
||||
buyerId,
|
||||
storeId: storeId,
|
||||
initialMessage: initialMessage.trim() || undefined
|
||||
initialMessage: initialMessage.trim() || undefined,
|
||||
});
|
||||
|
||||
if (response.data.chatId) {
|
||||
@@ -300,7 +320,9 @@ export default function NewChatForm() {
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
This is the customer's Telegram ID or username. You can search for them above or ask them to use the /myid command in your Telegram bot.
|
||||
This is the customer's Telegram ID or username. You can search for
|
||||
them above or ask them to use the /myid command in your Telegram
|
||||
bot.
|
||||
</p>
|
||||
|
||||
{buyerId && !searchQuery && (
|
||||
@@ -332,7 +354,10 @@ export default function NewChatForm() {
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading || !buyerId || vendorStores.length === 0}>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading || !buyerId || vendorStores.length === 0}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<RefreshCw className="mr-2 h-4 w-4 animate-spin" />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"commitHash": "74f3a2c",
|
||||
"buildTime": "2026-01-05T21:55:11.573Z"
|
||||
"commitHash": "b1e486c",
|
||||
"buildTime": "2026-01-05T21:59:27.052Z"
|
||||
}
|
||||
Reference in New Issue
Block a user