Merge pull request #60 from Capstone-Projects-2024-Spring/responsePro…

…vider_brandon

OpenAI calls from the REST API now connected to frontend and shows in the SQL section of the response box

phillygpt/src/App.js

@@ -7,27 +7,30 @@ import RepromptPage from './pages/reprompt.jsx';
 import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
 import CheckClass from './components/DarkMode/checkClass.jsx';
 import MapPage from './components/map/app.tsx';
-import { LoadingProvider } from './components/loadingCtx.jsx';
+import { LoadingProvider } from './components/contex/loadingCtx.jsx';
+import { ResponseProvider } from './components/contex/responseCtx.jsx';
 
 function App() {
 
   const isDark = CheckClass(); //This is to check for dark mode vs not
 
   return (
-    <LoadingProvider>
-      <Router>
-        <div className={`${isDark ? 'bg-darkgray' : 'bg-lm_body'} min-h-screen`}>
-          <Navbar />
-          <Routes>
-            <Route exact path="/" element={<HomePage/>} />
-            <Route path="/home" element={<HomePage/>} />
-            <Route path="/response" element={<ResponsePage/>} />
-            <Route path="/reprompt" element={<RepromptPage/>} />
-            <Route path="/map" element={<MapPage/>} />
-          </Routes>
-        </div>
-      </Router>
-    </LoadingProvider>
+    <ResponseProvider>
+      <LoadingProvider>
+        <Router>
+          <div className={`${isDark ? 'bg-darkgray' : 'bg-lm_body'} min-h-screen`}>
+            <Navbar />
+            <Routes>
+              <Route exact path="/" element={<HomePage/>} />
+              <Route path="/home" element={<HomePage/>} />
+              <Route path="/response" element={<ResponsePage/>} />
+              <Route path="/reprompt" element={<RepromptPage/>} />
+              <Route path="/map" element={<MapPage/>} />
+            </Routes>
+          </div>
+        </Router>
+      </LoadingProvider>
+    </ResponseProvider>
   );
 }
 

phillygpt/src/components/contex/responseCtx.jsx

@@ -0,0 +1,14 @@
+import React, {createContext, useState} from 'react';
+
+export const responseCtx = createContext();
+
+export const ResponseProvider = ({ children }) => {
+
+    const [responseDataSQL, setResponseDataSQL] = useState(null);
+
+    return(
+        <responseCtx.Provider value={{ responseDataSQL, setResponseDataSQL }}>
+            {children}
+        </responseCtx.Provider>
+    )
+}

phillygpt/src/components/displayArea.jsx

@@ -5,12 +5,14 @@ import Examples from './examples';
 import CheckClass from './DarkMode/checkClass';
 import Loading from './loading.jsx';
 import { useContext } from 'react';
-import { LoadingContext } from './loadingCtx.jsx';
+import { LoadingContext } from './contex/loadingCtx.jsx';
+import { responseCtx } from './contex/responseCtx.jsx';
 const DisplayArea = () => {
 
   const route = useLocation().pathname;
   const isDark = CheckClass();
   const {isLoading, setLoading} = useContext(LoadingContext); 
+  const {responseSQLData} = useContext(responseCtx);
 
   const exampleQuestions = [
     "What farmers markets will happen this weekend?",
@@ -26,6 +28,7 @@ const DisplayArea = () => {
       setLoading(false);
     }, 2000);
 
+
     // Implement more logic for when an example question is clicked
     // For now a console log is okay
     console.log(`Question clicked: ${questionText}`);
@@ -53,7 +56,7 @@ const DisplayArea = () => {
                 </div>
               ))}
             </div>
-          ) : route === '/response' && <ResponseBox />}
+          ) : route === '/response' && <ResponseBox responseSQL = {responseSQLData}/>}
         </>
       )}
       </div>

phillygpt/src/components/loading.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import {SpinningCircles} from 'react-loading-icons'
+import {SpinningCircles} from 'react-loading-icons';
+
 const Loading = () => {
     return(
         <div className="loading-container">

phillygpt/src/components/responsebox.jsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import CheckClass from './DarkMode/checkClass';
+import { responseCtx } from './contex/responseCtx';
 
 const ResponseBox = ({ response }) => {
   const isDark = CheckClass();
-
+  const getResponseSQL = useContext(responseCtx);
+  console.log(getResponseSQL);
   // Function to dynamically generate table headers based on record keys
   const generateTableHeaders = () => {
     if (!response || !Array.isArray(response) || response.length === 0) {
@@ -15,9 +17,9 @@ const ResponseBox = ({ response }) => {
 
   return (
     <div className={`response-container w-1/2 h-full ${isDark ? 'bg-gray-navbar' : 'bg-responsebg'} rounded-lg border border-gray-400 p-4 ${isDark ? 'text-white' : 'text-black'}`}>
-      {/* Dynamic Response Section for Displaying Market Data */}
+      {/* Dynamic Response Section for Displaying Data */}
       <div className="response-section mb-4">
-        <h2 className="text-xl mb-2">Market Data</h2>
+        <h2 className="text-xl mb-2">Response</h2>
         <div className={`text-display ${isDark ? 'bg-darkgray' : 'bg-responsecodebox'} p-2 rounded-lg`} style={{ maxHeight: '250px', overflow: 'auto' }}>
           {response && Array.isArray(response) && response.length > 0 ? (
             <div style={{ maxWidth: '100%', overflow: 'auto' }}>
@@ -41,7 +43,7 @@ const ResponseBox = ({ response }) => {
               </table>
             </div>
           ) : (
-            <p>Awaiting market data...</p>
+            <p>Awaiting data...</p>
           )}
         </div>
       </div>
@@ -52,7 +54,7 @@ const ResponseBox = ({ response }) => {
       <div className="sql-query-section mb-4">
         <h2 className="text-xl mb-2">SQL Query</h2>
         <div className={`text-display ${isDark ? 'bg-darkgray' : 'bg-responsecodebox'} p-2 rounded-lg`}>
-          <p>Text for SQL Query should be put here.</p>
+          <p>{getResponseSQL.responseDataSQL}</p>
         </div>
       </div>
 

phillygpt/src/components/searchbar.jsx

@@ -3,13 +3,16 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import { useContext } from 'react';
-import { LoadingContext } from './loadingCtx';
+import { LoadingContext } from './contex/loadingCtx';
+import { responseCtx } from './contex/responseCtx';
 
 const SearchBar = () => {
 
   const navigate = useNavigate();
   const [userInput, setUserInput] = useState('');
   const {setLoading} = useContext(LoadingContext);
+  const {setResponseDataSQL} = useContext(responseCtx);
+
   const handleInputChange = (event) => {
     setUserInput(event.target.value);
   };
@@ -33,6 +36,7 @@ const SearchBar = () => {
       axios.post('http://127.0.0.1:5000/process_input', {user_input : userInput})
         .then(response => {
           console.log(response.data);
+          setResponseDataSQL(response.data.OPENAI_RESPONSE);
           navigate(`/response?input=${encodeURIComponent(userInput)}`);
           setLoading(false);
         })