Use environment variable

Co-authored-by: Ezequiel Bellver <ebellver@itba.edu.ar>
Co-authored-by: Juan Barmasch <jbarmasch@itba.edu.ar>

bsition/frontend/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    env: {
+      API_URL: 'http://localhost:8000',
+    },
+  }

bsition/frontend/src/components/Sidebar.tsx

@@ -31,7 +31,7 @@ const Sidebar = () => {
     useEffect(() => {
         if (token) {
             const fetchData = async () => {
-                const res = await fetch("http://localhost:8000/api/documents", {
+                const res = await fetch(process.env.API_URL + "/api/documents", {
                     method: "GET",
                     headers: {
                         'Authorization': `Bearer ${token}`
@@ -122,7 +122,7 @@ const Sidebar = () => {
     const handleSubmit = async (event) => {
         event.preventDefault()
 
-        const res = await fetch("http://localhost:8000/api/token", {
+        const res = await fetch(process.env.API_URL + "/api/token", {
             method: "DELETE",
             headers: {
                 'Authorization': `Bearer ${token}`

bsition/frontend/src/pages/create-document.tsx

@@ -24,7 +24,7 @@ export default function CreateDocument() {
 
         const JSONdata = JSON.stringify(data)
 
-        const res = await fetch("http://localhost:8000/api/documents", {
+        const res = await fetch(process.env.API_URL + "/api/documents", {
             method: "POST",
             headers: {
                 'Content-Type': 'application/json',

bsition/frontend/src/pages/documents/[id].tsx

@@ -26,7 +26,7 @@ export default function Document() {
     useEffect(() => {
         if (token && router.query.id) {
             const fetchData = async () => {
-                const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}`, {
+                const res = await fetch(`${process.env.API_URL}/api/documents/${router.query.id}`, {
                     method: "GET",
                     headers: {
                         'Authorization': `Bearer ${token}`
@@ -46,7 +46,7 @@ export default function Document() {
     useEffect(() => {
         if (token && router.query.id) {
             const interval = setInterval(() => {
-                fetch(`http://localhost:8000/api/documents/${router.query.id}`, {
+                fetch(`${process.env.API_URL}/api/documents/${router.query.id}`, {
                     method: 'PUT',
                     body: `{"data": "${text.replace(/\n/g, "\\n")}"}`,
                     headers: {
@@ -86,7 +86,7 @@ export default function Document() {
 
     let access = router.query.id + "/access"
     const deleteDoc = async () => {
-        const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}`, {
+        const res = await fetch(`${process.env.API_URL}/api/documents/${router.query.id}`, {
             method: "DELETE",
             headers: {
                 'Authorization': `Bearer ${token}`
@@ -100,7 +100,7 @@ export default function Document() {
     };
     const publicOrPrivate = async () => {
         if (!publicMode) {
-            const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}`, {
+            const res = await fetch(`${process.env.API_URL}/api/documents/${router.query.id}`, {
                 method: "PUT",
                 headers: {
                     'Content-type': 'application/json',
@@ -113,7 +113,7 @@ export default function Document() {
                 setPublicMode(() => true)
             }
         } else {
-            const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}`, {
+            const res = await fetch(`${process.env.API_URL}/api/documents/${router.query.id}`, {
                 method: 'PUT',
                 headers: {
                     'Content-type': 'application/json',

bsition/frontend/src/pages/documents/[id]/access.tsx

@@ -17,7 +17,7 @@ export default function Document() {
     useEffect(() => {
         if (token && router.query.id) {
             const fetchData = async () => {
-                const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}/access`, {
+                const res = await fetch(`${process.env.API_URL}/api/documents/${router.query.id}/access`, {
                     method: "GET",
                     headers: {
                         'Authorization': `Bearer ${token}`
@@ -54,7 +54,7 @@ export default function Document() {
 
         console.log(JSONdata)
 
-        const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}/access`, {
+        const res = await fetch(`${process.env.API_URL}/api/documents/${router.query.id}/access`, {
             method: "POST",
             headers: {
                 'Content-Type': 'application/json',
@@ -76,7 +76,7 @@ export default function Document() {
 
         const JSONdata = JSON.stringify(data)
 
-        const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}/access`, {
+        const res = await fetch(`${process.env.API_URL}/api/documents/${router.query.id}/access`, {
             method: "DELETE",
             headers: {
                 'Content-Type': 'application/json',
@@ -92,7 +92,7 @@ export default function Document() {
     const handleSubmit = async (event) => {
         event.preventDefault()
 
-        const aux = await fetch(`http://localhost:8000/api/users?` + new URLSearchParams(
+        const aux = await fetch(`${process.env.API_URL}/api/users?` + new URLSearchParams(
             {user: event.target.name.value}
         ), {
             method: "GET",
@@ -110,7 +110,7 @@ export default function Document() {
 
         const JSONdata = JSON.stringify(data)
 
-        const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}/access`, {
+        const res = await fetch(`${process.env.API_URL}/api/documents/${router.query.id}/access`, {
             method: "POST",
             headers: {
                 'Content-Type': 'application/json',

bsition/frontend/src/pages/index.tsx

@@ -19,6 +19,8 @@ export default function Home() {
         return <></>
     }
 
+    console.log(process.env.API_URL)
+
     return <Layout>
         <div className="flex flex-col justify-center h-full w-full align-center items-center">
             <div style={{width: "fit-content"}}>

bsition/frontend/src/pages/login.tsx

@@ -12,12 +12,12 @@ export default function Login() {
         formData.append("username", event.target.username.value)
         formData.append("password", event.target.password.value)
 
-        const res = await fetch("http://localhost:8000/api/token", {method: 'POST', body: formData})
+        const res = await fetch(process.env.API_URL + "/api/token", {method: 'POST', body: formData})
         const json = await res.json();
 
         if (res.status == 202) {
             localStorage.setItem("token", json["access_token"])
-            const res = await fetch("http://localhost:8000/api/users/me", {
+            const res = await fetch(process.env.API_URL + "/api/users/me", {
                 method: 'GET',
                 headers: {
                     'Authorization': `Bearer ${json["access_token"]}`

bsition/frontend/src/pages/search.tsx

@@ -20,7 +20,7 @@ export default function Search() {
     const handleSubmit = async (event) => {
         event.preventDefault()
 
-        const res = await fetch("http://localhost:8000/api/documents?" + new URLSearchParams(
+        const res = await fetch(process.env.API_URL + "/api/documents?" + new URLSearchParams(
             {query: "*" + event.target.search.value + "*"}
         ), {
             method: "GET",