As shown in screenshot, having an empty array default value for React component props is messing up the rest of the highlighting
import PropTypes from 'prop-types';
import React from 'react';
import Markdown from 'react-remarkable';
import { Helmet } from 'react-helmet';
import DocMeta from 'components/DocMeta';
import Panel from 'components/Panel';
import Spinner from 'components/Spinner';
import Container from 'components/Container';
import Row from 'components/Row';
import Column from 'components/Column';
import CardsBoard from 'components/CardsBoard';
import Comments from 'modules/comments/components/Comments';
import getCardsByBoard from 'utils/getCardsByBoard';
import DeckPageHeader from './DeckPageHeader';
const Commander = ({ src, alt }) => (
<div>
<h3>Commander</h3>
<img src={src} alt={alt} />
</div>
);
const DeckPage = ({
id,
name,
format,
cards,
user_id,
tags,
featured_card,
colors = [],
created_at,
updated_at,
stars_count,
has_starred,
can_update,
can_delete,
loading,
description,
isLoggedIn
}) => {
if (loading) {
return <Spinner size="large" centered />;
}
const featuredCardSrc = featured_card.url;
const featuredCardName = featured_card.name;
const mainboard = getCardsByBoard(cards, 'mainboard');
const sideboard = getCardsByBoard(cards, 'sideboard');
const title = 'MTG Deck: ' + name + '(' + format + ')';
return (
<article>
<Helmet>
<title>{title}</title>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:type" content="fateseal:deck" />
<meta
property="og:url"
content={'http://www.fateseal.com/decks/' + id}
/>
<meta property="og:url" content={featuredCardSrc} />
</Helmet>
<DeckPageHeader
id={id}
name={name}
format={format}
starsCount={stars_count}
username={user_id.username}
createdAt={created_at}
updatedAt={updated_at}
featuredCardName={featuredCardName}
featuredCardSrc={featuredCardSrc}
hasStarred={has_starred}
canUpdate={can_update}
canDelete={can_delete}
tags={tags}
colors={colors}
isLoggedIn={isLoggedIn}
/>
<Container>
<Row>
<Column md={8}>
<Panel>
<CardsBoard cards={mainboard} title="Mainboard" hasLabels />
</Panel>
</Column>
<Column md={4}>
<Panel>
{format !== 'Commander' ? (
<CardsBoard cards={sideboard} title="Sideboard" />
) : (
<Commander src={featuredCardSrc} alt={featuredCardName} />
)}
</Panel>
</Column>
</Row>
<Row>
<Column md={8}>
{description && (
<Panel>
<h3>Description</h3>
<Markdown>{description}</Markdown>
</Panel>
)}
<Panel>
<Comments modelId={id} />
</Panel>
</Column>
</Row>
</Container>
</article>
);
};
DeckPage.propTypes = {
id: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
format: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
tags: PropTypes.array.isRequired,
featured_card: PropTypes.object.isRequired,
cards: PropTypes.array.isRequired,
can_update: PropTypes.bool,
has_starred: PropTypes.bool,
loading: PropTypes.bool.isRequired,
isLoggedIn: PropTypes.bool.isRequired
};
DeckPage.defaultProps = {
id: '',
cards: [],
name: '',
description: '',
tags: [],
featured_card: {},
user_id: {},
loading: false
};
export default DeckPage;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent