add user context

pingpad-io · Jul 2, 2024 · 1e2ae17 · 1e2ae17
1 parent 41360ee
commit 1e2ae17
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 21 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,9 +1,11 @@
 import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
-import Providers from "~/components/Providers";
 import { quicksand } from "~/styles/fonts";
 import "../styles/globals.css";
+import { Providers } from "~/components/Providers";
 import { Toaster } from "~/components/ui/sonner";
+import { UserProvider } from "~/components/user/UserContext";
+import { getLensClient } from "~/utils/getLensClient";
 
 export const metadata = {
   title: {
@@ -13,22 +15,22 @@ export const metadata = {
   description: "reach your people on pingpad",
 };
 
-export const maxDuration = 60
+export const maxDuration = 60;
+
+export default async function RootLayout({ children }) {
+  const { user } = await getLensClient();
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
   return (
     <html className={`${quicksand.variable} scroll-smooth font-sans overflow-y-scroll`} lang="en">
       <body className="flex flex-col relative">
         <Providers>
-          <SpeedInsights />
-          <Analytics />
-          <Toaster position="top-right" offset={16} />
+          <UserProvider user={user}>
+            <SpeedInsights />
+            <Analytics />
+            <Toaster position="top-right" offset={16} />
 
-          {children}
+            {children}
+          </UserProvider>
         </Providers>
       </body>
     </html>

diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx
@@ -6,12 +6,14 @@ import { bindings } from "@lens-protocol/wagmi";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ThemeProvider } from "next-themes";
 import type React from "react";
-import { WagmiProvider, createConfig, http } from "wagmi";
+import { http, WagmiProvider, createConfig } from "wagmi";
 import { polygon } from "wagmi/chains";
 import { injected, walletConnect } from "wagmi/connectors";
 import { env } from "~/env.mjs";
 import { getBaseUrl } from "~/utils/getBaseUrl";
+import { getLensClient } from "~/utils/getLensClient";
 import { localStorage } from "~/utils/localStorage";
+import { UserProvider } from "./user/UserContext";
 
 const projectId = env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID;
 const url = getBaseUrl();
@@ -67,12 +69,17 @@ const lensConfig: LensConfig = {
   storage: localStorage(),
 };
 
-export default function Providers({ children }: { children: React.ReactNode }) {
+
+
+
+export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <ThemeProvider attribute="class" defaultTheme="system" disableTransitionOnChange enableColorScheme>
       <WagmiProvider config={wagmiConfig}>
         <QueryClientProvider client={queryClient}>
-          <LensProvider config={lensConfig}>{children}</LensProvider>
+          <LensProvider config={lensConfig}>
+            {children}
+          </LensProvider>
         </QueryClientProvider>
       </WagmiProvider>
     </ThemeProvider>

diff --git a/src/components/post/PostContextMenu.tsx b/src/components/post/PostContextMenu.tsx
@@ -1,15 +1,17 @@
 "use client";
 import { type PropsWithChildren, useEffect, useState } from "react";
 import { Card } from "../ui/card";
+import { useUser } from "../user/UserContext";
 import type { Post } from "./Post";
 import { PostMenu } from "./PostMenu";
 
-export const PostContextMenu = (props: PropsWithChildren & { post: Post }) => {
+export const ContextMenu = (props: PropsWithChildren & { post: Post }) => {
   const [clicked, setClicked] = useState(false);
   const [points, setPoints] = useState({
     x: 0,
     y: 0,
   });
+  const { user } = useUser();
 
   const handleClick = () => setClicked(false);
   useEffect(() => {
@@ -34,7 +36,7 @@ export const PostContextMenu = (props: PropsWithChildren & { post: Post }) => {
       {clicked && (
         <div className="z-[40] absolute" style={{ top: `${points.y}px`, left: `${points.x}px` }}>
           <Card className="flex flex-col w-max gap-1 p-1 hover:bg-card border">
-            <PostMenu post={props.post} profileId="" />
+            <PostMenu post={props.post} profileId={user.id} />
           </Card>
         </div>
       )}

diff --git a/src/components/post/PostMenu.tsx b/src/components/post/PostMenu.tsx
@@ -18,7 +18,6 @@ export const PostMenu = ({ post, profileId }: { post: Post; profileId: string })
   };
 
   const deletePost = () => {
-    toast.error("Not implemented yet");
   };
 
   const copyLink = () => {
@@ -50,7 +49,7 @@ export const PostMenu = ({ post, profileId }: { post: Post; profileId: string })
       </Button>
       {profileId === author.id && (
         <>
-          <Button size="context" variant="ghost" onClick={setEditingQuery}>
+          <Button size="context" variant="ghost" onClick={setEditingQuery} disabled>
             <EditIcon size={12} className="mr-2 h-4 w-4" />
             edit post
           </Button>

diff --git a/src/components/post/PostView.tsx b/src/components/post/PostView.tsx
@@ -6,8 +6,9 @@ import { UserAvatar } from "../user/UserAvatar";
 import type { Post } from "./Post";
 import { PostComments } from "./PostComments";
 import { PostContent } from "./PostContent";
-import { PostContextMenu } from "./PostContextMenu";
+import { ContextMenu } from "./PostContextMenu";
 import { PostInfo } from "./PostInfo";
+import { PostMenu } from "./PostMenu";
 import { ReactionsList } from "./PostReactions";
 import { ReplyInfo } from "./PostReplyInfo";
 
@@ -28,7 +29,7 @@ export const PostView = ({
 
   return (
     <div className={"flex flex-col gap-2 w-full"}>
-      <PostContextMenu post={item}>
+      <ContextMenu post={item}>
         <Card onClick={() => setCollapsed(false)}>
           <CardContent className={`flex flex-row p-2 ${settings.isComment ? "sm:p-2 sm:pb-4 gap-2" : "sm:p-4 gap-4 "}`}>
             <span className="min-h-full flex flex-col justify-start items-center relative">
@@ -56,7 +57,7 @@ export const PostView = ({
             </div>
           </CardContent>
         </Card>
-      </PostContextMenu>
+      </ContextMenu>
       <PostComments isExpanded={isCommentsOpen} post={item} />
     </div>
   );

diff --git a/src/components/user/UserContext.tsx b/src/components/user/UserContext.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import React, { createContext, useContext, type ReactNode } from "react";
+import type { User } from "./User";
+
+interface UserContextType {
+  user: User;
+}
+
+const UserContext = createContext<UserContextType | undefined>(undefined);
+
+export function UserProvider({ children, user }: { children: ReactNode; user: User }) {
+  return <UserContext.Provider value={{ user }}>{children}</UserContext.Provider>;
+}
+
+export function useUser() {
+  const context = useContext(UserContext);
+
+  if (context === undefined) {
+    throw new Error("useUser must be used within a UserProvider");
+  }
+
+  return context;
+}