From d2dddeda40c9536e975cbcf7fa4f374dd4e6ad04 Mon Sep 17 00:00:00 2001 From: Soham Gupta Date: Fri, 27 Sep 2024 22:16:35 +0530 Subject: [PATCH] feat: add dark mode and reorganize hooks - Implement dark mode functionality using `SessionProvider` - Move hooks from components/hooks to root-level hooks directory - Replace Posts component with DummyPosts in Homepage --- app/sub/create/page.tsx | 4 +- components/Providers.tsx | 5 +- components/SubscribeLeaveToggle.tsx | 22 +++- components/UserAuthentication.tsx | 2 +- components/pages/DummyPosts.tsx | 107 ++++++++++++++++++ components/pages/Homepage.tsx | 18 +-- components/pages/Navbar.tsx | 8 +- components/ui/toaster.tsx | 12 +- .../hooks => hooks}/use-on-click-outside.ts | 0 {components/hooks => hooks}/use-toast.ts | 0 .../hooks => hooks}/useCustomToast.tsx | 2 +- 11 files changed, 147 insertions(+), 33 deletions(-) create mode 100644 components/pages/DummyPosts.tsx rename {components/hooks => hooks}/use-on-click-outside.ts (100%) rename {components/hooks => hooks}/use-toast.ts (100%) rename {components/hooks => hooks}/useCustomToast.tsx (87%) diff --git a/app/sub/create/page.tsx b/app/sub/create/page.tsx index 56c052f..b3fefa3 100644 --- a/app/sub/create/page.tsx +++ b/app/sub/create/page.tsx @@ -6,8 +6,8 @@ import { useState } from "react"; import { useMutation } from "@tanstack/react-query"; import axios, { AxiosError } from "axios"; import { CreateSubgroupPayload } from "@/lib/validators/sub"; -import { toast } from "@/components/hooks/use-toast"; -import useCustomToast from "@/components/hooks/useCustomToast"; +import { toast } from "@/hooks/use-toast"; +import useCustomToast from "@/hooks/useCustomToast"; import { ToastAction } from "@/components/ui/toast"; export default function Create() { diff --git a/components/Providers.tsx b/components/Providers.tsx index fc73529..93c5155 100644 --- a/components/Providers.tsx +++ b/components/Providers.tsx @@ -1,5 +1,6 @@ "use client"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { SessionProvider } from "next-auth/react"; import { ThemeProvider as NextThemesProvider } from "next-themes"; import { ThemeProviderProps } from "next-themes/dist/types"; @@ -13,7 +14,9 @@ export default function Providers({ return ( - {children} + + {children} + ); } diff --git a/components/SubscribeLeaveToggle.tsx b/components/SubscribeLeaveToggle.tsx index 3ce8fef..3baa333 100644 --- a/components/SubscribeLeaveToggle.tsx +++ b/components/SubscribeLeaveToggle.tsx @@ -4,9 +4,9 @@ import { Button } from "./ui/button"; import { SubscribeToSubgroupPayload } from "@/lib/validators/sub"; import axios, { AxiosError } from "axios"; import { ToastAction } from "./ui/toast"; -import { toast } from "./hooks/use-toast"; +import { toast } from "@/hooks/use-toast"; import { useRouter } from "next/navigation"; -import useCustomToast from "./hooks/useCustomToast"; +import useCustomToast from "@/hooks/useCustomToast"; import { startTransition } from "react"; interface SubscribeLeaveToggleProps { isSubscribed: boolean; @@ -65,7 +65,7 @@ export default function SubscribeLeaveToggle({ }); }, }); - + // Unsubscribe const { mutate: unsubscribe, isPending: isUnsubscribing } = useMutation({ mutationFn: async () => { @@ -118,8 +118,20 @@ export default function SubscribeLeaveToggle({ }); return isSubscribed ? ( - + ) : ( - + ); } diff --git a/components/UserAuthentication.tsx b/components/UserAuthentication.tsx index a260350..7b6c2c0 100644 --- a/components/UserAuthentication.tsx +++ b/components/UserAuthentication.tsx @@ -4,7 +4,7 @@ import { Button } from "./ui/button"; import { cn } from "@/lib/utils"; import { signIn } from "next-auth/react"; import { Icons } from "./Icons"; -import { useToast } from "./hooks/use-toast"; +import { useToast } from "@/hooks/use-toast"; interface UserAuthFormProps extends React.HTMLAttributes {} diff --git a/components/pages/DummyPosts.tsx b/components/pages/DummyPosts.tsx new file mode 100644 index 0000000..67d162e --- /dev/null +++ b/components/pages/DummyPosts.tsx @@ -0,0 +1,107 @@ +import React from "react"; + +import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"; +import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card"; +import { + ArrowDown, + ArrowUp, + Filter, + MessageCircle, + MessageCircleReply, + MoveDiagonal, +} from "lucide-react"; +import Image from "next/image"; +import { Button } from "@/components/ui/button"; + +type PostType = { + content: string | JSX.Element; + timeAgo: string; + upvotes: number; + comments: number; +}; +export function Posts() { + return ( +
+
+

Your Feed

+ +
+
+ + + } + timeAgo="1 day ago" + upvotes={456} + comments={78} + /> + +
+
+ ); +} + +function Post({ content, timeAgo, upvotes, comments }: PostType) { + return ( + + +
+ + + UN + + +
+
Anonymous User
+
{timeAgo}
+
+
+ + + + + +
{content}
+ + + +
{upvotes} upvotes
+ + +
{comments} comments
+ + + ); +} diff --git a/components/pages/Homepage.tsx b/components/pages/Homepage.tsx index 0b79fd1..07528a1 100644 --- a/components/pages/Homepage.tsx +++ b/components/pages/Homepage.tsx @@ -1,19 +1,10 @@ -/** -* This code was generated by v0 by Vercel. -* @see https://v0.dev/t/wCMd6Ox71Zy -*/ - -import { Communities } from "@/components/pages/Communities" -import { Posts } from "@/components/pages/Posts" - - +import { Communities } from "@/components/pages/Communities"; +import { Posts } from "@/components/pages/DummyPosts"; export function Homepage() { - return ( //
-
@@ -22,7 +13,6 @@ export function Homepage() {
-
- ) -} \ No newline at end of file + ); +} diff --git a/components/pages/Navbar.tsx b/components/pages/Navbar.tsx index bfb6528..effa2cd 100644 --- a/components/pages/Navbar.tsx +++ b/components/pages/Navbar.tsx @@ -22,9 +22,11 @@ export async function Navbar() {

Crypt

- - v1.0 - + + + v1.0 + +