Fix/Displaying individual emoji answer

Ryczko · Nov 10, 2024 · 4f3a9e0 · 4f3a9e0
1 parent a2af250
commit 4f3a9e0
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 27 deletions.
diff --git a/...eatures/surveys/features/SurveyResults/components/IndividualResults/IndividualResults.tsx b/...eatures/surveys/features/SurveyResults/components/IndividualResults/IndividualResults.tsx
@@ -34,7 +34,7 @@ export default function IndividualResults() {
 
   return (
     <div className="mt-6">
-      <div className="mx-auto mb-5 flex flex-row items-center justify-center gap-x-1">
+      <div className="mx-auto mb-6 flex flex-row items-center justify-center gap-x-1">
         <Button
           title={'Previous'}
           onClick={handlePrevious}
@@ -76,24 +76,26 @@ export default function IndividualResults() {
       </div>
 
       {Object.keys(mappedAnswersData).map((key, index) => {
-        const questionData = surveyData?.questions[index];
         const question = mappedAnswersData[key].question;
         const questionType = mappedAnswersData[key].questionType;
         const answer = mappedAnswersData[key].answers[currentIndex].answer;
+        const options = mappedAnswersData[key].options;
 
         return (
           <div
-            className="mb-3 rounded-md border bg-white p-4 text-center shadow-sm"
+            className="mb-2 rounded-md border bg-white p-4 text-center shadow-sm"
             key={index}
           >
             <h2 className="mb-4 text-lg font-semibold">{question}</h2>
             {answer ? (
               <>
-                {questionType === QuestionType.INPUT && <p>{answer}</p>}
+                {questionType === QuestionType.INPUT && (
+                  <p className="mb-3 mt-4">{answer}</p>
+                )}
 
-                <div className="mb-1 flex flex-wrap justify-center gap-x-1">
-                  {questionType === QuestionType.RATE &&
-                    [...Array(5)].map((_, index) => (
+                {questionType === QuestionType.RATE && (
+                  <div className="mb-3 flex flex-wrap justify-center gap-x-1">
+                    {[...Array(5)].map((_, index) => (
                       <StarComponent
                         key={index}
                         classNames={clsx(
@@ -103,10 +105,24 @@ export default function IndividualResults() {
                         )}
                       />
                     ))}
-                </div>
+                  </div>
+                )}
+
+                {questionType === QuestionType.EMOJI && (
+                  <div className="mb-3 flex flex-wrap justify-center gap-x-1">
+                    {options.map((icon) => (
+                      <EmojiListItem
+                        icon={icon}
+                        selected={answer === icon}
+                        isAnySelected={!!answer}
+                        key={icon}
+                      />
+                    ))}
+                  </div>
+                )}
 
                 {questionType === QuestionType.CHOICE &&
-                  questionData?.options.map((option, idx) => (
+                  options.map((option, idx) => (
                     <button
                       key={idx}
                       className={clsx(
@@ -118,21 +134,9 @@ export default function IndividualResults() {
                       {option.trim() || '-'}
                     </button>
                   ))}
-
-                <div className="mb-1 flex flex-wrap justify-center gap-x-1">
-                  {questionType === QuestionType.EMOJI &&
-                    questionData?.options.map((icon, idx) => (
-                      <EmojiListItem
-                        icon={icon}
-                        selected={answer === icon}
-                        isAnySelected={!!answer}
-                        key={icon}
-                      />
-                    ))}
-                </div>
               </>
             ) : (
-              <div className="mb-1 italic">No answer</div>
+              <div className="mb-3 mt-4 italic">No answer</div>
             )}
           </div>
         );

diff --git a/...eatures/surveys/features/SurveyResults/components/ResultsComponents/BarChart/BarChart.tsx b/...eatures/surveys/features/SurveyResults/components/ResultsComponents/BarChart/BarChart.tsx
@@ -106,6 +106,6 @@ export default function BarChart({ data, emojiLabels }: BarChartProps) {
       </ResponsiveContainer>
     </div>
   ) : (
-    <div className="mb-4 mt-5">{t('noAnswers')}</div>
+    <div className="mb-3 mt-4 italic">{t('noAnswers')}</div>
   );
 }
diff --git a/...s/surveys/features/SurveyResults/components/ResultsComponents/TextResults/TextResults.tsx b/...s/surveys/features/SurveyResults/components/ResultsComponents/TextResults/TextResults.tsx
@@ -23,7 +23,7 @@ export default function TextResults({ answers }: TextResultsProps) {
           <AnswerTableRow key={answer.id} answer={answer} />
         ))
       ) : (
-        <div className="mb-4 mt-5">{t('noAnswers')}</div>
+        <div className="mb-3 mt-4 italic">{t('noAnswers')}</div>
       )}
 
       {(canGoNext || canGoPrev) && (

diff --git a/src/features/surveys/features/SurveyResults/components/SummaryResults/SummaryResults.tsx b/src/features/surveys/features/SurveyResults/components/SummaryResults/SummaryResults.tsx
@@ -6,7 +6,7 @@ export default function SummaryResults() {
   const { mappedAnswersData } = useSurveyResultsContext();
 
   return (
-    <>
+    <div className="mt-6">
       {Object.keys(mappedAnswersData).map((key) => (
         <ResultComponent
           key={key}
@@ -15,6 +15,6 @@ export default function SummaryResults() {
           answers={mappedAnswersData[key].answers}
         />
       ))}
-    </>
+    </div>
   );
 }
diff --git a/src/features/surveys/features/SurveyResults/managers/surveyResultsManager.ts b/src/features/surveys/features/SurveyResults/managers/surveyResultsManager.ts
@@ -46,6 +46,7 @@ export const useSurveyResultsManager = (initialData: SurveyWithAnswers) => {
           mappedDataByQuestion[answerData.questionId] = {
             questionType: questionData?.type as QuestionType,
             question: questionData?.title as string,
+            options: questionData?.options ?? [],
             answers: [
               {
                 id: answerData.id,

diff --git a/src/shared/components/Tabs/Tabs.tsx b/src/shared/components/Tabs/Tabs.tsx
@@ -12,7 +12,7 @@ export default function Tabs({ categories }: TabsProps) {
   return (
     <div className="w-full px-2 sm:px-0">
       <Tab.Group>
-        <Tab.List className="flex space-x-[4px] rounded-md bg-indigo-200 p-[2px]">
+        <Tab.List className="flex space-x-[2px] rounded-md bg-indigo-200 p-[1px]">
           {Object.keys(categories).map((category) => (
             <Tab
               key={category}

diff --git a/src/types/MappedAnswers.ts b/src/types/MappedAnswers.ts
@@ -5,6 +5,7 @@ export type MappedAnswers = {
   [key: string]: {
     questionType: QuestionType;
     question: string;
+    options: string[];
     answers: MappedAnswerData[];
   };
 };