{"size": 2635, "ext": "js", "max_stars_repo_path": "src/pages/ExercisesAdmin.js", "max_stars_repo_name": "andrewgremlich/reflect", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/ExercisesAdmin.js", "max_issues_repo_name": "andrewgremlich/reflect", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/pages/ExercisesAdmin.js", "max_forks_repo_name": "andrewgremlich/reflect", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.8333333333, "max_line_length": 76, "alphanum_fraction": 0.6056925996}
import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

import { Administration } from "../features/Administration";
import {
  switchEdit,
  getExerciseGroup,
  selectExerciseGroups,
} from "../features/Administration/Administration.slice";

import {
  getExercises,
  selectAllExercises,
  createExercise,
  modifyExercise,
  selectEditExercise,
  setEditExercise,
} from "../features/ExercisesTable/ExercisesTable.slice";

import { ExerciseForm } from "../components/ExerciseForm";
import { SingleSelect } from "../components/Form";
import { ExercisesTableView } from "../components/ExercisesTableView";

export const ExercisesAdmin = () => {
  const dispatch = useDispatch();

  const allExercises = useSelector(selectAllExercises);
  const editExercise = useSelector(selectEditExercise);
  const exerciseGroups = useSelector(selectExerciseGroups);

  const [sortByExerciseGroup, setSortByExerciseGroup] = useState(
    exerciseGroups || "",
  );
  const [inputValue, setInputValue] = useState({
    name: "",
    description: "",
    svgId: "",
    difficulty: 1,
    exerciseGroup: "",
  });

  const filteredGroups = allExercises?.data?.filter(
    (exercise) => exercise.exerciseGroup === sortByExerciseGroup,
  );

  useEffect(() => {
    if (!exerciseGroups) {
      dispatch(getExerciseGroup());
    }

    if (sortByExerciseGroup) {
      dispatch(getExercises(sortByExerciseGroup));
    }
  }, [dispatch, sortByExerciseGroup, exerciseGroups]);

  return (
    <section>
      <Administration
        name="Exercise"
        create={() => dispatch(createExercise(inputValue))}
        modify={() =>
          dispatch(
            modifyExercise({
              ...inputValue,
              id: editExercise.id,
            }),
          )
        }
        editData={editExercise}
      >
        <ExerciseForm
          {...{
            inputValue,
            setInputValue,
            exerciseGroups,
          }}
        />
      </Administration>
      {exerciseGroups && (
        <SingleSelect
          value={exerciseGroups}
          changeValue={({ target }) => setSortByExerciseGroup(target.value)}
          origValue="Filter Exercise Group"
        >
          {exerciseGroups?.map((group, index) => (
            <option key={index} value={group}>
              {group}
            </option>
          ))}
        </SingleSelect>
      )}
      <ExercisesTableView
        data={filteredGroups}
        setEdit={(exercise) => {
          dispatch(setEditExercise(exercise));
          dispatch(switchEdit());
        }}
      />
    </section>
  );
};
