feat: Add support for shortening URLs

4 files changed, 18 insertions, 4 deletions

diff --git a/client/.env.production b/client/.env.production
index 09e06f4..2015d42 100644
--- a/client/.env.production
+++ b/client/.env.production
@@ -1 +1,2 @@
+VITE_CLIENT_BASE_URL=https://example.com
 VITE_SERVER_BASE_URL=https://api.example.com
diff --git a/client/src/components/Editor/Editor.jsx b/client/src/components/Editor/Editor.jsx
index dd07e5f..aaa9ac3 100644
--- a/client/src/components/Editor/Editor.jsx
+++ b/client/src/components/Editor/Editor.jsx
@@ -1,14 +1,15 @@
 import React, { useState, useEffect, useRef, useMemo } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import Prism from "prismjs";
 import styles from "./Editor.module.css";
 import "../prism-themes/prism-gruvbox-dark.css";
-import { SERVER_BASE_URL } from "../../utils/constants";
+import { CLIENT_BASE_URL, SERVER_BASE_URL, URL_REGEX } from "../../utils/constants";
 import Header from "../Header/Header";
 
 const Editor = () => {
   const { id } = useParams();
   const navigate = useNavigate();
+  const location = useLocation();
   const [text, setText] = useState("");
   const [language, setLanguage] = useState("none");
   const textareaRef = useRef(null);
@@ -60,8 +61,17 @@ const Editor = () => {
       const response = await fetch(`${SERVER_BASE_URL}/bin/${id}`);
       const data = await response.json();
       if (response.ok) {
-        setLanguage(data.language);
-        setText(data.content);
+        const isURL = URL_REGEX.test(data.content);
+        if (isURL) {
+          setText(`Your shortened URL: ${CLIENT_BASE_URL}/r/${id}`);
+          if (location.pathname === `/r/${id}`) {
+            window.location.href = data.content;
+          }
+        }
+        else {
+          setLanguage(data.language);
+          setText(data.content);
+        }
       }
     };
 
diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx
index 21cbdb0..9886c66 100644
--- a/client/src/pages/Home/Home.jsx
+++ b/client/src/pages/Home/Home.jsx
@@ -9,6 +9,7 @@ const Home = () => {
       <Routes>
         <Route path="/" element={<Editor />} />
         <Route path="/:id" element={<Editor />} />
+        <Route path="/r/:id" element={<Editor />} />
       </Routes>
     </div>
   );
diff --git a/client/src/utils/constants.js b/client/src/utils/constants.js
index 2583f6c..8d409f6 100644
--- a/client/src/utils/constants.js
+++ b/client/src/utils/constants.js
@@ -1,4 +1,6 @@
+export const CLIENT_BASE_URL = import.meta.env.VITE_CLIENT_BASE_URL;
 export const SERVER_BASE_URL = import.meta.env.VITE_SERVER_BASE_URL;
+export const URL_REGEX = /^(https?:\/\/)?([\w.-]+\.[a-z]{2,})(\/?[^\s]*)?$/;
 export const SUPPORTED_LANGUAGES = [{
   value: "none",
   label: "Plain Text",