@devvistatech/devvista-kit 0.0.9 → 0.0.10

package/app/blog/[id]/page.tsx

@@ -1,289 +1,289 @@
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { Card, CardContent } from '@/components/other/card';
-import { BackButton, EditToggleButton, UpdateButton } from '@/components/other/button';
-import { ArrowLeft, Calendar } from 'lucide-react';
-import { useAuth, useUser } from '@clerk/nextjs';
-import { useStrapiAuth } from '@/lib/auth-context';
-import BlogSidebar from '@/components/addOns/functional/blogSections/BlogSidebar';
-import ClassList from '@/components/addOns/functional/ClassList';
-import Spinner from '@/components/addOns/non-functional/spinner';
-
-interface BlogPost {
-  id: number;
-  documentId: string;
-  title: string;
-  description: string;
-  author: string;
-  publishedAt: string;
-}
-
-interface BlogPostPageProps {
-  params: Promise<{ id: string }>;
-}
-
-export default function BlogPostPage({ params }: BlogPostPageProps) {
-  const resolvedParams = React.use(params); 
-  const id = resolvedParams.id; 
-  const router = useRouter();
-  const { user, authLoading, checkSession } = useStrapiAuth();
-  const { getToken, isSignedIn } = useAuth();
-  const { user: clerkUser } = useUser();
-  const [post, setPost] = useState<BlogPost | null>(null);
-  const [posts, setPosts] = useState<BlogPost[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [isEditing, setIsEditing] = useState(false);
-  const [editTitle, setEditTitle] = useState('');
-  const [editDescription, setEditDescription] = useState('');
-  const [titleCharCount, setTitleCharCount] = useState(0);
-  const [titleWordCount, setTitleWordCount] = useState(0);
-  const [descriptionCharCount, setDescriptionCharCount] = useState(0);
-  const [descriptionWordCount, setDescriptionWordCount] = useState(0);
-
-  const isAdmin = isSignedIn && !!user?.businessAdminId;
-
-  useEffect(() => {
-    const handleLogin = () => checkSession();
-    const handleLogout = () => checkSession();
-    window.addEventListener('user-login', handleLogin);
-    window.addEventListener('user-logout', handleLogout);
-    return () => {
-      window.removeEventListener('user-login', handleLogin);
-      window.removeEventListener('user-logout', handleLogout);
-    };
-  }, [checkSession]);
-
-  useEffect(() => {
-    const fetchPost = async () => {
-      setIsLoading(true);
-      try {
-        const headers: HeadersInit = { 'Content-Type': 'application/json' };
-        if (isSignedIn) {
-          const token = await getToken();
-          if (token) headers['Authorization'] = `Bearer ${token}`;
-        }
-
-        const response = await fetch('/api/blog', { headers, cache: 'no-store' });
-        if (!response.ok) {
-          const errorData = await response.json();
-          throw new Error(errorData.error || 'Failed to fetch blog posts');
-        }
-        const { data } = await response.json();
-        const blogPosts = data.blogPosts.map((p: BlogPost) => ({
-          ...p,
-          title: p.title.length > 50 ? p.title.substring(0, 50) + '...' : p.title,
-          description: p.description.length > 1500 ? p.description.substring(0, 1500) + '...' : p.description,
-          publishedAt: new Date(p.publishedAt).toISOString(),
-        }));
-
-        const parsedId = parseInt(id);
-        if (isNaN(parsedId)) {
-          router.push('/404');
-          return;
-        }
-
-        const foundPost = blogPosts.find((p: BlogPost) => p.id === parsedId);
-        if (!foundPost) {
-          router.push('/404');
-          return;
-        }
-
-        setPost(foundPost);
-        setPosts(blogPosts);
-        setEditTitle(foundPost.title);
-        setEditDescription(foundPost.description);
-        setTitleCharCount(foundPost.title.length);
-        setTitleWordCount(foundPost.title.trim().split(/\s+/).filter(Boolean).length);
-        setDescriptionCharCount(foundPost.description.length);
-        setDescriptionWordCount(foundPost.description.trim().split(/\s+/).filter(Boolean).length);
-      } catch (err) {
-        router.push('/404');
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchPost();
-  }, [id, isSignedIn, getToken, router]);
-
-  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value.slice(0, 50);
-    setEditTitle(value);
-    setTitleCharCount(value.length);
-    setTitleWordCount(value.trim().split(/\s+/).filter(Boolean).length);
-  };
-
-  const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const value = e.target.value.slice(0, 1500);
-    setEditDescription(value);
-    setDescriptionCharCount(value.length);
-    setDescriptionWordCount(value.trim().split(/\s+/).filter(Boolean).length);
-  };
-
-  const handleSave = async () => {
-    try {
-      const token = await getToken();
-      if (!token) {
-        throw new Error('Unauthorized: No token provided');
-      }
-      if (!post?.documentId) {
-        throw new Error('Missing documentId for update');
-      }
-
-      const response = await fetch('/api/blog', {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({
-          documentId: post.documentId,
-          data: {
-            title: editTitle,
-            description: editDescription,
-            author: post.author,
-            publishedAt: post.publishedAt,
-          },
-        }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || 'Failed to update post');
-      }
-
-      const fetchResponse = await fetch('/api/blog', {
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        cache: 'no-store',
-      });
-      if (!fetchResponse.ok) {
-        const errorData = await fetchResponse.json();
-        throw new Error(errorData.error || 'Failed to fetch blog posts');
-      }
-      const { data } = await fetchResponse.json();
-      const blogPosts = data.blogPosts.map((p: BlogPost) => ({
-        ...p,
-        title: p.title.length > 50 ? p.title.substring(0, 50) + '...' : p.title,
-        description: p.description.length > 1500 ? p.description.substring(0, 1500) + '...' : p.description,
-        publishedAt: new Date(p.publishedAt).toISOString(),
-      }));
-      const updatedPost = blogPosts.find((p: BlogPost) => p.documentId === post.documentId);
-      if (!updatedPost) {
-        throw new Error('Updated post not found');
-      }
-      setPost(updatedPost);
-      setPosts(blogPosts);
-      setIsEditing(false);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'An unknown error occurred');
-    }
-  };
-
-  if (authLoading || isLoading) {
-    return (
-      <div className="min-h-screen bg-gray-900 text-gray-200 py-32 px-4 sm:px-6 lg:px-8 pt-48 lg:pt-56">
-        <div className="max-w-7xl mx-auto text-center">
-          <Spinner />
-        </div>
-      </div>
-    );
-  }
-
-  if (!post) {
-    router.push('/404');
-    return null;
-  }
-
-  return (
-    <div className="min-h-screen bg-white/90 text-gray-200 py-32 px-4 sm:px-6 lg:px-8 pt-48 lg:pt-56">
-      <div className="max-w-7xl mx-auto">
-        {isAdmin && (
-          <div className="mb-4 flex gap-4">
-            <BackButton onClick={() => router.push('/blog')}>
-              <ArrowLeft size={16} /> Blog Dashboard
-            </BackButton>
-            <EditToggleButton onClick={() => setIsEditing(!isEditing)}>
-              {isEditing ? 'Cancel' : 'Edit Post'}
-            </EditToggleButton>
-          </div>
-        )}
-        {isEditing && isAdmin ? (
-          <Card className="mb-6 max-w-full mx-auto">
-            <CardContent className="p-6 sm:p-8">
-              <div className="space-y-4">
-                <div>
-                  <label className="text-gray-800 font-medium">Title</label>
-                  <input
-                    type="text"
-                    value={editTitle}
-                    onChange={handleTitleChange}
-                    maxLength={50}
-                    className="w-full p-2 border rounded text-black break-words"
-                  />
-                  <p className="text-sm text-gray-500">
-                    {titleCharCount}/50 characters, {titleWordCount} words
-                  </p>
-                </div>
-                <div>
-                  <label className="text-gray-800 font-medium">Description</label>
-                  <textarea
-                    value={editDescription}
-                    onChange={handleDescriptionChange}
-                    maxLength={1500}
-                    rows={10}
-                    className="w-full p-2 border rounded text-black break-words"
-                  />
-                  <p className="text-sm text-gray-500">
-                    {descriptionCharCount}/1500 characters, {descriptionWordCount} words
-                  </p>
-                </div>
-                <UpdateButton size="sm" onClick={handleSave}>
-                  Save Changes
-                </UpdateButton>
-              </div>
-            </CardContent>
-          </Card>
-        ) : (
-          <>
-            <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight mb-8 text-center text-gray-800 break-words pt-12">
-              {post.title}
-            </h1>
-            <div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
-              <Card className="hover:border-blue-500/50 transition-colors max-w-full mx-auto">
-                <CardContent className="p-6 sm:p-8">
-                  <div className="flex items-center gap-2 text-sm text-gray-400 mb-4">
-                    <Calendar className="w-5 h-5 text-blue-400" />
-                    <span className="text-blue-400/90">
-                      By {post.author} |{' '}
-                      {new Date(post.publishedAt).toLocaleDateString('en-US', {
-                        year: 'numeric',
-                        month: 'long',
-                        day: 'numeric',
-                      })}
-                    </span>
-                  </div>
-                  <div className="text-black/90 leading-relaxed break-words">
-                    {post.description.split('\n').map((paragraph, index) => (
-                      <p key={index} className="mb-4 last:mb-0">
-                        {paragraph}
-                      </p>
-                    ))}
-                  </div>
-                </CardContent>
-              </Card>
-              <div className="flex flex-col gap-6 max-w-full mx-auto lg:max-w-[400px]">
-                <BlogSidebar posts={posts} currentPostId={post.id} />
-                <ClassList />
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { Card, CardContent } from '@/components/other/card';
+import { BackButton, EditToggleButton, UpdateButton } from '@/components/other/button';
+import { ArrowLeft, Calendar } from 'lucide-react';
+import { useAuth, useUser } from '@clerk/nextjs';
+import { useStrapiAuth } from '@/lib/auth-context';
+import BlogSidebar from '@/components/addOns/functional/blogSections/BlogSidebar';
+import ClassList from '@/components/addOns/functional/ClassList';
+import Spinner from '@/components/addOns/non-functional/spinner';
+
+interface BlogPost {
+  id: number;
+  documentId: string;
+  title: string;
+  description: string;
+  author: string;
+  publishedAt: string;
+}
+
+interface BlogPostPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default function BlogPostPage({ params }: BlogPostPageProps) {
+  const resolvedParams = React.use(params); 
+  const id = resolvedParams.id; 
+  const router = useRouter();
+  const { user, authLoading, checkSession } = useStrapiAuth();
+  const { getToken, isSignedIn } = useAuth();
+  const { user: clerkUser } = useUser();
+  const [post, setPost] = useState<BlogPost | null>(null);
+  const [posts, setPosts] = useState<BlogPost[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState('');
+  const [editDescription, setEditDescription] = useState('');
+  const [titleCharCount, setTitleCharCount] = useState(0);
+  const [titleWordCount, setTitleWordCount] = useState(0);
+  const [descriptionCharCount, setDescriptionCharCount] = useState(0);
+  const [descriptionWordCount, setDescriptionWordCount] = useState(0);
+
+  const isAdmin = isSignedIn && !!user?.businessAdminId;
+
+  useEffect(() => {
+    const handleLogin = () => checkSession();
+    const handleLogout = () => checkSession();
+    window.addEventListener('user-login', handleLogin);
+    window.addEventListener('user-logout', handleLogout);
+    return () => {
+      window.removeEventListener('user-login', handleLogin);
+      window.removeEventListener('user-logout', handleLogout);
+    };
+  }, [checkSession]);
+
+  useEffect(() => {
+    const fetchPost = async () => {
+      setIsLoading(true);
+      try {
+        const headers: HeadersInit = { 'Content-Type': 'application/json' };
+        if (isSignedIn) {
+          const token = await getToken();
+          if (token) headers['Authorization'] = `Bearer ${token}`;
+        }
+
+        const response = await fetch('/api/blog', { headers, cache: 'no-store' });
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error || 'Failed to fetch blog posts');
+        }
+        const { data } = await response.json();
+        const blogPosts = data.blogPosts.map((p: BlogPost) => ({
+          ...p,
+          title: p.title.length > 50 ? p.title.substring(0, 50) + '...' : p.title,
+          description: p.description.length > 1500 ? p.description.substring(0, 1500) + '...' : p.description,
+          publishedAt: new Date(p.publishedAt).toISOString(),
+        }));
+
+        const parsedId = parseInt(id);
+        if (isNaN(parsedId)) {
+          router.push('/404');
+          return;
+        }
+
+        const foundPost = blogPosts.find((p: BlogPost) => p.id === parsedId);
+        if (!foundPost) {
+          router.push('/404');
+          return;
+        }
+
+        setPost(foundPost);
+        setPosts(blogPosts);
+        setEditTitle(foundPost.title);
+        setEditDescription(foundPost.description);
+        setTitleCharCount(foundPost.title.length);
+        setTitleWordCount(foundPost.title.trim().split(/\s+/).filter(Boolean).length);
+        setDescriptionCharCount(foundPost.description.length);
+        setDescriptionWordCount(foundPost.description.trim().split(/\s+/).filter(Boolean).length);
+      } catch (err) {
+        router.push('/404');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchPost();
+  }, [id, isSignedIn, getToken, router]);
+
+  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.slice(0, 50);
+    setEditTitle(value);
+    setTitleCharCount(value.length);
+    setTitleWordCount(value.trim().split(/\s+/).filter(Boolean).length);
+  };
+
+  const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value.slice(0, 1500);
+    setEditDescription(value);
+    setDescriptionCharCount(value.length);
+    setDescriptionWordCount(value.trim().split(/\s+/).filter(Boolean).length);
+  };
+
+  const handleSave = async () => {
+    try {
+      const token = await getToken();
+      if (!token) {
+        throw new Error('Unauthorized: No token provided');
+      }
+      if (!post?.documentId) {
+        throw new Error('Missing documentId for update');
+      }
+
+      const response = await fetch('/api/blog', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          documentId: post.documentId,
+          data: {
+            title: editTitle,
+            description: editDescription,
+            author: post.author,
+            publishedAt: post.publishedAt,
+          },
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Failed to update post');
+      }
+
+      const fetchResponse = await fetch('/api/blog', {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        cache: 'no-store',
+      });
+      if (!fetchResponse.ok) {
+        const errorData = await fetchResponse.json();
+        throw new Error(errorData.error || 'Failed to fetch blog posts');
+      }
+      const { data } = await fetchResponse.json();
+      const blogPosts = data.blogPosts.map((p: BlogPost) => ({
+        ...p,
+        title: p.title.length > 50 ? p.title.substring(0, 50) + '...' : p.title,
+        description: p.description.length > 1500 ? p.description.substring(0, 1500) + '...' : p.description,
+        publishedAt: new Date(p.publishedAt).toISOString(),
+      }));
+      const updatedPost = blogPosts.find((p: BlogPost) => p.documentId === post.documentId);
+      if (!updatedPost) {
+        throw new Error('Updated post not found');
+      }
+      setPost(updatedPost);
+      setPosts(blogPosts);
+      setIsEditing(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An unknown error occurred');
+    }
+  };
+
+  if (authLoading || isLoading) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-gray-200 py-32 px-4 sm:px-6 lg:px-8 pt-48 lg:pt-56">
+        <div className="max-w-7xl mx-auto text-center">
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
+
+  if (!post) {
+    router.push('/404');
+    return null;
+  }
+
+  return (
+    <div className="min-h-screen bg-white/90 text-gray-200 py-32 px-4 sm:px-6 lg:px-8 pt-48 lg:pt-56">
+      <div className="max-w-7xl mx-auto">
+        {isAdmin && (
+          <div className="mb-4 flex gap-4">
+            <BackButton onClick={() => router.push('/blog')}>
+              <ArrowLeft size={16} /> Blog Dashboard
+            </BackButton>
+            <EditToggleButton onClick={() => setIsEditing(!isEditing)}>
+              {isEditing ? 'Cancel' : 'Edit Post'}
+            </EditToggleButton>
+          </div>
+        )}
+        {isEditing && isAdmin ? (
+          <Card className="mb-6 max-w-full mx-auto">
+            <CardContent className="p-6 sm:p-8">
+              <div className="space-y-4">
+                <div>
+                  <label className="text-gray-800 font-medium">Title</label>
+                  <input
+                    type="text"
+                    value={editTitle}
+                    onChange={handleTitleChange}
+                    maxLength={50}
+                    className="w-full p-2 border rounded text-black break-words"
+                  />
+                  <p className="text-sm text-gray-500">
+                    {titleCharCount}/50 characters, {titleWordCount} words
+                  </p>
+                </div>
+                <div>
+                  <label className="text-gray-800 font-medium">Description</label>
+                  <textarea
+                    value={editDescription}
+                    onChange={handleDescriptionChange}
+                    maxLength={1500}
+                    rows={10}
+                    className="w-full p-2 border rounded text-black break-words"
+                  />
+                  <p className="text-sm text-gray-500">
+                    {descriptionCharCount}/1500 characters, {descriptionWordCount} words
+                  </p>
+                </div>
+                <UpdateButton size="sm" onClick={handleSave}>
+                  Save Changes
+                </UpdateButton>
+              </div>
+            </CardContent>
+          </Card>
+        ) : (
+          <>
+            <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight mb-8 text-center text-gray-800 break-words pt-12">
+              {post.title}
+            </h1>
+            <div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
+              <Card className="hover:border-blue-500/50 transition-colors max-w-full mx-auto">
+                <CardContent className="p-6 sm:p-8">
+                  <div className="flex items-center gap-2 text-sm text-gray-400 mb-4">
+                    <Calendar className="w-5 h-5 text-blue-400" />
+                    <span className="text-blue-400/90">
+                      By {post.author} |{' '}
+                      {new Date(post.publishedAt).toLocaleDateString('en-US', {
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric',
+                      })}
+                    </span>
+                  </div>
+                  <div className="text-black/90 leading-relaxed break-words">
+                    {post.description.split('\n').map((paragraph, index) => (
+                      <p key={index} className="mb-4 last:mb-0">
+                        {paragraph}
+                      </p>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+              <div className="flex flex-col gap-6 max-w-full mx-auto lg:max-w-[400px]">
+                <BlogSidebar posts={posts} currentPostId={post.id} />
+                <ClassList />
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
 }