Merge pull request #47 from Ammar-tcd/Dan-Frontend-Backend-Integration

Dan frontend backend integration

Backend/backend.py

@@ -3,6 +3,7 @@
 import requests 
 import json 
 import os 
+import sqlite3
 
 link_lookup_table = {"Laptops and 2-in-1 PC": "https://www.dell.com/en-ie/shop/laptop-computers-2-in-1-pcs/sc/laptops", 
                     "XPS": "https://www.dell.com/en-ie/shop/laptop-computers-2-in-1-pcs/sr/laptops/xps-laptops", 
@@ -28,9 +29,17 @@
                     }
 
 app = Flask(__name__)
+#  after run create_db.py, the database is created 
+# conn = sqlite3.connect('eneities.db')
+# cursor = conn.cursor()
+# command = 'insert into entity (Entity_Name,URL,ImagePath) VALUES (Entity_Name,URLString,ImagePath_String)'
+# cursor.execute(command)
+# cursor.close()
+# conn.close()
 
 api_key = os.environ.get("API_KEY")
-
+
+
 headers = { 
     "Content-Type": "application/json",   
     "Ocp-Apim-Subscription-Key": api_key  
@@ -58,6 +67,7 @@ def start_task():
     if response.status_code == 202:
         return {"job":get_url}
     else:
+        print(response.text)
         return Response(status=400,response=response.json())
 
 @app.route("/get-task",methods=["GET"])
@@ -79,7 +89,7 @@ def get_task():
         links = []
         for category in categories:
             if category in link_lookup_table.keys():
-                links.append({category:link_lookup_table[category]})
+                links.append({"category":category,"link":link_lookup_table[category]})
         return {"category_links":links}
     elif response.status_code == 200:
         return Response(status=202,response={"response-status":response_status})

Backend/create_db.py

@@ -0,0 +1,9 @@
+import sqlite3
+
+conn = sqlite3.connect('entities.db')
+cursor = conn.cursor()
+
+command1 = 'create table entity (Entity_Name text Primary Key, URL text, ImagePath text)'
+cursor.execute(command1)
+
+conn.commit()

Frontend/app/SPL/src/App.tsx

@@ -1,41 +1,69 @@
-import TextBox from "./TextBox";
 import "./App.css";
 //import Sidebar from "./Components/SideBar";
 //import Product from "./Components/ProductBar";
-import { SetStateAction, useState } from "react";
+import { useState, } from "react";
+import "./styles.css"
 import SideBar3 from "./SideBar3";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 function App() {
-  const [submittedText, setSubmittedText] = useState("");
+  const [inputText, setInputText] = useState("");
+  const [responseData,setResponseData] = useState([]);
 
-  const handleDisplayText = (text: SetStateAction<string>) => {
-    setSubmittedText(text);
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputText(event.target.value);
   };
 
+  function handleTextSubmit (text:string) {
+    fetch("http://127.0.0.1:5000/start-task",{
+      method:"POST",
+      headers:{
+        "Content-Type":"application/json"
+      },
+      body:JSON.stringify({"text":text})
+    })
+    .then((response) => {return response.json()}).then((data) => {
+      return new Promise((resolve) => {
+        const callback = () => { 
+            fetch(`http://127.0.0.1:5000/get-task?job=${data.job}`)
+            .then((res) => {
+                if (res.status === 200){
+                    resolve(res)
+                }
+                else{setTimeout(callback,1000)}  
+            })
+        }
+        callback()
+      })
+    })
+    .then((res:any) => {return res.json()})
+    .then((data) => {console.log(data);setResponseData(data.category_links)})
+    .catch(err => console.error(err));
+  }
   return (
     <>
+      <div className="mb-3">
+      <label htmlFor="exampleFormControlInput1" className="form-label">
+        Enter Text
+      </label>
+      <input
+        type="Text"
+        className="form-control"
+        id="exampleFormControlInput1"
+        placeholder="E.G. Docking Station"
+        value={inputText}
+        onChange={handleChange}
+      />
+      <button className="btn btn-primary" onClick={(event) => {event.preventDefault();handleTextSubmit(inputText)}}>
+        Submit
+      </button>
+    </div>
       <div>
-        <TextBox displayText={handleDisplayText} />
         {/* Display the submitted text }*/}
-        {submittedText && <div>Submitted Text: {submittedText}</div>}
-        {/*<Product
-          x={0}
-          y={20}
-          width={150}
-          height={625}
-          imageSrc={"./xps2Standard.jpg"}
-          onMouseOver={console.log}
-          onMouseOut={console.log}
-          hh
-        />*/}
+        {inputText && <div>Submitted Text: {inputText}</div>}
+      </div>
+      <div>
+        <SideBar3 responseData={responseData}></SideBar3>
       </div>
-      <Router>
-        <SideBar3 />
-        <Routes>
-          <Route path="/" />
-        </Routes>
-      </Router>
     </>
   );
 }

Frontend/app/SPL/src/SideBar3.tsx

@@ -1,27 +1,25 @@
 
 import { Link } from "react-router-dom";
-import { SideBar3Data } from "./SideBar3Data";
+//import { SideBar3Data } from "./SideBar3Data";
 import "./styles.css"
 
-function SideBar3() {
+function SideBar3({ responseData }:any) {
   return (
     <div className="SideBarDesign">
       <ul className="nav-menu-items">
-        {SideBar3Data.map((item, index) => 
+        {responseData.map((item:any, index:number) => 
           {return (
-            <div key={index} className={item.className}>
-                <Link to={item.path}>
+            <div key={index} className="nav-text">
+              <text fontSize={12}>{item.category}</text>
+                <Link to={item.link}>
                   <div className="ImageContainer">
                     <img
-                      src={item.image1}
+                      src="./alienware.jpg"
                       alt="Image"
                       width="140px"
                       height="100px"
                     />
                   </div>
-                  {/* {<BarItems>
-                    <span> {item.title} </span>
-          </BarItems>} */}
                 </Link>
             </div>
           )})}

Frontend/app/SPL/src/main.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <BrowserRouter><React.StrictMode>
+  <App />
+</React.StrictMode></BrowserRouter>
+
 )

Frontend/app/SPL/src/styles.css

@@ -12,6 +12,10 @@
   overflow-y: auto; /* Added to enable vertical scrolling */
 }
 
+.form-label{
+  padding: 0px 8px;
+}
+
 .BarText {
   padding: 8px 0px;
   list-style-type: none;