From 06ba1a923ff44e88ad53917763731248b8531ded Mon Sep 17 00:00:00 2001
From: Ilgeldi <neo@Ilgeldis-MacBook-Air.local>
Date: Mon, 10 Mar 2025 16:15:29 +0500
Subject: [PATCH] fix: when steps has no length, not showing content

---
 app/(main)/quiz/[quiz_id]/page.tsx   | 58 ++++++++++++++--------------
 components/quiz/QuizQuestionList.tsx |  3 +-
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/app/(main)/quiz/[quiz_id]/page.tsx b/app/(main)/quiz/[quiz_id]/page.tsx
index d78feb4..46c7123 100644
--- a/app/(main)/quiz/[quiz_id]/page.tsx
+++ b/app/(main)/quiz/[quiz_id]/page.tsx
@@ -141,36 +141,38 @@ const page = ({ params }: IParams) => {
               </div>
 
               <div className="flex flex-col md:gap-[160px] gap-[80px]">
-                {data.data.has_steps !== 0 && data.data.steps && (
-                  <div className="flex flex-col gap-4 items-center w-full">
-                    <h1 className="text-textBlack md:text-[60px] leading-[100%] font-semibold">
-                      Tapgyr
-                    </h1>
-                    <div className="flex w-full md:w-1/2 gap-[10px]">
-                      {data.data.steps.map((item) => (
-                        <button
-                          onClick={() => {
-                            setStep(item.tapgyr);
-                          }}
-                          key={item.tapgyr}
-                          className={`flex-1 py-[5px] rounded-lg transition-all duration-300 ${
-                            step === item.tapgyr
-                              ? "bg-lightPrimary text-white"
-                              : "bg-lightPrimaryContainer text-textLight"
-                          }`}
+                {data.data.has_steps !== 0 &&
+                  data.data.steps &&
+                  data.data.steps?.length > 0 && (
+                    <div className="flex flex-col gap-4 items-center w-full">
+                      <h1 className="text-textBlack md:text-[60px] leading-[100%] font-semibold">
+                        Tapgyr
+                      </h1>
+                      <div className="flex w-full md:w-1/2 gap-[10px]">
+                        {data.data.steps.map((item) => (
+                          <button
+                            onClick={() => {
+                              setStep(item.tapgyr);
+                            }}
+                            key={item.tapgyr}
+                            className={`flex-1 py-[5px] rounded-lg transition-all duration-300 ${
+                              step === item.tapgyr
+                                ? "bg-lightPrimary text-white"
+                                : "bg-lightPrimaryContainer text-textLight"
+                            }`}
+                          >
+                            {item.tapgyr}
+                          </button>
+                        ))}
+                        <Link
+                          href={`/quiz/${params.quiz_id}/results`}
+                          className={`flex-1 py-[5px] rounded-lg transition-all duration-300 bg-lightPrimaryContainer text-center text-textLight`}
                         >
-                          {item.tapgyr}
-                        </button>
-                      ))}
-                      <Link
-                        href={`/quiz/${params.quiz_id}/results`}
-                        className={`flex-1 py-[5px] rounded-lg transition-all duration-300 bg-lightPrimaryContainer text-center text-textLight`}
-                      >
-                        Netije
-                      </Link>
+                          Netije
+                        </Link>
+                      </div>
                     </div>
-                  </div>
-                )}
+                  )}
 
                 {data?.data && !active ? (
                   <QuizQuestionList
diff --git a/components/quiz/QuizQuestionList.tsx b/components/quiz/QuizQuestionList.tsx
index 2b837ae..b9f9e73 100644
--- a/components/quiz/QuizQuestionList.tsx
+++ b/components/quiz/QuizQuestionList.tsx
@@ -25,7 +25,8 @@ const QuizQuestionList = ({
   const [questionData, setQuestionsData] = useState<Question[] | undefined>(
     initialQuestionsData.data.questions
       ? initialQuestionsData.data.questions
-      : initialQuestionsData.data.steps
+      : initialQuestionsData.data.steps &&
+        initialQuestionsData.data.steps.length > 0
       ? initialQuestionsData.data.steps[0].questions
       : []
   );