migrating to updated t3, adding user page

madebyarthouse · Jan 17, 2024 · 7aac21a · 7aac21a
1 parent 8f04251
commit 7aac21a
Show file tree

Hide file tree

Showing 52 changed files with 1,592 additions and 235 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -40,6 +40,12 @@ const config = {
         hostname: "lh3.googleusercontent.com",
         port: "",
       },
+
+      {
+        protocol: "https",
+        hostname: "avatar.vercel.sh",
+        port: "",
+      },
     ],
   },
 };

diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "postinstall": "prisma generate",
     "lint": "next lint",
     "start": "next start",
-    "generate": "yarn openapi --input \"http://0.0.0.0:8000/openapi.json\" --output ./src/lib/search --indent 2 --name SearchClient --useOptions"
+    "generate": "yarn openapi --input \"http://0.0.0.0:8000/openapi.json\" --output ./src/server/video-query --indent 2 --name VideoQuery --useOptions"
   },
   "dependencies": {
     "@next-auth/prisma-adapter": "^1.0.5",
@@ -19,6 +19,7 @@
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-scroll-area": "^1.0.4",
     "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
     "@t3-oss/env-nextjs": "^0.3.1",
     "@tanstack/react-query": "^4.29.7",
     "@trpc/client": "^10.26.0",

diff --git a/src/app/TRPCProvider.tsx b/src/app/TRPCProvider.tsx
diff --git a/src/app/api/session/route.ts b/src/app/api/session/route.ts
diff --git a/src/app/api/trpc/[trpc]/route.ts b/src/app/api/trpc/[trpc]/route.ts
@@ -1,13 +1,34 @@
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+import { type NextRequest } from "next/server";
 
+import { env } from "~/env.mjs";
 import { appRouter } from "~/server/api/root";
+import { createTRPCContext } from "~/server/api/trpc";
 
-const handler = (req: Request) =>
-    fetchRequestHandler({
-        endpoint: "/api/trpc",
-        req,
-        router: appRouter,
-        createContext: () => ({}),
-    });
+/**
+ * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
+ * handling a HTTP request (e.g. when you make requests from Client Components).
+ */
+const createContext = async (req: NextRequest) => {
+  return createTRPCContext({
+    headers: req.headers,
+  });
+};
 
-export { handler as GET, handler as POST };
+const handler = (req: NextRequest) =>
+  fetchRequestHandler({
+    endpoint: "/api/trpc",
+    req,
+    router: appRouter,
+    createContext: () => createContext(req),
+    onError:
+      env.NODE_ENV === "development"
+        ? ({ path, error }) => {
+            console.error(
+              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
+            );
+          }
+        : undefined,
+  });
+
+export { handler as GET, handler as POST };
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,8 +1,9 @@
 import "./global.css";
 import Footer from "./Footer";
 import { Analytics } from "@vercel/analytics/react";
+import { cookies } from "next/headers";
 import AuthProvider from "./AuthProvider";
-import TRPCProvider from "./TRPCProvider";
+import { TRPCReactProvider } from "~/trpc/react";
 
 const description =
   "Discover and relive memorable moments from your favorite content creators";
@@ -27,9 +28,11 @@ export default function RootLayout({
         <title>parasocial</title>
         <meta name="twitter:card" content={description} />
       </head>
-      <body className="relative h-full min-h-screen bg-rose-900		 text-zinc-100">
+      <body className="relative h-full min-h-screen bg-rose-900 text-zinc-100">
         <AuthProvider>
-          <TRPCProvider>{children}</TRPCProvider>
+          <TRPCReactProvider cookies={cookies().toString()}>
+            {children}
+          </TRPCReactProvider>
         </AuthProvider>
         <Footer />
         <Analytics />

diff --git a/src/app/p/[name]/Player.tsx b/src/app/p/[name]/Player.tsx
@@ -13,6 +13,41 @@ type PlayerProps = {
   end?: number;
 };
 
+export function MobilePlayer({ video, start, end }: PlayerProps) {
+  const height = 480;
+  const width = 853;
+  const hwRatio = height / width;
+
+  const documentUrl = new URL(video.url);
+  const videoId = documentUrl.searchParams.get("v");
+
+  const { parentRef, parentSize } = useParentSizeObserver();
+  const router = useRouter();
+
+  return;
+  <div
+    className="flex flex-1 flex-col border-4 border-b-0 border-r-0 border-black bg-inherit"
+    ref={parentRef}
+  >
+    <YouTube
+      className="mx-auto"
+      videoId={videoId!}
+      opts={{
+        width: parentSize.width - 2,
+        height: hwRatio * (parentSize.width - 2),
+        playerVars: {
+          // https://developers.google.com/youtube/player_parameters#Parameters
+          color: "white",
+          autoplay: 1,
+          rel: 0,
+          start: start,
+          controls: 1, // 0 - no controls
+        },
+      }}
+    />
+  </div>;
+}
+
 export function Player({ video, start, end }: PlayerProps) {
   const height = 480;
   const width = 853;

diff --git a/src/app/p/[name]/ProfilePanel.tsx b/src/app/p/[name]/ProfilePanel.tsx
@@ -1,10 +1,26 @@
+import {} from "react";
 import Link from "next/link";
 import Image from "next/image";
 
 import { searchInstance } from "~/lib/search/instance";
 import { YoutubeProfile } from "~/lib/search";
-import SignInBtn from "~/components/SignInBtn";
-import { getServerAuthSession } from "~/server/auth";
+
+export function BackButton({ backHref }: { backHref: string }) {
+  return (
+    <Link
+      href={backHref}
+      className=" h-fit border-4 border-black bg-black font-bold shadow-[8px_8px_0_0_#000] transition hover:shadow-none focus:outline-none focus:ring "
+    >
+      <Image
+        className="m-1"
+        src="/icons/left-arrow.svg"
+        height={32}
+        width={32}
+        alt="left arrow"
+      />
+    </Link>
+  );
+}
 
 type ProfileImageProps = {
   profile: YoutubeProfile;
@@ -44,18 +60,7 @@ export async function ProfilePanel({ author, backHref }: ProfileHeaderProps) {
   return (
     <div className="gap-4">
       <div className="absolute flex flex-row justify-between">
-        <Link
-          href={backHref}
-          className=" h-fit  border-4 border-black bg-black font-bold shadow-[8px_8px_0_0_#000] transition hover:shadow-none focus:outline-none focus:ring "
-        >
-          <Image
-            className="m-1"
-            src="/icons/left-arrow.svg"
-            height={32}
-            width={32}
-            alt="left arrow"
-          />
-        </Link>
+        <BackButton backHref={backHref} />
       </div>
       <div className="relative mx-auto w-fit">
         <ProfileImage profile={profile} />

diff --git a/src/app/p/[name]/SearchBar.tsx b/src/app/p/[name]/SearchBar.tsx
@@ -9,7 +9,8 @@ import useInput from "~/hooks/useInput";
 import { useClickOutside } from "~/hooks/useClickOutside";
 
 import { useDebounce } from "~/hooks/useDebounce";
-import { trpcClient } from "~/lib/trpc-client";
+import { api as trpcClient } from "~/trpc/react";
+// import { trpcClient } from "~/lib/trpc-client";
 import { getBaseUrl } from "~/lib/utils";
 
 type QuerySuggestionProps = {

diff --git a/src/app/p/[name]/SearchItem.tsx b/src/app/p/[name]/SearchItem.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useSearchParams, useRouter } from "next/navigation";
 
-import { SearchResult } from "~/lib/search";
+import { SearchResult } from "~/server/video-query";
 import { timestamp } from "~/lib/utils";
 import Player from "~/components/Youtube";
 
@@ -20,7 +20,7 @@ interface SearchItemProps {
 }
 
 export default function SearchItem({
-  result: { document: video, start_ms, end_ms, text },
+  result: { video: video, start_ms, end_ms, text },
 }: SearchItemProps) {
   const [playMobile, setPlayMobile] = useState(false);
 

diff --git a/src/app/p/[name]/SearchPage.tsx b/src/app/p/[name]/SearchPage.tsx
@@ -2,8 +2,10 @@
 import { useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
 
-import { SearchResult } from "~/lib/search";
-import { trpcClient } from "~/lib/trpc-client";
+// import { SearchResult } from "~/lib/search";
+import { SearchResult } from "~/server/video-query";
+// import { trpcClient } from "~/lib/trpc-client";
+import { api as trpcClient } from "~/trpc/react";
 import SearchItem from "./SearchItem";
 
 export function DummyPage() {
@@ -35,7 +37,7 @@ export function SearchPage({ author, initResults }: SearchPageProps) {
   const [query, setQuery] = useState<string>();
   const params = useSearchParams();
 
-  const { data, isLoading } = trpcClient.search.queryAuthor.useQuery(
+  const { data, isLoading } = trpcClient.video.search.useQuery(
     {
       author,
       query: query!,
@@ -63,7 +65,7 @@ export function SearchPage({ author, initResults }: SearchPageProps) {
           {results &&
             results.map((result) => (
               <SearchItem
-                key={result.document.id + result.start_ms}
+                key={result.video.id + result.start_ms}
                 result={result}
               />
             ))}

diff --git a/src/app/p/[name]/UploadList.tsx b/src/app/p/[name]/UploadList.tsx
@@ -2,7 +2,7 @@
 import Image from "next/image";
 import { useState } from "react";
 
-import { YoutubeVideo } from "~/lib/search";
+import { YoutubeVideo } from "~/server/video-query";
 import { ScrollArea } from "~/components/ui/scroll-area";
 import {
   Accordion,

diff --git a/src/app/p/[name]/page.tsx b/src/app/p/[name]/page.tsx
@@ -1,13 +1,13 @@
 import { Suspense } from "react";
+import SignInBtn from "~/components/UserButton";
+import { api } from "~/trpc/server";
 
-import { searchInstance } from "~/lib/search/instance";
-import SignInBtn from "~/components/SignInBtn";
 import { SearchPage, DummyPage } from "./SearchPage";
 import RecommendPage from "./RecommendPage";
 import { UploadList } from "./UploadList";
 import { ProfilePanel } from "./ProfilePanel";
 import { SearchBar } from "./SearchBar";
-import { Player } from "./Player";
+import { Player, MobilePlayer } from "./Player";
 
 type SearchParamType = string | string[] | undefined;
 
@@ -30,16 +30,9 @@ export default async function Page({ params, searchParams }: PageProps) {
   const end = parseSearchQuery(searchParams.end);
 
   const [documents, results, currDocument] = await Promise.all([
-    searchInstance.documents.allDocuments({ author }),
-    query
-      ? searchInstance.search.querySegmentsFromProfile({
-          author: author,
-          query: query!,
-        })
-      : undefined,
-    documentId
-      ? searchInstance.documents.getDocument({ id: documentId })
-      : undefined,
+    api.video.getAll.query({ author }),
+    query ? api.video.search.query({ author, query }) : undefined,
+    documentId ? api.video.get.query({ id: documentId }) : undefined,
   ]);
 
   return (
@@ -49,7 +42,7 @@ export default async function Page({ params, searchParams }: PageProps) {
         <UploadList documents={documents} />
       </section>
 
-      <section className="flex h-screen flex-1 flex-col">
+      <section className="flex min-h-screen flex-1 flex-col">
         <SearchBar
           className="mt-auto pr-4"
           author={author}
@@ -61,7 +54,7 @@ export default async function Page({ params, searchParams }: PageProps) {
         <div className="flex h-[93vh] flex-row">
           {query ? (
             <Suspense fallback={<DummyPage />}>
-              <SearchPage author={author} initResults={results} />
+              <SearchPage author={author} initResults={results || []} />
             </Suspense>
           ) : (
             <RecommendPage />

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import SignInBtn from "~/components/SignInBtn";
+import SignInBtn from "~/components/UserButton";
 
 import { searchInstance } from "~/lib/search/instance";