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
gupta-soham · Sep 27, 2024 · d2ddded · d2ddded
1 parent 1fc0295
commit d2ddded
Show file tree

Hide file tree

Showing 11 changed files with 147 additions and 33 deletions.
diff --git 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
@@ -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 (
     <QueryClientProvider client={queryClient}>
-      <NextThemesProvider {...props}>{children}</NextThemesProvider>
+      <NextThemesProvider {...props}>
+        <SessionProvider>{children}</SessionProvider>
+      </NextThemesProvider>
     </QueryClientProvider>
   );
 }
diff --git 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 ? (
-    <Button onClick={() => unsubscribe()} isLoading={isUnsubscribing} className="w-full mt-1 mb-4">Leave Community</Button>
+    <Button
+      onClick={() => unsubscribe()}
+      isLoading={isUnsubscribing}
+      className="w-full mt-1 mb-4"
+    >
+      Leave Community
+    </Button>
   ) : (
-    <Button onClick={() => subscribe()} isLoading={isSubscribing} className="w-full mt-1 mb-4">Join to Post</Button>
+    <Button
+      onClick={() => subscribe()}
+      isLoading={isSubscribing}
+      className="w-full mt-1 mb-4"
+    >
+      Join to Post
+    </Button>
   );
 }
diff --git 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<HTMLDivElement> {}
 

diff --git a/components/pages/DummyPosts.tsx 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 (
+    <div className="bg-card rounded-lg border border-card-border p-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-bold">Your Feed</h2>
+        <Button variant="ghost" size="icon">
+          <Filter className="w-5 h-5" />
+          <span className="sr-only">Filter</span>
+        </Button>
+      </div>
+      <div className="grid gap-4">
+        <Post
+          content="Just finished my midterms! Time to celebrate with some friends. 🎉"
+          timeAgo="2 hours ago"
+          upvotes={123}
+          comments={42}
+        />
+        <Post
+          content={
+            <Image
+              src="/placeholder.svg"
+              width={400}
+              height={225}
+              alt="Image"
+              className="rounded-md object-cover aspect-video"
+            />
+          }
+          timeAgo="1 day ago"
+          upvotes={456}
+          comments={78}
+        />
+        <Post
+          content="Anyone else struggling with their final project? I could use some help!"
+          timeAgo="3 days ago"
+          upvotes={89}
+          comments={21}
+        />
+      </div>
+    </div>
+  );
+}
+
+function Post({ content, timeAgo, upvotes, comments }: PostType) {
+  return (
+    <Card>
+      <CardHeader className="flex  gap-3 relative ">
+        <div className="flex items-center gap-3">
+          <Avatar className="w-8 h-8 rounded-full border overflow-hidden">
+            <AvatarImage src="/placeholder-user.jpg" alt="User" />
+            <AvatarFallback>UN</AvatarFallback>
+          </Avatar>
+
+          <div>
+            <div className="font-medium">Anonymous User</div>
+            <div className="text-xs text-muted-foreground">{timeAgo}</div>
+          </div>
+        </div>
+
+        <Button variant="ghost" size="icon" className="absolute top-2 right-2">
+          <MoveDiagonal className="w-5 h-5" />
+          <span className="sr-only">More</span>
+        </Button>
+      </CardHeader>
+
+      <CardContent>
+        <div className="text-sm">{content}</div>
+      </CardContent>
+      <CardFooter className="flex items-center gap-4">
+        <Button variant="ghost" size="icon">
+          <ArrowUp className="w-5 h-5" />
+          <span className="sr-only">Upvote</span>
+        </Button>
+        <div className="text-sm text-muted-foreground">{upvotes} upvotes</div>
+        <Button variant="ghost" size="icon">
+          <ArrowDown className="w-5 h-5" />
+          <span className="sr-only">Downvote</span>
+        </Button>
+        <Button variant="ghost" size="icon">
+          <MessageCircle className="w-5 h-5" />
+          <span className="sr-only">Comment</span>
+        </Button>
+        <div className="text-sm text-muted-foreground">{comments} comments</div>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git 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 (
     // <div className={`flex flex-col h-screen ${isDarkMode ? "dark" : ""}`}>
     <div className={`flex flex-col h-screen `}>
-
       <main className="flex-1 grid grid-cols-1 md:grid-cols-[300px_1fr] gap-6 p-6">
         <div className="md:sticky md:top-6 md:h-[calc(100vh-5rem)]">
           <div className="overflow-auto h-full pr-4 -mr-4">
@@ -22,7 +13,6 @@ export function Homepage() {
         </div>
         <Posts />
       </main>
-
     </div>
-  )
-}
+  );
+}
diff --git a/components/pages/Navbar.tsx b/components/pages/Navbar.tsx
@@ -22,9 +22,11 @@ export async function Navbar() {
           <Icons.logo className="h-14 w-14 sm:h-10 sm:w-10" />
           <p className="hidden text-xl font-bold md:block">Crypt</p>
         </Link>
-        <span className="rounded-full text-base bg-primary/10 border border-primary/50 px-2 hidden md:block">
-          v1.0
-        </span>
+        <Link href="https://github.com/gupta-soham/Crypt">
+          <span className="rounded-full text-xl bg-primary/10 border border-primary/50 px-2 hidden sm:block ">
+            v1.0
+          </span>
+        </Link>
 
         <nav className="hidden md:flex pl-3 items-center gap-4 text-bold font-semibold text-gray-600">
           <div className="flex flex-row">

diff --git a/components/ui/toaster.tsx b/components/ui/toaster.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import {
   Toast,
@@ -7,11 +7,11 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "@/components/ui/toast"
-import { useToast } from "@/components/hooks/use-toast"
+} from "@/components/ui/toast";
+import { useToast } from "@/hooks/use-toast";
 
 export function Toaster() {
-  const { toasts } = useToast()
+  const { toasts } = useToast();
 
   return (
     <ToastProvider>
@@ -27,9 +27,9 @@ export function Toaster() {
             {action}
             <ToastClose />
           </Toast>
-        )
+        );
       })}
       <ToastViewport />
     </ToastProvider>
-  )
+  );
 }
diff --git a/components/hooks/use-on-click-outside.ts → hooks/use-on-click-outside.ts b/components/hooks/use-on-click-outside.ts → hooks/use-on-click-outside.ts
diff --git a/components/hooks/use-toast.ts → hooks/use-toast.ts b/components/hooks/use-toast.ts → hooks/use-toast.ts
diff --git a/components/hooks/useCustomToast.tsx → hooks/useCustomToast.tsx b/components/hooks/useCustomToast.tsx → hooks/useCustomToast.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { toast } from "@/components/hooks/use-toast";
+import { toast } from "./use-toast";
 import { buttonVariants } from "@/components/ui/button";
 
 export default function useCustomToast() {