From dba761dcb1bdb6cbab41b95d119c17819afbdf9f Mon Sep 17 00:00:00 2001 From: n4ze3m Date: Mon, 10 Apr 2023 23:38:26 +0530 Subject: [PATCH] basic settings added --- prisma/schema.prisma | 18 +++---- src/components/Dashboard/Empty.tsx | 52 ++++++++++++++++++ src/components/Dashboard/index.tsx | 15 ++++++ src/components/Layouts/DashboardLayout.tsx | 25 +++++---- src/components/Settings/index.tsx | 61 ++++++++++++++++++++++ src/pages/dashboard/index.tsx | 15 ++++-- src/pages/dashboard/settings.tsx | 38 ++++++++++++++ src/server/api/root.ts | 2 + src/server/api/routers/settings.ts | 35 +++++++++++++ src/server/api/trpc.ts | 19 +++++-- 10 files changed, 252 insertions(+), 28 deletions(-) create mode 100644 src/components/Dashboard/Empty.tsx create mode 100644 src/components/Dashboard/index.tsx create mode 100644 src/components/Settings/index.tsx create mode 100644 src/pages/dashboard/settings.tsx create mode 100644 src/server/api/routers/settings.ts diff --git a/prisma/schema.prisma b/prisma/schema.prisma index d72a8c3..6ec48ab 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -1,17 +1,15 @@ -// This is your Prisma schema file, -// learn more about it in the docs: https://pris.ly/d/prisma-schema - generator client { - provider = "prisma-client-js" + provider = "prisma-client-js" } datasource db { - provider = "postgresql" - url = env("DATABASE_URL") + provider = "postgresql" + url = env("DATABASE_URL") } -model Example { - id String @id @default(cuid()) - createdAt DateTime @default(now()) - updatedAt DateTime @updatedAt +model User { + id String @id @db.Uuid + email String? + access_token String? + created_at DateTime? @default(now()) @db.Timestamptz(6) } diff --git a/src/components/Dashboard/Empty.tsx b/src/components/Dashboard/Empty.tsx new file mode 100644 index 0000000..080af83 --- /dev/null +++ b/src/components/Dashboard/Empty.tsx @@ -0,0 +1,52 @@ +import React from "react"; + +export default function Empty() { + return ( +
+ +

No Chats Yet

+

+ Get started by installing the Page Assist Chrome Extension. +

+
+ +
+
+ ); +} diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx new file mode 100644 index 0000000..1bc281d --- /dev/null +++ b/src/components/Dashboard/index.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import Empty from "./Empty"; + +export default function DashboardBoby() { + return ( + <> + {/* align to center of the screen */} +
+
+ +
+
+ + ); +} diff --git a/src/components/Layouts/DashboardLayout.tsx b/src/components/Layouts/DashboardLayout.tsx index a113ec9..2d61631 100644 --- a/src/components/Layouts/DashboardLayout.tsx +++ b/src/components/Layouts/DashboardLayout.tsx @@ -8,10 +8,12 @@ import { } from "@heroicons/react/24/outline"; import { ChevronDownIcon } from "@heroicons/react/20/solid"; import { useUser } from "@supabase/auth-helpers-react"; +import { useRouter } from "next/router"; +import Link from "next/link"; const navigation = [ - { name: "Home", href: "#", icon: HomeIcon, current: true }, - { name: "Settings", href: "#", icon: CogIcon, current: false }, + { name: "Home", href: "/dashboard", icon: HomeIcon, current: true }, + { name: "Settings", href: "/dashboard/settings", icon: CogIcon, current: false }, ]; //@ts-ignore @@ -26,6 +28,7 @@ export default function DashboardLayout({ }) { const [sidebarOpen, setSidebarOpen] = useState(false); const user = useUser(); + const router = useRouter(); return ( <> @@ -95,20 +98,22 @@ export default function DashboardLayout({ >
{navigation.map((item) => ( - + ))}
@@ -144,16 +149,16 @@ export default function DashboardLayout({ key={item.name} href={item.href} className={classNames( - item.current + router.pathname === item.href ? "bg-gray-100 text-gray-900" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900", "group flex items-center rounded-md px-2 py-2 text-sm font-medium" )} - aria-current={item.current ? "page" : undefined} + aria-current={router.pathname === item.href ? "page" : undefined} > + {status === "loading" &&
Loading...
} + {status === "success" && ( +
+
+
+

+ Chrom Extension +

+

+ Copy the following code and paste it into the extension. +

+
+
+
+
+
+ +
+ + + +
+
+
+
+
+ )} + + ); +} diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 36c06fb..290a493 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -1,5 +1,7 @@ -import { createServerSupabaseClient } from "@supabase/auth-helpers-nextjs"; +import { createServerSupabaseClient } from "@supabase/auth-helpers-nextjs"; import { GetServerSideProps, NextPage } from "next"; +import Head from "next/head"; +import DashboardBoby from "~/components/Dashboard"; import DashboardLayout from "~/components/Layouts/DashboardLayout"; export const getServerSideProps: GetServerSideProps = async (ctx) => { @@ -23,9 +25,14 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { }; const DashboardPage: NextPage = () => { - return - a - ; + return ( + + + Dashboard / PageAssist + + + + ); }; export default DashboardPage; diff --git a/src/pages/dashboard/settings.tsx b/src/pages/dashboard/settings.tsx new file mode 100644 index 0000000..b5085e9 --- /dev/null +++ b/src/pages/dashboard/settings.tsx @@ -0,0 +1,38 @@ +import { createServerSupabaseClient } from "@supabase/auth-helpers-nextjs"; +import { GetServerSideProps, NextPage } from "next"; +import Head from "next/head"; +import DashboardLayout from "~/components/Layouts/DashboardLayout"; +import SettingsBody from "~/components/Settings"; + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const supabase = createServerSupabaseClient(ctx); + const { + data: { session }, + } = await supabase.auth.getSession(); + + if (!session) { + return { + redirect: { + destination: "/auth", + permanent: false, + }, + }; + } + + return { + props: {}, + }; +}; + +const DashboardSettingsPage: NextPage = () => { + return ( + + + Settings / PageAssist + + + + ); +}; + +export default DashboardSettingsPage; diff --git a/src/server/api/root.ts b/src/server/api/root.ts index 93fba92..47dd95e 100644 --- a/src/server/api/root.ts +++ b/src/server/api/root.ts @@ -1,5 +1,6 @@ import { createTRPCRouter } from "~/server/api/trpc"; import { exampleRouter } from "~/server/api/routers/example"; +import { settingsRouter } from "./routers/settings"; /** * This is the primary router for your server. @@ -8,6 +9,7 @@ import { exampleRouter } from "~/server/api/routers/example"; */ export const appRouter = createTRPCRouter({ example: exampleRouter, + settings: settingsRouter }); // export type definition of API diff --git a/src/server/api/routers/settings.ts b/src/server/api/routers/settings.ts new file mode 100644 index 0000000..ec6891c --- /dev/null +++ b/src/server/api/routers/settings.ts @@ -0,0 +1,35 @@ +import { TRPCError } from "@trpc/server"; +import { z } from "zod"; + +import { createTRPCRouter, publicProcedure } from "~/server/api/trpc"; + +export const settingsRouter = createTRPCRouter({ + getAccessToken: publicProcedure + .query(async ({ ctx }) => { + const user = ctx.user; + const prisma = ctx.prisma; + if (!user) { + throw new TRPCError({ + "code": "UNAUTHORIZED", + "message": "You are not authorized to access this resource", + }); + } + + const accessToken = await prisma.user.findFirst({ + where: { + id: user.id, + }, + }); + + if (!accessToken) { + throw new TRPCError({ + "code": "UNAUTHORIZED", + "message": "You are not authorized to access this resource", + }); + } + + return { + accessToken: accessToken.access_token, + }; + }), +}); diff --git a/src/server/api/trpc.ts b/src/server/api/trpc.ts index 08305da..a49cf0e 100644 --- a/src/server/api/trpc.ts +++ b/src/server/api/trpc.ts @@ -42,8 +42,17 @@ const createInnerTRPCContext = (_opts: CreateContextOptions) => { * * @see https://trpc.io/docs/context */ -export const createTRPCContext = (_opts: CreateNextContextOptions) => { - return createInnerTRPCContext({}); +export const createTRPCContext = async (_opts: CreateNextContextOptions) => { + const supabaseServerClient = createServerSupabaseClient(_opts); + const { + data: { user }, + } = await supabaseServerClient.auth.getUser(); + + return { + ...createInnerTRPCContext({}), + user, + supabase: supabaseServerClient, + }; }; /** @@ -56,6 +65,7 @@ export const createTRPCContext = (_opts: CreateNextContextOptions) => { import { initTRPC } from "@trpc/server"; import superjson from "superjson"; import { ZodError } from "zod"; +import { createServerSupabaseClient } from "@supabase/auth-helpers-nextjs"; const t = initTRPC.context().create({ transformer: superjson, @@ -64,8 +74,9 @@ const t = initTRPC.context().create({ ...shape, data: { ...shape.data, - zodError: - error.cause instanceof ZodError ? error.cause.flatten() : null, + zodError: error.cause instanceof ZodError + ? error.cause.flatten() + : null, }, }; },