pupil.brain.riken.jp/src/components/DatabaseItemTypePaper.tsx

import React from 'react';
import { Link } from 'react-router-dom';
import ItemUtil, { ItemPaper } from '../common/ItemUtil';
import ItemTypeUtil from '../common/ItemTypeUtil';
import iconFile from '../assets/images/database/icon_paper.gif';

class DatabaseItemTypePaper {

    static Top() {
        return (
            <div>
                <table>
                    <tbody>
                        <tr>
                            <td>
                                <img src={iconFile} alt="Paper" />
                            </td>
                            <td className="itemTypeName">
                                <Link to="/database/itemtype/paper">Paper</Link>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <hr />
                Related paper collection.
            </div>
        );
    }

    static List(props: { item: ItemPaper }) {
        const { item } = props;
        const url = ItemUtil.getUrl(item);
        const authors = item.author.map((author, index) => {
            const padding = index > 0 ? ', ' : '';
            return (<span key={index}>{padding}{author}</span>);
        });
        const pubYear = String(item.publication_year);
        const volume = item.volume === null ? '' : ';' + String(item.volume);
        const number = item.number === null ? '' : '(' + String(item.number) + ')';
        const page = item.page === '' ? '' : ':' + item.page;
        const pubmed = item.pubmed_id === '' ? <></> : <span>[PMID: <DatabaseItemTypePaper.PubmedLink pubmedId={item.pubmed_id} />]</span>;
        return (
            <table>
                <tbody>
                    <tr>
                        <td className="listIcon">
                            <img src={iconFile} alt="Paper" />
                        </td>
                        <td>
                            <Link to={url}>{item.title}</Link><br />
                            {authors}<br />
                            {item.journal} {pubYear} {volume} {number} {page} {pubmed}
                        </td>
                    </tr>
                </tbody>
            </table>
        );
    }

    static Detail(props: { item: ItemPaper }) {
        const { item } = props;
        return (
            <table>
                <tbody>
                    <tr>
                        <td className="head">ID</td>
                        <td className="odd">{item.doi}</td>
                    </tr>
                    <tr>
                        <td className="head">Language</td>
                        <td className="even"><ItemTypeUtil.Language lang={item.lang} /></td>
                    </tr>
                    <tr>
                        <td className="head">PubMedID</td>
                        <td className="odd"><DatabaseItemTypePaper.PubmedLink pubmedId={item.pubmed_id} /></td>
                    </tr>
                    <tr>
                        <td className="head">Title</td>
                        <td className="even">{item.title}</td>
                    </tr>
                    <tr>
                        <td className="head">Free Keywords</td>
                        <td className="odd"><ItemTypeUtil.FreeKeyword keyword={item.keyword} /></td>
                    </tr>
                    <tr>
                        <td className="head">Description</td>
                        <td className="even">{item.description}</td>
                    </tr>
                    <tr>
                        <td className="head">Last Modified Date</td>
                        <td className="odd"><ItemTypeUtil.Date date={item.last_update_date} /></td>
                    </tr>
                    <tr>
                        <td className="head">Created Date</td>
                        <td className="even"><ItemTypeUtil.Date date={item.creation_date} /></td>
                    </tr>
                    <tr>
                        <td className="head">Contributor</td>
                        <td className="odd"><ItemTypeUtil.Contributer uname={item.uname} name={item.name} /></td>
                    </tr>
                    <tr>
                        <td className="head">Item Type</td>
                        <td className="even">{item.item_type_display_name}</td>
                    </tr>
                    <tr>
                        <td className="head">Change Log(History)</td>
                        <td className="odd"><ItemTypeUtil.ChangeLog changelog={item.changelog} /></td>
                    </tr>
                    <tr>
                        <td className="head">Author</td>
                        <td className="even"><ItemTypeUtil.Author author={item.author} /></td>
                    </tr>
                    <tr>
                        <td className="head">Journal</td>
                        <td className="odd">{item.journal}</td>
                    </tr>
                    <tr>
                        <td className="head">Publication Year</td>
                        <td className="even">{item.publication_year}</td>
                    </tr>
                    <tr>
                        <td className="head">Volume</td>
                        <td className="odd">{item.volume}</td>
                    </tr>
                    <tr>
                        <td className="head">Number</td>
                        <td className="even">{item.number}</td>
                    </tr>
                    <tr>
                        <td className="head">Page</td>
                        <td className="odd">{item.page}</td>
                    </tr>
                    <tr>
                        <td className="head">Index</td>
                        <td className="even"><ItemTypeUtil.Index index={item.index} /></td>
                    </tr>
                    <tr>
                        <td className="head">Related to</td>
                        <td className="odd"><ItemTypeUtil.RelatedTo relatedTo={item.related_to} /></td>
                    </tr>
                </tbody>
            </table>
        );
    }

    static PubmedLink(props: {pubmedId: string}) {
        const {pubmedId} = props;
        if (pubmedId === '') {
            return null;
        }
        const url = 'https://www.ncbi.nlm.nih.gov/pubmed/' + pubmedId;
        return (<a href={url} target="_blank" rel="noopener noreferrer">{pubmedId}</a>);
    }
}

export default DatabaseItemTypePaper;