diff --git a/web/components/profile/block-user.tsx b/web/components/profile/block-user.tsx index 96b772ee..69587263 100644 --- a/web/components/profile/block-user.tsx +++ b/web/components/profile/block-user.tsx @@ -5,6 +5,7 @@ import { withTracking } from 'web/lib/service/analytics' import { toast } from 'react-hot-toast' import { PrivateUser, User } from 'common/user' import { api } from 'web/lib/api' +import { useT } from 'web/lib/locale' export const BlockUser = (props: { user: User @@ -13,6 +14,7 @@ export const BlockUser = (props: { }) => { const { user, currentUser, closeModal } = props const { id: userId } = user + const t = useT() const isBlocked = currentUser.blockedUserIds?.includes(userId) @@ -20,16 +22,19 @@ export const BlockUser = (props: { const onBlock = async () => { await toast.promise(api('user/by-id/:id/block', { id: user.id }), { - loading: 'Blocking...', - success: `You'll no longer see content from this user`, - error: 'Error blocking user', + loading: t('block_user.toast.loading', 'Blocking...'), + success: t( + 'block_user.toast.success', + "You'll no longer see content from this user" + ), + error: t('block_user.toast.error', 'Error blocking user'), }) } return ( {isBlocked ? ( @@ -39,7 +44,7 @@ export const BlockUser = (props: { className="my-auto" onClick={withTracking(onUnblock, 'unblock')} > - Unblock {user.name} + {t('block_user.unblock', 'Unblock')} {user.name} ) : ( )} diff --git a/web/components/profile/delete-yourself.tsx b/web/components/profile/delete-yourself.tsx index fd2cae69..c8d311f7 100644 --- a/web/components/profile/delete-yourself.tsx +++ b/web/components/profile/delete-yourself.tsx @@ -7,34 +7,37 @@ import {Col} from '../layout/col' import {Input} from '../widgets/input' import {Title} from '../widgets/title' import {deleteAccount} from "web/lib/util/delete"; +import {useT} from 'web/lib/locale' export function DeleteYourselfButton() { const [deleteAccountConfirmation, setDeleteAccountConfirmation] = useState('') + const t = useT() + const confirmPhrase = t('deleteyourself.confirm_phrase', 'delete my account') return ( , color: 'red', }} submitBtn={{ - label: 'Delete account', + label: t('deleteyourself.submit', 'Delete account'), color: - deleteAccountConfirmation == 'delete my account' ? 'red' : 'gray', + deleteAccountConfirmation == confirmPhrase ? 'red' : 'gray', }} onSubmitWithSuccess={async () => { - if (deleteAccountConfirmation == 'delete my account') { + if (deleteAccountConfirmation == confirmPhrase) { toast .promise(deleteAccount(), { - loading: 'Deleting account...', + loading: t('deleteyourself.toast.loading', 'Deleting account...'), success: () => { router.push('/') - return 'Your account has been deleted.' + return t('deleteyourself.toast.success', 'Your account has been deleted.') }, error: () => { - return 'Failed to delete account.' + return t('deleteyourself.toast.error', 'Failed to delete account.') }, }) .then(() => { @@ -48,14 +51,16 @@ export function DeleteYourselfButton() { }} > - Are you sure? + {t('deleteyourself.title', 'Are you sure?')}
- Deleting your account means you will no longer be able to use your - account. You will lose access to all of your data. + {t( + 'deleteyourself.description', + 'Deleting your account means you will no longer be able to use your account. You will lose access to all of your data.' + )}
setDeleteAccountConfirmation(e.target.value)} diff --git a/web/components/profile/profile-header.tsx b/web/components/profile/profile-header.tsx index 8000d9a7..011a297f 100644 --- a/web/components/profile/profile-header.tsx +++ b/web/components/profile/profile-header.tsx @@ -21,6 +21,7 @@ import {VisibilityConfirmationModal} from './visibility-confirmation-modal' import toast from "react-hot-toast"; import {StarButton} from "web/components/widgets/star-button"; import {disableProfile} from "web/lib/util/disable"; +import {useT} from 'web/lib/locale' export default function ProfileHeader(props: { user: User @@ -46,6 +47,7 @@ export default function ProfileHeader(props: { const isCurrentUser = currentUser?.id === user.id const [showVisibilityModal, setShowVisibilityModal] = useState(false) const disabled = profile.disabled + const t = useT() console.debug('ProfileProfileHeader', {user, profile, userActivity, currentUser}) @@ -55,7 +57,7 @@ export default function ProfileHeader(props: { {currentUser && isCurrentUser && disabled && -
You disabled your profile, so no one else can access it.
} +
{t('profile.header.disabled_notice', 'You disabled your profile, so no one else can access it.')}
} {/*{!isCurrentUser && }*/} @@ -98,8 +100,8 @@ export default function ProfileHeader(props: { { name: profile.visibility === 'member' - ? 'List Profile Publicly' - : 'Limit to Members Only', + ? t('profile.header.menu.list_public', 'List Profile Publicly') + : t('profile.header.menu.limit_members', 'Limit to Members Only'), icon: profile.visibility === 'member' ? ( @@ -109,7 +111,7 @@ export default function ProfileHeader(props: { onClick: () => setShowVisibilityModal(true), }, { - name: disabled ? 'Enable profile' : 'Disable profile', + name: disabled ? t('profile.header.menu.enable_profile', 'Enable profile') : t('profile.header.menu.disable_profile', 'Disable profile'), icon: null, onClick: async () => { const confirmed = true // confirm( @@ -118,12 +120,18 @@ export default function ProfileHeader(props: { if (confirmed) { toast .promise(disableProfile(!disabled), { - loading: disabled ? 'Enabling profile...' : 'Disabling profile...', + loading: disabled + ? t('profile.header.toast.enabling', 'Enabling profile...') + : t('profile.header.toast.disabling', 'Disabling profile...'), success: () => { - return `Profile ${disabled ? 'enabled' : 'disabled'}` + return disabled + ? t('profile.header.toast.enabled', 'Profile enabled') + : t('profile.header.toast.disabled', 'Profile disabled') }, error: () => { - return `Failed to ${disabled ? 'enable' : 'disable'} profile` + return disabled + ? t('profile.header.toast.failed_enable', 'Failed to enable profile') + : t('profile.header.toast.failed_disable', 'Failed to disable profile') }, }) .then(() => { diff --git a/web/components/profile/profile-info.tsx b/web/components/profile/profile-info.tsx index d9635bf9..ac88e16a 100644 --- a/web/components/profile/profile-info.tsx +++ b/web/components/profile/profile-info.tsx @@ -16,6 +16,7 @@ import {Content} from "web/components/widgets/editor"; import {JSONContent} from "@tiptap/core"; import {useUserActivity} from 'web/hooks/use-user-activity' import {UserActivity} from "common/user"; +import {useT} from 'web/lib/locale' export function ProfileInfo(props: { profile: Profile @@ -28,6 +29,7 @@ export function ProfileInfo(props: { console.debug('Rendering Profile for', user.username, user.name, props) const currentUser = useUser() + const t = useT() // const currentProfile = useProfile() // const isCurrentUser = currentUser?.id === user.id @@ -103,7 +105,7 @@ export function ProfileInfo(props: {
- + )} diff --git a/web/components/profile/report-user.tsx b/web/components/profile/report-user.tsx index 5c70ffc7..c07bea22 100644 --- a/web/components/profile/report-user.tsx +++ b/web/components/profile/report-user.tsx @@ -8,15 +8,20 @@ import Textarea from 'react-expanding-textarea' import { toast } from 'react-hot-toast' import { api } from 'web/lib/api' import {randomString} from "common/util/random"; +import { useT } from 'web/lib/locale' export const ReportUser = (props: { user: User; closeModal: () => void }) => { const { user, closeModal } = props + const t = useT() const reportTypes = [ - 'Spam', - 'Inappropriate or objectionable content', - 'Violence or threats', - 'Fraudulent activity', - 'Other', + t('report.user.type.spam', 'Spam'), + t( + 'report.user.type.inappropriate', + 'Inappropriate or objectionable content' + ), + t('report.user.type.violence', 'Violence or threats'), + t('report.user.type.fraud', 'Fraudulent activity'), + t('report.user.type.other', 'Other'), ] const [selectedReportTypes, setSelectedReportTypes] = useState([]) const [otherReportType, setOtherReportType] = useState('') @@ -38,9 +43,9 @@ export const ReportUser = (props: { user: User; closeModal: () => void }) => { 'Reasons: ' + [...selectedReportTypes, otherReportType].join(', '), }), { - loading: 'Reporting...', - success: 'Reported', - error: 'Error reporting user', + loading: t('report.user.toast.loading', 'Reporting...'), + success: t('report.user.toast.success', 'Reported'), + error: t('report.user.toast.error', 'Error reporting user'), } ) .then(() => { @@ -53,18 +58,25 @@ export const ReportUser = (props: { user: User; closeModal: () => void }) => { {hasSubmitted ? ( - Thank you for your report. - We'll review the user and take action if necessary. + {t('report.user.thanks', 'Thank you for your report.')} + + {t( + 'report.user.review_message', + "We'll review the user and take action if necessary." + )} + - + ) : ( <> - Please select the reason(s) for reporting this user and a link to - the content. + {t( + 'report.user.instructions', + 'Please select the reason(s) for reporting this user and a link to the content.' + )} @@ -86,9 +98,10 @@ export const ReportUser = (props: { user: User; closeModal: () => void }) => { ))}