chore: move interfaces to types file (#1246)

* Improv #1216 extract all typscript interfaces into common types file

* Improv 1216 extract all typscript interfaces into common types file- lint review

src/components/Button.tsx

@@ -1,13 +1,6 @@
 import "../stylesheets/Button.css";
-import React, { MouseEventHandler, useMemo } from "react";
-
-interface ButtonProps {
-  text: string;
-  isTransparent: boolean;
-  size: string;
-  handleClick: MouseEventHandler;
-}
-
+import React, { useMemo } from "react";
+import { ButtonProps } from "../types";
 const Button: React.FC<ButtonProps> = ButtonProps => {
   const getButtonClasses = useMemo(() => {
     let classes = "btn-default";

src/components/ButtonLink.tsx

@@ -1,10 +1,8 @@
 import React from "react";
-import { NavLink, NavLinkProps } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import "../stylesheets/Button.css";
 import "../stylesheets/ButtonLink.css";
-interface ButtonLinkProps extends NavLinkProps {
-  size?: string;
-}
+import { ButtonLinkProps } from "../types";
 
 const ButtonLink: React.FC<ButtonLinkProps> = ({ to, children, size }) => {
   return (

src/components/Questions.tsx

@@ -1,30 +1,8 @@
 import { useNavigate } from "react-router-dom";
 import QuizModal from "./QuizModal";
-import React, { MouseEventHandler, useEffect } from "react";
+import React, { useEffect } from "react";
 
-interface QuizQuestion {
-  message: string;
-  points: number;
-  chosenAnswer: string;
-  correct: boolean;
-  displayExplanation: string;
-  showReference: string;
-  nextQuestion: MouseEventHandler;
-  show: boolean;
-}
-
-interface QuizProps {
-  currQuestion: { Question: string };
-  questionNumber: number;
-  totalQuestions: number;
-  modalProps: QuizQuestion;
-  chooseAnswer: boolean;
-  points: number;
-  choicesArr: string[][];
-  selectedOption: string;
-  selectOption: (option: string) => void;
-  checkAnswer: () => void;
-}
+import { QuizProps } from "../types";
 
 const Questions: React.FC<QuizProps> = QuizProps => {
   const navigate = useNavigate();

src/components/QuizModal.tsx

@@ -1,15 +1,6 @@
-import React, { MouseEventHandler, useRef } from "react";
+import React, { useRef } from "react";
 import "../stylesheets/Modal.css";
-interface QuizQuestion {
-  chosenAnswer: string;
-  message: string;
-  points: number;
-  correct: boolean;
-  displayExplanation: string;
-  showReference: string;
-  nextQuestion: MouseEventHandler;
-  show: boolean;
-}
+import { QuizQuestion } from "../types";
 
 const QuizModal: React.FC<QuizQuestion> = QuizQuestion => {
   const dialogRef = useRef<HTMLDialogElement>(null);

src/components/Results.tsx

@@ -1,11 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Confetti from "react-confetti";
-
-interface PointTotals {
-  points: number;
-  totalQuestions: number;
-  resetQuiz: () => void;
-}
+import { PointTotals } from "../types";
 
 const Results: React.FC<PointTotals> = ({
   points,

src/components/SelectCategory.tsx

@@ -1,10 +1,6 @@
 import React from "react";
 import { CATEGORIES } from "../constants";
-
-interface SelectCategoryProps {
-  selectQuiz: (category: string, index: number) => void;
-  startRandomQuiz: () => void;
-}
+import { SelectCategoryProps } from "../types";
 
 const SelectCategory: React.FC<SelectCategoryProps> = SelectCategoryProps => {
   return (

src/components/SelectQuestionsTotal.tsx

@@ -1,10 +1,6 @@
 import React from "react";
 import { QUESTION_NUMS } from "../constants";
-
-interface SelectQuestionsTotalProps {
-  startQuiz: (e: number) => void;
-  totalQuestions: number; // Add the totalQuestions prop
-}
+import { SelectQuestionsTotalProps } from "../types";
 
 const SelectQuestionsTotal: React.FC<SelectQuestionsTotalProps> = ({
   totalQuestions,

src/types.tsx

@@ -0,0 +1,53 @@
+import { MouseEventHandler } from "react";
+import { NavLinkProps } from "react-router-dom";
+
+export interface ButtonProps {
+  text: string;
+  isTransparent: boolean;
+  size: string;
+  handleClick: MouseEventHandler;
+}
+
+export interface ButtonLinkProps extends NavLinkProps {
+  size?: string;
+}
+
+export interface QuizQuestion {
+  message: string;
+  points: number;
+  chosenAnswer: string;
+  correct: boolean;
+  displayExplanation: string;
+  showReference: string;
+  nextQuestion: MouseEventHandler;
+  show: boolean;
+}
+
+export interface QuizProps {
+  currQuestion: { Question: string };
+  questionNumber: number;
+  totalQuestions: number;
+  modalProps: QuizQuestion;
+  chooseAnswer: boolean;
+  points: number;
+  choicesArr: string[][];
+  selectedOption: string;
+  selectOption: (option: string) => void;
+  checkAnswer: () => void;
+}
+
+export interface PointTotals {
+  points: number;
+  totalQuestions: number;
+  resetQuiz: () => void;
+}
+
+export interface SelectCategoryProps {
+  selectQuiz: (category: string, index: number) => void;
+  startRandomQuiz: () => void;
+}
+
+export interface SelectQuestionsTotalProps {
+  startQuiz: (e: number) => void;
+  totalQuestions: number; // Add the totalQuestions prop
+}