Skip to content

Commit

Permalink
add support for single display item to recieve undefined from calypso
Browse files Browse the repository at this point in the history 
Also refactor the SingleNews component just a little bit
  • Loading branch information
@Herkarl
Herkarl committed Apr 2, 2024
1 parent f90ee18 commit c0864fc
Showing 1 changed file with 129 additions and 112 deletions.
241 changes: 129 additions & 112 deletions src/components/News/SingleNews.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,41 +9,111 @@ import { Translate, English, Swedish } from '../Translate'

const cx = classNames.bind(styles)


const HeaderBar = ({}) =>
(
<header key="header">
<div className="header-inner">
<div className="row">
<div className="header-left col-md-2">
<Translate>
<English>
<Link to="/en/news">{'« '}Back</Link>
</English>
<Swedish>
<Link to="/nyheter">{'« '}Tillbaka</Link>
</Swedish>
</Translate>
</div>
<div className="col-md-8">
<h2>
<Translate>
<English>News</English>
<Swedish>Nyheter</Swedish>
</Translate>
</h2>
</div>
<div className="header-right col-md-2"/>
</div>
</div>
</header>
)

const EventInfoSidebar = ({item, lang}) => // item CAN'T be undefined here
<div className="col-md-3" id="sidebar">
<div className="sidebar-card">
<h2>
<Translate>
<English>Event Details</English>
<Swedish>Eventinformation</Swedish>
</Translate>
</h2>
<p>
<b>
<Translate>
<English>Location</English>
<Swedish>Plats</Swedish>
</Translate>
</b>
<br />
{item.eventLocation}
</p>
<p>
<b>
<Translate>
<English>Start Time</English>
<Swedish>Starttid</Swedish>
</Translate>
</b>
<br />
{new Date(item.eventStartTime)
.toLocaleDateString(
lang === 'en' ? 'en-US' : 'sv-SE',
{
day: 'numeric',
month: 'long',
year: 'numeric',
hour: 'numeric',
minute: 'numeric'
}
)}
</p>
<p>
<b>
<Translate>
<English>End Time</English>
<Swedish>Sluttid</Swedish>
</Translate>
</b>
<br />
{new Date(item.eventEndTime)
.toLocaleDateString(
lang === 'en' ? 'en-US' : 'sv-SE',
{
day: 'numeric',
month: 'long',
year: 'numeric',
hour: 'numeric',
minute: 'numeric'
}
)}
</p>
</div>
</div>


export const SingleItem = ({ item, location, lang, match }) =>
<Calypso type='item' search={'/' + match.params.postId}>
{(item) =>
{(item) => // item CAN be undefined here
<Fragment>
<Title>
<Translate>
<English>{ `${item.titleEnglish} - Konglig Datasektionen` }</English>
<Swedish>{ `${item.titleSwedish} - Konglig Datasektionen` }</Swedish>
</Translate>
</Title>
<header key="header">
<div className="header-inner">
<div className="row">
<div className="header-left col-md-2">
<Translate>
<English>
<Link to="/en/news">{'« '}Back</Link>
</English>
<Swedish>
<Link to="/nyheter">{'« '}Tillbaka</Link>
</Swedish>
</Translate>
</div>
<div className="col-md-8">
<h2>
<Translate>
<English>News</English>
<Swedish>Nyheter</Swedish>
</Translate>
</h2>
</div>
<div className="header-right col-md-2"/>
</div>
</div>
</header>
<Translate>
<English>{`${item ? item.titleEnglish : "????"} - Konglig Datasektionen`}</English>
<Swedish>{`${item ? item.titleSwedish : "????"} - Konglig Datasektionen`}</Swedish>
</Translate>
</Title>
<HeaderBar item={item} lang={lang}/>
{item &&
<div id='content'>
<div key={item.id} className={cx('notice', 'ultra_light', 'col-md-9')}>
<div className={styles.metadata}>
Expand Down Expand Up @@ -83,90 +153,37 @@ export const SingleItem = ({ item, location, lang, match }) =>
/>
</div>
{(item.googleForm || item.facebookEvent) &&
<div className="row">
{item.googleForm && <div className={item.facebookEvent ? cx('col-xs-6', styles['no-padding-right']) : 'col-xs-12'}>
<a className={styles.gdocs} href={item.googleForm} target="_blank" rel="noopener noreferrer">
<i className="fab fa-fw fa-google"/>{' '}
<Translate>
<English>Open in Google Docs</English>
<Swedish>Öppna i Google Docs</Swedish>
</Translate>
</a>
</div>}
{item.facebookEvent && <div className={item.googleForm ? cx('col-xs-6', styles['no-padding-left']) : 'col-xs-12'}>
<a className={styles.fb} href={item.facebookEvent} target="_blank" rel="noopener noreferrer">
<i className="fab fa-fw fa-facebook-f"/>{' '}
<Translate>
<English>Facebook Event</English>
<Swedish>Facebook-event</Swedish>
</Translate>
</a>
</div>}
</div>}
<div className="row">
{item.googleForm &&
<div className={item.facebookEvent ? cx('col-xs-6', styles['no-padding-right']) : 'col-xs-12'}>
<a className={styles.gdocs} href={item.googleForm} target="_blank" rel="noopener noreferrer">
<i className="fab fa-fw fa-google"/>{' '}
<Translate>
<English>Open in Google Docs</English>
<Swedish>Öppna i Google Docs</Swedish>
</Translate>
</a>
</div>
}
{item.facebookEvent &&
<div className={item.googleForm ? cx('col-xs-6', styles['no-padding-left']) : 'col-xs-12'}>
<a className={styles.fb} href={item.facebookEvent} target="_blank" rel="noopener noreferrer">
<i className="fab fa-fw fa-facebook-f"/>{' '}
<Translate>
<English>Facebook Event</English>
<Swedish>Facebook-event</Swedish>
</Translate>
</a>
</div>
}
</div>
}
</div>
{item.itemType === "EVENT" &&
<div className="col-md-3" id="sidebar">
<div className="sidebar-card">
<h2>
<Translate>
<English>Event Details</English>
<Swedish>Eventinformation</Swedish>
</Translate>
</h2>
<p>
<b>
<Translate>
<English>Location</English>
<Swedish>Plats</Swedish>
</Translate>
</b>
<br />
{item.eventLocation}
</p>
<p>
<b>
<Translate>
<English>Start Time</English>
<Swedish>Starttid</Swedish>
</Translate>
</b>
<br />
{new Date(item.eventStartTime)
.toLocaleDateString(
lang === 'en' ? 'en-US' : 'sv-SE',
{
day: 'numeric',
month: 'long',
year: 'numeric',
hour: 'numeric',
minute: 'numeric'
}
)}
</p>
<p>
<b>
<Translate>
<English>End Time</English>
<Swedish>Sluttid</Swedish>
</Translate>
</b>
<br />
{new Date(item.eventEndTime)
.toLocaleDateString(
lang === 'en' ? 'en-US' : 'sv-SE',
{
day: 'numeric',
month: 'long',
year: 'numeric',
hour: 'numeric',
minute: 'numeric'
}
)}
</p>
</div>
</div>
<EventInfoSidebar />
}
</div>
</div>
}
</Fragment>
}
</Calypso>
Expand Down

0 comments on commit c0864fc

Please sign in to comment.