Handle not found links better, configurable URLs

frontend/modules/Constants/index.tsx

@@ -1,3 +1,12 @@
-const WORKERS_URL= "http://127.0.0.1:8787"
-export const SHORTEN_URL = `${WORKERS_URL}/shorten`
-export const RETRIEVE_URL = `${WORKERS_URL}/retrieve`
+const env = process.env.NODE_ENV;
+let WORKERS_URL;
+export let BASENAME_URL;
+if (env == "development") {
+	WORKERS_URL = "http://localhost:8787";
+	BASENAME_URL = "http://localhost:3000/api";
+} else if (env == "production") {
+	WORKERS_URL = "https://ristek-link-workers.jonathanfilbert.workers.dev";
+	BASENAME_URL = "https://ristek.link";
+}
+export const SHORTEN_URL = `${WORKERS_URL}/shorten`;
+export const RETRIEVE_URL = `${WORKERS_URL}/retrieve`;

frontend/modules/Home/index.tsx

@@ -8,6 +8,8 @@ import Button from "../components/Button";
 import ResultBox from "../components/ResultBox";
 import { useToast } from "@chakra-ui/react";
 import useClipboard from "react-use-clipboard";
+import { useRouter } from 'next/router'
+import { BASENAME_URL } from '../Constants'
 
 const HomePage = () => {
   const [alias, setAlias] = useState("");
@@ -17,7 +19,7 @@ const HomePage = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [isGenerated, setIsGenerated] = useState(false);
   const [result, setResult] = useState("");
-  const [isCopied, setCopied] = useClipboard(`https://ristek.link/${result}`, {
+  const [isCopied, setCopied] = useClipboard(`${BASENAME_URL}/${result}`, {
     successDuration: 3000,
   });
   const toast = useToast();
@@ -62,9 +64,11 @@ const HomePage = () => {
           setIsLoading(false);
           setAlias("");
           setIsGenerated(false);
+          let message
+          if (result.error === "AlreadyExists") message = `The short url /${alias} already exists. Please choose another one.`
           toast({
             title: "Error occured",
-            description: result.data,
+            description: result.message,
             status: "error",
             duration: 5000,
             isClosable: true,
@@ -73,6 +77,20 @@ const HomePage = () => {
       });
   };
 
+  const router = useRouter();
+  useEffect(() => {
+    const { notfound } = router.query
+    if (notfound) {
+      toast({
+        title: "Error occured",
+        description: `The short url /${notfound} does not exist.`,
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+      });
+    }
+  },[router])
+
   useEffect(() => {
     if (!!alias && isUrlValid) {
       return setIsAllowed(true);

frontend/modules/components/ResultBox/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { BASENAME_URL } from "../../Constants";
 
 type ResultBoxProps = {
   onCopy?: () => any;
@@ -15,7 +16,7 @@ const ResultBox = (props: ResultBoxProps) => {
   } else {
     return (
       <div className="absolute -bottom-32 w-full h-8 bg-primary py-9 flex flex-row items-center justify-between rounded-md px-4 mt-3 shadow-lg">
-        <div className="text-white font-bold truncate">{`https://ristek.link/${props.alias}`}</div>
+        <div className="text-white font-bold truncate">{`${BASENAME_URL}/${props.alias}`}</div>
         <div
           className="text-white cursor-pointer"
           onClick={() => props.onCopy()}

frontend/pages/api/[alias].tsx

@@ -1,9 +1,10 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+import { RETRIEVE_URL } from "../../modules/Constants";
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
   const { alias } = req.query;
   const result = await fetch(
-    "https://ristek-link-workers.jonathanfilbert.workers.dev/retrieve",
+    RETRIEVE_URL,
     {
       method: "POST",
       headers: {
@@ -13,5 +14,13 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
       body: JSON.stringify({ short_url: alias }),
     }
   ).then((res) => res.json());
-  return res.redirect(result.data);
+  // return res.redirect(result.data);
+  const { ok, data, error } = result
+  if (ok) {
+    return res.redirect(data);
+  } else {
+    if (error === "NotFound") {
+      return res.redirect("/" + "?notfound=" + alias)
+    }
+  }
 };

frontend/pages/api/shorten.tsx

@@ -1,10 +1,11 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+import { SHORTEN_URL } from "../../modules/Constants";
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method === "POST") {
     const { alias, url } = req.body;
     const result = await fetch(
-      "https://ristek-link-workers.jonathanfilbert.workers.dev/shorten",
+      SHORTEN_URL,
       {
         method: "POST",
         headers: {

server/src/index.js

@@ -36,10 +36,10 @@ const handleRequest = async event => {
       if (!!existing_short_url) {
         return new Response(
           JSON.stringify({
-            data: `The short url /${short_url} already exists. Please choose another one.`,
             ok: false,
+            error: 'AlreadyExists'
           }),
-          { status: 200, headers: corsHeaders },
+          { status: 400, headers: corsHeaders },
         )
       }
       const _ = await LINKS.put(short_url, long_url)
@@ -60,11 +60,11 @@ const handleRequest = async event => {
       }
       return new Response(
         JSON.stringify({
-          data: `The short url /${short_url} does not exist.`,
           ok: false,
+          error: 'NotFound'
         }),
         {
-          status: 200,
+          status: 404,
           headers: corsHeaders,
         },
       )