Merge pull request #653 from bounswe/FRONTEND-647

Frontend 647
bounswe · Nov 24, 2024 · 98be923 · 98be923
2 parents 2e489f7 + 077b647
commit 98be923
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 39 deletions.
diff --git a/frontend/src/components/post/post-card.tsx b/frontend/src/components/post/post-card.tsx
@@ -110,7 +110,7 @@ export default function PostCard({
   };
 
   const displayedText =
-    isExpanded || content.length <= maxLength
+    isExpanded || (content && content.length <= maxLength)
       ? content
       : `${content.slice(0, maxLength)}... `;
 
@@ -151,7 +151,7 @@ export default function PostCard({
       <CardBody className="px-3 py-0 text-small text-default-600 text-justify leading-relaxed overflow-hidden">
         <p>
           {displayedText}
-          {content.length > maxLength && (
+          {(content) && content.length > maxLength && (
             <span
               onClick={toggleExpand}
               style={{ color: "#186df5", cursor: "pointer" }}

diff --git a/frontend/src/components/quiz/quiz-card.tsx b/frontend/src/components/quiz/quiz-card.tsx
@@ -15,7 +15,6 @@ import {
   IconBookmarkFilled,
   IconThumbUp,
   IconThumbUpFilled,
-  IconPhotoOff,
 } from "@tabler/icons-react";
 import { Link, useNavigate } from "react-router-dom";
 
@@ -100,24 +99,19 @@ export default function PostCard({
             }}
           />
         ) : (
-          <div
-            style={{
-              width: "200px",
-              height: "200px",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              backgroundColor: "#f0f0f0", // Light gray background for the fallback
-              borderRadius: "8px",
-            }}
-          >
-            <IconPhotoOff style={{ width: '70%', height: '70%', position: 'center', top: '50%', left: '50%'}} stroke={1.5} color="gray" />
+          <div className="w-[200px] h-[200px] flex justify-center items-center p-8">
+          <div className="text-blue-800 text-7xl md:text-7xl font-semibold items-center mb-3 pb-6 pl-3">
+            <div className="relative">
+              <span className="inline-block transform -rotate-12 translate-y-2">bu</span>
+              <span className="text-blue-600 inline-block transform rotate-12 translate-y-2">lingo</span>
+            </div>
           </div>
+        </div>
         )}
         <div className="w-[500px] flex flex-col justify-between h-full pt-4">
           <CardBody className="px-3 py-0 text-small text-default-600 text-justify leading-relaxed overflow-hidden">
             <div className="flex flex-row justify-between w-full">
-              <h2 className="text-2xl font-semibold leading-none text-black">
+              <h2 className="text-2xl font-semibold leading-none text-black mb-1">
                 <Link to={`/quiz/${id}/details`} className="text-black hover:underline">
                   {title}
                 </Link>

diff --git a/frontend/src/pages/post.tsx b/frontend/src/pages/post.tsx
@@ -147,11 +147,12 @@ export default function Post() {
               .fill(0)
               .map((_, index) => <CommentSkeleton key={index} />)
           : comments.map((comment) => (
+            console.log(comment),
               <Suspense key={comment.id} fallback={<CommentSkeleton />}>
                 <PostCard
                   id={comment.id}
                   username={comment.author}
-                  content={comment.content}
+                  content={comment.body || comment.content}
                   timePassed={formatTimeAgo(comment.created_at)}
                   likeCount={comment.like_count}
                   initialIsLiked={comment.is_liked}

diff --git a/frontend/src/pages/profile-update.tsx b/frontend/src/pages/profile-update.tsx
@@ -61,11 +61,9 @@ export default function EditProfile() {
         setFormData({ ...formData, [e.target.name]: e.target.value });
     };
 
-    const handleLevelChange = (e) => {
-        console.log(e.target.value);
-        setFormData({ ...formData, level: e.target.value });
+    const handleLevelChange = (level: string) => {
+        setFormData({ ...formData, level });
     };
-
     const handleSubmit = () => {
         axios
             .post(
@@ -132,8 +130,8 @@ export default function EditProfile() {
                             Level
                         </label>
                         <Select
-                            defaultSelectedKeys={formData.level}
-                            onChange={handleLevelChange}
+                            selectedKeys={new Set([formData.level])} // Use `selectedKeys` with a Set for controlled component
+                            onSelectionChange={(keys) => handleLevelChange([...keys][0])} // Convert the Set to an array and get the first value
                             className="w-full mb-1"
                         >
                             {tags.map((tag) => (

diff --git a/frontend/src/pages/profile.tsx b/frontend/src/pages/profile.tsx
@@ -161,7 +161,7 @@ export default function Profile() {
               <div className="mx-4 max-w-52">
                 <h3 className="text-xl font-semibold">{profile.username}</h3>
                 <p className="text-gray-500">@{profile.level}</p>
-                <p className="text-zinc-800 break-words">{profile.bio}</p>
+                <p className="text-zinc-800 break-words">{profile.bio || "Hey, new learner here!"}</p>
               </div>
             </div>
             <div
@@ -202,17 +202,6 @@ export default function Profile() {
       <Divider className="my-4 w-1/2 border-t-4 p-[0.75px] rounded-2xl border-gray-400" />
       <div className="flex w-full flex-col items-center">
         <Tabs aria-label="Options">
-          <Tab
-            key="quiz"
-            title={
-              <div className="flex items-center space-x-2">
-                <IconClipboardText size={20} stroke={1.5} />
-                <span>Quizzes</span>
-              </div>
-            }
-          >
-            <p>Quizzes</p>
-          </Tab>
           <Tab
             key="post"
             title={
@@ -247,6 +236,17 @@ export default function Profile() {
               </div>
             )}
           </Tab>
+          <Tab
+            key="quiz"
+            title={
+              <div className="flex items-center space-x-2">
+                <IconClipboardText size={20} stroke={1.5} />
+                <span>Quizzes</span>
+              </div>
+            }
+          >
+            <p></p>
+          </Tab>
           <Tab
             key="solved"
             title={
@@ -256,7 +256,7 @@ export default function Profile() {
               </div>
             }
           >
-            <p>Solved</p>
+            <p></p>
           </Tab>
           {profile?.username === Cookies.get("username") && (
             <Tab