Make UI a bit better

Rohithgilla12 · Aug 28, 2022 · a577d17 · a577d17
1 parent a0cd2ab
commit a577d17
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@trpc/react": "^9.27.2",
     "@trpc/server": "^9.27.2",
     "daisyui": "^2.24.0",
+    "nanoid": "^4.0.0",
     "next": "12.2.5",
     "next-auth": "^4.10.3",
     "react": "18.2.0",

diff --git a/src/components/CreateShortCutForm.tsx b/src/components/CreateShortCutForm.tsx
@@ -4,7 +4,7 @@ import { trpc } from "../utils/trpc";
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface CreateShortCutFormProps {}
 
-export const CreateShortCutForm: React.FC<CreateShortCutFormProps> = ({}) => {
+const CreateShortCutForm: React.FC<CreateShortCutFormProps> = ({}) => {
   const createShortLink = trpc.useMutation(["shortCut.createShortLink"]);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -33,7 +33,7 @@ export const CreateShortCutForm: React.FC<CreateShortCutFormProps> = ({}) => {
           placeholder="Type here"
           id="url"
           name="url"
-          className="form-input input input-bordered w-full max-w-xs"
+          className="input input-bordered w-full max-w-xs"
         />
 
         <label className="label">
@@ -46,13 +46,13 @@ export const CreateShortCutForm: React.FC<CreateShortCutFormProps> = ({}) => {
           name="slug"
           className="input input-bordered w-full max-w-xs"
         />
-        <button
-          type="submit"
-          className="button shadow-lg w-48 px-8 m-4 text-white shadow-black/50 bg-black rounded-lg"
-        >
+        <br />
+        <button type="submit" className="btn btn-outline btn-success p-2">
           Create Shortlink
         </button>
       </div>
     </form>
   );
 };
+
+export default CreateShortCutForm;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,14 +1,22 @@
-import { signIn, useSession } from "next-auth/react";
+import { signIn, signOut, useSession } from "next-auth/react";
 
-import { CreateShortCutForm } from "../components/CreateShortCutForm";
 import Head from "next/head";
 import type { NextPage } from "next";
+import { Suspense } from "react";
+import dynamic from "next/dynamic";
 import { trpc } from "../utils/trpc";
 
+const CreateShortCutForm = dynamic(
+  () => import("../components/CreateShortCutForm"),
+  {
+    ssr: false,
+  }
+);
+
 const Home: NextPage = () => {
   const { status, data } = useSession();
 
-  const hello = trpc.useQuery(["shortCut.getShortLink", { slug: "meme" }]);
+  const userLinks = trpc.useQuery(["shortCut.getAllShortLinksByUser"]);
 
   return (
     <>
@@ -17,29 +25,28 @@ const Home: NextPage = () => {
         <meta name="description" content="Short Cut | Fastest URL Shortner" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
-      <main className="container mx-auto flex flex-col items-center justify-center min-h-screen p-4">
-        <div className="pt-6 text-2xl text-blue-500 flex justify-center items-center w-full">
-          {hello.data ? <p>{JSON.stringify(hello.data)}</p> : <p>Loading..</p>}
+      <Suspense>
+        <div className="navbar bg-base-100">
+          <div className="flex-1">
+            <a className="btn btn-ghost normal-case text-xl">Short Cut</a>
+          </div>
+          <div className="flex-none gap-2">
+            {status === "unauthenticated" ? (
+              <button className="btn btn-primary" onClick={() => signIn()}>
+                Sign in
+              </button>
+            ) : (
+              <button className="btn btn-primary" onClick={() => signOut()}>
+                Sign out
+              </button>
+            )}
+          </div>
         </div>
-
-        {status === "unauthenticated" ? (
-          <button onClick={() => signIn()}>Sign in</button>
-        ) : (
-          <text>{JSON.stringify(data, null, 2)}</text>
-        )}
-        <CreateShortCutForm />
-        <button
-          onClick={async () => {
-            const shortLink = hello.data!;
-
-            // await createShortLink(shortLink);
-            console.log(shortLink);
-          }}
-        >
-          Test REdis
-        </button>
-      </main>
+        <main className="container mx-auto flex flex-col items-center justify-center min-h-screen p-4">
+          <CreateShortCutForm />
+          {JSON.stringify(userLinks.data)}
+        </main>
+      </Suspense>
     </>
   );
 };

diff --git a/src/server/router/shortCut.ts b/src/server/router/shortCut.ts
@@ -47,6 +47,9 @@ export const shortCutRouter = createRouter()
   })
   .query("getAllShortLinksByUser", {
     async resolve({ ctx }) {
+      if (!ctx.session?.user?.id) {
+        return null;
+      }
       return await ctx.prisma.shortLink.findMany({
         where: {
           userId: ctx.session?.user?.id,

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -5,7 +5,7 @@ module.exports = {
     extend: {},
   },
   plugins: [
-    // require("daisyui"),
+    require("daisyui"),
     require("@tailwindcss/typography"),
     require("@tailwindcss/forms"),
   ],

diff --git a/yarn.lock b/yarn.lock
@@ -1673,6 +1673,11 @@ nanoid@^3.3.4:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
+nanoid@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-4.0.0.tgz#6e144dee117609232c3f415c34b0e550e64999a5"
+  integrity sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"