scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request #18 from GRA0007/dev

Browse source 
Language defaults
This commit is contained in:
Benjamin Grant 2021-05-31 23:21:36 +10:00 committed by GitHub
parent 38a97199b7 2f23fcfd32
commit 6dd5ad433e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 234 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
crabfit-frontend/public/index.html
View file

@ -36,7 +36,7 @@
</script> </script>
</head> </head>
<body> <body>
<noscript><h1>🦀 Crab Fit doesn't work without Javascript 🏋️</h1><p>Enable Javascript or try a different browser.<p></noscript> <noscript style="font-family: Karla, sans-serif; text-align: center; margin: 20vh 0; display: block;"><h1>🦀 Crab Fit doesn't work without Javascript 🏋️</h1><p>Enable Javascript or try a different browser.<p></noscript>
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>

6
crabfit-frontend/src/App.tsx
View file

@ -1,9 +1,5 @@
import { useState, useEffect, useCallback, Suspense, lazy } from 'react'; import { useState, useEffect, useCallback, Suspense, lazy } from 'react';
import { import { BrowserRouter, Switch, Route } from 'react-router-dom';
BrowserRouter,
Switch,
Route,
} from 'react-router-dom';
import { ThemeProvider, Global } from '@emotion/react'; import { ThemeProvider, Global } from '@emotion/react';
import { Settings, Loading, Egg } from 'components'; import { Settings, Loading, Egg } from 'components';

4
crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
View file

@ -31,6 +31,8 @@ import {
StyledMain, StyledMain,
} from './availabilityViewerStyle'; } from './availabilityViewerStyle';
import locales from 'res/dayjs_locales';
dayjs.extend(localeData); dayjs.extend(localeData);
dayjs.extend(customParseFormat); dayjs.extend(customParseFormat);
dayjs.extend(relativeTime); dayjs.extend(relativeTime);
@ -152,7 +154,7 @@ const AvailabilityViewer = ({
onMouseEnter={(e) => { onMouseEnter={(e) => {
const cellBox = e.currentTarget.getBoundingClientRect(); const cellBox = e.currentTarget.getBoundingClientRect();
const wrapperBox = wrapper?.current?.getBoundingClientRect() ?? { x: 0, y: 0 }; const wrapperBox = wrapper?.current?.getBoundingClientRect() ?? { x: 0, y: 0 };
const timeText = timeFormat === '12h' ? 'h:mma' : 'HH:mm'; const timeText = timeFormat === '12h' ? `h${locales[locale].separator}mma` : `HH${locales[locale].separator}mm`;
setTooltip({ setTooltip({
x: Math.round(cellBox.x-wrapperBox.x + cellBox.width/2), x: Math.round(cellBox.x-wrapperBox.x + cellBox.width/2),
y: Math.round(cellBox.y-wrapperBox.y + cellBox.height)+6, y: Math.round(cellBox.y-wrapperBox.y + cellBox.height)+6,

22
crabfit-frontend/src/components/CalendarField/CalendarField.tsx
View file

@ -19,8 +19,6 @@ import {
Day, Day,
} from './calendarFieldStyle'; } from './calendarFieldStyle';
import localeImports from 'res/dayjs_locales';
dayjs.extend(isToday); dayjs.extend(isToday);
dayjs.extend(localeData); dayjs.extend(localeData);
dayjs.extend(updateLocale); dayjs.extend(updateLocale);
@ -58,8 +56,7 @@ const CalendarField = ({
}) => { }) => {
const weekStart = useSettingsStore(state => state.weekStart); const weekStart = useSettingsStore(state => state.weekStart);
const locale = useLocaleUpdateStore(state => state.locale); const locale = useLocaleUpdateStore(state => state.locale);
const setLocale = useLocaleUpdateStore(state => state.setLocale); const { t } = useTranslation('home');
const { t, i18n } = useTranslation('home');
const [type, setType] = useState(0); const [type, setType] = useState(0);
@ -92,22 +89,11 @@ const CalendarField = ({
}; };
useEffect(() => { useEffect(() => {
if (Object.keys(localeImports).includes(i18n.language)) { if (dayjs.Ls.hasOwnProperty(locale) && weekStart !== dayjs.Ls[locale].weekStart) {
localeImports[i18n.language]().then(() => { dayjs.updateLocale(locale, { weekStart });
dayjs.locale(i18n.language);
setLocale(dayjs.locale());
if (weekStart !== dayjs.Ls[i18n.language].weekStart) {
dayjs.updateLocale(i18n.language, { weekStart });
}
});
} else {
// Fallback
if (weekStart !== dayjs.Ls.en.weekStart) {
dayjs.updateLocale('en', { weekStart });
}
} }
setDates(calculateMonth(month, year, weekStart)); setDates(calculateMonth(month, year, weekStart));
}, [weekStart, month, year, i18n.language, setLocale]); }, [weekStart, month, year, locale]);
return ( return (
<Wrapper locale={locale}> <Wrapper locale={locale}>

31
crabfit-frontend/src/components/Logo/Logo.tsx Normal file
View file

@ -0,0 +1,31 @@
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import {
Wrapper,
A,
Top,
Image,
Title,
Tagline,
} from './logoStyle';
import image from 'res/logo.svg';
const Logo = () => {
const { t } = useTranslation('common');
return (
<Wrapper>
<A as={Link} to="/">
<Top>
<Image src={image} alt="" />
<Title>CRAB FIT</Title>
</Top>
<Tagline>{t('common:tagline')}</Tagline>
</A>
</Wrapper>
);
};
export default Logo;

64
crabfit-frontend/src/components/Logo/logoStyle.ts Normal file
View file

@ -0,0 +1,64 @@
import styled from '@emotion/styled';
export const Wrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
`;
export const A = styled.a`
text-decoration: none;
@keyframes jelly {
from,to {
-webkit-transform: scale(1,1);
transform: scale(1,1)
}
25% {
-webkit-transform: scale(.9,1.1);
transform: scale(.9,1.1)
}
50% {
-webkit-transform: scale(1.1,.9);
transform: scale(1.1,.9)
}
75% {
-webkit-transform: scale(.95,1.05);
transform: scale(.95,1.05)
}
}
&:hover img {
animation: jelly .5s 1;
}
`;
export const Top = styled.div`
display: inline-flex;
justify-content: center;
align-items: center;
`;
export const Image = styled.img`
width: 2.5rem;
margin-right: 16px;
`;
export const Title = styled.span`
display: block;
font-size: 2rem;
color: ${props => props.theme.primary};
font-family: 'Molot', sans-serif;
font-weight: 400;
text-shadow: 0 2px 0 ${props => props.theme.primaryDark};
line-height: 1em;
`;
export const Tagline = styled.span`
text-decoration: underline;
font-size: 14px;
padding-top: 6px;
display: flex;
align-items: center;
justify-content: center;
`;

50
crabfit-frontend/src/components/Settings/Settings.tsx
View file

@ -1,10 +1,11 @@
import { useState } from 'react'; import { useState, useEffect } from 'react';
import { useTheme } from '@emotion/react'; import { useTheme } from '@emotion/react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';
import { ToggleField, SelectField } from 'components'; import { ToggleField, SelectField } from 'components';
import { useSettingsStore } from 'stores'; import { useSettingsStore, useLocaleUpdateStore } from 'stores';
import { import {
OpenButton, OpenButton,
@ -13,11 +14,44 @@ import {
Cover, Cover,
} from './settingsStyle'; } from './settingsStyle';
import locales from 'res/dayjs_locales';
// Language specific options
const setDefaults = (lang, store) => {
if (locales.hasOwnProperty(lang)) {
store.setWeekStart(locales[lang].weekStart);
store.setTimeFormat(locales[lang].timeFormat);
}
};
const Settings = () => { const Settings = () => {
const theme = useTheme(); const theme = useTheme();
const store = useSettingsStore(); const store = useSettingsStore();
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const { t, i18n } = useTranslation('common'); const { t, i18n } = useTranslation('common');
const setLocale = useLocaleUpdateStore(state => state.setLocale);
useEffect(() => {
if (Object.keys(locales).includes(i18n.language)) {
locales[i18n.language].import().then(() => {
dayjs.locale(i18n.language);
setLocale(dayjs.locale());
document.documentElement.setAttribute('lang', i18n.language);
});
} else {
setLocale('en');
document.documentElement.setAttribute('lang', 'en')
}
}, [i18n.language, setLocale]);
if (!i18n.options.storedLang) {
setDefaults(i18n.language, store);
i18n.options.storedLang = i18n.language;
}
i18n.on('languageChanged', lang => {
setDefaults(lang, store);
});
return ( return (
<> <>
@ -89,14 +123,10 @@ const Settings = () => {
name="language" name="language"
id="language" id="language"
options={{ options={{
'de': 'Deutsch', ...Object.keys(locales).reduce((ls, l) => {
'en': 'English', ls[l] = locales[l].name;
'es': 'Español', return ls;
'fr': 'Français', }, {}),
'hi': 'हिंदी',
'id': 'Indonesia',
'ko': '한국어',
'ru': 'Pусский',
...process.env.NODE_ENV !== 'production' && { 'cimode': 'DEV' }, ...process.env.NODE_ENV !== 'production' && { 'cimode': 'DEV' },
}} }}
small small

1
crabfit-frontend/src/components/index.ts
View file

@ -18,3 +18,4 @@ export { default as Settings } from './Settings/Settings';
export { default as Egg } from './Egg/Egg'; export { default as Egg } from './Egg/Egg';
export { default as Footer } from './Footer/Footer'; export { default as Footer } from './Footer/Footer';
export { default as Recents } from './Recents/Recents'; export { default as Recents } from './Recents/Recents';
export { default as Logo } from './Logo/Logo';

5
crabfit-frontend/src/i18n/index.ts
View file

@ -5,6 +5,8 @@ import Backend from 'i18next-http-backend';
import locales from 'res/dayjs_locales'; import locales from 'res/dayjs_locales';
const storedLang = localStorage.getItem('i18nextLng');
i18n i18n
.use(LanguageDetector) .use(LanguageDetector)
.use(Backend) .use(Backend)
@ -21,6 +23,7 @@ i18n
backend: { backend: {
loadPath: '/i18n/{{lng}}/{{ns}}.json', loadPath: '/i18n/{{lng}}/{{ns}}.json',
}, },
}); storedLang,
}).then(() => document.documentElement.setAttribute('lang', i18n.language));
export default i18n; export default i18n;

30
crabfit-frontend/src/pages/Event/Event.tsx
View file

@ -1,4 +1,3 @@
import { Link } from 'react-router-dom';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useTranslation, Trans } from 'react-i18next'; import { useTranslation, Trans } from 'react-i18next';
@ -10,7 +9,6 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
import relativeTime from 'dayjs/plugin/relativeTime'; import relativeTime from 'dayjs/plugin/relativeTime';
import { import {
Center,
Footer, Footer,
TextField, TextField,
SelectField, SelectField,
@ -18,12 +16,12 @@ import {
AvailabilityViewer, AvailabilityViewer,
AvailabilityEditor, AvailabilityEditor,
Error, Error,
Logo,
} from 'components'; } from 'components';
import { StyledMain } from '../Home/homeStyle';
import { import {
StyledMain,
Logo,
Title,
EventName, EventName,
EventDate, EventDate,
LoginForm, LoginForm,
@ -37,9 +35,7 @@ import {
import api from 'services'; import api from 'services';
import { useSettingsStore, useRecentsStore, useLocaleUpdateStore } from 'stores'; import { useSettingsStore, useRecentsStore, useLocaleUpdateStore } from 'stores';
import logo from 'res/logo.svg';
import timezones from 'res/timezones.json'; import timezones from 'res/timezones.json';
import localeImports from 'res/dayjs_locales';
dayjs.extend(utc); dayjs.extend(utc);
dayjs.extend(timezone); dayjs.extend(timezone);
@ -51,10 +47,9 @@ const Event = (props) => {
const weekStart = useSettingsStore(state => state.weekStart); const weekStart = useSettingsStore(state => state.weekStart);
const addRecent = useRecentsStore(state => state.addRecent); const addRecent = useRecentsStore(state => state.addRecent);
const setLocale = useLocaleUpdateStore(state => state.setLocale);
const locale = useLocaleUpdateStore(state => state.locale); const locale = useLocaleUpdateStore(state => state.locale);
const { t, i18n } = useTranslation(['common', 'event']); const { t } = useTranslation(['common', 'event']);
const { register, handleSubmit } = useForm(); const { register, handleSubmit } = useForm();
const { id } = props.match.params; const { id } = props.match.params;
@ -77,15 +72,6 @@ const Event = (props) => {
const [copied, setCopied] = useState(null); const [copied, setCopied] = useState(null);
useEffect(() => {
if (Object.keys(localeImports).includes(i18n.language)) {
localeImports[i18n.language]().then(() => {
dayjs.locale(i18n.language);
setLocale(dayjs.locale());
});
}
}, [i18n.language, setLocale]);
useEffect(() => { useEffect(() => {
const fetchEvent = async () => { const fetchEvent = async () => {
try { try {
@ -290,13 +276,7 @@ const Event = (props) => {
return ( return (
<> <>
<StyledMain> <StyledMain>
<Link to="/" style={{ textDecoration: 'none' }}> <Logo />
<Center>
<Logo src={logo} alt="" />
<Title>CRAB FIT</Title>
</Center>
<Center style={{ textDecoration: 'underline', fontSize: 14, paddingTop: 6 }}>{t('common:tagline')}</Center>
</Link>
{(!!event || isLoading) ? ( {(!!event || isLoading) ? (
<> <>

21
crabfit-frontend/src/pages/Event/eventStyle.ts
View file

@ -1,26 +1,5 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
export const StyledMain = styled.div`
width: 600px;
margin: 20px auto;
max-width: calc(100% - 60px);
`;
export const Logo = styled.img`
width: 2.5rem;
margin-right: 16px;
`;
export const Title = styled.span`
display: block;
font-size: 2rem;
color: ${props => props.theme.primary};
font-family: 'Molot', sans-serif;
font-weight: 400;
text-shadow: 0 2px 0 ${props => props.theme.primaryDark};
line-height: 1em;
`;
export const EventName = styled.h1` export const EventName = styled.h1`
text-align: center; text-align: center;
font-weight: 800; font-weight: 800;

18
crabfit-frontend/src/pages/Help/Help.tsx
View file

@ -7,21 +7,21 @@ import {
Center, Center,
Footer, Footer,
AvailabilityViewer, AvailabilityViewer,
Logo,
} from 'components'; } from 'components';
import { import {
StyledMain, StyledMain,
Logo,
Title,
AboutSection, AboutSection,
P, P,
} from '../Home/homeStyle';
import {
Step, Step,
FakeCalendar, FakeCalendar,
FakeTimeRange, FakeTimeRange,
} from './helpStyle'; } from './helpStyle';
import logo from 'res/logo.svg';
const Help = () => { const Help = () => {
const { push } = useHistory(); const { push } = useHistory();
const { t } = useTranslation(['common', 'help']); const { t } = useTranslation(['common', 'help']);
@ -33,13 +33,7 @@ const Help = () => {
return ( return (
<> <>
<StyledMain> <StyledMain>
<Link to="/" style={{ textDecoration: 'none' }}> <Logo />
<Center>
<Logo src={logo} alt="" />
<Title>CRAB FIT</Title>
</Center>
<Center style={{ textDecoration: 'underline', fontSize: 14, paddingTop: 6 }}>{t('common:tagline')}</Center>
</Link>
</StyledMain> </StyledMain>
<StyledMain> <StyledMain>

32
crabfit-frontend/src/pages/Help/helpStyle.ts
View file

@ -1,37 +1,5 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
export const StyledMain = styled.div`
width: 600px;
margin: 20px auto;
max-width: calc(100% - 60px);
`;
export const Logo = styled.img`
width: 2.5rem;
margin-right: 16px;
`;
export const Title = styled.span`
display: block;
font-size: 2rem;
color: ${props => props.theme.primary};
font-family: 'Molot', sans-serif;
font-weight: 400;
text-shadow: 0 2px 0 ${props => props.theme.primaryDark};
line-height: 1em;
`;
export const AboutSection = styled.section`
margin: 30px 0 0;
background-color: ${props => props.theme.primaryBackground};
padding: 20px 0;
`;
export const P = styled.p`
font-weight: 500;
line-height: 1.6em;
`;
export const Step = styled.h2` export const Step = styled.h2`
text-decoration-color: ${props => props.theme.primary}; text-decoration-color: ${props => props.theme.primary};
text-decoration-style: solid; text-decoration-style: solid;

4
crabfit-frontend/src/pages/Home/Home.tsx
View file

@ -222,11 +222,11 @@ const Home = ({ offline }) => {
<h2>{t('home:about.name')}</h2> <h2>{t('home:about.name')}</h2>
<Stats> <Stats>
<Stat> <Stat>
<StatNumber>{stats.eventCount ?? '300+'}</StatNumber> <StatNumber>{stats.eventCount ?? '350+'}</StatNumber>
<StatLabel>{t('home:about.events')}</StatLabel> <StatLabel>{t('home:about.events')}</StatLabel>
</Stat> </Stat>
<Stat> <Stat>
<StatNumber>{stats.personCount ?? '400+'}</StatNumber> <StatNumber>{stats.personCount ?? '500+'}</StatNumber>
<StatLabel>{t('home:about.availabilities')}</StatLabel> <StatLabel>{t('home:about.availabilities')}</StatLabel>
</Stat> </Stat>
</Stats> </Stats>

17
crabfit-frontend/src/pages/Privacy/Privacy.tsx
View file

@ -1,22 +1,19 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { Link, useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { useTranslation, Trans } from 'react-i18next'; import { useTranslation, Trans } from 'react-i18next';
import { import {
Button, Button,
Center, Center,
Footer, Footer,
Logo,
} from 'components'; } from 'components';
import { import {
StyledMain, StyledMain,
Logo,
Title,
AboutSection, AboutSection,
P, P,
} from '../Help/helpStyle'; } from '../Home/homeStyle';
import logo from 'res/logo.svg';
const Privacy = () => { const Privacy = () => {
const { push } = useHistory(); const { push } = useHistory();
@ -29,13 +26,7 @@ const Privacy = () => {
return ( return (
<> <>
<StyledMain> <StyledMain>
<Link to="/" style={{ textDecoration: 'none' }}> <Logo />
<Center>
<Logo src={logo} alt="" />
<Title>CRAB FIT</Title>
</Center>
<Center style={{ textDecoration: 'underline', fontSize: 14, paddingTop: 6 }}>{t('common:tagline')}</Center>
</Link>
</StyledMain> </StyledMain>
<StyledMain> <StyledMain>

12
crabfit-frontend/src/res/dayjs_locales.js
View file

@ -1,12 +0,0 @@
const locales = {
de: () => import('dayjs/locale/de'), // German
en: () => import('dayjs/locale/en'), // English
es: () => import('dayjs/locale/es'), // Spanish
fr: () => import('dayjs/locale/fr'), // French
hi: () => import('dayjs/locale/hi'), // Hindi
id: () => import('dayjs/locale/id'), // Indonesian
ko: () => import('dayjs/locale/ko'), // Korean
ru: () => import('dayjs/locale/ru'), // Russian
};
export default locales;

67
crabfit-frontend/src/res/dayjs_locales.ts Normal file
View file

@ -0,0 +1,67 @@
const locales = {
'de': { // German
name: 'Deutsch',
import: () => import('dayjs/locale/de'),
weekStart: 1,
timeFormat: '24h',
separator: ':',
},
'en': { // English (US)
name: 'English (US)',
import: () => import('dayjs/locale/en'),
weekStart: 0,
timeFormat: '12h',
separator: ':',
},
'en-GB': { // English (UK)
name: 'English (UK)',
import: () => import('dayjs/locale/en-gb'),
weekStart: 1,
timeFormat: '12h',
separator: ':',
},
'es': { // Spanish
name: 'Español',
import: () => import('dayjs/locale/es'),
weekStart: 1,
timeFormat: '24h',
separator: ':',
},
'fr': { // French
name: 'Français',
import: () => import('dayjs/locale/fr'),
weekStart: 1,
timeFormat: '24h',
separator: ':',
},
'hi': { // Hindi
name: 'हिंदी',
import: () => import('dayjs/locale/hi'),
weekStart: 1,
timeFormat: '12h',
separator: ':',
},
'id': { // Indonesian
name: 'Indonesia',
import: () => import('dayjs/locale/id'),
weekStart: 1,
timeFormat: '24h',
separator: '.',
},
'ko': { // Korean
name: '한국어',
import: () => import('dayjs/locale/ko'),
weekStart: 0,
timeFormat: '24h',
separator: ':',
},
'ru': { // Russian
name: 'Pусский',
import: () => import('dayjs/locale/ru'),
weekStart: 1,
timeFormat: '24h',
separator: ':',
},
};
export default locales;

2
crabfit-frontend/src/stores/index.ts
View file

@ -41,6 +41,6 @@ export const useTWAStore = create(set => ({
})); }));
export const useLocaleUpdateStore = create(set => ({ export const useLocaleUpdateStore = create(set => ({
locale: undefined, locale: 'en',
setLocale: locale => set({ locale }), setLocale: locale => set({ locale }),
})); }));