From 8e553b469d28841ac1d2b4c02701a898a218caaa Mon Sep 17 00:00:00 2001 From: Raj Mane Date: Fri, 23 Jan 2026 12:18:41 +0530 Subject: [PATCH] refactor API_URL for easier development --- client/.env.example | 6 +++-- client/package-lock.json | 39 +++++++++++++++++--------------- client/src/hooks/AddContext.tsx | 5 ++-- client/src/hooks/AuthContext.tsx | 12 +++------- client/src/pages/Dashboard.tsx | 8 +++---- client/src/utils/constants.ts | 3 +++ 6 files changed, 38 insertions(+), 35 deletions(-) diff --git a/client/.env.example b/client/.env.example index 0571afc..c56e57d 100644 --- a/client/.env.example +++ b/client/.env.example @@ -1,3 +1,5 @@ VITE_API_URL= -# # VITE_API_URL=http://localhost:3000/api -# VITE_API_URL=https://snip-shell-2.onrender.com/api \ No newline at end of file +# VITE_API_URL=https://snip-shell-2.onrender.com + +VITE_ENV="development" +# VITE_ENV="development" or VITE_ENV="deployment" \ No newline at end of file diff --git a/client/package-lock.json b/client/package-lock.json index e1bdd95..6ca5e38 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -219,6 +219,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz", "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -809,6 +810,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -918,6 +920,7 @@ "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz", "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -961,6 +964,7 @@ "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz", "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -1778,6 +1782,7 @@ "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.0.tgz", "integrity": "sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==", "license": "Apache-2.0", + "peer": true, "dependencies": { "@swc/helpers": "^0.5.0" } @@ -2157,6 +2162,7 @@ "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz", "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==", "license": "MIT", + "peer": true, "engines": { "node": "^14.21.3 || >=16" }, @@ -2931,6 +2937,7 @@ "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -2952,6 +2959,7 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz", "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==", "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -3059,6 +3067,7 @@ "integrity": "sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.48.1", "@typescript-eslint/types": "8.48.1", @@ -4695,6 +4704,7 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -4950,6 +4960,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -5721,6 +5732,7 @@ "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -8265,6 +8277,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -8277,6 +8290,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -9091,7 +9105,8 @@ "version": "4.1.17", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz", "integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/tapable": { "version": "2.3.0", @@ -9159,6 +9174,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -9341,6 +9357,7 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -9617,6 +9634,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.6.tgz", "integrity": "sha512-tI2l/nFHC5rLh7+5+o7QjKjSR04ivXDF4jcgV0f/bTQ+OJiITy5S6gaynVsEM+7RqzufMnVbIon6Sr5x1SDYaQ==", "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -9708,6 +9726,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -9825,23 +9844,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "license": "ISC" }, - "node_modules/yaml": { - "version": "2.8.2", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz", - "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==", - "license": "ISC", - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - }, - "funding": { - "url": "https://github.com/sponsors/eemeli" - } - }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", @@ -9952,6 +9954,7 @@ "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.13.tgz", "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==", "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/client/src/hooks/AddContext.tsx b/client/src/hooks/AddContext.tsx index 2e2d81b..3522961 100644 --- a/client/src/hooks/AddContext.tsx +++ b/client/src/hooks/AddContext.tsx @@ -2,7 +2,8 @@ import React, { useContext, createContext } from "react"; import axios from "axios"; import RedAlert from "../components/Alert/RedAlert"; import BlueAlert from "../components/Alert/BlueAlert"; -const API_URL = import.meta.env.VITE_API_URL; +import { API_URL } from "../utils/constants"; + interface ContentData { title: string; type: string; @@ -28,7 +29,7 @@ export const AddProvider = ({ children }: { children: React.ReactNode }) => { try { await axios.post( - `${API_URL}/content`, + `${API_URL}/api/content`, data, // send data directly or { title, link, type, description }, // directly create object here { headers: { diff --git a/client/src/hooks/AuthContext.tsx b/client/src/hooks/AuthContext.tsx index 69dfe0d..6e0a0bc 100644 --- a/client/src/hooks/AuthContext.tsx +++ b/client/src/hooks/AuthContext.tsx @@ -1,7 +1,6 @@ import React, { useState, createContext, useContext } from "react"; import axios from "axios"; - -// const API_URL = import.meta.env.VITE_API_URL ; +import { API_URL, environment } from "../utils/constants"; export interface UserData { _id: string; @@ -35,16 +34,11 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => { /* we can even write (email: string, password: string) here and use it in the function below */ } try { - const res = await axios.post("https://snip-shell-2.onrender.com/api/signin", { + const res = await axios.post(`${API_URL}/api/signin`, { email: data.email, password: data.password, }); - // similar one - // const Signin = async (email: string, password: string) => { - // try { - // const res = await axios.post("https://snip-shell-2.onrender.com/api/signin", { email, password }); - // Save token localStorage.setItem("token", res.data.token); @@ -62,7 +56,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => { const Signup = async (data: AuthData) => { try { - const res = await axios.post("https://snip-shell-2.onrender.com/api/signup", { + const res = await axios.post(`${API_URL}/api/signup`, { username: data.username, email: data.email, password: data.password, diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx index ed9414b..2bfa9bd 100644 --- a/client/src/pages/Dashboard.tsx +++ b/client/src/pages/Dashboard.tsx @@ -6,8 +6,8 @@ import Card from "../components/Card/Card"; import axios from "axios"; import ShareModalContent from "../components/modal/ShareModalContent"; import { motion } from "motion/react"; +import { API_URL } from "../utils/constants"; -const API_URL = import.meta.env.VITE_API_URL; // import RedAlert from "../components/Alert/RedAlert"; interface CardData { _id: string; @@ -35,7 +35,7 @@ const Dashboard = () => { const token = localStorage.getItem("token"); try { - await axios.delete(`${API_URL}/content`, { + await axios.delete(`${API_URL}/api/content`, { headers: { Authorization: `${token}` }, data: { contentId: id }, }); @@ -55,7 +55,7 @@ const Dashboard = () => { } try { - const response = await axios.get(`${API_URL}/content`, { + const response = await axios.get(`${API_URL}/api/content`, { headers: { Authorization: `${token}` }, }); @@ -72,7 +72,7 @@ const Dashboard = () => { }, []); const handleChange = ( - e: React.ChangeEvent + e: React.ChangeEvent, ) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; diff --git a/client/src/utils/constants.ts b/client/src/utils/constants.ts index b2e324c..f94e3e1 100644 --- a/client/src/utils/constants.ts +++ b/client/src/utils/constants.ts @@ -37,3 +37,6 @@ export const snipShellIntro: SnipShellIntro[] = [ "Tweets, threads, YouTube videos, tutorials, blog posts, tools — save anything." } ]; + +export const environment = import.meta.env.VITE_ENV; +export const API_URL = environment === "development" ? "http://localhost:3000" : import.meta.env.VITE_API_URL ; \ No newline at end of file