refactor: use SelectOptions component

src/components/SelectCategory.tsx

@@ -1,28 +1,21 @@
 import React from "react";
 import { CATEGORIES } from "../constants";
 import { SelectCategoryProps } from "../types";
+import SelectOptions from "./SelectOptions";
 
 const SelectCategory: React.FC<SelectCategoryProps> = SelectCategoryProps => {
   return (
     <div className="select-quiz-styles">
       <h2 className="quiz-heading">Choose a Category</h2>
-      <div className="select-btn-div">
-        {CATEGORIES.map((category: string, index: number) => (
-          <button
-            className="select-btns"
-            onClick={() => SelectCategoryProps.selectQuiz(category, index)}
-            key={index}
-          >
-            {category}
-          </button>
-        ))}
-        <button
-          className="select-btns"
-          onClick={SelectCategoryProps.startRandomQuiz}
-        >
-          Random
-        </button>
-      </div>
+      <SelectOptions
+        list={CATEGORIES}
+        groupName="categories"
+        onChange={category =>
+          category === "Random"
+            ? SelectCategoryProps.startRandomQuiz()
+            : SelectCategoryProps.selectQuiz(category, 0)
+        }
+      />
     </div>
   );
 };

src/components/SelectOptions.tsx

@@ -0,0 +1,30 @@
+const SelectOptions = ({
+  list,
+  groupName,
+  onChange
+}: {
+  list: string[];
+  groupName: string;
+  onChange: (val: string) => void;
+}) => {
+  return (
+    <ul className="select-btn-div">
+      {list.map((itm: string) => (
+        <li key={itm}>
+          <input
+            type="radio"
+            role="button"
+            id={itm}
+            name={groupName}
+            value={itm}
+            onChange={e => onChange(e.target.value)}
+          />
+          <label className="select-btns" htmlFor={itm}>
+            {itm}
+          </label>
+        </li>
+      ))}
+    </ul>
+  );
+};
+export default SelectOptions;

src/components/SelectQuestionsTotal.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { QUESTION_NUMS } from "../constants";
 import { SelectQuestionsTotalProps } from "../types";
+import SelectOptions from "./SelectOptions";
 
 const SelectQuestionsTotal: React.FC<SelectQuestionsTotalProps> = ({
   totalQuestions,
@@ -13,24 +14,15 @@ const SelectQuestionsTotal: React.FC<SelectQuestionsTotalProps> = ({
   return (
     <div className="select-quiz-styles">
       <h2 className="quiz-heading">Choose a length for the Quiz</h2>
-      <div className="select-btn-div">
-        {availableQuizLengths.map((choice: number, index: number) => (
-          <button
-            className="select-btns"
-            onClick={() => startQuiz(choice)}
-            key={index}
-          >
-            {choice}
-          </button>
-        ))}
 
-        <button
-          className="select-btns"
-          onClick={() => startQuiz(totalQuestions)}
-        >
-          All ({totalQuestions})
-        </button>
-      </div>
+      <SelectOptions
+        list={[...availableQuizLengths, `All (${totalQuestions})`]}
+        groupName="QuizLengths"
+        onChange={(choice: string) => {
+          const num_choice = Number(choice.replace(/\D/g, ""));
+          startQuiz(num_choice);
+        }}
+      />
     </div>
   );
 };

src/constants.ts

@@ -31,7 +31,8 @@ export const CATEGORIES = [
   "IT",
   "Linux",
   "Python",
-  "SQL"
+  "SQL",
+  "Random"
 ];
 
 export const ALL_CATEGORIES = [

src/stylesheets/Button.css

@@ -44,3 +44,15 @@
     font-size: 22px;
   }
 }
+
+ul,
+li {
+  list-style-type: none;
+  input[type="radio"] {
+    display: none;
+  }
+  label {
+    color: #0a0a23;
+    text-align: center;
+  }
+}