<commit_before>import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import DropdownButton from 'components/Buttons/DropdownButton';
import Button from 'components/Button';
import { determineXpButtonDisabled, textIsOverflown } from 'helpers';
import Icon from 'components/Icon';
import XPRewardInterface from 'components/XPRewardInterface';
import AlreadyPosted from 'components/AlreadyPosted';
import {
  addEmoji,
  cleanString,
  exceedsCharLimit,
  stringIsEmpty,
  finalizeEmoji,
  isValidYoutubeUrl
} from 'helpers/stringHelpers';
import BasicInfos from './BasicInfos';
import SideButtons from './SideButtons';
import Description from './Description';
import TagStatus from 'components/TagStatus';
import { connect } from 'react-redux';
import { Color } from 'constants/css';

Details.propTypes = {
  addTags: PropTypes.func.isRequired,
  attachStar: PropTypes.func.isRequired,
  authLevel: PropTypes.number,
  changeByUserStatus: PropTypes.func.isRequired,
  byUser: PropTypes.bool,
  canDelete: PropTypes.bool,
  canEdit: PropTypes.bool,
  canStar: PropTypes.bool,
  changingPage: PropTypes.bool,
  content: PropTypes.string.isRequired,
  description: PropTypes.string,
  difficulty: PropTypes.number,
  likes: PropTypes.array.isRequired,
  likeVideo: PropTypes.func.isRequired,
  loadTags: PropTypes.func.isRequired,
  onDelete: PropTypes.func.isRequired,
  onEditCancel: PropTypes.func.isRequired,
  onEditFinish: PropTypes.func.isRequired,
  onEditStart: PropTypes.func.isRequired,
  setDifficulty: PropTypes.func.isRequired,
  tags: PropTypes.array,
  stars: PropTypes.array,
  timeStamp: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
    .isRequired,
  title: PropTypes.string.isRequired,
  uploader: PropTypes.object.isRequired,
  userId: PropTypes.number,
  videoId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  videoViews: PropTypes.number.isRequired
};

function Details({
  addTags,
  attachStar,
  authLevel,
  byUser,
  canDelete,
  canEdit,
  canStar,
  changeByUserStatus,
  changingPage,
  content,
  difficulty,
  likeVideo,
  userId,
  uploader,
  title,
  description,
  likes,
  loadTags,
  onDelete,
  onEditCancel,
  onEditStart,
  onEditFinish,
  tags = [],
  setDifficulty,
  stars,
  timeStamp,
  videoId,
  videoViews
}) {
  const [onEdit, setOnEdit] = useState(false);
  const [titleHovered, setTitleHovered] = useState(false);
  const [editedTitle, setEditedTitle] = useState(cleanString(title));
  const [editedUrl, setEditedUrl] = useState(
    `https://www.youtube.com/watch?v=${content}`
  );
  const [editedDescription, setEditedDescription] = useState(description);
  const [xpRewardInterfaceShown, setXpRewardInterfaceShown] = useState(false);
  const TitleRef = useRef(null);

  useEffect(() => {
    setOnEdit(false);
    setEditedTitle(cleanString(title));
    setEditedUrl(`https://www.youtube.com/watch?v=${content}`);
    setEditedDescription(description);
    setXpRewardInterfaceShown(false);
  }, [title, description, content]);

  const userIsUploader = uploader.id === userId;
  const userCanEditThis =
    (canEdit || canDelete) && authLevel > uploader.authLevel;
  const editButtonShown = userIsUploader || userCanEditThis;
  const editMenuItems = [];
  if (userIsUploader || canEdit) {
    editMenuItems.push({
      label: 'Edit',
      onClick: handleEditStart
    });
  }
  if (userIsUploader || canDelete) {
    editMenuItems.push({<commit_msg>minor change<commit_after>import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import DropdownButton from 'components/Buttons/DropdownButton';
import Button from 'components/Button';
import { determineXpButtonDisabled, textIsOverflown } from 'helpers';
import Icon from 'components/Icon';
import XPRewardInterface from 'components/XPRewardInterface';
import AlreadyPosted from 'components/AlreadyPosted';
import {
  addEmoji,
  cleanString,
  exceedsCharLimit,
  stringIsEmpty,
  finalizeEmoji,
  isValidYoutubeUrl
} from 'helpers/stringHelpers';
import BasicInfos from './BasicInfos';
import SideButtons from './SideButtons';
import Description from './Description';
import TagStatus from 'components/TagStatus';
import { connect } from 'react-redux';
import { Color } from 'constants/css';

Details.propTypes = {
  addTags: PropTypes.func.isRequired,
  attachStar: PropTypes.func.isRequired,
  authLevel: PropTypes.number,
  changeByUserStatus: PropTypes.func.isRequired,
  byUser: PropTypes.bool,
  canDelete: PropTypes.bool,
  canEdit: PropTypes.bool,
  canStar: PropTypes.bool,
  changingPage: PropTypes.bool,
  content: PropTypes.string.isRequired,
  description: PropTypes.string,
  difficulty: PropTypes.number,
  likes: PropTypes.array.isRequired,
  likeVideo: PropTypes.func.isRequired,
  loadTags: PropTypes.func.isRequired,
  onDelete: PropTypes.func.isRequired,
  onEditCancel: PropTypes.func.isRequired,
  onEditFinish: PropTypes.func.isRequired,
  onEditStart: PropTypes.func.isRequired,
  setDifficulty: PropTypes.func.isRequired,
  tags: PropTypes.array,
  stars: PropTypes.array,
  timeStamp: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
    .isRequired,
  title: PropTypes.string.isRequired,
  uploader: PropTypes.object.isRequired,
  userId: PropTypes.number,
  videoId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  videoViews: PropTypes.number.isRequired
};

function Details({
  addTags,
  attachStar,
  authLevel,
  byUser,
  canDelete,
  canEdit,
  canStar,
  changeByUserStatus,
  changingPage,
  content,
  difficulty,
  likeVideo,
  userId,
  uploader,
  title,
  description,
  likes,
  loadTags,
  onDelete,
  onEditCancel,
  onEditStart,
  onEditFinish,
  tags = [],
  setDifficulty,
  stars,
  timeStamp,
  videoId,
  videoViews
}) {
  const [onEdit, setOnEdit] = useState(false);
  const [titleHovered, setTitleHovered] = useState(false);
  const [editedTitle, setEditedTitle] = useState(cleanString(title));
  const [editedUrl, setEditedUrl] = useState(
    `https://www.youtube.com/watch?v=${content}`
  );
  const [editedDescription, setEditedDescription] = useState(description);
  const [xpRewardInterfaceShown, setXpRewardInterfaceShown] = useState(false);
  const TitleRef = useRef(null);

  useEffect(() => {
    setOnEdit(false);
    setEditedTitle(cleanString(title));
    setEditedUrl(`https://www.youtube.com/watch?v=${content}`);
    setEditedDescription(description);
    setXpRewardInterfaceShown(false);
  }, [videoId]);

  const userIsUploader = uploader.id === userId;
  const userCanEditThis =
    (canEdit || canDelete) && authLevel > uploader.authLevel;
  const editButtonShown = userIsUploader || userCanEditThis;
  const editMenuItems = [];
  if (userIsUploader || canEdit) {
    editMenuItems.push({
      label: 'Edit',
      onClick: handleEditStart
    });
  }
  if (userIsUploader || canDelete) {
    editMenuItems.push({
{'fraction_non_alphanumeric': 0.11253417757950784, 'fraction_numerical': 0.0, 'mean_word_length': 5.139575971731449, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 4, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6636998', 'n_tokens_mistral': 2148, 'n_tokens_neox': 2238, 'n_words': 446}