& {
- sound: boolean;
- keyboardShortcuts: boolean;
- submitNewAbout: (formValues: FormValues) => void;
- t: TFunction;
- toggleSoundMode: (sound: boolean) => void;
- toggleKeyboardShortcuts: (keyboardShortcuts: boolean) => void;
- };
+type AboutProps = Omit<
+ CamperProps,
+ | 'linkedin'
+ | 'joinDate'
+ | 'isDonating'
+ | 'githubProfile'
+ | 'twitter'
+ | 'website'
+ | 'yearsTopContributor'
+> & {
+ t: TFunction;
+ submitNewAbout: (formValues: FormValues) => void;
+ setIsEditing: (isEditing: boolean) => void;
+};
type FormValues = Pick
;
@@ -81,6 +72,10 @@ class AboutSettings extends Component {
};
}
+ toggleEditing = () => {
+ this.props.setIsEditing(false);
+ };
+
componentDidUpdate() {
const { name, location, picture, about } = this.props;
const { formValues, formClicked } = this.state;
@@ -119,10 +114,12 @@ class AboutSettings extends Component {
const { formValues } = this.state;
const { submitNewAbout } = this.props;
if (this.state.isPictureUrlValid === true && !this.isFormPristine()) {
+ this.toggleEditing();
return this.setState({ formClicked: true }, () =>
submitNewAbout(formValues)
);
} else {
+ this.toggleEditing();
return false;
}
};
@@ -198,20 +195,9 @@ class AboutSettings extends Component {
const {
formValues: { name, location, picture, about }
} = this.state;
- const {
- currentTheme,
- sound,
- keyboardShortcuts,
- username,
- t,
- toggleNightMode,
- toggleSoundMode,
- toggleKeyboardShortcuts
- } = this.props;
+ const { t } = this.props;
return (
<>
-
-
{t('settings.headings.personal-info')}
-
-
-
-
-
-
-
);
}
diff --git a/client/src/components/profile/components/bio.tsx b/client/src/components/profile/components/bio.tsx
index aee5b1df023..3ae910199b8 100644
--- a/client/src/components/profile/components/bio.tsx
+++ b/client/src/components/profile/components/bio.tsx
@@ -1,12 +1,16 @@
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCalendar, faLocationDot } from '@fortawesome/free-solid-svg-icons';
+import {
+ faCalendar,
+ faLocationDot,
+ faPen
+} from '@fortawesome/free-solid-svg-icons';
import { useTranslation } from 'react-i18next';
+import { Button } from '@freecodecamp/ui';
import { AvatarRenderer, FullWidthRow, Spacer } from '../../helpers';
import { parseDate } from './utils';
import SocialIcons from './social-icons';
import { type CamperProps } from './camper';
-
const Bio = ({
joinDate,
location,
@@ -19,7 +23,9 @@ const Bio = ({
website,
isDonating,
yearsTopContributor,
- picture
+ picture,
+ setIsEditing,
+ isSessionUser
}: CamperProps) => {
const { t } = useTranslation();
@@ -35,7 +41,19 @@ const Bio = ({
picture={picture}
/>
@@ -56,6 +60,8 @@ function Camper({
isDonating={isDonating}
yearsTopContributor={yearsTopContributor}
picture={picture}
+ setIsEditing={setIsEditing}
+ isSessionUser={isSessionUser}
/>
{(isDonating || isTopContributor) && (
diff --git a/client/src/components/settings/internet.tsx b/client/src/components/profile/components/internet.tsx
similarity index 95%
rename from client/src/components/settings/internet.tsx
rename to client/src/components/profile/components/internet.tsx
index 52da7446991..a0fb36c11db 100644
--- a/client/src/components/settings/internet.tsx
+++ b/client/src/components/profile/components/internet.tsx
@@ -12,11 +12,11 @@ import {
type FormGroupProps
} from '@freecodecamp/ui';
-import { maybeUrlRE } from '../../utils';
+import { maybeUrlRE } from '../../../utils';
-import { FullWidthRow } from '../helpers';
-import BlockSaveButton from '../helpers/form/block-save-button';
-import SectionHeader from './section-header';
+import { FullWidthRow } from '../../helpers';
+import BlockSaveButton from '../../helpers/form/block-save-button';
+import SectionHeader from '../../settings/section-header';
export interface Socials {
githubProfile: string;
@@ -28,6 +28,7 @@ export interface Socials {
interface InternetProps extends Socials {
t: TFunction;
updateSocials: (formValues: Socials) => void;
+ setIsEditing: (isEditing: boolean) => void;
}
type InternetState = {
@@ -61,6 +62,10 @@ class InternetSettings extends Component