fix: fix the bug according to feedback

Author: Coooder-Crypto

src/app/quiz/List.js

@@ -36,7 +36,6 @@ import useMounted from '@/hooks/useMounted';
 function List({ data }) {
   const mediaUrl = useMediaUrl();
 
-
   return (
     <Link href={`/quiz/${data.id}`} className="p-6 bg-white flex max-md:flex-col gap-4 md:gap-9 mb-4 rounded-xl transition-all hover:shadow-[0_4px_24px_rgba(0,0,0,0.08)]">
       <div className="relative">

src/app/quiz/[id]/RankList.js

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright 2024 OpenBuild
  *
  * Licensed under the Apache License, Version 2.0 (the "License");

src/app/quiz/[id]/RankListModal.js

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright 2024 OpenBuild
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -16,27 +16,34 @@
 
 import { Modal } from '@/components/Modal';
 import RankList from './RankList';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { fetchRankList } from '#/domain/quiz/repository';
 import Loader from '@/components/Loader';
 import { ModalCloseIcon } from '@/components/Icons';
+import useMounted from '@/hooks/useMounted';
 
 export function RankListModal({ quizId, shown, onClose, rank }) {
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
+  useMounted(() => {
     setLoading(true);
-    fetchRankList({ quizId }).then(res => {
-      setData(res?.data?.list);
-      setLoading(false);
-    });
-  }, []);
+    fetchRankList({ quizId })
+      .then(res => {
+        setData(res?.data?.list?.rank);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  });
 
   return (
     <Modal isOpen={shown} closeModal={onClose} container mode="640">
-      <ModalCloseIcon onClick={onClose} className="absolute top-[-48px] md:top-[-32px] right-0 md:right-[-32px] cursor-pointer" />
-      <div className="md:h-[600px] h-[400px] flex flex-col overflow-y-auto" style={{ borderRadius: 'inherit', overflow: 'hidden' }}>
+      <ModalCloseIcon
+        onClick={onClose}
+        className="absolute top-[-48px] md:top-[-32px] right-0 md:right-[-32px] cursor-pointer"
+      />
+      <div className="md:h-[600px] h-[400px] flex flex-col overflow-y-auto rounded-inherit overflow-hidden">
         {loading && <Loader classname="mr-2" />}
         <RankList rank={rank} list={data} />
       </div>

src/app/quiz/[id]/page.js

@@ -32,7 +32,7 @@ import { Record } from './Record';
 import QuizLimiterWidget from '#/domain/quiz/widgets/quiz-limiter';
 import RankList from './RankList';
 import { RankListModal } from './RankListModal';
-import { OViewer } from '#/shared/components/MarkDown';
+import { OViewer } from '@/components/MarkDown';
 
 export default function Quiz({params}) {
   const mediaUrl = useMediaUrl();