Updating equation which defines when to fetch while scrolling

src/App.js

@@ -16,6 +16,7 @@ import FourZeroFour from "./pages/FourZeroFour";
 import Submit from "./pages/Submit";
 import Leaderboard from "./pages/Leaderboard";
 import Archive from "./pages/Archive";
+import MySubmissions from "./pages/MySubmissions";
 
 import Nav from "./components/Navigation/Navigation.component";
 
@@ -67,6 +68,7 @@ function App({ location, location: { search }, history }) {
 						<Route exact path="/solutions" component={Solutions} />
 						<Route exact path="/leaderboard" component={Leaderboard} />
 						<Route exact path="/archive" component={Archive} />
+						<Route exact path="/my-submissions" component={MySubmissions} />
 						<Route
 							from="/login"
 							component={({ location }) => {

src/components/Card/MiniCard.component.jsx

@@ -0,0 +1,87 @@
+import React from "react";
+import PropTypes from "prop-types";
+import moment from "moment";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import LangIcon from "../LangIcon/LangIcon.component";
+import {
+	Card,
+	CardContent,
+	Button,
+	CardHeader,
+	Typography
+} from "@material-ui/core";
+import Divider from "@material-ui/core/Divider";
+
+import UserRating from "../UserRating/UserRating.component";
+
+const useStyles = makeStyles((theme) => ({
+	root: {
+		width: theme.spacing(30),
+		height: theme.spacing(27),
+		margin: theme.spacing(1),
+		position: "relative"
+	},
+	dayContainer: {
+		marginBottom: theme.spacing(1),
+		borderRadius: theme.shape.borderRadius,
+		padding: theme.spacing(0.5)
+	}
+}));
+
+function MiniCard({
+	username,
+	date,
+	day,
+	solutionUrl,
+	langName,
+	ratings,
+	...props
+}) {
+	const classes = useStyles();
+
+	return (
+		<Card className={classes.root}>
+			<CardHeader
+				title={
+						<div className={classes.dayContainer}>
+							<Typography variant="body1">
+								Day {day}
+							</Typography>
+						</div>
+						}
+				subheader={moment(date).format("MM/DD, hh:mm a")}
+				avatar={<LangIcon langName={langName} />}
+			/>
+			<Divider />
+			<CardContent>
+				<Button
+					target="_blank"
+					rel="noopener noreferrer"
+					component="a"
+					href={solutionUrl}
+					variant="contained"
+					color="secondary"
+					fullWidth
+				>
+					Solution
+				</Button>
+				<UserRating
+					value={ratings}
+					isDisabled={true}
+					username={username}
+					onChange={() => {}}
+				/>
+			</CardContent>
+		</Card>
+	);
+}
+
+MiniCard.propTypes = {
+	username: PropTypes.string.isRequired,
+	date: PropTypes.string.isRequired,
+	day: PropTypes.number.isRequired,
+	solutionUrl: PropTypes.string.isRequired,
+	ratings: PropTypes.number.isRequired
+};
+
+export default React.memo(MiniCard);

src/components/Card/ProfileCard.component.jsx

@@ -0,0 +1,87 @@
+import React from "react";
+import PropTypes from "prop-types";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import {
+	Card,
+	CardMedia,
+	CardContent,
+	CardHeader,
+	Typography
+} from "@material-ui/core";
+import Divider from "@material-ui/core/Divider";
+
+const useStyles = makeStyles((theme) => ({
+	root: {
+		width: theme.spacing(32),
+		height: theme.spacing(56),
+		margin: theme.spacing(1),
+		position: "relative"
+	},
+	cardMedia: {
+		minHeight: 240
+	},
+	cardContent: {
+		marginBottom: theme.spacing(1),
+		borderRadius: theme.shape.borderRadius,
+		padding: theme.spacing(0.5)
+	}
+}));
+
+function ProfileCard({
+	avatarUrl,
+	username,
+	submissionCount,
+	langCount,
+	avgRating,
+	...props
+}) {
+	const classes = useStyles();
+
+	const imageUrl = avatarUrl || `https://robohash.org/${username}`;
+
+	return (
+		<Card className={classes.root}>
+			<CardHeader title={username} />
+			<Divider />
+			<div className={classes.imgContainer}>
+				<CardMedia
+					className={classes.cardMedia}
+					onError={(e) => {
+						e.target.src = `https://robohash.org/${username}`;
+					}}
+					image={imageUrl}
+					height={80}
+					component="img"
+				/>
+			</div>
+			<Divider />
+			<CardContent>
+				<div className={classes.cardContent}>
+					<Typography variant="body1">
+						Total Submissions : {submissionCount}
+					</Typography>
+				</div>
+				<div className={classes.cardContent}>
+					<Typography variant="body1">
+						Languages used : {langCount}
+					</Typography>
+				</div>
+				<div className={classes.cardContent}>
+					<Typography variant="body1">
+						Average Rating : {avgRating}
+					</Typography>
+				</div>
+			</CardContent>
+		</Card>
+	);
+}
+
+ProfileCard.propTypes = {
+	username: PropTypes.string.isRequired,
+	avatarUrl: PropTypes.string,
+	submissionCount: PropTypes.number.isRequired,
+	langCount: PropTypes.number.isRequired,
+	avgRating: PropTypes.number.isRequired
+};
+
+export default React.memo(ProfileCard);

src/components/LoginCard/LoginCard.component.js

@@ -0,0 +1,90 @@
+import { Link } from "react-router-dom";
+
+import Button from "@material-ui/core/Button";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import useTheme from "@material-ui/core/styles/useTheme";
+
+import Avatar from "../Avatar/Avatar.component";
+
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		width: "100%",
+		height: "100%",
+		display: "flex"
+	},
+	form: ({ isMobile }) => ({
+		backgroundColor: theme.palette.background.paper,
+		display: "flex",
+		flexDirection: "column",
+		...theme.shape,
+		padding: theme.spacing(2, 4),
+		position: "relative",
+		margin: "auto",
+		minWidth: `${isMobile ? "auto" : "600px"}`,
+		width: `${isMobile ? "100%" : "auto"}`
+	}),
+	title: {
+		...theme.typography.h6,
+		textAlign: "center",
+		marginBottom: theme.spacing(2)
+	},
+	content: {
+		...theme.typography.body1
+	},
+	closeIcon: {
+		color: theme.palette.error.main,
+		cursor: "pointer"
+	},
+	infoContainer: {
+		minHeight: theme.spacing(12),
+		marginTop: theme.spacing(2),
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		flexDirection: "column",
+		"& :not(:first-child)": {
+			marginTop: theme.spacing(2)
+		}
+	}
+}));
+
+const LoginCard = props => {
+
+	const theme = useTheme();
+	const isMobile = useMediaQuery(theme.breakpoints.down("xs"));
+	const classes = useStyles({
+		isMobile,
+		classes: props.classes
+	});
+
+	return(
+		<div className={classes.root}>
+			<div className={classes.form}>
+				<div id="login-modal-title" className={classes.title}>
+					Login
+				</div>
+
+				<div className={classes.content}>
+					<Avatar />
+					<div className={classes.infoContainer}>
+						<Button
+							variant="contained"
+							color="secondary"
+							to={{
+								pathname: "/login",
+								state: { from: `/${props.pathname}` }
+							}}
+							component={Link}
+						>
+							Please Login
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default LoginCard;

src/hooks/useInfiniteScroll.js

@@ -4,7 +4,7 @@ const useInfiniteScroll = (callback) => {
   const [isFetching, setIsFetching] = useState(false);
 
   const handleScroll = () => {
-    if (!(window.innerHeight + window.pageYOffset >= document.body.scrollHeight) || isFetching) return;
+    if (!(Math.ceil(window.innerHeight + window.pageYOffset) >= document.body.scrollHeight) || isFetching) return;
     setIsFetching(true);
   }