Function MyProfileCard

client/src/component/MyProjectCard.jsx:15–150

(props)

import DetailCardImg from '../assets/images/Modal Image/Details.png'

const MyProfileCard = (props) => {
  const { project, updateProject, showDetailProject, showAlert } = props;
  const [showModal, setShowModal] = useState(false);
  const context = useContext(projectContext);
  const { deleteProject } = context;

  const generateImageUrl = (projectId) => {
    return `https://source.unsplash.com/910x900/?coding/?computer/&${projectId}`;
  };

  const handleModalOpen = () => {
    setShowModal(true);
  };

  const handleModalClose = () => {
    setShowModal(false);
  };

  const handleDelete = () => {
    deleteProject(project._id);
    showAlert("Deleted Successfully", "success");
    handleModalClose();
  };

  // Profile Context
  let navigate = useNavigate();
  const userProfileContext = useContext(profileContext);
  const { userProfile, getUserProfile } = userProfileContext;
  useEffect(() => {
    if (localStorage.getItem('token')) {
      getUserProfile();
    }
    else {
      navigate('/login')
    }
    // eslint-disable-next-line
  }, [])

  // Function to format date
  const formatDate = (dateString) => {
    const date = new Date(dateString);

    const year = date.getFullYear().toString().slice(-2); // Get last 2 digits of the year
    const month = ('0' + (date.getMonth() + 1)).slice(-2); // Add leading zero for single-digit months
    const day = ('0' + date.getDate()).slice(-2); // Add leading zero for single-digit days
    const hours = ('0' + date.getHours()).slice(-2); // Add leading zero for single-digit hours
    const minutes = ('0' + date.getMinutes()).slice(-2); // Add leading zero for single-digit minutes

    // Format the date and time
    return `${day}/${month}/${year} | ${hours}:${minutes}`;
  };

  // Max Length for title and description
  const maxTitleLength = 30; 
  const maxDescriptionLength = 75;

  return (
    <div className="col-md-4 my-3">