From 8a777e013736962d48586006631d26cbdfd4d682 Mon Sep 17 00:00:00 2001 From: Saksham Malhotra <147790402+saksham-malhotra-27@users.noreply.github.com> Date: Wed, 4 Dec 2024 18:42:18 +0530 Subject: [PATCH] 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 | 11 +---- src/components/ButtonLink.tsx | 6 +-- src/components/Questions.tsx | 26 +----------- src/components/QuizModal.tsx | 13 +----- src/components/Results.tsx | 7 +--- src/components/SelectCategory.tsx | 6 +-- src/components/SelectQuestionsTotal.tsx | 6 +-- src/types.tsx | 53 +++++++++++++++++++++++++ 8 files changed, 64 insertions(+), 64 deletions(-) create mode 100644 src/types.tsx diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 952f8cccd..b6a3cc5d3 100644 --- a/src/components/Button.tsx +++ b/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 => { const getButtonClasses = useMemo(() => { let classes = "btn-default"; diff --git a/src/components/ButtonLink.tsx b/src/components/ButtonLink.tsx index ad83f3eae..8925c7d4c 100644 --- a/src/components/ButtonLink.tsx +++ b/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 = ({ to, children, size }) => { return ( diff --git a/src/components/Questions.tsx b/src/components/Questions.tsx index 65932d8ad..29e02bff9 100644 --- a/src/components/Questions.tsx +++ b/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 => { const navigate = useNavigate(); diff --git a/src/components/QuizModal.tsx b/src/components/QuizModal.tsx index 2afb8d7cc..9e872f221 100644 --- a/src/components/QuizModal.tsx +++ b/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 => { const dialogRef = useRef(null); diff --git a/src/components/Results.tsx b/src/components/Results.tsx index c7f356a4e..3c2a5334d 100644 --- a/src/components/Results.tsx +++ b/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 = ({ points, diff --git a/src/components/SelectCategory.tsx b/src/components/SelectCategory.tsx index eaab6a136..bd7597c8e 100644 --- a/src/components/SelectCategory.tsx +++ b/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 => { return ( diff --git a/src/components/SelectQuestionsTotal.tsx b/src/components/SelectQuestionsTotal.tsx index effd83da6..c2ea384b6 100644 --- a/src/components/SelectQuestionsTotal.tsx +++ b/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 = ({ totalQuestions, diff --git a/src/types.tsx b/src/types.tsx new file mode 100644 index 000000000..e1da0d142 --- /dev/null +++ b/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 +}