Merge pull request #5 from kashvigarg/frontend-test

jaydee029 · web-flow · commit 42adf55706fb · 2025-04-15T09:33:33.000+05:30
Toast Component + Timeline GET
diff --git a/api/handler/timeline.go b/api/handler/timeline.go
@@ -101,6 +101,7 @@ func (cfg *Handler) Timeline(w http.ResponseWriter, r *http.Request) {
 				Comments:    int(k.Comments),
 			},
 		})
+
 	}
 	respondWithJson(w, http.StatusOK, timeline)
 
diff --git a/web2/app/api/[...path]/route.ts b/web2/app/api/[...path]/route.ts
@@ -93,13 +93,14 @@ export async function GET(request: NextRequest, { params }: { params: { path: st
       },
     });
 
-    const text = await response.text(); // Read response as text
-
-    if (!text.trim()) {
-      return NextResponse.json({ error: "Empty response from API" }, { status: 502 });
+    const responseText = await response.text(); // Read response as text
+    // console.log("problematic text")
+    // console.log(responseText)
+    if (responseText.trim() !== "") {
+      // return NextResponse.json({ error: "Empty response from API" }, { status: 502 });
+      return NextResponse.json(JSON.parse(responseText), { status: response.status });
     }
 
-    return NextResponse.json(JSON.parse(text), { status: response.status });
   } catch (error) {
     console.error("API error:", error);
     return NextResponse.json({ error: "Failed to fetch data" }, { status: 500 });
diff --git a/web2/app/api/sse/[...path]/route.ts b/web2/app/api/sse/[...path]/route.ts
@@ -21,7 +21,13 @@ export async function GET(request: NextRequest) {
     );
 
     // Proxy the backend SSE stream directly to the client
-    return new Response(backendResponse.body, {
+    console.log(backendResponse.body)
+    let passedValue = await new Response(backendResponse.body).text();
+    if (passedValue){
+    let valueToJson = JSON.parse(passedValue);
+    console.log("jsonval:", valueToJson)
+    }
+    return new Response("", {
       status: 200,
       headers: {
         "Content-Type": "text/event-stream",
@@ -32,7 +38,7 @@ export async function GET(request: NextRequest) {
       },
     });
   } catch (error) {
-    console.error("SSE proxy error:", error);
+    console.log("SSE proxy error:", error);
     return new Response("Failed to connect to SSE", { status: 502 });
   }
 }
diff --git a/web2/app/layout.tsx b/web2/app/layout.tsx
@@ -29,19 +29,22 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={`${inter.variable} ${merriweather.variable} font-sans`}>
+    <html lang="en">
+      <body suppressHydrationWarning className={`${inter.variable} ${merriweather.variable} font-sans`}>
+        <ToastProvider>
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
           <AuthProvider>
             {children}
             <Toaster />
           </AuthProvider>
         </ThemeProvider>
+        </ToastProvider>
       </body>
     </html>
   )
 }
 
 
 
-import './globals.css'
+import './globals.css'
+import { ToastProvider } from "@radix-ui/react-toast"
diff --git a/web2/app/login/page.tsx b/web2/app/login/page.tsx
@@ -10,7 +10,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
-import { useToast } from "@/components/ui/use-toast"
+import { useToast } from "@/hooks/use-toast"
 import { Loader2, BookOpen } from "lucide-react"
 
 export default function LoginPage() {
@@ -30,6 +30,7 @@ export default function LoginPage() {
       router.push("/")
     } catch (error) {
       toast({
+        open: true, 
         title: "Login failed",
         description: "Please check your credentials and try again.",
         variant: "destructive",
diff --git a/web2/app/signup/page.tsx b/web2/app/signup/page.tsx
@@ -10,7 +10,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
-import { useToast } from "@/components/ui/use-toast"
+import { useToast } from "@/hooks/use-toast"
 import { Loader2, BookOpen } from "lucide-react"
 
 export default function SignupPage() {
diff --git a/web2/components/comment-form.tsx b/web2/components/comment-form.tsx
@@ -6,7 +6,7 @@ import { useState } from "react"
 import { useAuth } from "@/lib/auth-hooks"
 import { Button } from "@/components/ui/button"
 import { Textarea } from "@/components/ui/textarea"
-import { useToast } from "@/components/ui/use-toast"
+import { useToast } from "@/hooks/use-toast"
 import { Loader2 } from "lucide-react"
 
 export function CommentForm({ proseId }: { proseId: string }) {
diff --git a/web2/components/comments-list.tsx b/web2/components/comments-list.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Heart } from "lucide-react"
-import { useToast } from "@/components/ui/use-toast"
+import { useToast } from "@/hooks/use-toast"
 import { useSSE } from "@/lib/use-sse"
 import Link from "next/link"
 
diff --git a/web2/components/compose-prose-dialog.tsx b/web2/components/compose-prose-dialog.tsx
@@ -15,7 +15,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog"
 import { Textarea } from "@/components/ui/textarea"
-import { useToast } from "@/components/ui/use-toast"
+import { useToast } from "@/hooks/use-toast"
 import { Loader2 } from "lucide-react"
 
 type ComposeProseDialogProps = {
diff --git a/web2/components/notifications-list.tsx b/web2/components/notifications-list.tsx
@@ -7,7 +7,7 @@ import { useAuth } from "@/lib/auth-hooks"
 import { Button } from "@/components/ui/button"
 import { Card, CardHeader } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
-import { useToast } from "@/components/ui/use-toast"
+import { useToast } from "@/hooks/use-toast"
 import { useSSE } from "@/lib/use-sse"
 import { Heart, MessageCircle, UserPlus, RefreshCw } from "lucide-react"
 
diff --git a/web2/components/prose-card.tsx b/web2/components/prose-card.tsx
@@ -9,7 +9,7 @@ import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
 import { Heart, MessageCircle, Share2, MoreHorizontal } from "lucide-react"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { useAuth } from "@/lib/auth-hooks"
-import { useToast } from "@/components/ui/use-toast"
+import { useToast } from "@/hooks/use-toast"
 
 type ProseCardProps = {
   prose: {
diff --git a/web2/components/prose-detail.tsx b/web2/components/prose-detail.tsx
@@ -8,7 +8,7 @@ import { CommentsList } from "@/components/comments-list"
 import { CommentForm } from "@/components/comment-form"
 import { Button } from "@/components/ui/button"
 import { ArrowLeft } from "lucide-react"
-import { useToast } from "@/components/ui/use-toast"
+import { useToast } from "@/hooks/use-toast"
 
 type ProseDetailProps = {
   prose: {
diff --git a/web2/components/timeline.tsx b/web2/components/timeline.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import { useAuth } from "@/lib/auth-hooks";
 import { ProseCard } from "@/components/prose-card";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useToast } from "@/components/ui/use-toast";
+import { useToast } from "@/hooks/use-toast";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { AlertCircle, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -35,65 +35,63 @@ export function Timeline() {
 
   // Use SSE to get timeline updates
   const { data, error: sseError } = useSSE<TimelineItem>("/api/sse/timeline", token, "timeline",{
-  //   onMessage: (data) => {
-  //     if (data) {
-  //       console.log("SSE CHECK FOR TL")
-  //       console.log(data)
-  //       if (data!=null){
-  //       setTimelineItems(data);
-  //       setIsLoading(false);
-  //       }
-  //     }
-  //     console.log("SSE NO DATA FOR TL")
-  //   },
-  //   fallbackToFetch: true,
-  // });
-  onMessage: (newItem) => {
-    if (newItem) {
-      console.log("SSE received new timeline item:", newItem);
-      
-      // Add new item to the timeline without duplicates
-      setTimelineItems(prevItems => {
-        // Check if this item already exists in our timeline
-        const exists = prevItems.some(item => item.id === newItem.id);
-        if (exists) {
-          return prevItems;
+    onMessage: (ndata) => {
+      if (ndata) {
+        // console.log("SSE CHECK FOR TL")
+        // console.log(data)
+        // if (data!=null){
+        // setTimelineItems(data);
+        // setIsLoading(false);
+        if (ndata) {
+          console.log("SSE received new timeline item:", ndata);
+          
+          // Add new item to the timeline without duplicates
+          setTimelineItems(prevItems => {
+            // Check if this item already exists in our timeline
+            const exists = prevItems.some(item => item.id === ndata.id);
+            if (exists) {
+              return prevItems;
+            }
+            
+            // Add new item to the beginning of the timeline
+            return [ndata, ...prevItems];
+          });
+          
+          setIsLoading(false);
         }
-        
-        // Add new item to the beginning of the timeline
-        return [newItem, ...prevItems];
-      });
-      
-      setIsLoading(false);
+      }
+      console.log("sse data maybe")
+    console.log(data)
+      // console.log("SSE NO DATA FOR TL")
+    },
+    fallbackToFetch: true,
+    onError: (err) => {
+      console.error("SSE error:", err);
+      // Let the useEffect handle errors
     }
-  },
-  fallbackToFetch: true,
-  onError: (err) => {
-    console.error("SSE error:", err);
-    // Let the useEffect handle errors
-  }
-});
+  });
 
   // Fetch timeline if SSE fails
   useEffect(() => {
+    fetchTimelineItems();
+    
+    // Handle SSE errors by falling back to regular fetch
+    if (sseError) {
+      console.log("SSE error detected, falling back to regular fetch:", sseError);
+      fetchTimelineItems();}
     // if (data) {
     //   if (data!=null){
     //     setTimelineItems(data)} else {
     //       setTimelineItems([])
     //     }
     //   setIsLoading(false)
     // }
-    fetchTimelineItems()
-    if (sseError) {
-      console.log("SSE error detected, falling back to regular fetch:", sseError);
-      fetchTimelineItems();
-    }
+
+    // if (sseError) {
+    //   fetchTimelineItems()
+    // }
   }, [sseError]);
 
-  //   if (sseError) {
-  //     fetchTimelineItems()
-  //   }
-  // }, [data, sseError]);
 
   // Fetch timeline function
   const fetchTimelineItems = async () => {
@@ -113,7 +111,7 @@ export function Timeline() {
       }
 
       const responseData = await response.json();
-      console.log("DATA:", responseData);
+      // console.log("DATA:", responseData);
 
       if (responseData!=null){
         setTimelineItems(responseData);
diff --git a/web2/components/ui/toaster.tsx b/web2/components/ui/toaster.tsx
@@ -1,35 +1,67 @@
+// "use client"
+
+// import { useToast } from "@/hooks/use-toast"
+// import {
+//   Toast,
+//   ToastClose,
+//   ToastDescription,
+//   ToastProvider,
+//   ToastTitle,
+//   ToastViewport,
+// } from "@/components/ui/toast"
+
+// export function Toaster() {
+//   const { toasts } = useToast()
+//   console.log("TOASTER RECEIVED TOASTS:", toasts);
+
+//   return (
+//     <ToastProvider>
+//       {toasts.map(function ({ id, title, description, action, ...props }) {
+//         return (
+//           <Toast key={id} {...props}>
+//             <div className="grid gap-1">
+//               {title && <ToastTitle>{title}</ToastTitle>}
+//               {description && (
+//                 <ToastDescription>{description}</ToastDescription>
+//               )}
+//             </div>
+//             {action}
+//             <ToastClose />
+//           </Toast>
+//         )
+//       })}
+//       <ToastViewport />
+//     </ToastProvider>
+//   )
+// }
+
 "use client"
 
 import { useToast } from "@/hooks/use-toast"
 import {
   Toast,
   ToastClose,
   ToastDescription,
-  ToastProvider,
   ToastTitle,
   ToastViewport,
 } from "@/components/ui/toast"
 
 export function Toaster() {
   const { toasts } = useToast()
-
+  
   return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
+    <>
+      {toasts.map(({ id, title, description, action, ...props }) => (
+        <Toast key={id} {...props}>
+          <div className="grid gap-1">
+            {title && <ToastTitle>{title}</ToastTitle>}
+            {description && <ToastDescription>{description}</ToastDescription>}
+          </div>
+          {action}
+          <ToastClose />
+        </Toast>
+      ))}
       <ToastViewport />
-    </ToastProvider>
+    </>
   )
 }
diff --git a/web2/components/ui/use-toast.ts b/web2/components/ui/use-toast.ts
diff --git a/web2/components/user-profile.tsx b/web2/components/user-profile.tsx
diff --git a/web2/components/users-list.tsx b/web2/components/users-list.tsx
diff --git a/web2/lib/auth-provider.tsx b/web2/lib/auth-provider.tsx
diff --git a/web2/lib/use-sse.tsx b/web2/lib/use-sse.tsx
diff --git a/web2/next.config.mjs b/web2/next.config.mjs

Original file line number	Diff line number	Diff line change
`@@ -101,6 +101,7 @@ func (cfg Handler) Timeline(w http.ResponseWriter, r http.Request) {`
`101`	`101`	`Comments: int(k.Comments),`
`102`	`102`	`},`
`103`	`103`	`})`
	`104`	`+`
`104`	`105`	`}`
`105`	`106`	`respondWithJson(w, http.StatusOK, timeline)`
`106`	`107`