ready to play

src/components/QuestionCard.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { ButtonWrapper } from '../App.style';
+import { AnswerObject } from '../Types';
+import { Capitalize } from '../Utils';
+
+type Props = {
+  answers: string[];
+  callback: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  difficulty: string;
+  question: string;
+  category: string;
+  questionNr: number;
+  score: number;
+  totalQuestions: number;
+  userAnswer: AnswerObject | undefined;
+};
+
+const QuestionCard: React.FC<Props> = ({
+  answers,
+  callback,
+  difficulty,
+  question,
+  category,
+  questionNr,
+  score,
+  totalQuestions,
+  userAnswer
+}) => (
+  <div className="question-card-wrapper">
+    <div className="details">
+      <div>Difficulty: {Capitalize(difficulty)}</div>
+      <div>{category}</div>
+    </div>
+    <div className="details">
+      <div>
+        Question: {questionNr}/{totalQuestions}
+      </div>
+      <div>Score: {score}</div>
+    </div>
+
+    {!(questionNr === totalQuestions) && (
+      <>
+        <p
+          className="question"
+          dangerouslySetInnerHTML={{ __html: question }}
+        />
+        <div>
+          {answers.map((answer) => (
+            <ButtonWrapper
+              correct={userAnswer?.correctAnswer === answer}
+              userClicked={userAnswer?.answer === answer}
+              key={answer}
+            >
+              <button disabled={!!userAnswer} onClick={callback} value={answer}>
+                <span dangerouslySetInnerHTML={{ __html: answer }} />
+              </button>
+            </ButtonWrapper>
+          ))}
+        </div>
+      </>
+    )}
+  </div>
+);
+
+export default QuestionCard;

src/components/SelectCategory.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { SelectWrapper } from '../App.style';
+import { Category } from '../Types';
+
+type Props = {
+  category: number;
+  categoryList: Array<Category>;
+  setCategory: (category: number) => void;
+};
+
+const SelectCategory = ({ category, categoryList, setCategory }: Props) => {
+  return (
+    <SelectWrapper
+      value={category}
+      onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
+        e.preventDefault();
+        setCategory(e.target.value as number);
+      }}
+    >
+      <option value={1}>Any Category</option>
+      {categoryList.map((cat) => (
+        <option value={cat.id} key={cat.id}>
+          {cat.name}
+        </option>
+      ))}
+    </SelectWrapper>
+  );
+};
+
+export default SelectCategory;

src/components/SelectDifficulty.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { SelectWrapper } from '../App.style';
+
+export enum Difficulty {
+  EASY = 'easy',
+  MEDIUM = 'medium',
+  HARD = 'hard'
+}
+
+type Props = {
+  difficulty: string;
+  setDifficulty: (difficulty: string) => void;
+};
+
+const SelectDifficulty = ({ difficulty, setDifficulty }: Props) => {
+  return (
+    <SelectWrapper
+      value={difficulty}
+      onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+        e.preventDefault();
+        setDifficulty(e.target.value);
+      }}
+    >
+      <option value={Difficulty.EASY}>Easy</option>
+      <option value={Difficulty.MEDIUM}>Medium</option>
+      <option value={Difficulty.HARD}>Hard</option>
+    </SelectWrapper>
+  );
+};
+
+export default SelectDifficulty;

src/components/SelectQuestions.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { SelectWrapper } from '../App.style';
+
+export enum TotalQuestions {
+  FIVE = 5,
+  TEN = 10,
+  FIFTEEN = 15,
+  TWENTY = 20,
+  TWENTYFIVE = 25,
+  FIFTY = 50
+}
+
+type Props = {
+  totalQuestionNumber: number;
+  setTotalQuestionNumber: (totalQuestionNumber: number) => void;
+};
+
+const SelectQuestions = ({
+  totalQuestionNumber,
+  setTotalQuestionNumber
+}: Props) => {
+  return (
+    <SelectWrapper
+      value={totalQuestionNumber}
+      onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
+        e.preventDefault();
+        setTotalQuestionNumber(e.target.value as number);
+      }}
+    >
+      <option value={TotalQuestions.FIVE}>{TotalQuestions.FIVE}</option>
+      <option value={TotalQuestions.TEN}>{TotalQuestions.TEN}</option>
+      <option value={TotalQuestions.FIFTEEN}>{TotalQuestions.FIFTEEN}</option>
+      <option value={TotalQuestions.TWENTY}>{TotalQuestions.TWENTY}</option>
+      <option value={TotalQuestions.TWENTYFIVE}>
+        {TotalQuestions.TWENTYFIVE}
+      </option>
+      <option value={TotalQuestions.FIFTY}>{TotalQuestions.FIFTY}</option>
+    </SelectWrapper>
+  );
+};
+
+export default SelectQuestions;