diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json index 1a1b483167e..571a1760949 100644 --- a/client/i18n/locales/english/translations.json +++ b/client/i18n/locales/english/translations.json @@ -101,7 +101,7 @@ }, "settings": { "share-projects": "Share your non-freeCodeCamp projects, articles or accepted pull requests.", - "privacy": "The settings in this section enable you to control what is shown on your freeCodeCamp public portfolio.", + "privacy": "The settings in this section enable you to control what is shown on your freeCodeCamp public portfolio. Press save to save your changes.", "data": "To see what data we hold on your account, click the \"Download your data\" button below", "disabled": "Your certifications will be disabled, if set to private.", "private-name": "Your name will not appear on your certifications, if this is set to private.", diff --git a/client/src/components/settings/privacy.tsx b/client/src/components/settings/privacy.tsx index ba557391e2f..5c1f551d7de 100644 --- a/client/src/components/settings/privacy.tsx +++ b/client/src/components/settings/privacy.tsx @@ -1,5 +1,5 @@ import { Button, Form } from '@freecodecamp/react-bootstrap'; -import React from 'react'; +import React, { useState } from 'react'; import { TFunction, withTranslation } from 'react-i18next'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; @@ -37,42 +37,34 @@ function PrivacySettings({ t, user }: PrivacyProps): JSX.Element { - function handleSubmit(e: React.FormEvent): void { - e.preventDefault(); - } + const [privacyValues, setPrivacyValues] = useState(user.profileUI); + const [madeChanges, setMadeChanges] = useState(false); function toggleFlag(flag: string): () => void { return () => { - const privacyValues = { ...user.profileUI }; privacyValues[flag as keyof ProfileUI] = !privacyValues[flag as keyof ProfileUI]; - submitProfileUI(privacyValues); + setMadeChanges(true); + setPrivacyValues({ ...privacyValues }); }; } - const { - isLocked = true, - showAbout = false, - showCerts = false, - showDonation = false, - showHeatMap = false, - showLocation = false, - showName = false, - showPoints = false, - showPortfolio = false, - showTimeLine = false - } = user.profileUI; + function submitNewProfileSettings(e: React.FormEvent) { + e.preventDefault(); + submitProfileUI(privacyValues); + setMadeChanges(false); + } return (
{t('settings.privacy')}
-