{"size": 607, "ext": "js", "max_stars_repo_path": "src/components/ProblemView/index.js", "max_stars_repo_name": "lucaszawadneak/react-native-fastfeet", "max_stars_repo_stars_event_min_datetime": "2020-03-19T18:12:49.000Z", "max_stars_repo_stars_event_max_datetime": "2020-03-19T18:12:49.000Z", "max_issues_repo_path": "src/components/ProblemView/index.js", "max_issues_repo_name": "lucascassilha/react-native-fastfeet", "max_issues_repo_issues_event_min_datetime": "2021-05-11T04:36:01.000Z", "max_issues_repo_issues_event_max_datetime": "2021-09-03T00:36:51.000Z", "max_forks_repo_path": "src/components/ProblemView/index.js", "max_forks_repo_name": "lucaszawadneak/react-native-fastfeet", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 2, "max_forks_count": null, "avg_line_length": 24.28, "max_line_length": 76, "alphanum_fraction": 0.6441515651}
import React, { useMemo } from 'react';

import PropTypes from 'prop-types';
import { parseISO, format } from 'date-fns';
import { Box, LabelBox, Label, Date } from './styles';

export default function ProblemView({ item }) {
  const date = useMemo(() => parseISO(item.createdAt));

  const formatedDate = useMemo(() => format(date, 'dd/MM/yyyy'));

  return (
    <Box>
      <LabelBox>
        <Label>{item.description}</Label>
      </LabelBox>
      <Date>{formatedDate}</Date>
    </Box>
  );
}

ProblemView.propTypes = {
  item: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
};
