revert react changes

This commit is contained in:
Aria Moradi 2021-01-29 14:25:18 +03:30
parent 9caae5f1e5
commit 99316f4bd5
4 changed files with 5 additions and 42 deletions

View File

@ -2,7 +2,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useEffect } from 'react'; import React from 'react';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card'; import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea'; import CardActionArea from '@material-ui/core/CardActionArea';
@ -43,29 +43,15 @@ const useStyles = makeStyles({
interface IProps { interface IProps {
manga: IManga manga: IManga
setMangaThumbnailUrl: (thumbnailUrl:string) => void
} }
const MangaCard = React.forwardRef((props: IProps, ref) => { const MangaCard = React.forwardRef((props: IProps, ref) => {
const { const {
manga: { manga: {
id, title, thumbnailUrl, id, title, thumbnailUrl,
}, setMangaThumbnailUrl, },
} = props; } = props;
const classes = useStyles(); const classes = useStyles();
console.log(`${title} has ${thumbnailUrl}`);
if (thumbnailUrl === null || thumbnailUrl.length === 0) {
useEffect(() => {
fetch(`http://127.0.0.1:4567/api/v1/manga/${id}/`)
.then((response) => response.json())
.then((data: IManga) => {
setMangaThumbnailUrl(data.thumbnailUrl);
});
},
[]);
}
return ( return (
<Grid item xs={6} sm={4} md={3} lg={2}> <Grid item xs={6} sm={4} md={3} lg={2}>
<Link to={`/manga/${id}/`}> <Link to={`/manga/${id}/`}>

View File

@ -12,21 +12,15 @@ interface IProps{
hasNextPage: boolean hasNextPage: boolean
lastPageNum: number lastPageNum: number
setLastPageNum: (lastPageNum: number) => void setLastPageNum: (lastPageNum: number) => void
setMangas: (mangas: IManga[]) => void
} }
export default function MangaGrid(props: IProps) { export default function MangaGrid(props: IProps) {
const { const {
mangas, message, hasNextPage, lastPageNum, setLastPageNum, setMangas, mangas, message, hasNextPage, lastPageNum, setLastPageNum,
} = props; } = props;
let mapped; let mapped;
const lastManga = useRef<HTMLInputElement>(); const lastManga = useRef<HTMLInputElement>();
function setMangaThumbnailUrl(index: number, thumbnailUrl: string) {
mangas[index].thumbnailUrl = thumbnailUrl;
setMangas(mangas);
}
const scrollHandler = () => { const scrollHandler = () => {
if (lastManga.current) { if (lastManga.current) {
const rect = lastManga.current.getBoundingClientRect(); const rect = lastManga.current.getBoundingClientRect();
@ -47,24 +41,9 @@ export default function MangaGrid(props: IProps) {
} else { } else {
mapped = mangas.map((it, idx) => { mapped = mangas.map((it, idx) => {
if (idx === mangas.length - 1) { if (idx === mangas.length - 1) {
return ( return <MangaCard manga={it} ref={lastManga} />;
<MangaCard
manga={it}
ref={lastManga}
setMangaThumbnailUrl={
(thumbnailUrl:string) => setMangaThumbnailUrl(idx, thumbnailUrl)
} }
/> return <MangaCard manga={it} />;
);
}
return (
<MangaCard
manga={it}
setMangaThumbnailUrl={
(thumbnailUrl:string) => setMangaThumbnailUrl(idx, thumbnailUrl)
}
/>
);
}); });
} }

View File

@ -37,7 +37,6 @@ export default function MangaList(props: { popular: boolean }) {
return ( return (
<MangaGrid <MangaGrid
mangas={mangas} mangas={mangas}
setMangas={setMangas}
hasNextPage={hasNextPage} hasNextPage={hasNextPage}
lastPageNum={lastPageNum} lastPageNum={lastPageNum}
setLastPageNum={setLastPageNum} setLastPageNum={setLastPageNum}

View File

@ -73,7 +73,6 @@ export default function SearchSingle() {
const mangaGrid = ( const mangaGrid = (
<MangaGrid <MangaGrid
setMangas={setMangas}
mangas={mangas} mangas={mangas}
message={message} message={message}
hasNextPage={hasNextPage} hasNextPage={hasNextPage}