{"size": 1391, "ext": "js", "max_stars_repo_path": "src/components/ExerciseCard.js", "max_stars_repo_name": "BW-Weight-Lifting-Journal1/Front-end2", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/ExerciseCard.js", "max_issues_repo_name": "BW-Weight-Lifting-Journal1/Front-end2", "max_issues_repo_issues_event_min_datetime": "2020-01-30T09:53:11.000Z", "max_issues_repo_issues_event_max_datetime": "2020-01-30T18:06:59.000Z", "max_forks_repo_path": "src/components/ExerciseCard.js", "max_forks_repo_name": "BW-Weight-Lifting-Journal1/Front-end2", "max_forks_repo_forks_event_min_datetime": "2020-01-29T02:43:43.000Z", "max_forks_repo_forks_event_max_datetime": "2020-02-02T20:01:03.000Z"}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": 2, "avg_line_length": 24.4035087719, "max_line_length": 64, "alphanum_fraction": 0.6204169662}
import React, { useEffect, useState, useContext } from "react";
import styled from "styled-components";
import { ExerciseContext } from "../contexts/ExerciseContext";
import axiosWithAuth from "../Auth/axiosWithAuth";

export default function ExerciseCard({ props }) {
  const { setExercise, exercise } = useContext(ExerciseContext);
  const [exercises, setExercises] = useState([]);
  const user_id = Number(localStorage.getItem("user_id"));

  useEffect(() => {
    axiosWithAuth()
      .get(`api/workouts/${user_id}`)
      .then(res => {
        setExercises(res.data);

        console.log("get", res);
      });
  }, [exercise, setExercise, user_id]);

  return (
    <Container>
      {exercises.map(exercise => {
        return (
          <CardContainer key={exercise.id}>
            <h3>{exercise.exercise_name}</h3>
            <p>Reps: {exercise.exercise_reps}</p>
            <p>Weight: {exercise.exercise_weight}</p>
            <p>Muscles Targeted: {exercise.muscles_targeted}</p>
          </CardContainer>
        );
      })}
    </Container>
  );
}

const CardContainer = styled.div`
  background: white;
  width: 200px;
  height: 350px;
  border-radius: 60px;
  margin: 20px;
  text-align: center;

  p {
    margin: 3px 3px 20px 3px;
  }
`;

const Container = styled.div`
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  width: 100%;
  height: 300px;
`;
