Fix backend urls

gp-sb · Dec 8, 2023 · 10999c7 · 10999c7
1 parent 920f63d
commit 10999c7
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 50 deletions.
diff --git a/Frontend/src/pages/auth.js b/Frontend/src/pages/auth.js
@@ -1,17 +1,20 @@
 // auth.js (utility file)
 
 // Import the required libraries
-import axios from 'axios';
+import axios from "axios";
 
 // Function to check if the user is authenticated based on the backend verification
 export async function isAuthenticated(token) {
   try {
     // make axios get request sending cookie.
-    const response = await axios.get('http://localhost:5000/api/verify_user', {
-      headers: {
-        Authorization: `Bearer ${token}`, // Send the JWT token in the Authorization header
-      },
-    });
+    const response = await axios.get(
+      "https://picture-perfect.azurewebsites.net/api/verify_user",
+      {
+        headers: {
+          Authorization: `Bearer ${token}`, // Send the JWT token in the Authorization header
+        },
+      }
+    );
 
     return response.data.authenticated;
   } catch (error) {
@@ -28,4 +31,4 @@ const AuthPage = () => {
   );
 };
 
-export default AuthPage;
+export default AuthPage;
diff --git a/Frontend/src/pages/create.js b/Frontend/src/pages/create.js
@@ -4,7 +4,6 @@ import Image from "next/image";
 import Cookie from "js-cookie";
 import { isAuthenticated } from "./auth";
 
-
 export default function Create() {
   const [text, setText] = useState("");
   const [url, setUrl] = useState("");
@@ -19,50 +18,58 @@ export default function Create() {
     setGenerating(true);
     setFailed(false);
     setImageAccepted(null);
-    await axios.post(
-      "http://localhost:5000/generate_image",
-      { prompt: text },
-      {
-        headers: {
-            "Authorization": `Bearer ${Cookie.get("token")}`
+    await axios
+      .post(
+        "https://picture-perfect.azurewebsites.net/generate_image",
+        { prompt: text },
+        {
+          headers: {
+            Authorization: `Bearer ${Cookie.get("token")}`,
+          },
         }
-      },
-    ).then(response => {
+      )
+      .then((response) => {
         if (response.data.output) {
           setUrl(response.data.output);
           setImageAccepted(null); // Reset the decision state when a new image is fetched
         } else if (response.data.error) {
           setFailed(true);
           console.error(response.data.error);
         }
-    }).catch((error) => {
+      })
+      .catch((error) => {
         setFailed(true);
         console.error("Error:", error);
-    }).then(() => {
+      })
+      .then(() => {
         setGenerating(false);
-    });
+      });
   };
 
   const handleAccept = async (e) => {
     e.preventDefault();
 
     setAccepting(true);
-    await axios.post("http://localhost:5000/store_image",
+    await axios
+      .post(
+        "https://picture-perfect.azurewebsites.net/store_image",
         {
-            "prompt": text,
-            "url": url
+          prompt: text,
+          url: url,
         },
         {
-            headers: {
-                "Authorization": `Bearer ${Cookie.get("token")}`
-            }
-        }).catch((error) => console.error("Error: ", error))
-        .then(() => {
-            setUrl("");
-            setAccepting(false);
-            setImageAccepted(true);
-        });
-  }
+          headers: {
+            Authorization: `Bearer ${Cookie.get("token")}`,
+          },
+        }
+      )
+      .catch((error) => console.error("Error: ", error))
+      .then(() => {
+        setUrl("");
+        setAccepting(false);
+        setImageAccepted(true);
+      });
+  };
 
   const handleReject = () => {
     setImageAccepted(false);
@@ -131,12 +138,11 @@ export default function Create() {
   );
 }
 
-
 export async function getServerSideProps(context) {
   const { req } = context;
   const token = req.cookies["token"];
 
-  if (!await isAuthenticated(token)) {
+  if (!(await isAuthenticated(token))) {
     // If the user is not authenticated, redirect them to the login page
     return {
       redirect: {

diff --git a/Frontend/src/pages/leaderboard.js b/Frontend/src/pages/leaderboard.js
@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react';
-import axios from 'axios';
-import Image from 'next/image';
+import React, { useState, useEffect, useRef } from "react";
+import axios from "axios";
+import Image from "next/image";
 
 const Leaderboard = () => {
   const [images, setImages] = useState([]);
@@ -9,7 +9,8 @@ const Leaderboard = () => {
 
   useEffect(() => {
     // Make a GET request to your Flask server to fetch the top 20 images
-    axios.get('http://localhost:5000/top_elo_images')
+    axios
+      .get("https://picture-perfect.azurewebsites.net/top_elo_images")
       .then((response) => {
         setImages(response.data);
       })
@@ -47,13 +48,17 @@ const Leaderboard = () => {
                 <Image
                   className="rounded-lg"
                   src={image.url}
-                  alt='Votable Image'
+                  alt="Votable Image"
                   width={1024}
                   height={1024}
                 />
                 <div className="absolute inset-0 flex flex-col justify-end p-4 bg-black bg-opacity-0 text-white">
-                  <p className="text-lg font-semibold drop-shadow-[1px_1px_0.5px_rgba(0,0,0,1)]">{image.creator}</p>
-                  <p className="text-gray-100 font-semibold drop-shadow-[1px_1px_0.5px_rgba(0,0,0,1)]">{image.elo}</p>
+                  <p className="text-lg font-semibold drop-shadow-[1px_1px_0.5px_rgba(0,0,0,1)]">
+                    {image.creator}
+                  </p>
+                  <p className="text-gray-100 font-semibold drop-shadow-[1px_1px_0.5px_rgba(0,0,0,1)]">
+                    {image.elo}
+                  </p>
                 </div>
               </div>
             </div>
@@ -70,11 +75,10 @@ const Leaderboard = () => {
             <button
               className="absolute top-2 right-2 text-gray-600 hover:text-gray-900"
               onClick={closeImageModal}
-            >
-            </button>
+            ></button>
             <Image
               src={selectedImage.url}
-              alt='Votable Image'
+              alt="Votable Image"
               width={800}
               height={800}
             />

diff --git a/Frontend/src/pages/login.js b/Frontend/src/pages/login.js
@@ -34,8 +34,8 @@ const Login = () => {
     try {
       console.log("try");
       const response = await axios.post(
-        "http://localhost:5000/login",
-        formData,
+        "https://picture-perfect.azurewebsites.net/login",
+        formData
       );
       console.log("response", response);
 

diff --git a/Frontend/src/pages/portfolio.js b/Frontend/src/pages/portfolio.js
@@ -13,7 +13,7 @@ export default function Portfolio() {
   useEffect(() => {
     async function fetch_portfolio() {
       await axios
-        .get("http://localhost:5000/fetch_portfolio", {
+        .get("https://picture-perfect.azurewebsites.net/fetch_portfolio", {
           headers: {
             Authorization: `Bearer ${Cookie.get("token")}`,
           },

diff --git a/Frontend/src/pages/register.js b/Frontend/src/pages/register.js
@@ -93,8 +93,8 @@ const Register = () => {
     try {
       console.log("try");
       const response = await axios.post(
-        "http://localhost:5000/register",
-        formData,
+        "https://picture-perfect.azurewebsites.net/register",
+        formData
       );
       router.push("/login");
       return response;

diff --git a/Frontend/src/pages/vote.js b/Frontend/src/pages/vote.js
@@ -5,7 +5,7 @@ import { isAuthenticated } from "./auth";
 import axios from "axios";
 import styles from "./vote.module.css";
 
-const backendUrl = "http://localhost:5000"; // Assuming your backend runs on port 5000
+const backendUrl = "https://picture-perfect.azurewebsites.net"; // Assuming your backend runs on port 5000
 
 /**
  * Calculate the new Elo rating.