added axios handlers

frontend/.env

@@ -1 +1,2 @@
-NODE_ENV=dev
+NODE_ENV=dev
+NEXT_PUBLIC_API_URL=http://localhost:5000

frontend/components/HomeSection/homeSection.jsx

@@ -1,82 +1,80 @@
-import React from 'react';
+import React from "react";
 import HomeSectionStyle from "./HomeSection.style";
-import Link from 'next/link';
+import Link from "next/link";
+import Axios from "helpers/Axios";
 
 const head = {
-    fontSize: '5rem',
-    fontWeight: 'bold',
-    marginBottom: '30px'
+	fontSize: "5rem",
+	fontWeight: "bold",
+	marginBottom: "30px",
 };
 const box = {
-    fontSize: '1.5em',
-    borderRadius: '50px',
-    padding: '1em',
-    width: '500px',
-    height: '50px'
+	fontSize: "1.5em",
+	borderRadius: "50px",
+	padding: "1em",
+	width: "500px",
+	height: "50px",
 };
 const btn = {
-    fontWeight: 'bold',
-    position: 'absolute',
-    alignItems: 'center',
-    right: '0px',
-    marginRight: '5px',
-    marginTop: '4.5px',
-    marginBottom: '3px',
-    height: '40px',
-    width: '100px',
-    borderRadius: '50px'
-
+	fontWeight: "bold",
+	position: "absolute",
+	alignItems: "center",
+	right: "0px",
+	marginRight: "5px",
+	marginTop: "4.5px",
+	marginBottom: "3px",
+	height: "40px",
+	width: "100px",
+	borderRadius: "50px",
 };
 const searchBox = {
-    position: 'relative',
-
+	position: "relative",
 };
 function HomeSection(props) {
+	const setMinfy = async () => {
+		let res;
+		try {
+			res = await Axios.post(`/minify/add`, {
+				originalUrl: props.longUrl,
+			});
+		} catch (err) {
+			console.error(err);
+			return;
+		}
 
-    const setMinfy = async () => {
-        var API_URL = 'http://localhost:5000';
-        const res = await fetch(`${API_URL}/minify/add`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Access-Control-Allow-Origin': '*'
+		const data = await res.data;
+		props.setShortUrl(data.minifiedUrl);
+		navigator.clipboard.writeText(props.shortUrl);
+	};
 
-            },
-            body: JSON.stringify({
-                originalUrl: props.longUrl
-            }),
-        });
+	return (
+		<HomeSectionStyle>
+			<div className="content">
+				<h1 style={head} className="title">
+					URL MINIFY
+				</h1>
 
-        if (res===null) {
-            console.log("error"); 
-            return;
-        }
-
-        const data = await res.json();
-        props.setShortUrl(data.minifiedUrl);
-        navigator.clipboard.writeText(props.shortUrl);
-    }
-
-
-
-    return (
-        <HomeSectionStyle>
-            <div className="content">
-                <h1 style={head} className="title">
-                    URL MINIFY
-                </h1>
-
-                <div style={searchBox}>
-                    <input style={box} placeholder="Enter the url to be minified......" value={props.longUrl} onChange={(e) => { props.setLongUrl(e.target.value) }} />
-                    <button style={btn} id="minify" onClick={setMinfy}>MINIFY</button>
-                </div>
-                <div>
-                    <h3>Need more advanced features? | <Link href="/signup">Create an account</Link></h3>
-                </div>
-            </div>
-        </HomeSectionStyle>
-    );
+				<div style={searchBox}>
+					<input
+						style={box}
+						placeholder="Enter the url to be minified......"
+						value={props.longUrl}
+						onChange={(e) => {
+							props.setLongUrl(e.target.value);
+						}}
+					/>
+					<button style={btn} id="minify" onClick={setMinfy}>
+						MINIFY
+					</button>
+				</div>
+				<div>
+					<h3>
+						Need more advanced features? | <Link href="/signup">Create an account</Link>
+					</h3>
+				</div>
+			</div>
+		</HomeSectionStyle>
+	);
 }
 
-
 export default HomeSection;

frontend/helpers/Axios.js

@@ -0,0 +1,11 @@
+import axios from "axios";
+
+var API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export default axios.create({
+	baseURL: API_URL,
+	headers: {
+		"Content-Type": "application/json",
+		"Access-Control-Allow-Origin": "*",
+	},
+});

frontend/package.json

@@ -18,6 +18,7 @@
       "@mui/icons-material": "^5.3.1",
       "@mui/material": "^5.4.0",
       "@mui/styled-engine-sc": "^5.3.0",
+      "axios": "^0.25.0",
       "nanoid": "^3.2.0",
       "next": "12.0.9",
       "react": "17.0.2",