update props

src/components/coin-card.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Link } from "react-router";
 import { nameShorten } from "../utils/string-helper";
 import { ICoinMarketData } from "../utils/interfaces";
@@ -6,7 +7,7 @@ interface ICoin {
     coin: ICoinMarketData;
 }
 
-const CoinCard = ({ coin }: ICoin) => {
+const CoinCard: React.FC<ICoin> = ({ coin }) => {
 
     return (
         <Link to={`/coin/${coin.id}`} >

src/components/coin-chart.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { Line } from "react-chartjs-2";
 import {
     Chart as ChartJS,
@@ -24,7 +24,7 @@ ChartJS.register(
     TimeScale
 );
 
-interface IProp {
+interface ICoinChartProps {
     coinId: string;
 }
 
@@ -48,7 +48,7 @@ interface IChartData {
     datasets: IDataSet[],
 }
 
-const CoinChart = ({ coinId }: IProp) => {
+const CoinChart: React.FC<ICoinChartProps> = ({ coinId }) => {
 
     const [chartData, setChartData] = useState<IChartData | null>(null);
 

src/components/coin-info.tsx

@@ -1,10 +1,11 @@
+import React from "react";
 import { ICoinInfo } from "../utils/interfaces";
 
 interface ICoinInfoProps {
     coin: ICoinInfo;
 }
 
-const CoinInfo = ({ coin }: ICoinInfoProps) => {
+const CoinInfo: React.FC<ICoinInfoProps> = ({ coin }) => {
 
     return (
         <>

src/components/error-card.tsx

@@ -1,12 +1,13 @@
+import React from "react";
 import { messages } from "../utils/constants";
 import RefreshButton from "./refresh-button";
 
 
-export interface IErrorCardProp {
+export interface IErrorCardProps {
     message: string;
 }
 
-const ErrorCard = ({ message }: IErrorCardProp) => {
+const ErrorCard: React.FC<IErrorCardProps> = ({ message }) => {
 
     return (
         <>

src/components/filter-input.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import { useFilterStore } from "../store/controls";
 import { messages } from "../utils/constants";
 
-const FilterInput = () => {
+const FilterInput: React.FC = () => {
     const toggleFilter = useFilterStore(state => state.toggleFilter);
 
     const onFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {

src/components/footer.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import { footerLinkUrl, footerLinkText } from "../utils/conf";
 
-const Footer = () => {
+const Footer: React.FC = () => {
     return (
         <footer>
             <p>&copy; {new Date().getFullYear()}</p>

src/components/header.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import { Link } from "react-router";
 
-const Header = () => {
+const Header: React.FC = () => {
     return (
         <div className="nav-box">
             <Link to="/">Home</Link>

src/components/limit-selector.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import { useLimitStore } from "../store/controls";
 import { fetchCoins, getCoinsLength } from "../store/coins-market";
 
-const LimitSelector = () => {
+const LimitSelector: React.FC = () => {
 
     const limit = useLimitStore(state => state.limit);
     const toggleLimit = useLimitStore(state => state.toggleLimit);

src/components/refresh-button.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { fetchCoins, getCoinsLength } from "../store/coins-market";
 import { getTimestampOfLastPersist } from "../store/coins-market";
 import toast, { Toaster } from "react-hot-toast";
@@ -6,7 +7,7 @@ import { MdRefresh } from "react-icons/md";
 
 const notify = (text: string) => toast.error(text, { duration: 3000, id: "reloadRapidDisallowed", style: { textAlign: 'center' } });
 
-const RefreshButton = () => {
+const RefreshButton: React.FC = () => {
 
     const onButonClick = () => {
         if (Date.now() > getTimestampOfLastPersist() + 3000) fetchCoins(getCoinsLength() || 10);

src/components/sort-selector.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import { SortBy } from "../utils/enum";
 import { useSortByStore } from "../store/controls";
 
-const SortSelector = () => {
+const SortSelector: React.FC = () => {
     const sortBy = useSortByStore(state => state.sortBy);
     const toggleSortBy = useSortByStore(state => state.toggleSortBy);
 

src/components/spinner.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { BarLoader } from "react-spinners";
 
 const override = {
@@ -5,7 +6,12 @@ const override = {
     margin: "0 auto 50px auto",
 };
 
-const Spinner = ({ color = "blue", width = 200 }) => {
+interface ISpinnerProps {
+    color?: string;
+    width?: number;
+}
+
+const Spinner: React.FC<ISpinnerProps> = ({ color = "blue", width = 200 }) => {
     return (
         <div>
             <BarLoader color={color} width={width} cssOverride={override} aria-label="Loading..." />

src/pages/about.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import { messages } from "../utils/constants";
 
-const About = () => {
+const About: React.FC = () => {
     return (
         <div className="about">
             <h1>📈 Crypto Viewer</h1>

src/pages/coin-detail.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Link, useParams } from "react-router";
 import CoinInfo from "../components/coin-info";
 import { useCoinInfoStore, reset, fetchCoinInfos } from "../store/coin-info";
@@ -5,7 +6,7 @@ import { useEffect } from "react";
 import CoinChart from "../components/coin-chart";
 import Spinner from "../components/spinner";
 
-const CoinDetail = () => {
+const CoinDetail: React.FC = () => {
 
     const { id } = useParams<string>();
 

src/pages/home.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useEffect, useRef } from "react";
 import FilterInput from "../components/filter-input";
 import LimitSelector from "../components/limit-selector";
@@ -12,7 +13,7 @@ import ErrorCard from "../components/error-card";
 import { initialCoinsCoint } from "../utils/conf";
 import { ICoinMarketData } from "../utils/interfaces";
 
-const Home = () => {
+const Home: React.FC = () => {
 
     const coins = useCoinsMarketStore(state => state.coins);
     const loading = useCoinsMarketStore(state => state.loading);

src/pages/not-found.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import { Link } from "react-router";
 
-const NotFound = () => {
+const NotFound: React.FC = () => {
     return (
         <div className="not-found-container">
             <h1 className="title">404</h1>