Merge branch 'code100x:main' into bug-fix

code100x · Sep 26, 2024 · e5d12fd · e5d12fd
2 parents 4d3ce7c + b3b65c1
commit e5d12fd
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 51 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -11,6 +11,7 @@ services:
       - '5555:5555'
     volumes:
       - .:/usr/src/app
+      - /usr/src/app/.next
       - /usr/src/app/node_modules
     depends_on:
       db:

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -8,6 +8,7 @@ import { GoogleAnalytics } from '@/components/analytics/GoogleAnalytics';
 import { siteConfig } from '@/config/site-config';
 import { Toaster } from 'sonner';
 import { Navbar } from '@/components/Navbar';
+import NextTopLoader from 'nextjs-toploader';
 
 const satoshi = localFont({
   display: 'swap',
@@ -31,6 +32,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         )}
       >
         <GoogleAnalytics />
+        <NextTopLoader />
         <Providers>
           <Navbar />
           {children}

diff --git a/src/components/CourseView.tsx b/src/components/CourseView.tsx
@@ -38,8 +38,8 @@ export const CourseView = ({
     ? 'folder'
     : courseContent?.value.type;
   return (
-    <div className="flex w-full flex-col gap-8 pb-16 pt-8">
-      <div className="flex flex-col gap-4">
+    <div className="flex w-full flex-col gap-8 pb-16 pt-8 xl:pt-[9px]">
+      <div className="flex flex-col gap-4 xl:pt-44">
         <BreadCrumbComponent
           course={course}
           contentType={contentType}

diff --git a/src/components/NewPostDialog.tsx b/src/components/NewPostDialog.tsx
@@ -26,7 +26,9 @@ export const NewPostDialog = () => {
   const paramsObject = searchParamsToObject(searchParam);
   const path = usePathname();
   const router = useRouter();
+  const tagInputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('**Hello world!!!**');
+  const [tags, setTags] = useState<string[]>([]);
   const containerRef = useRef<HTMLDivElement>(null);
   const { ref, onOpen, onClose } = useModal();
   const handleMarkdownChange = (newValue?: string) => {
@@ -54,6 +56,7 @@ export const NewPostDialog = () => {
       formRef?.current?.reset();
       setValue('');
       router.push(`/question/${data.slug}`);
+      setTags([]); 
       handleOnCloseClick();
     },
     onError: (error) => {
@@ -68,20 +71,41 @@ export const NewPostDialog = () => {
       setFieldErrors({});
     }
   };
+
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const formData = new FormData(event.currentTarget);
     const title = formData.get('title');
-
-    const tags = formData.get('tags');
-
     execute({
       title: title?.toString() || '',
       content: value,
-      tags: (tags?.toString() || '').split(','),
+      tags,
     });
   };
 
+  const addTag = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === ',') {
+      event.preventDefault();
+      const formData = new FormData(formRef.current as HTMLFormElement);
+      const tag = formData.get('tags')?.toString().trim().replace(/,+$/, '');
+
+      if (tag) {
+        setTags((prevTags) => [
+          ...prevTags,
+          tag
+        ]);
+      }
+      if (tagInputRef.current) {
+        tagInputRef.current.value = '';
+      }
+    }
+  };
+
+
+  const removeTag = (tag: string) => {
+    setTags(tags.filter((t) => t !== tag));
+  };
+
   return (
     <Modal ref={ref} onClose={handleOnCloseClick}>
       <div className="fixed inset-0 bg-black/50 backdrop-blur-md" />
@@ -130,12 +154,31 @@ export const NewPostDialog = () => {
                 <h3 className="wmde-markdown-var text-lg font-bold tracking-tighter">
                   Tags
                 </h3>
-                <FormPostInput
-                  id="tags"
-                  placeholder="Enter tags separated by comma"
-                  errors={fieldErrors}
-                  className="w-full"
-                />
+                <div className="flex flex-col gap-2">
+                  <div className="flex gap-1">
+                    {tags.map((tag, index) => (
+                      <span
+                        key={index}
+                        className="mr-2 flex items-center gap-1 rounded-md bg-primary/10 px-2 py-1 text-xs text-primary"
+                      >
+                        {tag}
+                        <X
+                          size={12}
+                          className="cursor-pointer"
+                          onClick={() => removeTag(tag)}
+                        />
+                      </span>
+                    ))}
+                  </div>
+                  <FormPostInput
+                    id="tags"
+                    placeholder="Enter tags separated by comma"
+                    errors={fieldErrors}
+                    className="w-full"
+                    onKeyUp={addTag}
+                    ref={tagInputRef}
+                  />
+                </div>
               </div>
 
               <div
@@ -163,4 +206,4 @@ export const NewPostDialog = () => {
       </AnimatePresence>
     </Modal>
   );
-};
+};
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -182,7 +182,7 @@ export function Sidebar({
 
   return (
     <>
-      <Button onClick={() => setSidebarOpen((s) => !s)} className="w-fit gap-2">
+      <Button onClick={() => setSidebarOpen((s) => !s)} className="w-fit gap-2 xl:absolute">
         {sidebarOpen ? <X className="size-5" /> : <Menu className="size-5" />}
         <span>{sidebarOpen ? 'Hide Contents' : 'Show Contents'}</span>
       </Button>

diff --git a/src/components/Signin.tsx b/src/components/Signin.tsx
@@ -131,7 +131,17 @@ const Signin = () => {
       router.push('/');
       toast.success('Signed In');
     } else {
-      toast.error('oops something went wrong..!');
+      if (res.status === 401) {
+        toast.error('Invalid Credentials, try again!');
+      } else if (res.status === 400) {
+        toast.error('Missing Credentials!');
+      } else if (res.status === 404) {
+        toast.error('Account not found!');
+      } else if (res.status === 403) {
+        toast.error('Forbidden!');
+      } else {
+        toast.error('oops something went wrong..!');
+      }
       setCheckingPassword(false);
     }
   };

diff --git a/src/components/comment/Comments.tsx b/src/components/comment/Comments.tsx
@@ -241,36 +241,40 @@ const Comments = async ({
                       )}
                     </div>
 
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <MoreVerticalIcon className="size-6" />
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent>
-                        {(session.user.id.toString() ===
-                          (c as ExtendedComment).userId.toString() ||
-                          session.user.role === ROLES.ADMIN) && (
-                          <DropdownMenuItem>
-                            <CommentDeleteForm commentId={c.id} />
-                          </DropdownMenuItem>
-                        )}
-                        {session.user.role === ROLES.ADMIN && (
-                          <DropdownMenuItem>
-                            <CommentPinForm
-                              commentId={c.id}
-                              contentId={c.contentId}
-                            />
-                          </DropdownMenuItem>
-                        )}
-                        {session.user.role === ROLES.ADMIN && (
-                          <DropdownMenuItem>
-                            <CommentApproveForm
-                              commentId={c.id}
-                              contentId={c.contentId}
-                            />
-                          </DropdownMenuItem>
-                        )}
-                      </DropdownMenuContent>
-                    </DropdownMenu>
+                    {(session.user.id.toString() ===
+                      (c as ExtendedComment).userId.toString() ||
+                      session.user.role === ROLES.ADMIN) && (
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <MoreVerticalIcon className="size-6" />
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent>
+                          {(session.user.id.toString() ===
+                            (c as ExtendedComment).userId.toString() ||
+                            session.user.role === ROLES.ADMIN) && (
+                            <DropdownMenuItem>
+                              <CommentDeleteForm commentId={c.id} />
+                            </DropdownMenuItem>
+                          )}
+                          {session.user.role === ROLES.ADMIN && (
+                            <DropdownMenuItem>
+                              <CommentPinForm
+                                commentId={c.id}
+                                contentId={c.contentId}
+                              />
+                            </DropdownMenuItem>
+                          )}
+                          {session.user.role === ROLES.ADMIN && (
+                            <DropdownMenuItem>
+                              <CommentApproveForm
+                                commentId={c.id}
+                                contentId={c.contentId}
+                              />
+                            </DropdownMenuItem>
+                          )}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    )}
                   </div>
 
                   <TimeCodeComment

diff --git a/src/components/posts/PostCard.tsx b/src/components/posts/PostCard.tsx
@@ -1,7 +1,7 @@
 'use client';
 import '@uiw/react-md-editor/markdown-editor.css';
 import '@uiw/react-markdown-preview/markdown.css';
-import React, { useState } from 'react';
+import React, { useState, useTransition } from 'react';
 import VoteForm from './form/form-vote';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -62,6 +62,8 @@ const PostCard: React.FC<IProps> = ({
 
   const router = useRouter();
 
+  const [isPending, startTransition] = useTransition(); 
+
   const { execute, fieldErrors } = useAction(createAnswer, {
     onSuccess: () => {
       toast.success(`Reply added`);
@@ -97,11 +99,13 @@ const PostCard: React.FC<IProps> = ({
         !post.content && !isAnswer
           ? `rounded-xl bg-neutral-50 hover:-translate-y-2 dark:bg-neutral-900`
           : `rounded-r-xl border-l-2 border-blue-500 bg-primary/5`
-      }`}
+      } ${isPending && `animate-pulse duration-700`}`}
       onClick={() => {
-        if (isExtendedQuestion(post)) {
-          router.push(`/question/${post?.slug}`);
-        }
+        startTransition(() => {
+          if (isExtendedQuestion(post)) {
+            router.push(`/question/${post?.slug}`);
+          }
+        });
       }}
     >
       <div className="flex w-full flex-col items-start justify-between sm:flex-row sm:items-center">

diff --git a/src/components/posts/form/form-input.tsx b/src/components/posts/form/form-input.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import React from 'react';
 import { forwardRef } from 'react';
 import { useFormStatus } from 'react-dom';
 
@@ -19,6 +20,7 @@ interface FormInputProps {
   className?: string;
   defaultValue?: string;
   onBlur?: () => void;
+  onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 export const FormPostInput = forwardRef<HTMLInputElement, FormInputProps>(
@@ -33,6 +35,7 @@ export const FormPostInput = forwardRef<HTMLInputElement, FormInputProps>(
       errors,
       className,
       defaultValue = '',
+      onKeyUp,
       onBlur,
     },
     ref,
@@ -57,6 +60,7 @@ export const FormPostInput = forwardRef<HTMLInputElement, FormInputProps>(
             required={required}
             name={id}
             id={id}
+            onKeyUp={onKeyUp}
             placeholder={placeholder}
             type={type}
             disabled={pending || disabled}
@@ -73,4 +77,4 @@ export const FormPostInput = forwardRef<HTMLInputElement, FormInputProps>(
   },
 );
 
-FormPostInput.displayName = 'FormPostInput';
+FormPostInput.displayName = 'FormPostInput';