From 259c8ded2553620b90c6015b150d200f40ad7888 Mon Sep 17 00:00:00 2001
From: "marta.pancaldi" <marta.pancaldi@resourcify.de>
Date: Thu, 27 Jul 2023 22:53:49 +0200
Subject: [PATCH] feat: add GeneralView sample story

---
 .../molecules/RandomFacts/GeneralView.tsx     | 34 +++++++++++++++++++
 .../__stories__/GeneralView.stories.tsx       | 34 +++++++++++++++++++
 .../organisms/about-free-time/RandomFacts.tsx | 11 +++---
 3 files changed, 74 insertions(+), 5 deletions(-)
 create mode 100644 src/components/molecules/RandomFacts/GeneralView.tsx
 create mode 100644 src/components/molecules/RandomFacts/__stories__/GeneralView.stories.tsx

diff --git a/src/components/molecules/RandomFacts/GeneralView.tsx b/src/components/molecules/RandomFacts/GeneralView.tsx
new file mode 100644
index 0000000..125dd59
--- /dev/null
+++ b/src/components/molecules/RandomFacts/GeneralView.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import * as React from 'react';
+
+import { shuffleArray } from '@/lib/helper';
+
+import Button from '@/components/buttons/Button';
+
+import { RandomFact } from '@/types/RandomFact';
+
+export interface QuizAnswer {
+  headline: string;
+  key?: string;
+}
+
+export interface GeneralViewProps {
+  facts: RandomFact[];
+}
+
+const GeneralView = ({ facts }: GeneralViewProps) => {
+  const randomFact = shuffleArray(facts)[0];
+
+  return (
+    <div className='p4 rounded dark:bg-slate-900'>
+      <div className='mb-5'>{randomFact.description}</div>
+
+      <div className='flex justify-center'>
+        <Button>Load another random fact</Button>
+      </div>
+    </div>
+  );
+};
+
+export default GeneralView;
diff --git a/src/components/molecules/RandomFacts/__stories__/GeneralView.stories.tsx b/src/components/molecules/RandomFacts/__stories__/GeneralView.stories.tsx
new file mode 100644
index 0000000..316c045
--- /dev/null
+++ b/src/components/molecules/RandomFacts/__stories__/GeneralView.stories.tsx
@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/react';
+
+import GeneralView, {
+  GeneralViewProps,
+} from '@/components/molecules/RandomFacts/GeneralView';
+
+import { RandomFact } from '@/types/RandomFact';
+
+const meta: Meta<typeof GeneralView> = {
+  title: 'Components/Random Facts/General View',
+  component: GeneralView,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const facts: RandomFact[] = [
+  {
+    _id: 'a',
+    name: 'name',
+    headline: '',
+    description:
+      'I have been officially excommunicated by the Roman Catholic Church ⛪',
+    trueFact: true,
+    explanation: '',
+  },
+];
+
+export const SampleStory = (args: GeneralViewProps) => (
+  <GeneralView {...args} />
+);
+SampleStory.args = {
+  facts,
+};
diff --git a/src/components/organisms/about-free-time/RandomFacts.tsx b/src/components/organisms/about-free-time/RandomFacts.tsx
index 6d12b68..9e8852d 100644
--- a/src/components/organisms/about-free-time/RandomFacts.tsx
+++ b/src/components/organisms/about-free-time/RandomFacts.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useState } from 'react';
 
 import Quiz, { QuizData } from '@/components/molecules/RandomFacts/Quiz';
+import QuizAnswers from '@/components/molecules/RandomFacts/QuizAnswers';
 
 const localStorageKey = 'alreadyPlayed';
 
@@ -47,11 +48,11 @@ const RandomFacts = ({ options, falseOption }: QuizData) => {
         />
       )}
       {submitted && alreadyPlayed && (
-        <div className='rounded bg-gray-200 p-4'>
-          <p className='text-gray-800'>
-            You're {answerCorrect ? `correct` : `wrong`}!
-          </p>
-        </div>
+        <QuizAnswers
+          answers={options}
+          falseOption={falseOption}
+          answeredCorrectly={answerCorrect}
+        />
       )}
       {!submitted && alreadyPlayed && <div>Already played :)</div>}
     </div>