From 2101257e759ea6f43fb2c499eb3e248baf3cd9fc Mon Sep 17 00:00:00 2001
From: marcellinuselbert11 <marcellinuselbert46@gmail.com>
Date: Wed, 20 Oct 2021 00:33:54 +0700
Subject: [PATCH 1/3] Fix incomplete submit

---
 frontend/modules/Home/index.tsx | 43 ++++++++++++++++++++++++++++++---
 frontend/package-lock.json      | 30 +++++++++++------------
 frontend/package.json           |  1 +
 3 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/frontend/modules/Home/index.tsx b/frontend/modules/Home/index.tsx
index 87fb6129..664d2826 100644
--- a/frontend/modules/Home/index.tsx
+++ b/frontend/modules/Home/index.tsx
@@ -39,7 +39,6 @@ const HomePage = () => {
   const handleAliasType = (text: string) => {
     setAlias(text.split(" ").length > 1 ? text.split(" ").join("-") : text);
   };
-
   const handleSubmit = () => {
     setIsLoading(true);
     fetch("/api/shorten", {
@@ -72,11 +71,47 @@ const HomePage = () => {
         }
       });
   };
+  const handleEmpty = () => {
+    if (!isUrlValid)
+      toast({
+        title: "Error occured",
+        description: "Please enter a valid url",
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+      });
+    else if (url === "" && alias === "") {
+      toast({
+        title: "Error occured",
+        description: "Please enter long url and short url",
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+      });
+    } else if (alias === "") {
+      toast({
+        title: "Error occured",
+        description: "Please enter short url",
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+      });
+    } else if (url === "") {
+      toast({
+        title: "Error occured",
+        description: "Please enter long url",
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+      });
+    }
+  };
 
   useEffect(() => {
-    if (!!alias && isUrlValid) {
+    if (!!alias && isUrlValid && url !== "") {
       return setIsAllowed(true);
     }
+
     setIsAllowed(false);
   }, [url, alias]);
 
@@ -134,7 +169,9 @@ const HomePage = () => {
           </div>
           <Button
             disabled={!isAllowed}
-            onClick={() => isAllowed && !isLoading && handleSubmit()}
+            onClick={() =>
+              isAllowed && !isLoading ? handleSubmit() : handleEmpty()
+            }
             isLoading={isLoading}
           >
             <div className=" font-semibold text-lg">Shorten!</div>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 65b54aa3..4bae50b0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -375,8 +375,7 @@
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
     },
     "base64-js": {
       "version": "1.5.1",
@@ -402,7 +401,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -653,8 +651,7 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
     "console-browserify": {
       "version": "1.2.0",
@@ -1234,8 +1231,7 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
       "version": "2.3.2",
@@ -1270,7 +1266,6 @@
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
       "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -1334,6 +1329,16 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
       "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
     },
+    "gzip-cli": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gzip-cli/-/gzip-cli-1.2.0.tgz",
+      "integrity": "sha512-uMJGySMdAmXrMOoFeTztXDT1NEYQ1n+WoWYvb35ttim1JU3GOxYlGloq9aHXugdkAbldyUrYeLBxlpGBz8NuCg==",
+      "requires": {
+        "glob": "^7.1.6",
+        "glob-parent": "^5.1.1",
+        "minimist": "^1.2.5"
+      }
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -1451,7 +1456,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -1818,7 +1822,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -2190,7 +2193,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -2290,8 +2292,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
     },
     "path-parse": {
       "version": "1.0.6",
@@ -4248,8 +4249,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "xtend": {
       "version": "4.0.2",
diff --git a/frontend/package.json b/frontend/package.json
index 75ce2aec..eff5ef57 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "axios": "^0.21.1",
     "dotenv": "^9.0.0",
     "framer-motion": "^4",
+    "gzip-cli": "^1.2.0",
     "next": "10.1.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",

From e697390ce70f39426adb45ecb2ff3f4ec920eb48 Mon Sep 17 00:00:00 2001
From: marcellinuselbert11 <marcellinuselbert46@gmail.com>
Date: Fri, 22 Oct 2021 12:26:02 +0700
Subject: [PATCH 2/3] Improve readability if statements, removed unused package

---
 frontend/modules/Home/index.tsx | 20 +++++++++++---------
 frontend/package.json           |  1 -
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/modules/Home/index.tsx b/frontend/modules/Home/index.tsx
index 664d2826..c56aaf2b 100644
--- a/frontend/modules/Home/index.tsx
+++ b/frontend/modules/Home/index.tsx
@@ -21,6 +21,8 @@ const HomePage = () => {
     successDuration: 3000,
   });
   const toast = useToast();
+  const isAliasEmpty = alias === "";
+  const isUrlEmpty = url === "";
 
   const handleUrlType = (text: string) => {
     setUrl(text);
@@ -80,26 +82,26 @@ const HomePage = () => {
         duration: 5000,
         isClosable: true,
       });
-    else if (url === "" && alias === "") {
+    else if (isUrlEmpty && isAliasEmpty) {
       toast({
-        title: "Error occured",
+        title: "Long url and short url empty",
         description: "Please enter long url and short url",
         status: "error",
         duration: 5000,
         isClosable: true,
       });
-    } else if (alias === "") {
+    } else if (isUrlEmpty) {
       toast({
-        title: "Error occured",
-        description: "Please enter short url",
+        title: "Long url empty",
+        description: "Please enter long url",
         status: "error",
         duration: 5000,
         isClosable: true,
       });
-    } else if (url === "") {
+    } else if (isAliasEmpty) {
       toast({
-        title: "Error occured",
-        description: "Please enter long url",
+        title: "Short url empty",
+        description: "Please enter short url",
         status: "error",
         duration: 5000,
         isClosable: true,
@@ -108,7 +110,7 @@ const HomePage = () => {
   };
 
   useEffect(() => {
-    if (!!alias && isUrlValid && url !== "") {
+    if (!!alias && isUrlValid && !isUrlEmpty) {
       return setIsAllowed(true);
     }
 
diff --git a/frontend/package.json b/frontend/package.json
index eff5ef57..75ce2aec 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,7 +15,6 @@
     "axios": "^0.21.1",
     "dotenv": "^9.0.0",
     "framer-motion": "^4",
-    "gzip-cli": "^1.2.0",
     "next": "10.1.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",

From 08cbd5f3c9f7bbf07e9b4e4e68259ca0efad5b09 Mon Sep 17 00:00:00 2001
From: marcellinuselbert11 <marcellinuselbert46@gmail.com>
Date: Sat, 23 Oct 2021 11:06:45 +0700
Subject: [PATCH 3/3] Fix redundant toast function, created toast function on
 components

---
 frontend/modules/Home/index.tsx             | 49 +++++----------------
 frontend/modules/components/Toast/index.tsx | 13 ++++++
 2 files changed, 25 insertions(+), 37 deletions(-)
 create mode 100644 frontend/modules/components/Toast/index.tsx

diff --git a/frontend/modules/Home/index.tsx b/frontend/modules/Home/index.tsx
index c56aaf2b..9df911a9 100644
--- a/frontend/modules/Home/index.tsx
+++ b/frontend/modules/Home/index.tsx
@@ -5,6 +5,7 @@ import RistekLogo from "../images/Logo";
 import BottomBanner from "../images/Bottom";
 import Input from "../components/Input";
 import Button from "../components/Button";
+import Toast from "../components/Toast";
 import ResultBox from "../components/ResultBox";
 import { useToast } from "@chakra-ui/react";
 import useClipboard from "react-use-clipboard";
@@ -63,49 +64,23 @@ const HomePage = () => {
           setIsLoading(false);
           setAlias("");
           setIsGenerated(false);
-          toast({
-            title: "Error occured",
-            description: result.data,
-            status: "error",
-            duration: 5000,
-            isClosable: true,
-          });
+          Toast("Error occured", result.data, true);
         }
       });
   };
   const handleEmpty = () => {
-    if (!isUrlValid)
-      toast({
-        title: "Error occured",
-        description: "Please enter a valid url",
-        status: "error",
-        duration: 5000,
-        isClosable: true,
-      });
-    else if (isUrlEmpty && isAliasEmpty) {
-      toast({
-        title: "Long url and short url empty",
-        description: "Please enter long url and short url",
-        status: "error",
-        duration: 5000,
-        isClosable: true,
-      });
+    if (!isUrlValid) {
+      Toast("Url invalid", "Please enter a valid url", true);
+    } else if (isUrlEmpty && isAliasEmpty) {
+      Toast(
+        "Long url and short url empty",
+        "Please enter long url and short url",
+        true
+      );
     } else if (isUrlEmpty) {
-      toast({
-        title: "Long url empty",
-        description: "Please enter long url",
-        status: "error",
-        duration: 5000,
-        isClosable: true,
-      });
+      Toast("Long url empty", "Please enter long url", true);
     } else if (isAliasEmpty) {
-      toast({
-        title: "Short url empty",
-        description: "Please enter short url",
-        status: "error",
-        duration: 5000,
-        isClosable: true,
-      });
+      Toast("Short url empty", "Please enter short url", true);
     }
   };
 
diff --git a/frontend/modules/components/Toast/index.tsx b/frontend/modules/components/Toast/index.tsx
new file mode 100644
index 00000000..9b83436d
--- /dev/null
+++ b/frontend/modules/components/Toast/index.tsx
@@ -0,0 +1,13 @@
+import { createStandaloneToast } from "@chakra-ui/react";
+
+const Toast = (title: string, description: string, isError: boolean) => {
+  const toast = createStandaloneToast();
+  const status = isError ? "error" : "success";
+  toast({
+    title: title,
+    description: description,
+    status: status,
+  });
+};
+
+export default Toast;