Merge pull request #9 from swordfest/env-base-urls

Env base urls
shadowmere-xyz · Jul 15, 2024 · d3a2812 · d3a2812
2 parents 8c7f10a + 0fe20d2
commit d3a2812
Show file tree

Hide file tree

Showing 21 changed files with 233 additions and 180 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,4 @@
 {
-  "extends": "next/core-web-vitals"
+  // "extends": "next/core-web-vitals",
+  "extends": ["next/core-web-vitals", "next", "prettier"]
 }
diff --git a/.gitignore b/.gitignore
@@ -29,6 +29,9 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env*.prod
+.env.*
+.env
 
 # vercel
 .vercel

diff --git a/components/countries.tsx b/components/countries.tsx
@@ -3,12 +3,20 @@ import React, { useEffect, useState } from "react";
 import { getFlagEmoji, getPercentage } from "../libs/functions";
 import { countryFilterState, pageCounterState } from "../libs/store";
 import { useRecoilState } from "recoil";
+import { apiBaseUrl } from "../vars/variables";
 import { IconWorldPin } from "@tabler/icons-react";
 
 export default function Countries(props: any) {
   const [country, setCountry] = useRecoilState(countryFilterState);
   const [pageFilter, setPageFilter] = useRecoilState(pageCounterState);
 
+	const fetcher = (...args: [any, any]) =>
+		fetch(...args).then((res) => res.json());
+
+	const { data: countries, error } = useSWR(
+		`${apiBaseUrl}/country-codes`,
+		fetcher
+	);
   useEffect(() => {
     window.addEventListener("keydown", function(event) {
 			if (event.key === "u") {
@@ -27,15 +35,6 @@ export default function Countries(props: any) {
       setPageFilter(1);
     }
   };
-
-
-  const fetcher = (...args: [any, any]) =>
-    fetch(...args).then((res) => res.json());
-
-  const { data: countries, error } = useSWR(
-    "https://shadowmere.akiel.dev/api/country-codes",
-    fetcher
-  );
 
   if (error) return <>Error</>;
 

diff --git a/components/detailsLayoutButton.tsx b/components/detailsLayoutButton.tsx
@@ -15,7 +15,7 @@ export default function DetailsLayoutButton() {
 	useEffect(() => {
 		const view = JSON.parse(localStorage.getItem('viewMode')!)
 		setViewMode(view)
-	}, [])
+	}, [setViewMode])
 
 	return (
 		<div

diff --git a/components/itemSubscriptionSSoscks.tsx b/components/itemSubscriptionSSoscks.tsx
@@ -5,11 +5,15 @@ import {
   IconKey,
 } from "@tabler/icons-react";
 import { useState } from "react";
+import { useRecoilState } from "recoil";
+import { apiBaseUrl } from "../vars/variables";
+
 
 export default function ItemSubscriptionSSocks(props: any) {
   const [isOver, setIsOver] = useState(false);
   const [timeCopy, setTimeCopy] = useState(false);
 
+
   const handleOver = () => {
     setIsOver(true);
   };
@@ -21,7 +25,7 @@ export default function ItemSubscriptionSSocks(props: any) {
     setTimeCopy(true);
 
     navigator.clipboard
-      .writeText("https://shadowmere.akiel.dev/api/sub")
+    .writeText(`${apiBaseUrl}/sub/`)
       .then(() => {
         setTimeout(() => {
           setTimeCopy(false);

diff --git a/components/itemSubscriptionV2Ray.tsx b/components/itemSubscriptionV2Ray.tsx
@@ -1,10 +1,14 @@
 import { IconCheck, IconClipboardCopy } from "@tabler/icons-react";
 import { useState } from "react";
+import { useRecoilState } from "recoil";
+import { apiBaseUrl } from "../vars/variables";
+
 
 export default function ItemSubscriptionV2Ray(props: any) {
   const [isOver, setIsOver] = useState(false);
   const [timeCopy, setTimeCopy] = useState(false);
 
+
   const handleOver = () => {
     setIsOver(true);
   };
@@ -16,7 +20,7 @@ export default function ItemSubscriptionV2Ray(props: any) {
     setTimeCopy(true);
 
     navigator.clipboard
-      .writeText("https://shadowmere.akiel.dev/api/b64sub/")
+      .writeText(`${apiBaseUrl}/b64sub/`)
       .then(() => {
         setTimeout(() => {
           setTimeCopy(false);

diff --git a/components/layout.tsx b/components/layout.tsx
@@ -7,10 +7,10 @@ import { proxiesObj, qrScreen } from "../libs/store";
 import { useEffect, useState } from "react";
 import useSWR from "swr";
 import {
-	pageCounterState,
-	portFilterState,
-	countryFilterState,
-	loaderPage,
+  pageCounterState,
+  portFilterState,
+  countryFilterState,
+  loaderPage,
 } from "../libs/store";
 import { Player } from "@lottiefiles/react-lottie-player";
 import Loader from "./loader";
@@ -19,92 +19,124 @@ import ServerStatsCard from "./serversStatsCard";
 import ItemSubscription from "./itemSubscriptionSSoscks";
 import ItemSubscriptionSSocks from "./itemSubscriptionSSoscks";
 import ItemSubscriptionV2Ray from "./itemSubscriptionV2Ray";
+import { apiBaseUrl } from "../vars/variables";
 import SupportSide from "./support-side";
 
 export default function Layout({ children }: any) {
-	const [qrScreenCode, setQRScreenCode] = useRecoilState(qrScreen);
-	const [pageCounter, setPageCounter] = useRecoilState(pageCounterState);
-	const [portFilter, setPortFilter] = useRecoilState(portFilterState);
-	const [countryFilter, setCountryFilter] = useRecoilState(countryFilterState);
-	const [loader, setLoader] = useRecoilState(loaderPage);
-	const [prox, setProx] = useRecoilState(proxiesObj);
-	const [time, setTime] = useState("");
+  const [qrScreenCode, setQRScreenCode] = useRecoilState(qrScreen);
+  const [pageCounter, setPageCounter] = useRecoilState(pageCounterState);
+  const [portFilter, setPortFilter] = useRecoilState(portFilterState);
+  const [countryFilter, setCountryFilter] = useRecoilState(countryFilterState);
+  const [loader, setLoader] = useRecoilState(loaderPage);
+  const [prox, setProx] = useRecoilState(proxiesObj);
+  const [time, setTime] = useState("");
 
-	const fetcher = (...args: [any, any]) =>
-		fetch(...args).then((res) => res.json());
-	const { data: proxies, error } = useSWR(
-		"https://shadowmere.akiel.dev/api/proxies/?format=json&is_active=true&location_country_code=" +
-			countryFilter +
-			"&port=" +
-			portFilter +
-			"&page=" +
-			pageCounter?.toString(),
-		fetcher
-	);
+  const fetcher = (...args: [any, any]) =>
+    fetch(...args).then((res) => res.json());
+  const { data: proxies, error } = useSWR(
+    `${apiBaseUrl}/proxies/?format=json&is_active=true&location_country_code=` +
+      countryFilter +
+      "&port=" +
+      portFilter +
+      "&page=" +
+      pageCounter?.toString(),
+    fetcher
+  );
 
-	if (error) {
-		<>Error</>;
-	}
-	if (!proxies) {
-		<>Loading</>;
-	}
+  if (error) {
+    <>Error</>;
+  }
+  if (!proxies) {
+    <>Loading</>;
+  }
 
-	useEffect(() => {
-		document
-			.querySelector("body")
-			?.classList.add(
-				"overflow-y-scroll",
-				"bg-[#F8F8F8]",
-				"dark:bg-[#141414]",
-				"text-[#212121]"
-			);
-		if (proxies) {
-			setProx(proxies);
-			if (countryFilter === "" && pageCounter == 1 && portFilter === "") {
-				setTime(proxies?.results[0]?.last_checked);
-			}
-		}
-		window.addEventListener("load", function() {
-			(window as any).wpcc?.init({
-				border: "thin",
-				corners: "small",
-				colors: {
-					popup: {
-						background: "#f6f6f6",
-						text: "#000000",
-						border: "#cfcfcf",
-					},
-					button: {
-						background: "#303030",
-						text: "#ffffff",
-					},
-				},
-				position: "bottom",
-			});
-		});
-	}, [proxies, countryFilter, pageCounter, portFilter, setProx]);
+  // useEffect(() => {
+  //   document
+  //     .querySelector("body")
+  //     ?.classList.add(
+  //       "overflow-y-scroll",
+  //       "bg-[#F8F8F8]",
+  //       "dark:bg-[#141414]",
+  //       "text-[#212121]"
+  //     );
+  //   setProx(proxies);
+  //   setTime(proxies?.results[0]?.last_checked);
+  //   window.addEventListener("load", function () {
+  //     (window as any).wpcc?.init({
+  //       border: "thin",
+  //       corners: "small",
+  //       colors: {
+  //         popup: {
+  //           background: "#f6f6f6",
+  //           text: "#000000",
+  //           border: "#cfcfcf",
+  //         },
+  //         button: {
+  //           background: "#303030",
+  //           text: "#ffffff",
+  //         },
+  //       },
+  //       position: "bottom",
+  //     });
+  //   });
+  // }, [proxies, countryFilter, pageCounter, portFilter, setProx]);
 
-	return (
-		<>
-			{/* <Loader isLoading={loader} /> */}
-			<Meta />
-			<Navbar />
-			{qrScreenCode && <ModalQR />}
-			<main className="wrapper container mx-auto w-full h-full xl:h-full grid grid-cols-12 auto-rows-auto mb-16 2xl:mb-0 mt-16 py-6 xl:py-8 gap-[30px] px-4 pb-4">
-				<div className="sidebar-wrapper col-span-12 xl:col-span-3 gap-4 ">
-					<div className="server-subs-wrapper w-full h-auto flex gap-4 shrink-0 ">
-						<ServerStatsCard data={proxies} time={time} />
-						<div className="server-subs-wrapper w-1/2 h-auto flex flex-col ">
-							<ItemSubscriptionSSocks/>
-							<ItemSubscriptionV2Ray/>
-						</div>
-					</div>
-					<Sidebar data={proxies} time={time} />
-					<SupportSide visibleResponsive="desktop"/>
-				</div>
-				{children}
-				<SupportSide visibleResponsive="mobile"/>
-			</main>
-		</>
-	);
+  useEffect(() => {
+    document
+    .querySelector("body")
+    ?.classList.add(
+      "overflow-y-scroll",
+      "bg-[#F8F8F8]",
+      "dark:bg-[#141414]",
+      "text-[#212121]"
+    );
+    if (proxies) {
+      setProx(proxies);
+      if (countryFilter === "" && pageCounter == 1 && portFilter === "") {
+        setTime(proxies?.results[0]?.last_checked);
+      }
+    }
+    window.addEventListener("load", function () {
+      (window as any).wpcc?.init({
+        border: "thin",
+        corners: "small",
+        colors: {
+          popup: {
+            background: "#f6f6f6",
+            text: "#000000",
+            border: "#cfcfcf",
+          },
+          button: {
+            background: "#303030",
+            text: "#ffffff",
+          },
+        },
+        position: "bottom",
+      });
+    });
+  }, [proxies, countryFilter, pageCounter, portFilter, setProx]);
+
+  return (
+    <>
+      {/* <Loader isLoading={loader} /> */}
+      <Meta />
+      <Navbar />
+      {qrScreenCode && <ModalQR />}
+      <main className="wrapper container mx-auto w-full h-full xl:h-full grid grid-cols-12 auto-rows-auto mb-16 2xl:mb-0 mt-16 py-6 xl:py-8 gap-[30px] px-4 pb-4">
+        <div className="sidebar-wrapper col-span-12 xl:col-span-3 gap-4 ">
+          <div className="server-subs-wrapper w-full h-auto flex gap-4 shrink-0 ">
+            <ServerStatsCard data={proxies} time={time} />
+            <div className="server-subs-wrapper w-1/2 h-auto flex flex-col ">
+              <ItemSubscriptionSSocks />
+              <ItemSubscriptionV2Ray />
+            </div>
+          </div>
+          <Sidebar data={proxies} time={time} />
+          <SupportSide visibleResponsive="desktop" />
+        </div>
+        {children}
+        <SupportSide visibleResponsive="mobile" />
+      </main>
+    </>
+  );
 }
diff --git a/components/meta.tsx b/components/meta.tsx
@@ -3,6 +3,7 @@ import Script from "next/script";
 import { useEffect } from "react";
 import { useRecoilState } from "recoil";
 import { countryFilterState, pageCounterState, portFilterState } from "../libs/store";
+import { apiBaseUrl } from "../vars/variables";
 
 type Props = {
 	title: string;
@@ -14,6 +15,7 @@ export function Meta({ title, keywords, description }: Props) {
 	const [pageCounter, setPageCounter] = useRecoilState(pageCounterState);
 	const [portFilter, setPortFilter] = useRecoilState(portFilterState);
 	const [countryFilter, setCountryFilter] = useRecoilState(countryFilterState);
+
 	return (
 		<Head>
 			<meta httpEquiv="Content-Type" content="text/html;charset=UTF-8" />
@@ -23,7 +25,7 @@ export function Meta({ title, keywords, description }: Props) {
 			<link rel="icon" type="image/svg+xml" href="/logo.svg" sizes="any" />
 			<link
 				rel="preload"
-				href={`https://shadowmere.akiel.dev/api/proxies/?format=json&is_active=true&location_country_code=${countryFilter}&port=${portFilter}&page=${pageCounter?.toString()}`}
+				href={`${apiBaseUrl}/proxies/?format=json&is_active=true&location_country_code=${countryFilter}&port=${portFilter}&page=${pageCounter?.toString()}`}
 				as="fetch"
 				crossOrigin="anonymous"></link>
 			<title>{title}</title>

diff --git a/components/modalQR.tsx b/components/modalQR.tsx
@@ -1,10 +1,13 @@
 import Image from 'next/image'
 import { proxyId, qrScreen } from '../libs/store'
 import { useRecoilState } from 'recoil'
+import { apiBaseUrl, rootUrl } from '../vars/variables'
+
 
 export default function ModalQR (props: any) {
     const [proxID, setProxID] = useRecoilState(proxyId)
     const [qrActive, setQrActive] = useRecoilState(qrScreen)
+
 
     const handleClick = () => {
         setQrActive(false)
@@ -13,9 +16,9 @@ export default function ModalQR (props: any) {
     return (
         <div onClick={handleClick} className={"modal-qr w-full fixed z-[200] left-0 top-0 h-screen bg-black bg-opacity-[0.7] flex flex-col items-center justify-center gap-4 "}>
         {/* <div onClick={handleClick} className={"modal-qr w-full fixed z-[200] left-0 top-0 h-screen bg-black bg-opacity-[0.7] flex flex-col items-center justify-center gap-4 " + (props.qrActive ? '' : 'hidden')}> */}
-            <div className="w-auto h-auto flex flex-col gap-4 justify-center ">
-                <div className=" w-[328px] h-auto sm:w-[360px] bg-white rounded-lg flex flex-col gap-4">
-                    <img src={'https://shadowmere.akiel.dev/' + proxID?.toString() + '/qr'} className=" rounded-lg" alt="QR Code for server address"/>
+            <div className="w-auto h-auto flex flex-col gap-4 justify-center items-center ">
+                <div className=" w-[328px] h-auto bg-white rounded-lg flex flex-col gap-4">
+                    <Image width={328} height={328} src={`${rootUrl}/${proxID?.toString()}/qr`} className=" rounded-lg" alt="QR Code for server address"/>
                 </div>
                 <div className=" w-[328px] h-auto sm:w-[360px] flex flex-col gap-4 items-center" >
                     <h1 x-text="serverAddress" className=" w-[328px] sm:w-auto text-center text-white break-words"></h1>