README.md

@@ -25,8 +25,7 @@ TODO: -->
     - [x] Notify on copy
     - [x] Generate another url
 - [ ] Project Logo™
-- [x] Basic error handling
+- [ ] Finalize styling
-- [x] Finalize styling
 
 ## Credits
 * ClipboardJS by Zeno Rocha licensed under MIT - Website: https://clipboardjs.com/ - Repo: https://github.com/zenorocha/clipboard.js

index.html

@@ -18,39 +18,7 @@
 	<div class="p-4 flex items-center justify-center bg-white">
 		<div class="w-full mx-auto">
 			<h1 class="text-lg text-center">LinkyLinky</h1>
-
+			<div>
-			<div class="rounded-md bg-red-100 p-4 hidden" id="error_container">
-				<div class="flex">
-					<div class="flex-shrink-0">
-						<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-600" viewBox="0 0 20 20"
-							fill="currentColor">
-							<path fill-rule="evenodd"
-								d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
-								clip-rule="evenodd" />
-						</svg>
-					</div>
-					<div class="ml-3">
-						<p class="text-sm font-medium text-red-800" id="error_text">
-							
-						</p>
-					</div>
-					<div class="ml-auto pl-3">
-						<div class="-mx-1.5 -my-1.5">
-							<button
-								id="error_dismiss"
-								class="inline-flex bg-red-100 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600">
-								<span class="sr-only">Dismiss</span>
-								<svg class="h-5 w-5" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-									<path fill-rule="evenodd"
-										d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-										clip-rule="evenodd"></path>
-								</svg>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
 				<div id="target_container">
 					<div class="mt-1 flex rounded-md shadow-sm">
 						<input type="url" name="target" id="target" required

main.js

@@ -11,17 +11,13 @@ clipboard.on('success', function (e) {
     });
 });
 
-//Set default url as current tab
+//Set default url
 chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
     document.getElementById("target").value = tabs[0].url;
 });
 
-// Create button click handler calls the api to create a new short url
+// Calls the api to create a new short url
 document.getElementById("create").onclick = createUrl;
-
-/**
- * Calls the api to create a new short url and handels displaying the ui for "created" urls
- */
 function createUrl() {
         let shorturl = {
             target: document.getElementById("target").value,
@@ -39,14 +35,7 @@ function createUrl() {
                 'Content-Type': 'application/json'
             })
         })
-        .then(res => {
+            .then(res => res.json())
-            if (!res.ok) {
-                handleError(res);
-            }
-            else {
-                res.json()
-            }
-        })
             .then(res => {
                 document.getElementById("shorturl").innerText = res.url;
                 document.getElementById("shorturl_container").className = "";
@@ -58,43 +47,16 @@ function createUrl() {
 
 }
 
-//Add error dismiss event handler
+//Resets the UI
-document.getElementById("error_dismiss").onclick = () => {
-    document.getElementById("error_container").classList.add("hidden");
-};
-
-/**
- * Display alerts for errors (only handling 400 correctly r/n)
- * @param {response} res The fetch response object
- */
-function handleError(res) {
-    if (res.status == 400) {
-        res.text().then((body) => {
-            document.getElementById("error_text").innerText = body;
-            document.getElementById("error_container").classList.remove("hidden");
-        })
-    }
-    else {
-        console.log(res);
-        document.getElementById("error_text").innerText = "An unknown error occured (see console for more details)";
-        document.getElementById("error_container").classList.remove("hidden");
-    }
-}
-
-//Add ui reset error handler
 document.getElementById("reset").onclick = reset;
-
-/**
- * Resets the ui by emtying/resetting all inputs and showing the "default" home ui containers again.
- */
 function reset() {
     document.getElementById("shorturl").innerText = "";
-    document.getElementById("shorturl_container").className = "hidden";
-    document.getElementById("reset").classList.add("hidden");
-    chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
-        document.getElementById("target").value = tabs[0].url;
     document.getElementById("target_container").className = "";
     document.getElementById("shortcode_container").className = "";
+    document.getElementById("shorturl_container").className = "hidden";
+    document.getElementById("reset").classList.add("hidden");
     document.getElementById("create").classList.remove("hidden");
+    chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
+        document.getElementById("target").value = tabs[0].url;
     });
 }