diff --git a/frontend/modules/Constants/index.tsx b/frontend/modules/Constants/index.tsx index 8c179c3d..99c0eb35 100644 --- a/frontend/modules/Constants/index.tsx +++ b/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` \ No newline at end of file +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`; diff --git a/frontend/modules/Home/index.tsx b/frontend/modules/Home/index.tsx index bb042fd9..7d2f55c9 100644 --- a/frontend/modules/Home/index.tsx +++ b/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); diff --git a/frontend/modules/components/ResultBox/index.tsx b/frontend/modules/components/ResultBox/index.tsx index c75a47d7..17f1f814 100644 --- a/frontend/modules/components/ResultBox/index.tsx +++ b/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 (
-
{`https://ristek.link/${props.alias}`}
+
{`${BASENAME_URL}/${props.alias}`}
props.onCopy()} diff --git a/frontend/pages/api/[alias].tsx b/frontend/pages/api/[alias].tsx index 0e7cb8a0..619e9897 100644 --- a/frontend/pages/api/[alias].tsx +++ b/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) + } + } }; diff --git a/frontend/pages/api/shorten.tsx b/frontend/pages/api/shorten.tsx index b4e18ced..8174386c 100644 --- a/frontend/pages/api/shorten.tsx +++ b/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: { diff --git a/server/src/index.js b/server/src/index.js index a7782e62..a1679744 100644 --- a/server/src/index.js +++ b/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, }, )