From 2534ff289e503903b94ebbca150763059a56431c Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Tue, 18 May 2021 21:28:14 +1000 Subject: [PATCH 1/6] Use i18next and extract strings --- crabfit-frontend/package.json | 4 ++ .../public/i18n/en-US/common.json | 63 +++++++++++++++++ crabfit-frontend/public/i18n/en-US/event.json | 62 ++++++++++++++++ crabfit-frontend/public/i18n/en-US/help.json | 23 ++++++ crabfit-frontend/public/i18n/en-US/home.json | 57 +++++++++++++++ .../public/i18n/en-US/privacy.json | 52 ++++++++++++++ crabfit-frontend/src/App.tsx | 4 +- .../AvailabilityEditor/AvailabilityEditor.tsx | 7 +- .../AvailabilityViewer/AvailabilityViewer.tsx | 8 ++- .../CalendarField/CalendarField.tsx | 19 +++-- .../src/components/Donate/Donate.tsx | 16 +++-- .../src/components/Footer/Footer.tsx | 12 ++-- .../GoogleCalendar/GoogleCalendar.tsx | 16 +++-- .../src/components/Legend/Legend.tsx | 8 ++- .../components/SelectField/SelectField.tsx | 18 +++-- .../SelectField/selectFieldStyle.ts | 10 +++ .../src/components/Settings/Settings.tsx | 56 +++++++++++---- .../components/ToggleField/ToggleField.tsx | 14 ++-- crabfit-frontend/src/i18n/index.ts | 28 ++++++++ crabfit-frontend/src/index.tsx | 1 + crabfit-frontend/src/pages/Event/Event.tsx | 56 +++++++-------- crabfit-frontend/src/pages/Help/Help.tsx | 36 +++++----- crabfit-frontend/src/pages/Home/Home.tsx | 48 +++++++------ crabfit-frontend/src/pages/Home/homeStyle.ts | 2 + .../src/pages/Privacy/Privacy.tsx | 70 ++++++++++--------- crabfit-frontend/yarn.lock | 60 ++++++++++++++++ 26 files changed, 588 insertions(+), 162 deletions(-) create mode 100644 crabfit-frontend/public/i18n/en-US/common.json create mode 100644 crabfit-frontend/public/i18n/en-US/event.json create mode 100644 crabfit-frontend/public/i18n/en-US/help.json create mode 100644 crabfit-frontend/public/i18n/en-US/home.json create mode 100644 crabfit-frontend/public/i18n/en-US/privacy.json create mode 100644 crabfit-frontend/src/i18n/index.ts diff --git a/crabfit-frontend/package.json b/crabfit-frontend/package.json index 785e94c..7660c55 100644 --- a/crabfit-frontend/package.json +++ b/crabfit-frontend/package.json @@ -15,9 +15,13 @@ "axios": "^0.21.1", "dayjs": "^1.10.4", "gapi-script": "^1.2.0", + "i18next": "^20.2.4", + "i18next-browser-languagedetector": "^6.1.1", + "i18next-http-backend": "^1.2.4", "react": "^17.0.1", "react-dom": "^17.0.1", "react-hook-form": "^6.15.4", + "react-i18next": "^11.8.15", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "typescript": "^4.2.2", diff --git a/crabfit-frontend/public/i18n/en-US/common.json b/crabfit-frontend/public/i18n/en-US/common.json new file mode 100644 index 0000000..c72a679 --- /dev/null +++ b/crabfit-frontend/public/i18n/en-US/common.json @@ -0,0 +1,63 @@ +{ + "name": "Crab Fit", + "tagline": "Create your own", + "cta": "Create your own Crab Fit!", + "created": "Created", + "donate": { + "info": "Thank you for using Crab Fit. If you like it, consider donating.", + "button": "Donate", + "title": "Every amount counts :)", + "options": { + "$2": "Donate $2", + "$5": "Donate $5", + "$10": "Donate $10", + "choose": "Choose an amount" + }, + "messages": { + "about": "Did you know that Crab Fit costs more that $100 per month? If it's helped you out at all, consider donating to help keep it running. ๐Ÿฆ€", + "success": "Thank you for your donation! Without you, Crab Fit wouldn't be free, so thank you and keep being super awesome!", + "error": "Cannot make donation through Google. Please try donating through the website crab.fit ๐Ÿฆ€" + } + }, + "options": { + "name": "Options", + "weekStart": { + "label": "Week starts on", + "options": { + "Sunday": "Sunday", + "Monday": "Monday" + } + }, + "timeFormat": { + "label": "Time format", + "options": { + "12h": "12h", + "24h": "24h" + } + }, + "theme": { + "label": "Theme", + "options": { + "System": "System", + "Light": "Light", + "Dark": "Dark" + } + }, + "highlight": { + "label": "Highlight highest availability", + "title": "Make the highest availability on the heatmap stand out", + "options": { + "Off": "Off", + "On": "On" + } + }, + "language": { + "label": "Language", + "options": { + "en-US": "English (US)", + "de": "German", + "cimode": "Dev (keys)" + } + } + } +} diff --git a/crabfit-frontend/public/i18n/en-US/event.json b/crabfit-frontend/public/i18n/en-US/event.json new file mode 100644 index 0000000..08a5df6 --- /dev/null +++ b/crabfit-frontend/public/i18n/en-US/event.json @@ -0,0 +1,62 @@ +{ + "available": "available", + + "nav": { + "title": "Click to copy", + "copied": "Copied!", + "shareinfo": "Copy the link to this page, or share via <1>email.", + "email_subject": "Scheduling {{event_name}}", + "email_body": "Visit this link to enter your availabilities:" + }, + "form": { + "signed_out": "Sign in to add your availability", + "signed_in": "Signed in as {{name}}", + + "name": "Your name", + "password": "Password (optional)", + "button": "Login", + "info": "These details are only for this event. Use a password to prevent others from changing your availability.", + + "timezone": "Your time zone", + + "errors": { + "password_incorrect": "Password is incorrect. Check your name is spelled right.", + "unknown": "Failed to login. Please try again." + }, + + "created_in_timezone": "This event was created in the timezone {{timezone}}. <3>Click here to use it.", + "local_timezone": "Your local timezone is detected to be {{timezone}}. <3>Click here to use it." + }, + "offline": { + "title": "You are offline", + "body": "A Crab Fit doesn't work offline.
Make sure you're connected to the internet and try again." + }, + "error": { + "title": "Event not found", + "body": "Check that the url you entered is correct." + }, + + "tabs": { + "you": "Your availability", + "you_tooltip": "Login to set your availability", + "group": "Group availability" + }, + + "group": { + "legend_tooltip": "Click to highlight highest availability", + "info1": "Hover or tap the calendar below to see who is available", + "info2": "Click the names below to view people individually" + }, + + "you": { + "info": "Click and drag the calendar below to set your availabilities", + "google_cal": { + "login": "Sync with Google Calendar", + "logout": "log out", + "select_all": "Select all", + "select_none": "Select none", + "info": "Importing will overwrite your current availability", + "button": "Import availability" + } + } +} diff --git a/crabfit-frontend/public/i18n/en-US/help.json b/crabfit-frontend/public/i18n/en-US/help.json new file mode 100644 index 0000000..4d0f1c7 --- /dev/null +++ b/crabfit-frontend/public/i18n/en-US/help.json @@ -0,0 +1,23 @@ +{ + "name": "How to Crab Fit", + + "p1": "Crab Fit is a tool that helps you when planning events with friends or coworkers. You just create an event, enter your availability, send it out, and see when everyone is free!", + "p2": "See below for detailed steps of how to Crab Fit your event.", + + "s1": "Step 1", + + "p3": "Use the form at <1>crab.fit to make a new event. You only need to put in the rough time period for when your event occurs here, not your availability.", + "p4": "For example, we'll use \"Jenny's Birthday Lunch\". Jenny wants her birthday lunch to happen on the same week as her birthday, the 15th of April, but she knows that not all of her friends are available on the 15th. She also doesn't want to do it on the weekend.", + "p5": "Jenny also knows that since it's a lunch event, it can't start before 11am or go any later than 5pm.", + + "s2": "Step 2", + + "p6": "Enter your availability for the event you just created.", + "p7": "In our example, Jenny now puts in her availability for her birthday lunch. She is free all week, except after 3pm on Tuesday and Wednesday, and before 1pm on Friday.", + + "s3": "Step 3", + + "p8": "Send the link to everyone you want to come.", + "p9": "After Jenny has sent the link to her friends and waited for them to also fill out their availabilities, she can now easily see them all on the heatmap below and choose the darkest area for a time that suits everyone!", + "p10": "In this example, 1pm to 3pm on Friday the 16th works for all Jenny's friends." +} diff --git a/crabfit-frontend/public/i18n/en-US/home.json b/crabfit-frontend/public/i18n/en-US/home.json new file mode 100644 index 0000000..6639efd --- /dev/null +++ b/crabfit-frontend/public/i18n/en-US/home.json @@ -0,0 +1,57 @@ +{ + "create": "CREATE A", + "recently_visited": "Recently visited", + "nav": { + "about": "About", + "donate": "Donate" + }, + "form": { + "name": { + "label": "Give your event a name!", + "sublabel": "Or leave blank to generate one" + }, + "dates": { + "label": "What dates might work?", + "sublabel": "Click and drag to select", + "options": { + "specific": "Specific dates", + "week": "Days of the week" + }, + "tooltips": { + "previous": "Previous month", + "next": "Next month", + "today": "today" + } + }, + "times": { + "label": "What times might work?", + "sublabel": "Click and drag to select a time range" + }, + "timezone": { + "label": "And the timezone", + "defaultOption": "Select..." + }, + + "button": "Create", + "errors": { + "no_dates": "You haven't selected any dates!", + "same_times": "The start and end times can't be the same", + "no_time": "You don't have any time selected", + "unknown": "An error ocurred while creating the event. Please try again later." + } + }, + "offline": "You can't create a Crab Fit when you don't have an internet connection. Please make sure you're connected.", + + "about": { + "name": "About Crab Fit", + "events": "Events created", + "availabilities": "Availabilities entered", + "content": { + "p1": "Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free.<1/><2>Learn more about how to Crab Fit.", + "p2": "Create a lot of Crab Fits? Get the <1>Chrome extension or <3>Firefox extension for your browser! You can also download the <5>Android app to Crab Fit on the go.", + "p3": "Created by <1>Ben Grant, Crab Fit is the modern-day solution to your group event planning debates.", + "p4": "The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the <1>repository. By using Crab Fit you agree to the <3>privacy policy.", + "p5": "Crab Fit costs more than $100 per month to run. Consider donating below if it helped you out so it can stay free for everyone. ๐Ÿฆ€" + } + } +} diff --git a/crabfit-frontend/public/i18n/en-US/privacy.json b/crabfit-frontend/public/i18n/en-US/privacy.json new file mode 100644 index 0000000..0f7f917 --- /dev/null +++ b/crabfit-frontend/public/i18n/en-US/privacy.json @@ -0,0 +1,52 @@ +{ + "name": "Privacy Policy", + + "p1": "This SERVICE is provided by Benjamin Grant at no cost and is intended for use as is.", + "p2": "This page is used to inform visitors regarding the policies of the collection, use, and disclosure of Personal Information if using the Service.", + "p3": "If you choose to use the Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that is collected is used for providing and improving the Service. Your information will not be used or shared with anyone except as described in this Privacy Policy.", + + "h1": "Information Collection and Use", + + "p4": "The Service uses third party services that may collect information used to identify you.", + "p5": "Links to privacy policies of the third party service providers used by the Service:", + "link": "Google Play Services", + + "h2": "Log Data", + + "p6": "When you use the Service, in the case of an error, data and information is collected to improve the Service, which may include your IP address, device name, operating system version, app configuration and the time and date of the error.", + + "h3": "Cookies", + + "p7": "Cookies are files with a small amount of data that are commonly used as anonymous unique identifiers. These are sent to your browser from the websites that you visit and are stored on your device's internal memory.", + "p8": "Cookies are used by Google Analytics to track you across the web and provide anonymous statistics to improve the Service.", + + "h4": "Service Providers", + + "p9": "Third-party companies may be employed for the following reasons:", + "l1": "To facilitate the Service", + "l2": "To provide the Service on our behalf", + "l3": "To perform Service-related services", + "l4": "To assist in analyzing how the Service is used", + "p10": "To perform these tasks, the third parties may have access to your Personal Information, but are obligated not to disclose or use this information for any purpose except the above.", + + "h5": "Security", + + "p11": "Personal Information that is shared via the Service is protected, however remember that no method of transmission over the internet, or method of electronic storage is 100% secure and reliable, so take care when sharing Personal Information.", + + "h6": "Links to Other Sites", + + "p12": "The Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by the Service. Therefore, you are advised to review the Privacy Policy of these websites.", + + "h7": "Children's Privacy", + + "p13": "The Service does not address anyone under the age of 13. Personally identifiable information is not knowingly collected from children under 13. If discovered that a child under 13 has provided the Service with personal information, such information will be immediately deleted from the servers. If you are a parent or guardian and you are aware that your child has provided the Service with personal information, please <1>contact us so that this information can be removed.", + + "h8": "Changes to This Privacy Policy", + + "p14": "This Privacy Policy may be updated from time to time. Thus, you are advised to review this page periodically for any changes.", + "p15": "This policy is effective as of 2021-04-20", + + "h9": "Contact Us", + + "p16": "If you have any questions or suggestions about the Privacy Policy, do not hesitate to contact us at <1>benjamin.grantGRA0007+crabfit@gmail.com." +} diff --git a/crabfit-frontend/src/App.tsx b/crabfit-frontend/src/App.tsx index 2b4408f..ef16fa0 100644 --- a/crabfit-frontend/src/App.tsx +++ b/crabfit-frontend/src/App.tsx @@ -139,7 +139,9 @@ const App = () => { )} /> - + }> + + {eggVisible && setEggVisible(false)} />} diff --git a/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx b/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx index 5153588..9df7769 100644 --- a/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx +++ b/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx @@ -1,4 +1,5 @@ import { useState, useRef, Fragment } from 'react'; +import { useTranslation } from 'react-i18next'; import dayjs from 'dayjs'; import localeData from 'dayjs/plugin/localeData'; import customParseFormat from 'dayjs/plugin/customParseFormat'; @@ -20,7 +21,7 @@ import { } from 'components/AvailabilityViewer/availabilityViewerStyle'; import { Time } from './availabilityEditorStyle'; -import { GoogleCalendar } from 'components'; +import { GoogleCalendar, Center } from 'components'; dayjs.extend(localeData); dayjs.extend(customParseFormat); @@ -36,6 +37,7 @@ const AvailabilityEditor = ({ onChange, ...props }) => { + const { t } = useTranslation('event'); const [selectingTimes, _setSelectingTimes] = useState([]); const staticSelectingTimes = useRef([]); const setSelectingTimes = newTimes => { @@ -53,6 +55,9 @@ const AvailabilityEditor = ({ return ( <> + +
{t('event:you.info')}
+ {isSpecificDates && ( p.availability.length > 0).length} onSegmentFocus={count => setFocusCount(count)} /> -
Hover or tap the calendar below to see who is available
+
{t('event:group.info1')}
{people.length > 1 && ( <> -
Click the names below to view people individually
+
{t('event:group.info2')}
{people.map((person, i) => { const weekStart = useSettingsStore(state => state.weekStart); + const { t } = useTranslation('home'); const [type, setType] = useState(0); @@ -110,9 +112,12 @@ const CalendarField = ({ setType(value === 'Specific dates' ? 0 : 1)} + options={{ + 'specific': t('form.dates.options.specific'), + 'week': t('form.dates.options.week'), + }} + value={type === 0 ? 'specific' : 'week'} + onChange={value => setType(value === 'specific' ? 0 : 1)} /> {type === 0 ? ( @@ -121,7 +126,7 @@ const CalendarField = ({ + title={t('donate.title')} + >{t('donate.button')} ); diff --git a/crabfit-frontend/src/components/Footer/Footer.tsx b/crabfit-frontend/src/components/Footer/Footer.tsx index 388a484..ab3c515 100644 --- a/crabfit-frontend/src/components/Footer/Footer.tsx +++ b/crabfit-frontend/src/components/Footer/Footer.tsx @@ -1,23 +1,25 @@ import { useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { Donate } from 'components'; import { Wrapper, Link } from './footerStyle'; const Footer = () => { const [donateMode, setDonateMode] = useState(false); + const { t } = useTranslation('common'); return ( @@ -430,9 +433,6 @@ const Event = (props) => { ) : (
- -
Click and drag the calendar below to set your availabilities
- { const { push } = useHistory(); + const { t } = useTranslation(['common', 'help']); useEffect(() => { - document.title = 'How to Crab Fit'; + document.title = t('help:name'); }, []); return ( @@ -36,31 +38,31 @@ const Help = () => { CRAB FIT -
Create your own
+
{t('common:tagline')}
-

How to Crab Fit

-

Crab Fit is a tool that helps you when planning events with friends or coworkers. You just create an event, enter your availability, send it out, and see when everyone is free!

-

See below for detailed steps of how to Crab Fit your event.

+

{t('help:name')}

+

{t('help:p1')}

+

{t('help:p2')}

- Step 1 -

Use the form at crab.fit to make a new event. You only need to put in the rough time period for when your event occurs here, not your availability.

-

For example, we'll use "Jenny's Birthday Lunch". Jenny wants her birthday lunch to happen on the same week as her birthday, the 15th of April, but she knows that not all of her friends are available on the 15th. She also doesn't want to do it on the weekend.

+ {t('help:s1')} +

Use the form at crab.fit to make a new event. You only need to put in the rough time period for when your event occurs here, not your availability.

+

{t('help:p4')}

SunMonTueWedThuFriSat
11121314151617
 -

Jenny also knows that since it's a lunch event, it can't start before 11am or go any later than 5pm.

+

{t('help:p5')}

 - Step 2 -

Enter your availability for the event you just created.

-

In our example, Jenny now puts in her availability for her birthday lunch. She is free all week, except after 3pm on Tuesday and Wednesday, and before 1pm on Friday.

+ {t('help:s2')} +

{t('help:p6')}

+

{t('help:p7')}

{ max={1} /> - Step 3 -

Send the link to everyone you want to come.

-

After Jenny has sent the link to her friends and waited for them to also fill out their availabilities, she can now easily see them all on the heatmap below and choose the darkest area for a time that suits everyone!

-

In this example, 1pm to 3pm on Friday the 16th works for all Jenny's friends.

+ {t('help:s3')} +

{t('help:p8')}

+

{t('help:p9')}

+

{t('help:p10')}

{ -
+
diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.tsx index 2c2870a..94552cc 100644 --- a/crabfit-frontend/src/pages/Home/Home.tsx +++ b/crabfit-frontend/src/pages/Home/Home.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react'; import { useHistory, Link } from 'react-router-dom'; import { useForm } from 'react-hook-form'; +import { useTranslation, Trans } from 'react-i18next'; import dayjs from 'dayjs'; import utc from 'dayjs/plugin/utc'; @@ -60,6 +61,7 @@ const Home = ({ offline }) => { }); const { push } = useHistory(); const recentsStore = useRecentsStore(); + const { t } = useTranslation(['common', 'home']); useEffect(() => { const fetch = async () => { @@ -152,17 +154,17 @@ const Home = ({ offline }) => {
- CREATE A + {t('home:create')} CRAB FIT - About / Donate + {t('home:nav.about')} / {t('home:nav.donate')} {!!recentsStore.recents.length && ( -

Recently visited

+

{t('home:recently_visited')}

{recentsStore.recents.map(event => ( {event.name} @@ -177,13 +179,13 @@ const Home = ({ offline }) => { {offline ? (

๐Ÿฆ€๐Ÿ“ต

-

You can't create a Crab Fit when you don't have an internet connection. Please make sure you're connected.

+

{t('home:offline')}

 ) : ( { /> { /> { /> {error && ( @@ -223,7 +225,7 @@ const Home = ({ offline }) => { )}
- +
)} @@ -231,24 +233,24 @@ const Home = ({ offline }) => { -

About Crab Fit

+

{t('home:about.name')}

- {stats.eventCount ?? '100+'} - Events created + {stats.eventCount ?? '300+'} + {t('home:about.events')} - {stats.personCount ?? '100+'} - Availabilities entered + {stats.personCount ?? '400+'} + {t('home:about.availabilities')} -

Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free.
Learn more about how to Crab Fit.

+

Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free.
Learn more about how to Crab Fit.

{/* eslint-disable-next-line */} -

Create a lot of Crab Fits? Get the Chrome extension or Firefox extension for your browser! You can also download the Android app to Crab Fit on the go.

+

Create a lot of Crab Fits? Get the Chrome extension or Firefox extension for your browser! You can also download the Android app to Crab Fit on the go.

{/* eslint-disable-next-line */} -

Created by Ben Grant, Crab Fit is the modern-day solution to your group event planning debates.

-

The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the repository. By using Crab Fit you agree to the privacy policy.

-

Crab Fit costs more than $100 per month to run. Consider donating below if it helped you out so it can stay free for everyone. ๐Ÿฆ€

+

Created by Ben Grant, Crab Fit is the modern-day solution to your group event planning debates.

+

The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the repository. By using Crab Fit you agree to the privacy policy.

+

Crab Fit costs more than $100 per month to run. Consider donating below if it helped you out so it can stay free for everyone. ๐Ÿฆ€

 diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts index b48af89..6225fd7 100644 --- a/crabfit-frontend/src/pages/Home/homeStyle.ts +++ b/crabfit-frontend/src/pages/Home/homeStyle.ts @@ -19,6 +19,7 @@ export const TitleSmall = styled.span` font-weight: 400; color: ${props => props.theme.primaryDark}; line-height: 1em; + text-transform: uppercase; `; export const TitleLarge = styled.h1` @@ -30,6 +31,7 @@ export const TitleLarge = styled.h1` font-weight: 400; text-shadow: 0 4px 0 ${props => props.theme.primaryDark}; line-height: 1em; + text-transform: uppercase; @media (max-width: 350px) { font-size: 3.5rem; diff --git a/crabfit-frontend/src/pages/Privacy/Privacy.tsx b/crabfit-frontend/src/pages/Privacy/Privacy.tsx index 03c95c9..ae68bc9 100644 --- a/crabfit-frontend/src/pages/Privacy/Privacy.tsx +++ b/crabfit-frontend/src/pages/Privacy/Privacy.tsx @@ -1,5 +1,6 @@ import { useEffect } from 'react'; import { Link, useHistory } from 'react-router-dom'; +import { useTranslation, Trans } from 'react-i18next'; import { Button, @@ -19,9 +20,10 @@ import logo from 'res/logo.svg'; const Privacy = () => { const { push } = useHistory(); + const { t } = useTranslation(['common', 'privacy']); useEffect(() => { - document.title = 'Privacy Policy - Crab Fit'; + document.title = `${t('privacy:name')} - Crab Fit`; }, []); return ( @@ -32,65 +34,65 @@ const Privacy = () => { CRAB FIT -
Create your own
+
{t('common:tagline')}
 -

Privacy Policy

+

{t('privacy:name')}

Crab Fit

-

This SERVICE is provided by Benjamin Grant at no cost and is intended for use as is.

-

This page is used to inform visitors regarding the policies of the collection, use, and disclosure of Personal Information if using the Service.

-

If you choose to use the Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that is collected is used for providing and improving the Service. Your information will not be used or shared with anyone except as described in this Privacy Policy.

+

{t('privacy:p1')}

+

{t('privacy:p2')}

+

{t('privacy:p3')}

-

Information Collection and Use

-

The Service uses third party services that may collect information used to identify you.

-

Links to privacy policies of the third party service providers used by the Service:

+

{t('privacy:h1')}

+

{t('privacy:p4')}

+

{t('privacy:p5')}

-

Log Data

-

When you use the Service, in the case of an error, data and information is collected to improve the Service, which may include your IP address, device name, operating system version, app configuration and the time and date of the error.

+

{t('privacy:h2')}

+

{t('privacy:p6')}

-

Cookies

-

Cookies are files with a small amount of data that are commonly used as anonymous unique identifiers. These are sent to your browser from the websites that you visit and are stored on your device's internal memory.

-

Cookies are used by Google Analytics to track you across the web and provide anonymous statistics to improve the Service.

+

{t('privacy:h3')}

+

{t('privacy:p7')}

+

{t('privacy:p8')}

-

Service Providers

-

Third-party companies may be employed for the following reasons:

+

{t('privacy:h4')}

+

{t('privacy:p9')}

    -
  • To facilitate the Service
    • -
  • To provide the Service on our behalf
    • -
  • To perform Service-related services
    • -
  • To assist in analyzing how the Service is used
    • +
  • {t('privacy:l1')}
    • +
  • {t('privacy:l2')}
    • +
  • {t('privacy:l3')}
    • +
  • {t('privacy:l4')}

-

To perform these tasks, the third parties may have access to your Personal Information, but are obligated not to disclose or use this information for any purpose except the above.

+

{t('privacy:p10')}

-

Security

-

Personal Information that is shared via the Service is protected, however remember that no method of transmission over the internet, or method of electronic storage is 100% secure and reliable, so take care when sharing Personal Information.

+

{t('privacy:h5')}

+

{t('privacy:p11')}

-

Links to Other Sites

-

The Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by the Service. Therefore, you are advised to review the Privacy Policy of these websites.

+

{t('privacy:h6')}

+

{t('privacy:p12')}

-

Children's Privacy

-

The Service does not address anyone under the age of 13. Personally identifiable information is not knowingly collected from children under 13. If discovered that a child under 13 has provided the Service with personal information, such information will be immediately deleted from the servers. If you are a parent or guardian and you are aware that your child has provided the Service with personal information, please contact us so that this information can be removed.

+

{t('privacy:h7')}

+

The Service does not address anyone under the age of 13. Personally identifiable information is not knowingly collected from children under 13. If discovered that a child under 13 has provided the Service with personal information, such information will be immediately deleted from the servers. If you are a parent or guardian and you are aware that your child has provided the Service with personal information, please contact us so that this information can be removed.

-

Changes to This Privacy Policy

-

This Privacy Policy may be updated from time to time. Thus, you are advised to review this page periodically for any changes.

-

This policy is effective as of 2021-04-20

+

{t('privacy:h8')}

+

{t('privacy:p14')}

+

{t('privacy:p15')}

-

Contact Us

-

If you have any questions or suggestions about the Privacy Policy, do not hesitate to contact us at benjamin.grantGRA0007+crabfit@gmail.com.

+

{t('privacy:h9')}

+

If you have any questions or suggestions about the Privacy Policy, do not hesitate to contact us at benjamin.grantGRA0007+crabfit@gmail.com.

 -
+
diff --git a/crabfit-frontend/yarn.lock b/crabfit-frontend/yarn.lock index 2916191..321e7a9 100644 --- a/crabfit-frontend/yarn.lock +++ b/crabfit-frontend/yarn.lock @@ -1105,6 +1105,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.12.0", "@babel/runtime@^7.13.6": + version "7.14.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6" + integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3": version "7.12.13" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327" @@ -3677,6 +3684,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7: safe-buffer "^5.0.1" sha.js "^2.4.8" +cross-fetch@3.1.4: + version "3.1.4" + resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39" + integrity sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ== + dependencies: + node-fetch "2.6.1" + cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" @@ -5637,6 +5651,13 @@ html-minifier-terser@^5.0.1: relateurl "^0.2.7" terser "^4.6.3" +html-parse-stringify@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2" + integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg== + dependencies: + void-elements "3.1.0" + html-webpack-plugin@4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz#625097650886b97ea5dae331c320e3238f6c121c" @@ -5744,6 +5765,27 @@ human-signals@^1.1.1: resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3" integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw== +i18next-browser-languagedetector@^6.1.1: + version "6.1.1" + resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.1.tgz#fc4c6606bb3f7afc331737cf7c41e50919d55542" + integrity sha512-hckgbBdCpJPhkGUANe6tsvD52k9R7GuYskG0EaIw89pZz3owUvUEwXHqM5pX1Pn93jz+O65Y09ikwJrMkqtq2Q== + dependencies: + "@babel/runtime" "^7.5.5" + +i18next-http-backend@^1.2.4: + version "1.2.4" + resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-1.2.4.tgz#2be7d5e569557c22e4dd50df92425ee6c73f3296" + integrity sha512-ewvodowF2oBP0/vVAerpVF6aaIdAqH594K/ThA4Kl2A5Gm4QvUQuakvrFV5KMaKOggykGd9MuQ4xMcTFayVF1w== + dependencies: + cross-fetch "3.1.4" + +i18next@^20.2.4: + version "20.2.4" + resolved "https://registry.yarnpkg.com/i18next/-/i18next-20.2.4.tgz#972220f19dfef0075a70890d3e8b1f7cf64c5bd6" + integrity sha512-goE1LCA/IZOGG26PkkqoOl2KWR7YP606SvokVQZ29J6QwE02KycrzNetoMUJeqYrTxs4rmiiZgZp+q8qofQL6Q== + dependencies: + "@babel/runtime" "^7.12.0" + iconv-lite@0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -7523,6 +7565,11 @@ no-case@^3.0.4: lower-case "^2.0.2" tslib "^2.0.3" +node-fetch@2.6.1: + version "2.6.1" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052" + integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw== + node-forge@^0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3" @@ -9153,6 +9200,14 @@ react-hook-form@^6.15.4: resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.4.tgz#328003e1ccc096cd158899ffe7e3b33735a9b024" integrity sha512-K+Sw33DtTMengs8OdqFJI3glzNl1wBzSefD/ksQw/hJf9CnOHQAU6qy82eOrh0IRNt2G53sjr7qnnw1JDjvx1w== +react-i18next@^11.8.15: + version "11.8.15" + resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.8.15.tgz#89450d585298f18d4a8eb1628b0868863f3a4767" + integrity sha512-ZbKcbYYKukgDL0MiUWKJTEsEftjSTNVZv67/V+SjPqTRwuF/aL4NbUtuEcb4WjHk0HyZ1M+2wGd07Fp0RUNHKA== + dependencies: + "@babel/runtime" "^7.13.6" + html-parse-stringify "^3.0.1" + react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -11127,6 +11182,11 @@ vm-browserify@^1.0.1: resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ== +void-elements@3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09" + integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk= + w3c-hr-time@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd" From 32c45d04f3cfe57e9eff7635ba206edd72bcadcd Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Tue, 18 May 2021 21:45:12 +1000 Subject: [PATCH 2/6] Extract recents to component --- .../src/components/Recents/Recents.tsx | 30 ++++++++++++++++ .../src/components/Recents/recentsStyle.ts | 36 +++++++++++++++++++ crabfit-frontend/src/components/index.ts | 1 + crabfit-frontend/src/pages/Create/Create.tsx | 22 +++--------- crabfit-frontend/src/pages/Home/Home.tsx | 18 ++-------- crabfit-frontend/src/pages/Home/homeStyle.ts | 35 ------------------ 6 files changed, 73 insertions(+), 69 deletions(-) create mode 100644 crabfit-frontend/src/components/Recents/Recents.tsx create mode 100644 crabfit-frontend/src/components/Recents/recentsStyle.ts diff --git a/crabfit-frontend/src/components/Recents/Recents.tsx b/crabfit-frontend/src/components/Recents/Recents.tsx new file mode 100644 index 0000000..70a27bb --- /dev/null +++ b/crabfit-frontend/src/components/Recents/Recents.tsx @@ -0,0 +1,30 @@ +import { useTranslation } from 'react-i18next'; +import { useRecentsStore } from 'stores'; +import dayjs from 'dayjs'; +import relativeTime from 'dayjs/plugin/relativeTime'; + +import { AboutSection, StyledMain } from '../../pages/Home/homeStyle'; +import { Recent } from './recentsStyle'; + +dayjs.extend(relativeTime); + +const Recents = () => { + const recents = useRecentsStore(state => state.recents); + const { t } = useTranslation(['home', 'common']); + + return !!recents.length && ( + + +

{t('home:recently_visited')}

+ {recents.map(event => ( + + {event.name} + {t('common:created')} {dayjs.unix(event.created).fromNow()} + + ))} + + + ); +}; + +export default Recents; diff --git a/crabfit-frontend/src/components/Recents/recentsStyle.ts b/crabfit-frontend/src/components/Recents/recentsStyle.ts new file mode 100644 index 0000000..ee60d92 --- /dev/null +++ b/crabfit-frontend/src/components/Recents/recentsStyle.ts @@ -0,0 +1,36 @@ +import styled from '@emotion/styled'; + +export const Recent = styled.a` + text-decoration: none; + color: inherit; + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px 0; + flex-wrap: wrap; + + & .name { + font-weight: 700; + font-size: 1.1em; + color: ${props => props.theme.primaryDark}; + flex: 1; + display: block; + } + & .date { + font-weight: 400; + opacity: .8; + white-space: nowrap; + } + + &:hover .name { + text-decoration: underline; + } + + @media (max-width: 500px) { + display: block; + + & .date { + white-space: normal; + } + } +`; diff --git a/crabfit-frontend/src/components/index.ts b/crabfit-frontend/src/components/index.ts index a3fcc60..7808dcb 100644 --- a/crabfit-frontend/src/components/index.ts +++ b/crabfit-frontend/src/components/index.ts @@ -17,3 +17,4 @@ export { default as Donate } from './Donate/Donate'; 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'; diff --git a/crabfit-frontend/src/pages/Create/Create.tsx b/crabfit-frontend/src/pages/Create/Create.tsx index e221521..269a882 100644 --- a/crabfit-frontend/src/pages/Create/Create.tsx +++ b/crabfit-frontend/src/pages/Create/Create.tsx @@ -15,6 +15,7 @@ import { Button, Donate, Error, + Recents, } from 'components'; import { @@ -28,9 +29,6 @@ import { Footer, AboutSection, } from './createStyle'; -import { - Recent, -} from '../Home/homeStyle'; import api from 'services'; import { useRecentsStore } from 'stores'; @@ -54,7 +52,7 @@ const Create = ({ offline }) => { const { push } = useHistory(); - const recentsStore = useRecentsStore(); + const addRecent = useRecentsStore(state => state.addRecent); useEffect(() => { if (window.self === window.top) { @@ -123,7 +121,7 @@ const Create = ({ offline }) => { }, }); setCreatedEvent(response.data); - recentsStore.addRecent({ + addRecent({ id: response.data.id, created: response.data.created, name: response.data.name, @@ -175,19 +173,7 @@ const Create = ({ offline }) => { ) : ( <> - {!!recentsStore.recents.length && ( - - -

Recently visited

- {recentsStore.recents.map(event => ( - - {event.name} - Created {dayjs.unix(event.created).format('D MMMM, YYYY')} - - ))} - - - )} + {offline ? ( diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.tsx index 94552cc..c54267f 100644 --- a/crabfit-frontend/src/pages/Home/Home.tsx +++ b/crabfit-frontend/src/pages/Home/Home.tsx @@ -17,6 +17,7 @@ import { Center, Error, Footer, + Recents, } from 'components'; import { @@ -33,11 +34,9 @@ import { StatNumber, StatLabel, OfflineMessage, - Recent, } from './homeStyle'; import api from 'services'; -import { useRecentsStore } from 'stores'; import logo from 'res/logo.svg'; import timezones from 'res/timezones.json'; @@ -60,7 +59,6 @@ const Home = ({ offline }) => { version: 'loading...', }); const { push } = useHistory(); - const recentsStore = useRecentsStore(); const { t } = useTranslation(['common', 'home']); useEffect(() => { @@ -161,19 +159,7 @@ const Home = ({ offline }) => { - {!!recentsStore.recents.length && ( - - -

{t('home:recently_visited')}

- {recentsStore.recents.map(event => ( - - {event.name} - Created {dayjs.unix(event.created).format('D MMMM, YYYY')} - - ))} - - - )} + {offline ? ( diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts index 6225fd7..40133a6 100644 --- a/crabfit-frontend/src/pages/Home/homeStyle.ts +++ b/crabfit-frontend/src/pages/Home/homeStyle.ts @@ -87,38 +87,3 @@ export const OfflineMessage = styled.div` text-align: center; margin: 50px 0 20px; `; - -export const Recent = styled.a` - text-decoration: none; - color: inherit; - display: flex; - align-items: center; - justify-content: space-between; - padding: 5px 0; - flex-wrap: wrap; - - & .name { - font-weight: 700; - font-size: 1.1em; - color: ${props => props.theme.primaryDark}; - flex: 1; - display: block; - } - & .date { - font-weight: 400; - opacity: .8; - white-space: nowrap; - } - - &:hover .name { - text-decoration: underline; - } - - @media (max-width: 500px) { - display: block; - - & .date { - white-space: normal; - } - } -`; From 5a3dd895f672cc4196ff9291e2202f525d984e09 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Tue, 18 May 2021 21:48:07 +1000 Subject: [PATCH 3/6] Optimise imports --- crabfit-frontend/src/pages/Create/Create.tsx | 1 - crabfit-frontend/src/pages/Create/createStyle.ts | 11 ----------- crabfit-frontend/src/pages/Help/Help.tsx | 2 +- crabfit-frontend/src/pages/Privacy/Privacy.tsx | 2 +- 4 files changed, 2 insertions(+), 14 deletions(-) diff --git a/crabfit-frontend/src/pages/Create/Create.tsx b/crabfit-frontend/src/pages/Create/Create.tsx index 269a882..91c7297 100644 --- a/crabfit-frontend/src/pages/Create/Create.tsx +++ b/crabfit-frontend/src/pages/Create/Create.tsx @@ -27,7 +27,6 @@ import { OfflineMessage, ShareInfo, Footer, - AboutSection, } from './createStyle'; import api from 'services'; diff --git a/crabfit-frontend/src/pages/Create/createStyle.ts b/crabfit-frontend/src/pages/Create/createStyle.ts index cb7e35a..cbfe373 100644 --- a/crabfit-frontend/src/pages/Create/createStyle.ts +++ b/crabfit-frontend/src/pages/Create/createStyle.ts @@ -66,14 +66,3 @@ export const ShareInfo = styled.p` } `} `; - -export const AboutSection = styled.section` - margin: 30px 0 0; - background-color: ${props => props.theme.primaryBackground}; - padding: 10px 0; - - & h2 { - margin: 0 0 10px; - font-size: 1.2rem; - } -`; diff --git a/crabfit-frontend/src/pages/Help/Help.tsx b/crabfit-frontend/src/pages/Help/Help.tsx index fa14161..24f0301 100644 --- a/crabfit-frontend/src/pages/Help/Help.tsx +++ b/crabfit-frontend/src/pages/Help/Help.tsx @@ -28,7 +28,7 @@ const Help = () => { useEffect(() => { document.title = t('help:name'); - }, []); + }, [t]); return ( <> diff --git a/crabfit-frontend/src/pages/Privacy/Privacy.tsx b/crabfit-frontend/src/pages/Privacy/Privacy.tsx index ae68bc9..79b4210 100644 --- a/crabfit-frontend/src/pages/Privacy/Privacy.tsx +++ b/crabfit-frontend/src/pages/Privacy/Privacy.tsx @@ -24,7 +24,7 @@ const Privacy = () => { useEffect(() => { document.title = `${t('privacy:name')} - Crab Fit`; - }, []); + }, [t]); return ( <> From 9ed1522475c60486629b3b61c5c1928fbe31bdf8 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Tue, 18 May 2021 22:10:48 +1000 Subject: [PATCH 4/6] Create page translations --- crabfit-frontend/public/i18n/en-US/event.json | 1 + crabfit-frontend/public/i18n/en-US/home.json | 6 +-- .../src/components/Footer/Footer.tsx | 4 +- .../src/components/Footer/footerStyle.ts | 15 ++++++ crabfit-frontend/src/pages/Create/Create.tsx | 52 +++++++++---------- .../src/pages/Create/createStyle.ts | 12 +---- 6 files changed, 48 insertions(+), 42 deletions(-) diff --git a/crabfit-frontend/public/i18n/en-US/event.json b/crabfit-frontend/public/i18n/en-US/event.json index 08a5df6..569723a 100644 --- a/crabfit-frontend/public/i18n/en-US/event.json +++ b/crabfit-frontend/public/i18n/en-US/event.json @@ -5,6 +5,7 @@ "title": "Click to copy", "copied": "Copied!", "shareinfo": "Copy the link to this page, or share via <1>email.", + "shareinfo_alt": "Click the link above to copy it to your clipboard, or share via <1>email.", "email_subject": "Scheduling {{event_name}}", "email_body": "Visit this link to enter your availabilities:" }, diff --git a/crabfit-frontend/public/i18n/en-US/home.json b/crabfit-frontend/public/i18n/en-US/home.json index 6639efd..a2c7c45 100644 --- a/crabfit-frontend/public/i18n/en-US/home.json +++ b/crabfit-frontend/public/i18n/en-US/home.json @@ -34,10 +34,10 @@ "button": "Create", "errors": { - "no_dates": "You haven't selected any dates!", + "no_dates": "There aren't any dates selected", "same_times": "The start and end times can't be the same", - "no_time": "You don't have any time selected", - "unknown": "An error ocurred while creating the event. Please try again later." + "no_time": "There isn't any time selected", + "unknown": "Something went wrong. Please try again later." } }, "offline": "You can't create a Crab Fit when you don't have an internet connection. Please make sure you're connected.", diff --git a/crabfit-frontend/src/components/Footer/Footer.tsx b/crabfit-frontend/src/components/Footer/Footer.tsx index ab3c515..cbbfcef 100644 --- a/crabfit-frontend/src/components/Footer/Footer.tsx +++ b/crabfit-frontend/src/components/Footer/Footer.tsx @@ -4,12 +4,12 @@ import { useTranslation } from 'react-i18next'; import { Donate } from 'components'; import { Wrapper, Link } from './footerStyle'; -const Footer = () => { +const Footer = (props) => { const [donateMode, setDonateMode] = useState(false); const { t } = useTranslation('common'); return ( -