changing to use .envariable for backend link

abecerrilsalas · Aug 7, 2024 · 89ac588 · 89ac588
1 parent cb9b8d1
commit 89ac588
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 821 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.2",
+    "dotenv": "^16.4.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.25.1",

diff --git a/src/About.js b/src/About.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
+const apiUrl = process.env.REACT_APP_API_URL;
+console.log("API URL:", apiUrl);
+
 const About = () => {
-    const navigate = useNavigate();
+    // const navigate = useNavigate();
 
     const handleAuthorize = () => {
         // Redirect to backend authorization endpoint
-        window.location.href = "http://127.0.0.1:5000/auth/login";
+        window.location.href = `${apiUrl}/auth/login`;
     };
 
     return (

diff --git a/src/Home.js b/src/Home.js
@@ -4,6 +4,9 @@ import TextInput from "./TextInput";
 import Button from "./Button";
 import { useNavigate } from "react-router-dom";
 
+const apiUrl = process.env.REACT_APP_API_URL;
+console.log("API URL:", apiUrl);
+
 const Home = () => {
   const [description, setDescription] = useState("");
   const [sessionId, setSessionId] = useState(null);
@@ -12,6 +15,7 @@ const Home = () => {
   const [authorized, setAuthorized] = useState(true);
   const navigate = useNavigate();
 
+
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const sessionIdParam = urlParams.get("session_id");
@@ -34,7 +38,7 @@ const Home = () => {
     localStorage.setItem("description", description);
     try {
       const response = await axios.post(
-        `http://127.0.0.1:5000/recommend`,
+        `${apiUrl}/recommend`,
         { description },
         { params: { session_id: sessionId } }
       );
@@ -89,7 +93,7 @@ const Home = () => {
             type="button"
             label="Authorize"
             onClick={() =>
-              (window.location.href = "http://127.0.0.1:5000/auth/login")
+              (window.location.href = `${apiUrl}/auth/login`)
             }
           />
         </div>
@@ -99,202 +103,3 @@ const Home = () => {
 };
 
 export default Home;
-
-// import React, { useState, useEffect } from "react";
-// import axios from "axios";
-// import TextInput from "./TextInput";
-// import Button from "./Button";
-// import { useNavigate } from "react-router-dom";
-
-// const Home = () => {
-//   const [description, setDescription] = useState("");
-//   const [sessionId, setSessionId] = useState(null);
-//   const [loading, setLoading] = useState(false);
-//   const [error, setError] = useState(null);
-//   const [authorized, setAuthorized] = useState(true);
-//   const navigate = useNavigate();
-
-//   useEffect(() => {
-//     const urlParams = new URLSearchParams(window.location.search);
-//     const sessionIdParam = urlParams.get("session_id");
-//     if (sessionIdParam) {
-//       setSessionId(sessionIdParam);
-//     }
-
-//     const savedDescription = localStorage.getItem("description");
-//     if (savedDescription) {
-//       setDescription(savedDescription);
-//     }
-//   }, []);
-
-//   const handleInputChange = (e) => {
-//     setDescription(e.target.value);
-//   };
-
-//   const handleGetRecommendations = async () => {
-//     setLoading(true);
-//     localStorage.setItem("description", description);
-//     try {
-//       const response = await axios.post(
-//         `http://127.0.0.1:5000/recommend`,
-//         { description },
-//         { params: { session_id: sessionId } }
-//       );
-//       if (response && response.data) {
-//         if (response.data.authorized) {
-//           setError(null);
-//           setAuthorized(true);
-//           navigate("/playlist", {
-//             state: {
-//               recommendations: response.data.recommendation,
-//               spotifyLink: response.data.spotify_link,
-//             },
-//           });
-//           localStorage.removeItem("description");
-//         } else {
-//           setAuthorized(false);
-//         }
-//       } else {
-//         console.error("Unexpected response structure:", response);
-//       }
-//     } catch (error) {
-//       console.error("Error fetching recommendation:", error);
-//       setError("Error fetching recommendation. Please try again.");
-//       if (error.response && error.response.status === 401) {
-//         setAuthorized(false);
-//       }
-//     } finally {
-//       setLoading(false);
-//     }
-//   };
-
-//   return (
-//     <div>
-//       <TextInput
-//         value={description}
-//         onChange={handleInputChange}
-//         placeholder="Enter the desired song qualities or mood..."
-//       />
-//       <br />
-//       <Button
-//         type="button"
-//         label={loading ? "Loading..." : "Get Recommendations"}
-//         onClick={handleGetRecommendations}
-//         disabled={loading}
-//       />
-//       {error && <p style={{ color: "red" }}>{error}</p>}
-//       {!authorized && (
-//         <div>
-//           <p style={{ color: "red" }}>You are not authorized in Spotify.</p>
-//           <Button
-//             type="button"
-//             label="Authorize"
-//             onClick={() =>
-//               (window.location.href = "http://127.0.0.1:5000/auth/login")
-//             }
-//           />
-//         </div>
-//       )}
-//     </div>
-//   );
-// };
-
-// export default Home;
-
-// import React, { useState, useEffect } from "react";
-// import axios from "axios";
-// import TextInput from "./TextInput";
-// import Button from "./Button";
-// import { useNavigate } from "react-router-dom";
-
-// const Home = () => {
-//   const [description, setDescription] = useState("");
-//   const [sessionId, setSessionId] = useState(null);
-//   const [loading, setLoading] = useState(false);
-//   const [error, setError] = useState(null);
-//   const [authorized, setAuthorized] = useState(true);
-//   // const [setRecommendations] = useState([]);
-//   // const [setSpotifyLink] = useState(null);
-//   const navigate = useNavigate();
-
-//   useEffect(() => {
-//     const urlParams = new URLSearchParams(window.location.search);
-//     const sessionIdParam = urlParams.get("session_id");
-//     if (sessionIdParam) {
-//       setSessionId(sessionIdParam);
-//     }
-//   }, []);
-
-//   const handleInputChange = (e) => {
-//     setDescription(e.target.value);
-//   };
-
-//   const handleGetRecommendations = async () => {
-//     setLoading(true);
-//     try {
-//       const response = await axios.post(
-//         `http://127.0.0.1:5000/recommend`,
-//         { description },
-//         { params: { session_id: sessionId } }
-//       );
-//       if (response && response.data) {
-//         if (response.data.authorized) {
-//           // setRecommendations(response.data.recommendation);
-//           // setSpotifyLink(response.data.spotify_link);
-//           setError(null);
-//           setAuthorized(true);
-//           navigate("/playlist", {
-//             state: {
-//               recommendations: response.data.recommendation,
-//               spotifyLink: response.data.spotify_link,
-//             },
-//           });
-//         } else {
-//           setAuthorized(false);
-//         }
-//       } else {
-//         console.error("Unexpected response structure:", response);
-//       }
-//     } catch (error) {
-//       console.error("Error fetching recommendation:", error);
-//       setError("Error fetching recommendation. Please try again.");
-//       if (error.response && error.response.status === 401) {
-//         setAuthorized(false);
-//       }
-//     } finally {
-//       setLoading(false);
-//     }
-//   };
-
-//   return (
-//     <div>
-//       <TextInput
-//         value={description}
-//         onChange={handleInputChange}
-//         placeholder="Enter the desired song qualities or mood..."
-//       />
-//       <br />
-//       <Button
-//         type="button"
-//         label={loading ? "Loading..." : "Get Recommendations"}
-//         onClick={handleGetRecommendations}
-//         disabled={loading}
-//       />
-//       {error && <p style={{ color: "red" }}>{error}</p>}
-//       {!authorized && (
-//         <div>
-//           <p style={{ color: "red" }}>You are not authorized in Spotify.</p>
-//           <Button
-//             type="button"
-//             label="Authorize"
-//             onClick={() =>
-//               (window.location.href = "http://127.0.0.1:5000/auth/login")
-//             }
-//           />
-//         </div>
-//       )}
-//     </div>
-//   );
-// };
-
-// export default Home;