Merge pull request #33 from DushanSenadheera/dev

connect api and client

client/package.json

@@ -17,6 +17,7 @@
     "axios": "^1.6.8",
     "dotenv": "^16.4.5",
     "embla-carousel-react": "^7.1.0",
+    "query-string": "^9.0.0",
     "react": "^18.2.0",
     "react-awesome-reveal": "^4.2.8",
     "react-dom": "^18.2.0"
@@ -34,7 +35,7 @@
     "postcss": "^8.4.33",
     "postcss-preset-mantine": "^1.13.0",
     "postcss-simple-vars": "^7.0.1",
-    "react-router-dom": "^6.22.0",
+    "react-router-dom": "^6.23.0",
     "sass": "^1.69.5",
     "typescript": "^5.2.2",
     "vite": "^5.0.8"

client/src/pages/Budget/Budget.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useLocation } from "react-router-dom";
 import "./budget.scss";
 import { Link } from "react-router-dom";
 import { TextInput } from "@mantine/core";
@@ -10,6 +11,10 @@ export default function Budget() {
   const handleData = (e: React.ChangeEvent<HTMLInputElement>) => {
     setBudget(Number(e.target.value));
   }
+
+  const location = useLocation();
+  const duration = location.search;
+
   return (
     <div className="budget">
       <div className="budget-img">
@@ -29,7 +34,10 @@ export default function Budget() {
             type="number"
           />
         </form>
-        <Link to='/interests'><button className="next secondary-btn">Next</button></Link>
+        <Link to={{
+            pathname: "/interests",
+            search: `${duration}&budget=${budget}`
+        }}><button className="next secondary-btn">Next</button></Link>
       </div>
     </div>
   );

client/src/pages/Destination/Destination.tsx

@@ -11,14 +11,17 @@ export default function Destination() {
   const handleData = (e: React.ChangeEvent<HTMLInputElement>) => {
     setDestination(e.target.value);
   }
- 
+
   return (
     <UserInputLayout bg={bg}>
       <form>
         <h1>Destination</h1>
         <TextInput onChange={handleData} label="Enter your destination" value={destination} withAsterisk placeholder="City Name" />
       </form>
-      <Link to="/duration">
+      <Link to={{
+        pathname: "/duration",
+        search: `?destination=${destination}`
+      }}>
         <button className="next secondary-btn">Next</button>
       </Link>
     </UserInputLayout>

client/src/pages/Duration/Duration.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useLocation } from "react-router-dom";
 import "./Duration.scss";
 import { Link } from "react-router-dom";
 import { NumberInput } from "@mantine/core";
@@ -10,8 +11,11 @@ export default function Duration() {
   const handleData = (e: React.ChangeEvent<HTMLInputElement>) => {
     setDuration(Number(e.target.value));
   }
-  console.log(Duration)
 
+  const location = useLocation();
+  const destination = location.search;
+
+
   return (
     <div className="duration">
       <div className="duration-img">
@@ -31,7 +35,10 @@ export default function Duration() {
               min={1}
             />
         </form>
-        <Link to='/budget'><button className="next secondary-btn">Next</button></Link>
+        <Link to={{
+            pathname: "/budget",
+            search: `${destination}&duration=${Duration}`
+        }}><button className="next secondary-btn">Next</button></Link>
       </div>
     </div>
   );

client/src/pages/Interests/Interests.tsx

@@ -1,17 +1,22 @@
 import { useState } from "react";
+import { useLocation } from "react-router-dom";
 import "./Interests.scss";
 import { Link } from "react-router-dom";
 import { Chip  } from "@mantine/core";
 import bg4 from "../../assets/bg4.png";
 
-export default function interests() {
+export default function Interests() {
 
   const [selectedInterests, setSelectedInterests] = useState([]);
 
   const handleChipClick = (interest) => {
     setSelectedInterests([...selectedInterests, interest]);
   };
   console.log(selectedInterests)
+
+  const location = useLocation();
+  const budget = location.search;
+
   return (
     <div className="interests">
       <div className="interests-img">
@@ -32,7 +37,10 @@ export default function interests() {
             <Chip onClick={() => handleChipClick("Viewpoints")} color="black">Viewpoints</Chip>
           </div>
         </form>
-        <Link to='/results'><button className="next secondary-btn">Next</button></Link>
+        <Link to={{
+            pathname: "/results",
+            search: `${budget}&interests=${selectedInterests}`
+        }}><button className="next secondary-btn">Next</button></Link>
       </div>
     </div>
   );

client/src/pages/Results/Results.tsx

@@ -1,4 +1,6 @@
 import "./Results.scss";
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
 import { Accordion } from "@mantine/core";
 import { useEffect, useState } from "react";
 import axios from "axios";
@@ -27,6 +29,9 @@ const groceries = [
   },
 ];
 
+
+
+
 export default function Results() {
   const items = groceries.map((item) => (
     <Accordion.Item key={item.value} value={item.value}>
@@ -43,12 +48,18 @@ export default function Results() {
   ));
   const [loading, setLoading] = useState(true);
 
+
+
   useEffect(() => {
     axios
-      .get("http://localhost:3000/api/location")
+      .post("http://localhost:8000/api/location", {
+        location: result.destination,
+        budget: result.budget,
+        duration: result.duration,
+        interests: result.interests,
+      })
       .then(function (res) {
-        const locations = res.data.location;
-        console.log(locations);
+        console.log(res.data);
         setLoading(false);
       })
       .catch(function (error) {
@@ -57,6 +68,10 @@ export default function Results() {
       });
   }, []);
 
+  const location = useLocation();
+const result  = queryString.parse(location.search);
+  console.log(result)
+
   if (loading) {
     return <Loading />;
   } else {

model/src/location.py

@@ -87,9 +87,9 @@ def recommend_locations(user_input_location, user_input_categories, user_input_b
 
 # Get user input
 user_input_location = sys.argv[1]
-user_input_category = sys.argv[2] # List of categories
-user_input_budget = sys.argv[3]  # Budget in dollars
-user_input_days = sys.argv[4]  # Number of days
+user_input_category =  sys.argv[4] # List of categories
+user_input_budget = int(sys.argv[2])  # Budget in dollars
+user_input_days = int(sys.argv[3]) # Number of days
 
 # Recommend locations based on the user's input
 recommendations = recommend_locations(user_input_location, user_input_category, user_input_budget, user_input_days)
@@ -98,10 +98,10 @@ def recommend_locations(user_input_location, user_input_categories, user_input_b
 for i, day in enumerate(recommendations):
     recommendations_list.append({
         "Day": i + 1,
-        "Locations": day.to_dict('records')
+        "Locations": day.to_dict('records'),
         })
 
 # Print the list as a JSON array
-print(json.dumps(recommendations_list))
+print(json.dumps(recommendations_list,))
 
 

server/index.js

@@ -10,6 +10,7 @@ const locationRoute = require('./routes/locationRoute.js');
 
 app.use(cors({origin: '*',}));
 app.use(bodyParser.urlencoded({ extended: true }));
+app.use(bodyParser.json());
 app.use(express.json());
 
 app.use('/', foodRoute)