{"size": 1769, "ext": "js", "max_stars_repo_path": "client/src/components/Meditation/Progress/CurrentStreak.js", "max_stars_repo_name": "scbrazil/citium", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/components/Meditation/Progress/CurrentStreak.js", "max_issues_repo_name": "scbrazil/citium", "max_issues_repo_issues_event_min_datetime": "2021-04-29T19:05:08.000Z", "max_issues_repo_issues_event_max_datetime": "2021-04-29T19:05:08.000Z", "max_forks_repo_path": "client/src/components/Meditation/Progress/CurrentStreak.js", "max_forks_repo_name": "scbrazil/citium", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 24.5694444444, "max_line_length": 67, "alphanum_fraction": 0.5042396834}
import React, { useContext, useEffect, useState } from "react";
import { AppContext } from "../../../context/context.js";
import { Grid, makeStyles, Typography } from "@material-ui/core";
// import user from '../../dummyData.js';

const CurrentStreak = () => {
  // let consecutiveDays = 3;
  const [userUpdated, setUserUpdated] = useState(false);
  const [streak, setStreak] = useState(12);
  const { user, setUser, increaseStreak } = useContext(AppContext);
  console.log("The fucking user: ", user.progress);
  // const [dummy, setDummy] = useState(user);

  useEffect(() => {
    if (Object.keys(user).length > 0 ) {
      streakChecker()
      // setUserUpdated(!userUpdated);
      if (Date.now() - user.progress.lastSubmission <= 86400000) {
        setStreak(user.progress.streak + 1);
      }
    }
  }, [user]);

  const streakChecker = async () => {
    if (Date.now() - user.progress.lastSubmission <= 86400000) {
      increaseStreak();
    }
  }

  return (
    <>
      <div>
        <Typography
          align="center"
          style={{ fontSize: "16px", fontWeight: "bold" }}
        >
          {`Streak`}
        </Typography>
      </div>
      <div>
        {/* {Object.keys(user).length > 0 ? ( */}
        {streak ? (
          <Typography
            align="center"
            style={{
              fontSize: "32px",
              fontWeight: "bold",
            }}
          >
            {streak}
          </Typography>
        ) : (
          <div></div>
        )}
      </div>
      <div>
        <Typography
          align="center"
          style={{
            fontSize: "14px",
            fontWeight: "bold",
          }}
        >
          DAYS
        </Typography>
      </div>
    </>
  );
};

export default CurrentStreak;
