TTMK/web2.0-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

translate calendars

Browse Source
This commit is contained in:
Aarni Halinen
2021-04-01 18:05:57 +03:00
parent 7ce9f38441
commit 9bec3f1e0a
7 changed files with 105 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/locales/en/common.json
+3
View File
@@ -4,6 +4,9 @@
"Paikka": "Location",
"Alkaa": "Starts at",
"Päättyy": "Ends at",
"Lataa lisää": "Load more",
"Tapahtumat": "Events",
"Uutiset": "News",
"Hakemaasi sivua":
"Page",
src/components/Card.tsx
+14 -30
View File
@@ -4,11 +4,10 @@ import styled from "styled-components";
import { colors } from "@theme/colors";
import { Link } from "@components/index";
import breakpoints from "@theme/breakpoints";
import { useTranslation } from "../i18n";
interface WrappedCardProps {
title: string;
start_time: string;
startTime: string;
text: string;
link: string;
image?: {
@@ -16,6 +15,7 @@ interface WrappedCardProps {
alt: string;
};
buttonOnClick?: () => void;
buttonText?: string;
}
const StyledCard = styled.article`
@@ -70,37 +70,21 @@ const StyledCard = styled.article`
`;
const WrappedCard: React.FC<WrappedCardProps> = ({
title, text, link, image, start_time, buttonOnClick, ...props
}) => {
const { t } = useTranslation();
const options: Intl.DateTimeFormatOptions = {
day: "numeric",
month: "numeric",
year: "numeric",
hour: "numeric",
minute: "2-digit",
};
const datetime = new Date(start_time).toLocaleString("fi-FI", options);
const button = (
title, text, link, image, startTime, buttonOnClick, buttonText, ...props
}) => (
<StyledCard {...props}>
{image && (
<Image src={image.src} alt={image.alt} layout="responsive" width={0} height={0} objectFit="scale-down" />
)}
<p>{startTime}</p>
<h3>{title}</h3>
<p>{text}</p>
<Link to={link}>
<button type="button" onClick={buttonOnClick}>
{t("Lue lisää")}&nbsp;›
{buttonText}
</button>
</Link>
);
return (
<StyledCard {...props}>
{image && (
<Image src={image.src} alt={image.alt} layout="responsive" width={0} height={0} objectFit="scale-down" />
)}
<p>{datetime}</p>
<h3>{title}</h3>
<p>{text}</p>
{button}
</StyledCard>
);
};
</StyledCard>
);
export default WrappedCard;
src/views/ActualPage/ActualPageView.tsx
+7 -3
View File
@@ -5,7 +5,7 @@ import Event from "@models/Event";
import Post from "@models/Feed";
import {
Divider, CTASection, TextSection, Link, CrossFadeImages,
Divider, CTASection, TextSection, Link, CrossFadeImages, ChangeLanguageButton,
} from "@components/index";
import ActualPageHero from "./ActualPageHero";
import EventCalendar from "./EventCalendar";
@@ -32,14 +32,18 @@ const Gallery = styled.div`
}
`;
const LngButton = styled(ChangeLanguageButton)`
align-self: flex-end;
margin-right: 1rem;
`;
const ActualPageView: React.FC<ActualPageViewProps> = ({ events, feed }) => (
<>
<ActualPageHero />
<LngButton />
<EventCalendar events={events} />
<Divider />
<News feed={feed} />
<CTASection
src/views/ActualPage/EventCalendar.tsx
+30 -6
View File
@@ -5,6 +5,7 @@ import Button from "@components/Button";
import { CardSection, Card, FullWidthSection } from "@components/index";
import noop from "@utils/noop";
import FilterContainer from "./FilterContainer";
import i18nNext, { useTranslation } from "../../i18n";
interface EventCalendarProps {
events: Event[];
@@ -13,11 +14,33 @@ interface EventCalendarProps {
const EventCalendar: React.FC<EventCalendarProps> = ({ events }) => {
// const [filterSelected, setFilter] = useState(0);
const [numberShown, setNumberShown] = useState(8);
const filteredEvents = events.slice(0, numberShown);
const { t } = useTranslation();
const { language } = i18nNext.i18n;
const isFi = language === "fi";
const options: Intl.DateTimeFormatOptions = {
day: "numeric",
month: "numeric",
year: "numeric",
hour: "numeric",
minute: "2-digit",
};
const filteredEvents = events.slice(0, numberShown).map((e) => ({
...e,
title: isFi ? e.title_fi : e.title_en,
description: isFi ? e.description_fi : e.description_en,
content: isFi ? e.content_fi : e.content_en,
location: isFi ? e.location_fi : e.location_en,
startDate: new Date(e.start_time).toLocaleString(isFi ? "fi-FI" : "en-GB", options),
endDate: new Date(e.end_time).toLocaleString(isFi ? "fi-FI" : "en-GB", options),
}));
return (
<FullWidthSection>
<h1 id="tapahtumat">
Tapahtumat
{t("Tapahtumat")}
{/* <FilterContainer>
<Button buttonStyle="filter" onClick={() => { setFilter(0); }} selected={filterSelected === 0}>
Näytä kaikki
@@ -35,18 +58,19 @@ const EventCalendar: React.FC<EventCalendarProps> = ({ events }) => {
{filteredEvents.map((e) => (
<Card
key={e.id}
title={e.title_fi}
start_time={e.start_time}
text={e.description_fi}
title={e.title}
startTime={e.startDate}
text={e.description}
link={`/events/${e.id}`}
buttonOnClick={noop}
buttonText={`${t("Lue lisää")} ›`}
/>
))}
</CardSection>
{ numberShown < events.length && (
<FilterContainer>
<Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + 8); }}>
Lataa lisää
{t("Lataa lisää")}
</Button>
</FilterContainer>
)}
src/views/ActualPage/News.tsx
+27 -6
View File
@@ -5,6 +5,7 @@ import Button from "@components/Button";
import { CardSection, Card, FullWidthSection } from "@components/index";
import noop from "@utils/noop";
import FilterContainer from "./FilterContainer";
import i18nNext, { useTranslation } from "../../i18n";
interface NewsProps {
feed: Post[];
@@ -13,11 +14,30 @@ interface NewsProps {
const News: React.FC<NewsProps> = ({ feed }) => {
// const [filterSelected, setFilter] = useState(0);
const [numberShown, setNumberShown] = useState(8);
const filteredFeed = feed.slice(0, numberShown);
const { t } = useTranslation();
const { language } = i18nNext.i18n;
const isFi = language === "fi";
const options: Intl.DateTimeFormatOptions = {
day: "numeric",
month: "numeric",
year: "numeric",
hour: "numeric",
minute: "2-digit",
};
const filteredFeed = feed.slice(0, numberShown).map((p) => ({
...p,
title: isFi ? p.title_fi : p.title_en,
description: isFi ? p.description_fi : p.description_en,
content: isFi ? p.content_fi : p.content_en,
publishTime: new Date(p.publish_time).toLocaleString(isFi ? "fi-FI" : "en-GB", options),
}));
return (
<FullWidthSection>
<h1 id="uutiset">
Uutiset
{t("Uutiset")}
{/* <FilterContainer>
<Button buttonStyle="filter" onClick={() => { setFilter(0); }} selected={filterSelected === 0}>
Näytä kaikki
@@ -34,18 +54,19 @@ const News: React.FC<NewsProps> = ({ feed }) => {
{filteredFeed.map((post) => (
<Card
key={post.id}
title={post.title_fi}
start_time={post.publish_time}
text={post.description_fi}
title={post.title}
startTime={post.publishTime}
text={post.description}
link={`/feed/${post.id}`}
buttonOnClick={noop}
buttonText={t("Lue lisää ›")}
/>
))}
</CardSection>
{ numberShown < feed.length && (
<FilterContainer>
<Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + 8); }}>
Lataa lisää
{t("Lataa lisää")}
</Button>
</FilterContainer>
)}
src/views/FrontPage/FrontPageView.tsx
+12 -2
View File
@@ -32,6 +32,14 @@ interface FrontPageViewProps {
feed: Post[];
}
const cardTimeOpts: Intl.DateTimeFormatOptions = {
day: "numeric",
month: "numeric",
year: "numeric",
hour: "numeric",
minute: "2-digit",
};
const SponsorReel = styled.div`
text-align: center;
& > div {
@@ -72,7 +80,7 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
<Card
key={event.id}
title={event.title_fi}
start_time={event.start_time}
startTime={new Date(event.start_time).toLocaleString("fi-FI", cardTimeOpts)}
text={event.description_fi}
link={`/events/${event.id}`}
image={{
@@ -80,6 +88,7 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
alt: event.title_fi,
}}
buttonOnClick={noop}
buttonText="Lue lisää&nbsp;›"
data-e2e="event-card"
/>
))}
@@ -104,10 +113,11 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
<Card
key={inst.id}
title={inst.title_fi}
start_time={inst.publish_time}
startTime={new Date(inst.publish_time).toLocaleString("fi-FI", cardTimeOpts)}
text={inst.description_fi}
link={`/feed/${inst.id}`}
buttonOnClick={noop}
buttonText="Lue lisää&nbsp;›"
/>
))}
<aside>
src/views/InEnglishPage/InEnglishPageView.tsx
+12 -2
View File
@@ -37,6 +37,14 @@ interface InEnglishPageViewProps {
feed: Post[];
}
const cardTimeOpts: Intl.DateTimeFormatOptions = {
day: "numeric",
month: "numeric",
year: "numeric",
hour: "numeric",
minute: "2-digit",
};
const InEnglishPageView: React.FC<InEnglishPageViewProps> = ({ events, feed }) => (
<>
<InEnglishPageHero />
@@ -198,7 +206,7 @@ const InEnglishPageView: React.FC<InEnglishPageViewProps> = ({ events, feed }) =
<Card
key={event.id}
title={event.title_en}
start_time={event.start_time}
startTime={new Date(event.start_time).toLocaleString("en-GB", cardTimeOpts)}
text={event.description_en}
link={`/events/${event.id}`}
image={{
@@ -206,6 +214,7 @@ const InEnglishPageView: React.FC<InEnglishPageViewProps> = ({ events, feed }) =
alt: event.title_en,
}}
buttonOnClick={noop}
buttonText="Read more&nbsp;›"
data-e2e="event-card"
/>
))}
@@ -227,10 +236,11 @@ const InEnglishPageView: React.FC<InEnglishPageViewProps> = ({ events, feed }) =
<Card
key={inst.id}
title={inst.title_en}
start_time={inst.publish_time}
startTime={new Date(inst.publish_time).toLocaleString("en-GB", cardTimeOpts)}
text={inst.description_en}
link={`/feed/${inst.id}`}
buttonOnClick={noop}
buttonText="Read more&nbsp;›"
/>
))}
<aside>