Merge pull request #18 from GRA0007/dev

Language defaults
2021-05-31 23:21:36 +10:00 · 2021-05-31 23:21:36 +10:00 · 6dd5ad433e
parent 38a97199b7 2f23fcfd32
commit 6dd5ad433e
18 changed files with 234 additions and 154 deletions
--- a/crabfit-frontend/public/index.html
+++ b/crabfit-frontend/public/index.html
@ -36,7 +36,7 @@
    </script>
  </head>
  <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>
  </body>
 </html>
--- a/crabfit-frontend/src/App.tsx
+++ b/crabfit-frontend/src/App.tsx
@ -1,9 +1,5 @@
 import { useState, useEffect, useCallback, Suspense, lazy } from 'react';
-import {
-	BrowserRouter,
-  Switch,
-  Route,
-} from 'react-router-dom';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
 import { ThemeProvider, Global } from '@emotion/react';

 import { Settings, Loading, Egg } from 'components';
--- a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
+++ b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
@ -31,6 +31,8 @@ import {
  StyledMain,
 } from './availabilityViewerStyle';

+import locales from 'res/dayjs_locales';
+
 dayjs.extend(localeData);
 dayjs.extend(customParseFormat);
 dayjs.extend(relativeTime);
@ -152,7 +154,7 @@ const AvailabilityViewer = ({
    												onMouseEnter={(e) => {
    													const cellBox = e.currentTarget.getBoundingClientRect();
    													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({
    														x: Math.round(cellBox.x-wrapperBox.x + cellBox.width/2),
    														y: Math.round(cellBox.y-wrapperBox.y + cellBox.height)+6,
--- a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
+++ b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
@ -19,8 +19,6 @@ import {
 	Day,
 } from './calendarFieldStyle';

-import localeImports from 'res/dayjs_locales';
-
 dayjs.extend(isToday);
 dayjs.extend(localeData);
 dayjs.extend(updateLocale);
@ -58,8 +56,7 @@ const CalendarField = ({
 }) => {
  const weekStart = useSettingsStore(state => state.weekStart);
  const locale = useLocaleUpdateStore(state => state.locale);
-  const setLocale = useLocaleUpdateStore(state => state.setLocale);
-  const { t, i18n } = useTranslation('home');
+  const { t } = useTranslation('home');

 	const [type, setType] = useState(0);

@ -92,22 +89,11 @@ const CalendarField = ({
 	};

 	useEffect(() => {
-    if (Object.keys(localeImports).includes(i18n.language)) {
-      localeImports[i18n.language]().then(() => {
-        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 });
-      }
+    if (dayjs.Ls.hasOwnProperty(locale) && weekStart !== dayjs.Ls[locale].weekStart) {
+      dayjs.updateLocale(locale, { weekStart });
    }
 		setDates(calculateMonth(month, year, weekStart));
-	}, [weekStart, month, year, i18n.language, setLocale]);
+	}, [weekStart, month, year, locale]);

 	return (
 		<Wrapper locale={locale}>
--- a/crabfit-frontend/src/components/Logo/Logo.tsx
+++ b/crabfit-frontend/src/components/Logo/Logo.tsx
@ -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;
--- a/crabfit-frontend/src/components/Logo/logoStyle.ts
+++ b/crabfit-frontend/src/components/Logo/logoStyle.ts
@ -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;
+`;
--- a/crabfit-frontend/src/components/Settings/Settings.tsx
+++ b/crabfit-frontend/src/components/Settings/Settings.tsx
@ -1,10 +1,11 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useTheme } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';

 import { ToggleField, SelectField } from 'components';

-import { useSettingsStore } from 'stores';
+import { useSettingsStore, useLocaleUpdateStore } from 'stores';

 import {
  OpenButton,
@ -13,11 +14,44 @@ import {
  Cover,
 } 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 theme = useTheme();
  const store = useSettingsStore();
  const [isOpen, setIsOpen] = useState(false);
  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 (
    <>
@ -89,14 +123,10 @@ const Settings = () => {
          name="language"
          id="language"
          options={{
-            'de': 'Deutsch',
-            'en': 'English',
-            'es': 'Español',
-            'fr': 'Français',
-            'hi': 'हिंदी',
-            'id': 'Indonesia',
-            'ko': '한국어',
-            'ru': 'Pусский',
+            ...Object.keys(locales).reduce((ls, l) => {
+              ls[l] = locales[l].name;
+              return ls;
+            }, {}),
            ...process.env.NODE_ENV !== 'production' && { 'cimode': 'DEV' },
          }}
          small
--- a/crabfit-frontend/src/components/index.ts
+++ b/crabfit-frontend/src/components/index.ts
@ -18,3 +18,4 @@ export { default as Settings } from './Settings/Settings';
 export { default as Egg } from './Egg/Egg';
 export { default as Footer } from './Footer/Footer';
 export { default as Recents } from './Recents/Recents';
+export { default as Logo } from './Logo/Logo';
--- a/crabfit-frontend/src/i18n/index.ts
+++ b/crabfit-frontend/src/i18n/index.ts
@ -5,6 +5,8 @@ import Backend from 'i18next-http-backend';

 import locales from 'res/dayjs_locales';

+const storedLang = localStorage.getItem('i18nextLng');
+
 i18n
  .use(LanguageDetector)
  .use(Backend)
@ -21,6 +23,7 @@ i18n
    backend: {
      loadPath: '/i18n/{{lng}}/{{ns}}.json',
    },
-  });
+    storedLang,
+  }).then(() => document.documentElement.setAttribute('lang', i18n.language));

 export default i18n;
--- a/crabfit-frontend/src/pages/Event/Event.tsx
+++ b/crabfit-frontend/src/pages/Event/Event.tsx
@ -1,4 +1,3 @@
-import { Link } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import { useState, useEffect } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
@ -10,7 +9,6 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';

 import {
-	Center,
 	Footer,
 	TextField,
 	SelectField,
@ -18,12 +16,12 @@ import {
 	AvailabilityViewer,
 	AvailabilityEditor,
 	Error,
+  Logo,
 } from 'components';

+import { StyledMain } from '../Home/homeStyle';
+
 import {
-	StyledMain,
-	Logo,
-	Title,
 	EventName,
  EventDate,
 	LoginForm,
@ -37,9 +35,7 @@ import {
 import api from 'services';
 import { useSettingsStore, useRecentsStore, useLocaleUpdateStore } from 'stores';

-import logo from 'res/logo.svg';
 import timezones from 'res/timezones.json';
-import localeImports from 'res/dayjs_locales';

 dayjs.extend(utc);
 dayjs.extend(timezone);
@ -51,10 +47,9 @@ const Event = (props) => {
  const weekStart = useSettingsStore(state => state.weekStart);

  const addRecent = useRecentsStore(state => state.addRecent);
-  const setLocale = useLocaleUpdateStore(state => state.setLocale);
  const locale = useLocaleUpdateStore(state => state.locale);

-  const { t, i18n } = useTranslation(['common', 'event']);
+  const { t } = useTranslation(['common', 'event']);

 	const { register, handleSubmit } = useForm();
 	const { id } = props.match.params;
@ -77,15 +72,6 @@ const Event = (props) => {

 	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(() => {
 		const fetchEvent = async () => {
 			try {
@ -290,13 +276,7 @@ const Event = (props) => {
 	return (
 		<>
 			<StyledMain>
-				<Link to="/" style={{ textDecoration: 'none' }}>
-					<Center>
-						<Logo src={logo} alt="" />
-						<Title>CRAB FIT</Title>
-					</Center>
-					<Center style={{ textDecoration: 'underline', fontSize: 14, paddingTop: 6 }}>{t('common:tagline')}</Center>
-				</Link>
+				<Logo />

 				{(!!event || isLoading) ? (
 					<>
--- a/crabfit-frontend/src/pages/Event/eventStyle.ts
+++ b/crabfit-frontend/src/pages/Event/eventStyle.ts
@ -1,26 +1,5 @@
 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`
 	text-align: center;
 	font-weight: 800;
--- a/crabfit-frontend/src/pages/Help/Help.tsx
+++ b/crabfit-frontend/src/pages/Help/Help.tsx
@ -7,21 +7,21 @@ import {
 	Center,
 	Footer,
  AvailabilityViewer,
+  Logo,
 } from 'components';

 import {
-	StyledMain,
-	Logo,
-  Title,
+  StyledMain,
 	AboutSection,
 	P,
+} from '../Home/homeStyle';
+
+import {
  Step,
  FakeCalendar,
  FakeTimeRange,
 } from './helpStyle';

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

      <StyledMain>
--- a/crabfit-frontend/src/pages/Help/helpStyle.ts
+++ b/crabfit-frontend/src/pages/Help/helpStyle.ts
@ -1,37 +1,5 @@
 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`
 	text-decoration-color: ${props => props.theme.primary};
  text-decoration-style: solid;
--- a/crabfit-frontend/src/pages/Home/Home.tsx
+++ b/crabfit-frontend/src/pages/Home/Home.tsx
@ -222,11 +222,11 @@ const Home = ({ offline }) => {
 					<h2>{t('home:about.name')}</h2>
 					<Stats>
 						<Stat>
-							<StatNumber>{stats.eventCount ?? '300+'}</StatNumber>
+							<StatNumber>{stats.eventCount ?? '350+'}</StatNumber>
 							<StatLabel>{t('home:about.events')}</StatLabel>
 						</Stat>
 						<Stat>
-							<StatNumber>{stats.personCount ?? '400+'}</StatNumber>
+							<StatNumber>{stats.personCount ?? '500+'}</StatNumber>
 							<StatLabel>{t('home:about.availabilities')}</StatLabel>
 						</Stat>
 					</Stats>
--- a/crabfit-frontend/src/pages/Privacy/Privacy.tsx
+++ b/crabfit-frontend/src/pages/Privacy/Privacy.tsx
@ -1,22 +1,19 @@
 import { useEffect } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { useTranslation, Trans } from 'react-i18next';

 import {
 	Button,
 	Center,
 	Footer,
+  Logo,
 } from 'components';

 import {
 	StyledMain,
-	Logo,
-  Title,
 	AboutSection,
 	P,
-} from '../Help/helpStyle';
-
-import logo from 'res/logo.svg';
+} from '../Home/homeStyle';

 const Privacy = () => {
  const { push } = useHistory();
@ -29,13 +26,7 @@ const Privacy = () => {
 	return (
 		<>
 			<StyledMain>
-        <Link to="/" style={{ textDecoration: 'none' }}>
-					<Center>
-						<Logo src={logo} alt="" />
-						<Title>CRAB FIT</Title>
-					</Center>
-					<Center style={{ textDecoration: 'underline', fontSize: 14, paddingTop: 6 }}>{t('common:tagline')}</Center>
-				</Link>
+        <Logo />
      </StyledMain>

      <StyledMain>
--- a/crabfit-frontend/src/res/dayjs_locales.js
+++ b/crabfit-frontend/src/res/dayjs_locales.js
@ -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;
--- a/crabfit-frontend/src/res/dayjs_locales.ts
+++ b/crabfit-frontend/src/res/dayjs_locales.ts
@ -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;
--- a/crabfit-frontend/src/stores/index.ts
+++ b/crabfit-frontend/src/stores/index.ts
@ -41,6 +41,6 @@ export const useTWAStore = create(set => ({
 }));

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