Sorted

Rohithgilla12 · Aug 29, 2022 · ed86760 · ed86760
1 parent e9eeffc
commit ed86760
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 30 deletions.
diff --git a/src/components/CreateShortCutForm.tsx b/src/components/CreateShortCutForm.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import copy from "copy-to-clipboard";
 import { trpc } from "../utils/trpc";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -7,14 +8,18 @@ interface CreateShortCutFormProps {}
 const CreateShortCutForm: React.FC<CreateShortCutFormProps> = ({}) => {
   const createShortLink = trpc.useMutation(["shortCut.createShortLink"]);
 
+  const [url, setUrl] = React.useState("");
+  const [slug, setSlug] = React.useState("");
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     const form = new FormData(e.currentTarget);
     const url = form.get("url") as string;
     const slug = form.get("slug") as string;
 
-    console.log(url, slug);
+    setUrl(url);
+    setSlug(slug);
 
     await createShortLink.mutateAsync({
       url,
@@ -23,35 +28,55 @@ const CreateShortCutForm: React.FC<CreateShortCutFormProps> = ({}) => {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
-      <div className="form-control flex flex-col w-full m-4">
-        <label className="label">
-          <span className="label-text">Full URL</span>
-        </label>
-        <input
-          type="text"
-          placeholder="Type here"
-          id="url"
-          name="url"
-          className="input input-bordered w-full max-w-xs"
-        />
-
-        <label className="label">
-          <span className="label-text">Short Name</span>
-        </label>
-        <input
-          type="text"
-          placeholder="Type here"
-          id="slug"
-          name="slug"
-          className="input input-bordered w-full max-w-xs"
-        />
-        <br />
-        <button type="submit" className="btn btn-outline btn-success p-2">
-          Create Shortlink
-        </button>
-      </div>
-    </form>
+    <>
+      {/* Show URL and slug along with copy button */}
+      {url && slug && (
+        <div className="flex flex-col items-center justify-center">
+          <p>Created link with given details</p>
+          <div className="flex flex-col items-center justify-center">
+            <p>URL: {url}</p>
+            <p>Slug: {slug}</p>
+          </div>
+          <button
+            onClick={() => {
+              copy(`https://short-cut-redis.vercel.app/r/${slug}`);
+            }}
+            className="btn btn-square btn-outline"
+          >
+            Copy
+          </button>
+        </div>
+      )}
+      <form onSubmit={handleSubmit}>
+        <div className="form-control flex flex-col w-full m-4">
+          <label className="label">
+            <span className="label-text">Full URL</span>
+          </label>
+          <input
+            type="text"
+            placeholder="Type here"
+            id="url"
+            name="url"
+            className="input input-bordered w-full max-w-xs"
+          />
+
+          <label className="label">
+            <span className="label-text">Short Name</span>
+          </label>
+          <input
+            type="text"
+            placeholder="Type here"
+            id="slug"
+            name="slug"
+            className="input input-bordered w-full max-w-xs"
+          />
+          <br />
+          <button type="submit" className="btn btn-outline btn-success p-2">
+            Create Shortlink
+          </button>
+        </div>
+      </form>
+    </>
   );
 };
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -19,7 +19,24 @@ const Home: NextPage = () => {
     <BaseLayout title={"Home"}>
       <>
         <main className="container mx-auto flex flex-col items-center justify-center min-h-screen p-4">
+          <div className="w-1/3 prose ">
+            <h3>
+              Short Cut is blazingly fast URL shortner service. It is built on
+              top of redis.
+            </h3>
+            <ul>
+              <li>Provides a great visual analytics of your short links.</li>
+              <li>Fastest redirects to your original URL.</li>
+              <li>No need to wait for the page to load.</li>
+            </ul>
+          </div>
           <CreateShortCutForm />
+          <button
+            onClick={() => userLinks.refetch()}
+            className="btn btn-outline my-4"
+          >
+            Refresh Data
+          </button>
           <div className="overflow-x-auto">
             <table className="table table-zebra w-full">
               <thead>