useing reusable hook

src/components/pages/newTrade.js

@@ -8,31 +8,8 @@ import TradeTypeToggle from '../molecules/TradeTypeToggle';
 import PreviewModal from '../organisms/PreviewModal';
 import { route } from 'preact-router';
 import StockSearch from '../molecules/StockSearch';
+import useLLM from '../../hooks/useLLM';
 
-const mockLLMCall = (formData) => {
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      // Simulate success/failure randomly
-      const isSuccess = Math.random() > 0.2; // 80% chance of success
-
-      if (isSuccess) {
-        const response = `
-**Stock:** ${formData.stock}
-**Name:** ${formData.stockName}
-**Type:** ${formData.type.toUpperCase()}
-**Entry Price:** ${formData.price}
-**Stop Loss:** ${formData.stopLoss}
-**Targets:** ${formData.target}
-**Time Period:** ${formData.timePeriod}
-**RA Notes:** This is a test note generated by the LLM. It provides a brief analysis of the trade.
-`;
-        resolve(response);
-      } else {
-        reject(new Error('Failed to generate preview. Please try again.'));
-      }
-    }, 1500); // 1.5 second delay
-  });
-};
 
 const NewTradePage = () => {
   // Context
@@ -62,12 +39,18 @@ const NewTradePage = () => {
 
   //logic state
   const [wordCount, setWordCount] = useState(0);
-  const [showPreview, setShowPreview] = useState(false);
-  const [previewLoading, setPreviewLoading] = useState(false);
-  const [llmResponse, setLlmResponse] = useState('');
-  const [submitLoading, setSubmitLoading] = useState(false);
 
 
+  const { 
+    showPreview, 
+    setShowPreview,
+    previewLoading,
+    submitLoading, 
+    llmResponse,
+    handlePreview,
+    handleSubmit 
+  } = useLLM();
+
   // Validation functions
   const validateField = (name, value) => {
     switch (name) {
@@ -130,6 +113,22 @@ const NewTradePage = () => {
 
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
+  }
+
+  const handlePreviewClick = async () => {
+    if (!validateForm()) return;
+    const tradeData = setTradeData();
+    await handlePreview(tradeData);
+  };
+
+
+  const handleSubmitClick = async () => {
+    if (!validateForm()) return;
+    const tradeData = setTradeData();
+    await handleSubmit(tradeData, () => {
+      addTrade(tradeData);
+      route('/');
+    });
   };
 
   const handleFieldChange = (field, value) => {
@@ -188,23 +187,7 @@ const NewTradePage = () => {
     };
   };
 
-  const handlePreview = async () => {
-    if (!validateForm()) return;
 
-    setShowPreview(true);
-    setPreviewLoading(true);
-    setLlmResponse('');
-
-    try {
-      const response = await mockLLMCall(setTradeData()); // Call setTradeData here
-      setLlmResponse(response);
-    } catch (error) {
-      console.error(error);
-      setLlmResponse('Error: ' + error.message);
-    } finally {
-      setPreviewLoading(false);
-    }
-  };
 
   // Clipboard copy function
   const copyToClipboard = (text) => {
@@ -221,24 +204,6 @@ const NewTradePage = () => {
   };
 
   // Form submission
-  const handleSubmit = async () => {
-    if (!validateForm()) return;
-    setSubmitLoading(true);
-
-    try {
-      const tradeData = setTradeData(); // Call setTradeData here
-      const response = await mockLLMCall(tradeData);
-
-      addTrade(tradeData);
-      copyToClipboard(response);
-      route('/');
-    } catch (error) {
-      console.error('Error submitting trade:', error);
-    } finally {
-      setSubmitLoading(false);
-      setShowPreview(false);
-    }
-  };
 
 
   // Calculate form completion for button state
@@ -407,7 +372,7 @@ const NewTradePage = () => {
 
               {validFields === requiredFields.length && (
                 <button
-                  onClick={handlePreview}
+                  onClick={handlePreviewClick}
                   class="absolute right-full pr-1 top-1/3 -translate-y-1/2"
                 >
                   <Eye class="h-5 w-5 text-gray-500" />
@@ -418,7 +383,7 @@ const NewTradePage = () => {
                 type={type.toLowerCase()}
                 totalFields={requiredFields.length}
                 validFields={validFields}
-                onClick={handleSubmit}
+                onClick={handleSubmitClick}
               >
                 <div class="flex items-center justify-center gap-2">
                   Post <Send class="h-4 w-4" />