Merge branch 'main' of https://github.com/bounswe/bounswe2024group6 i…

…nto FRONTEND-924
bounswe · Dec 16, 2024 · 7810778 · 7810778
2 parents dcba7fe + 8a14c16
commit 7810778
Show file tree

Hide file tree

Showing 7 changed files with 268 additions and 207 deletions.
diff --git a/frontend/src/components/quiz/quiz-details-skeleton.tsx b/frontend/src/components/quiz/quiz-details-skeleton.tsx
@@ -0,0 +1,23 @@
+import { Card, Skeleton } from "@nextui-org/react";
+
+export default function QuizDetailsCardSkeleton() {
+  return (
+    <Card className="w-[740px] h-[450px] space-y-5 p-4" radius="lg" data-testid="quiz-card-skeleton">
+      <div>
+        <Skeleton className="flex rounded-full w-12 h-12" />
+      </div>
+      <div className="w-full flex flex-col gap-2">
+        <Skeleton className="h-3 w-3/5 rounded-lg" />
+        <Skeleton className="h-3 w-4/5 rounded-lg" />
+      </div>
+      <Skeleton className="rounded-lg">
+        <div className="h-24 rounded-lg bg-default-300"></div>
+      </Skeleton>
+      <div className="space-y-3">
+        <Skeleton className="w-3/5 rounded-lg">
+          <div className="h-3 w-3/5 rounded-lg bg-default-200"></div>
+        </Skeleton>
+      </div>
+    </Card>
+  );
+}
diff --git a/frontend/src/pages/post.tsx b/frontend/src/pages/post.tsx
@@ -199,7 +199,7 @@ export default function Post() {
             </div>
           </Card>
         </div>
-        <Card className="w-[740px] p-4">
+        <Card className="w-[740px] p-4 mb-1">
           <div className="flex flex-col gap-2">
             <Textarea
               placeholder="Write a comment..."

diff --git a/frontend/src/pages/profile-update.tsx b/frontend/src/pages/profile-update.tsx
@@ -7,7 +7,7 @@ import { AuthActions } from "../components/auth/utils.tsx";
 import { convertProfileResponseToProfile } from "../components/common/utils.tsx";
 import Cookies from "js-cookie";
 import { ProfileResponse } from "../types.ts";
-import { Select, SelectItem } from "@nextui-org/react";
+import { Select, SelectItem, Skeleton } from "@nextui-org/react";
 import { useNavigate } from "react-router-dom";
 import { usePageTitle } from "../components/common/usePageTitle.ts";
 
@@ -19,6 +19,7 @@ export default function EditProfile() {
   const navigate = useNavigate();
   const [file, setFile] = useState<File | null>(null);
   const [preview, setPreview] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
 
 
   const [formData, setFormData] = useState({
@@ -38,6 +39,7 @@ export default function EditProfile() {
 
   // Fetch Profile Data
   useEffect(() => {
+    setIsLoading(true);
     axios
       .get(`${BASE_URL}/profile/${Cookies.get("username")}/`, {
         headers: {
@@ -55,11 +57,12 @@ export default function EditProfile() {
           bio: profile.bio || "Hey, new learner here!",
           avatar: profile.image || "https://nextui.org/avatars/avatar-1.png",
         });
-
         setPreview(profile.image || null);
       })
       .catch((error) => {
         console.log(error);
+      }).finally(() => {
+        setIsLoading(false);
       });
   }, [token]);
 
@@ -111,43 +114,55 @@ export default function EditProfile() {
         {/* Avatar */}
         <div className="flex flex-col items-center">
           {/* Avatar Display */}
-          <Avatar
-            src={preview || formData.avatar} // Show preview if a file is selected, else show the current avatar
-            className="w-32 h-32 mb-4"
-          />
-
+          {isLoading ? (
+            <Skeleton className="flex rounded-full w-32 h-32 mb-4" />
+          )
+            :
+            (
+              <Avatar
+                src={preview || formData.avatar} // Show preview if a file is selected, else show the current avatar
+                className="w-32 h-32 mb-4"
+              />
+            )
+          }
           {/* Change Avatar Button */}
-          <label className="relative cursor-pointer">
-            <div className={`bg-default-100 hover:bg-default-200 flex flex-col justify-center items-center rounded-3xl w-[120px] h-[40px] overflow-hidden`}>
-              <span className="text-primary text-sm font-bold">Change Avatar</span>
-            </div>
-            {/* File Input */}
-            <input
-              type="file"
-              className="hidden"
-              onChange={handleFileChange} // Handle file selection
-              accept="image/*"
-            />
-          </label>
+          {isLoading ? (
+            <Skeleton className="w-40 h-10 rounded-lg" />
+          ) : (
+            <label className="relative cursor-pointer">
+              <div className={`bg-default-100 hover:bg-default-200 flex flex-col justify-center items-center rounded-3xl w-[120px] h-[40px] overflow-hidden`}>
+                <span className="text-primary text-sm font-bold">Change Avatar</span>
+              </div>
+              {/* File Input */}
+              <input
+                type="file"
+                className="hidden"
+                onChange={handleFileChange} // Handle file selection
+                accept="image/*"
+              />
+            </label>
+          )}
         </div>
-
-
         <form className="flex flex-col gap-6 w-full max-w-lg">
           {/* Bio Field */}
           <div className="flex flex-col items-start">
             <label htmlFor="bio" className="text-gray-600 font-semibold mb-1">
               Bio
             </label>
-            <Textarea
-              id="bio"
-              data-testid="bio-input"
-              name="bio"
-              value={formData.bio}
-              onChange={handleInputChange}
-              defaultValue={formData.bio}
-              maxLength={75}
-              className="w-full mb-1"
-            />
+            {isLoading ? (
+              <Skeleton className="h-20 w-full rounded-lg" />
+            ) : (
+              <Textarea
+                id="bio"
+                data-testid="bio-input"
+                name="bio"
+                value={formData.bio}
+                onChange={handleInputChange}
+                defaultValue={formData.bio}
+                maxLength={75}
+                className="w-full mb-1"
+              />
+            )}
             <p className="text-gray-400 text-sm pl-1">
               {75 - formData.bio.length} characters remaining
             </p>
@@ -158,31 +173,39 @@ export default function EditProfile() {
             <label htmlFor="level" className="text-gray-600 font-semibold mb-1">
               Level
             </label>
-            <Select
-              data-testid="level-select"
-              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) => (
-                <SelectItem key={tag} data-testid={`level-option-${tag}`}>{tag}</SelectItem>
-              ))}
-            </Select>
+            {isLoading ? (
+              <Skeleton className="h-10 w-full rounded-lg" />
+            ) : (
+              <Select
+                data-testid="level-select"
+                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) => (
+                  <SelectItem key={tag} data-testid={`level-option-${tag}`}>{tag}</SelectItem>
+                ))}
+              </Select>
+            )}
             <p className="text-gray-400 text-sm pl-1">Enter your level</p>
           </div>
           <Divider className="mt-2 w-full border-t-4 rounded-2xl border-gray-400" />
 
           {/* Submit Button */}
           <div className="flex justify-center">
-            <Button
-              onClick={handleSubmit}
-              data-testid="submit-button"
-              variant="solid"
-              color="primary"
-              className="px-8 py-1 font-bold rounded-lg"
-            >
-              Save Changes
-            </Button>
+            {isLoading ? (
+              <Skeleton className="w-40 h-10 rounded-lg" />
+            ) : (
+              <Button
+                onClick={handleSubmit}
+                data-testid="submit-button"
+                variant="solid"
+                color="primary"
+                className="px-8 py-1 font-bold rounded-lg"
+              >
+                Save Changes
+              </Button>
+            )}
           </div>
         </form>
       </div>

diff --git a/frontend/src/pages/profile.tsx b/frontend/src/pages/profile.tsx
@@ -388,9 +388,8 @@ export default function Profile() {
               </div>
             </div>
             <div
-              className={`flex flex-row ${
-                profile.username === Cookies.get("username") ? "pl-32" : "pl-0"
-              } gap-6 items-center`}
+              className={`flex flex-row ${profile.username === Cookies.get("username") ? "pl-32" : "pl-0"
+                } gap-6 items-center`}
             >
               {profile.username !== Cookies.get("username") && (
                 <Button
@@ -399,9 +398,8 @@ export default function Profile() {
                   onClick={
                     isGuest ? () => setGuestModalOpen(true) : toggleFollow
                   }
-                  className={`border-2 rounded-lg min-w-36 font-bold px-8 py-6 ${
-                    isFollowing ? "text-blue-900" : ""
-                  }`}
+                  className={`border-2 rounded-lg min-w-36 font-bold px-8 py-6 ${isFollowing ? "text-blue-900" : ""
+                    }`}
                 >
                   {isFollowing ? "Unfollow" : "Follow"}
                 </Button>
@@ -486,24 +484,23 @@ export default function Profile() {
                 isOpen={isOpen}
                 onOpenChange={onOpenChange}
                 placement="top-center"
-                className={`${
-                  type === "quiz" || type === "post" || type === "comment"
+                className={`${type === "quiz" || type === "post" || type === "comment"
                     ? "max-w-[760px]"
                     : "max-w-[360px]"
-                } flex flex-col items-center max-h-[80vh] overflow-y-auto`}
+                  } flex flex-col items-center max-h-[80vh] overflow-y-auto`}
                 backdrop="blur"
               >
                 <ModalContent className="pb-6 gap-3">
                   <ModalHeader className="text-lg font-semibold">
                     {type === "follower"
                       ? "Followers"
                       : type === "following"
-                      ? "Following"
-                      : type === "post"
-                      ? "Liked Posts"
-                      : type === "quiz"
-                      ? "Liked Quizzes"
-                      : "Liked Comments"}
+                        ? "Following"
+                        : type === "post"
+                          ? "Liked Posts"
+                          : type === "quiz"
+                            ? "Liked Quizzes"
+                            : "Liked Comments"}
                   </ModalHeader>
                   {type === "quiz" ? (
                     likedQuizzes.length > 0 ? (
@@ -570,7 +567,7 @@ export default function Profile() {
                     )
                   ) : (type === "follower" || type === "following") &&
                     (type === "follower" ? followers : followings).length >
-                      0 ? (
+                    0 ? (
                     (type === "follower" ? followers : followings).map(
                       (user) => (
                         <div
@@ -612,29 +609,36 @@ export default function Profile() {
               </div>
             }
           >
-            {profile && (
-              <div className="flex flex-col p-5 items-center">
-                <div className="flex flex-col gap-4 items-center">
-                  {profile &&
-                    sortedPosts.map((post) => {
-                      return (
-                        <Suspense key={post.id} fallback={<PostCardSkeleton />}>
-                          <PostCard
-                            id={post.id}
-                            username={profile.username}
-                            title={post.post.title}
-                            content={post.post.content}
-                            timePassed={post.post.timestamp}
-                            likeCount={post.engagement.likes}
-                            tags={post.post.tags}
-                            initialIsLiked={post.engagement.is_liked}
-                            initialIsBookmarked={post.engagement.is_bookmarked}
-                          />
-                        </Suspense>
-                      );
-                    })}
-                </div>
+            {isLoading ? (
+              <div className="flex flex-col p-5 gap-4 items-center">
+                {Array(2)
+                  .fill(0)
+                  .map((_, index) => (
+                    <PostCardSkeleton key={index} />
+                  ))}
               </div>
+            ) : (
+              profile && (
+                <div className="flex flex-col p-5 items-center">
+                  <div className="flex flex-col gap-4 items-center">
+                    {sortedPosts.map((post) => (
+                      <Suspense key={post.id} fallback={<PostCardSkeleton />}>
+                        <PostCard
+                          id={post.id}
+                          username={profile.username}
+                          title={post.post.title}
+                          content={post.post.content}
+                          timePassed={post.post.timestamp}
+                          likeCount={post.engagement.likes}
+                          tags={post.post.tags}
+                          initialIsLiked={post.engagement.is_liked}
+                          initialIsBookmarked={post.engagement.is_bookmarked}
+                        />
+                      </Suspense>
+                    ))}
+                  </div>
+                </div>
+              )
             )}
           </Tab>
           <Tab