From 3154247300c48929be2107cd6a19a11a02082f8c Mon Sep 17 00:00:00 2001
From: Aria Moradi <aria.moradi007@gmail.com>
Date: Thu, 9 Sep 2021 18:37:23 +0430
Subject: [PATCH] fix typescript weirdness while migrating from material v4

---
 src/components/anime/AnimeCard.tsx | 3 +--
 src/components/anime/AnimeGrid.tsx | 2 +-
 src/components/manga/MangaCard.tsx | 3 +--
 src/components/manga/MangaGrid.tsx | 2 +-
 4 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/anime/AnimeCard.tsx b/src/components/anime/AnimeCard.tsx
index 3f014880..453b5194 100644
--- a/src/components/anime/AnimeCard.tsx
+++ b/src/components/anime/AnimeCard.tsx
@@ -48,7 +48,7 @@ const useStyles = makeStyles({
 interface IProps {
     manga: IMangaCard
 }
-const AnimeCard = React.forwardRef((props: IProps, ref) => {
+const AnimeCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref) => {
     const {
         manga: {
             id, title, thumbnailUrl,
@@ -60,7 +60,6 @@ const AnimeCard = React.forwardRef((props: IProps, ref) => {
     return (
         <Grid item xs={6} sm={4} md={3} lg={2}>
             <Link to={`/anime/${id}/`}>
-                {/* @ts-ignore */}
                 <Card className={classes.root} ref={ref}>
                     <CardActionArea>
                         <div className={classes.wrapper}>
diff --git a/src/components/anime/AnimeGrid.tsx b/src/components/anime/AnimeGrid.tsx
index 94f2d10d..2bcb5a56 100644
--- a/src/components/anime/AnimeGrid.tsx
+++ b/src/components/anime/AnimeGrid.tsx
@@ -22,7 +22,7 @@ export default function AnimeGrid(props: IProps) {
         mangas, message, hasNextPage, lastPageNum, setLastPageNum,
     } = props;
     let mapped;
-    const lastManga = useRef<HTMLInputElement>();
+    const lastManga = useRef<HTMLInputElement>(null);
 
     const scrollHandler = () => {
         if (lastManga.current) {
diff --git a/src/components/manga/MangaCard.tsx b/src/components/manga/MangaCard.tsx
index dfd17a34..bc67a4f6 100644
--- a/src/components/manga/MangaCard.tsx
+++ b/src/components/manga/MangaCard.tsx
@@ -66,7 +66,7 @@ const truncateText = (str: string, maxLength: number) => {
 interface IProps {
     manga: IMangaCard
 }
-const MangaCard = React.forwardRef((props: IProps, ref) => {
+const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref) => {
     const {
         manga: {
             id, title, thumbnailUrl,
@@ -78,7 +78,6 @@ const MangaCard = React.forwardRef((props: IProps, ref) => {
     return (
         <Grid item xs={6} sm={4} md={3} lg={2}>
             <Link to={`/manga/${id}/`}>
-                {/* @ts-ignore */}
                 <Card className={classes.root} ref={ref}>
                     <CardActionArea>
                         <div className={classes.wrapper}>
diff --git a/src/components/manga/MangaGrid.tsx b/src/components/manga/MangaGrid.tsx
index c5935428..fc3f3e8c 100644
--- a/src/components/manga/MangaGrid.tsx
+++ b/src/components/manga/MangaGrid.tsx
@@ -22,7 +22,7 @@ export default function MangaGrid(props: IProps) {
         mangas, message, hasNextPage, lastPageNum, setLastPageNum,
     } = props;
     let mapped;
-    const lastManga = useRef<HTMLInputElement>();
+    const lastManga = useRef<HTMLDivElement>(null);
 
     const scrollHandler = () => {
         if (lastManga.current) {