const CreateOrEditProjectContainer = (props) => {
const { id } = props.params;
const { handleSubmitForCreate, handleSubmitForUpdate } = props;
const inputProps = {}
const project = getElemById(id, props.projects);
inputProps.handleFormSubmit = handleSubmitForCreate;
if (project) {
inputProps.initialValues = {
id: project.id,
name: normalizeEmptyFormValue(project.name),
originalName: normalizeEmptyFormValue(project.originalName),
description: normalizeEmptyFormValue(project.description),
releaseDate: normalizeEmptyFormValue(project.releaseDate),
genres: normalizeEmptyFormValue(project.genres),
studio: normalizeEmptyFormValue(project.studio),
homepage: normalizeEmptyFormValue(project.homepage),
aniDbLink: normalizeEmptyFormValue(project.aniDbLink),
aniSearchLink: normalizeEmptyFormValue(project.aniSearchLink),
malLink: normalizeEmptyFormValue(project.malLink),
type: normalizeEmptyFormValue(project.type),
status: normalizeEmptyFormValue(project.status),
published: normalizeEmptyFormValue(project.published),
}
inputProps.initialCoverImgSrc = getMediaLink(project.coverImgPath, noProjectCoverSrc());
inputProps.initialAvatarImgSrc = getMediaLink(project.avatarImgPath, noProjectAvatarSrc());
inputProps.initialHeaderImgSrc = getMediaLink(project.headerImgPath, noProjectHeaderSrc());
inputProps.initialReleasePreviewImgSrc = getMediaLink(project.releasePreviewImgPath, noProjectReleasePreviewSrc());
inputProps.handleFormSubmit = handleSubmitForUpdate;
}
return(
<CreateOrEditProject {...inputProps} />
)
}
{projects.sort((a, b) => a.id - b.id).map((project) => {
const coverImgSrc = project.coverImgPath ? getMediaLink(project.coverImgPath) : noProjectCoverSrc();
const name = project.name ? project.name : "";
const releaseYear = project.releaseDate ? project.releaseDate.substring(project.releaseDate.length-4, project.releaseDate.length) : "";
return(
<div key={project.id} className="project-tile">
<Row rowClassName="project-tile-row">
<Col>
<div className="project-tile-img-container">
<img width="170" height="240" className="project-tile-img" src={coverImgSrc} />
<Link to={"/projects/set/" + project.id} className="project-tile-img-overlay">
<button className="deleteButton modal-trigger" data-target="delete-modal" onClick={(event) => showDeleteDialog(event, project.id)} ref={renderModalTrigger}>
<i className="small material-icons">delete</i>
</button>
</Link>
</div>
</Col>
</Row>
<Row rowClassName="project-tile-row">
<Col>
<span className="project-tile-name">
{name}
</span>
</Col>
</Row>
<Row rowClassName="project-tile-row project-tile-year-row">
<Col>
<span className="project-tile-year">
{releaseYear}
</span>
</Col>
</Row>
</div>
)
})}