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:
g
2026-01-05 23:01:58 +00:00
parent b4a34da4e8
commit 2994de2fe2
2 changed files with 71 additions and 46 deletions

View File

@@ -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" />

View File

@@ -1,4 +1,4 @@
{
"commitHash": "74f3a2c",
"buildTime": "2026-01-05T21:55:11.573Z"
"commitHash": "b1e486c",
"buildTime": "2026-01-05T21:59:27.052Z"
}