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.headings.privacy')}

{t('settings.privacy')}

-
+ +
diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 852a3a99a68..0437e42ebe6 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -53,11 +53,12 @@ Cypress.Commands.add('toggleAll', () => { cy.get('#privacy-settings') .find('.toggle-not-active') .each(element => { - return new Cypress.Promise(resolve => { - cy.wrap(element).click().should('have.class', 'toggle-active'); - resolve(); - }); + cy.wrap(element).click().should('have.class', 'toggle-active'); }); + new Cypress.Promise(resolve => { + cy.get('[data-cy=save-privacy-settings]').click(); + resolve(); + }); cy.get('#honesty-policy').find('button').click().wait(300); });