9507729331

Committed 13 Jun 2024 10:41PM UTC coverage: 12.824% (-0.03%) from 12.853%

Build # 9507729331

Build Type

Pull #8150

github

Committed by

web-flow

Commit Message

Merge 100847561 into ce79a747d

Pull Request Pull Request #8150: Updated Edit Profile page to use newer `<CWForm/>` component with newer validations + cleaned up related stale components

Run Details

3843 of 35219 branches covered (10.91%)

Branch coverage included in aggregate %.

0 of 81 new or added lines in 6 files covered. (0.0%)

1 existing line in 1 file now uncovered.

5189 of 35213 relevant lines covered (14.74%)

4.74 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/commonwealth/client/scripts/views/components/EditProfile/EditProfile.tsx

import { notifyError } from 'controllers/app/notifications';
import { linkValidationSchema } from 'helpers/formValidations/common';
import getLinkType from 'helpers/linkType';
import { useFlag } from 'hooks/useFlag';
import useUserLoggedIn from 'hooks/useUserLoggedIn';
import Account from 'models/Account';
import AddressInfo from 'models/AddressInfo';
import MinimumProfile from 'models/MinimumProfile';
import NewProfile from 'models/NewProfile';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import app from 'state';
import {
  useFetchProfileByIdQuery,
  useUpdateProfileByAddressMutation,
} from 'state/api/profiles';
import useUserOnboardingSliderMutationStore from 'state/ui/userTrainingCards';
import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
import { z } from 'zod';
import { PageNotFound } from '../../pages/404';
import { AvatarUpload } from '../Avatar';
import { LinksArray, useLinksArray } from '../LinksArray';
import { PreferenceTags, usePreferenceTags } from '../PreferenceTags';
import { UserTrainingCardTypes } from '../UserTrainingSlider/types';
import {
  CWCoverImageUploader,
  ImageBehavior,
} from '../component_kit/cw_cover_image_uploader';
import { CWDivider } from '../component_kit/cw_divider';
import { CWText } from '../component_kit/cw_text';
import { CWButton } from '../component_kit/new_designs/CWButton';
import CWCircleMultiplySpinner from '../component_kit/new_designs/CWCircleMultiplySpinner';
import { CWForm } from '../component_kit/new_designs/CWForm';
import { CWTag } from '../component_kit/new_designs/CWTag';
import { CWTextInput } from '../component_kit/new_designs/CWTextInput';
import { LinkedAddresses } from '../linked_addresses';
import { ReactQuillEditor } from '../react_quill_editor';
import { deserializeDelta, serializeDelta } from '../react_quill_editor/utils';
import './EditProfile.scss';
import ProfileSection from './Section';
import { editProfileValidation } from './validation';

export type Image = {
  url: string;
  imageBehavior: ImageBehavior;
};

const EditProfile = () => {
  const userOnboardingEnabled = useFlag('userOnboardingEnabled');
  const navigate = useNavigate();
  const { isLoggedIn } = useUserLoggedIn();
  const [profile, setProfile] = useState<NewProfile>();
  const [avatarUrl, setAvatarUrl] = useState();
  const [addresses, setAddresses] = useState<AddressInfo[]>();
  const [account, setAccount] = useState<Account>();
  const [isUploadingProfileImage, setIsUploadingProfileImage] = useState(false);
  const [isUploadingCoverImage, setIsUploadingCoverImage] = useState(false);

  const {
    areLinksValid,
    links,
    onLinkAdd,
    onLinkRemovedAtIndex,
    onLinkUpdatedAtIndex,
    setLinks,
  } = useLinksArray({
    initialLinks: [],
    linkValidation: linkValidationSchema,
  });

  const { preferenceTags, setPreferenceTags, toggleTagFromSelection } =
    usePreferenceTags();

  const { markTrainingActionAsComplete } =
    useUserOnboardingSliderMutationStore();

  const { mutateAsync: updateProfile, isLoading: isUpdatingProfile } =
    useUpdateProfileByAddressMutation({
      addressesWithChainsToUpdate: addresses?.map((a) => ({
        address: a.address,
        chain: a.community.id,
      })),
    });

  const {
    data,
    isLoading: isLoadingProfile,
    error,
    refetch,
  } = useFetchProfileByIdQuery({
    apiCallEnabled: isLoggedIn,
    shouldFetchSelfProfile: true,
  });

  useEffect(() => {
    if (isLoadingProfile) return;

    if (error) {
      setProfile(undefined);
      setAvatarUrl(undefined);
      setPreferenceTags([]);
      setAddresses([]);
      return;
    }

    if (data) {
      setProfile(new NewProfile(data.profile));
      setAvatarUrl(data.profile.avatar_url);
      setPreferenceTags((tags) =>
        [...(tags || [])].map((t) => ({
          ...t,
          isSelected: !!data.tags.find((pt) => pt.id === t.item.id),
        })),
      );
      setLinks(
        (data.profile?.socials || []).map((link) => ({
          value: link,
          canUpdate: true,
          canDelete: true,
        })),
      );
      setAddresses(
        data.addresses.map((a) => {
          try {
            return new AddressInfo({
              id: a.id,
              address: a.address,
              communityId: a.community_id,
              keytype: a.keytype,
              walletId: a.wallet_id,
              walletSsoSource: a.wallet_sso_source,
              ghostAddress: a.ghost_address,
            });
          } catch (err) {
            console.error(`Could not return AddressInfo: "${err}"`);
            return null;
          }
        }),
      );
      return;
    }
  }, [data, isLoadingProfile, error, setPreferenceTags, setLinks]);

  useEffect(() => {
    // need to create an account to pass to AvatarUpload to see last upload
    // not the best solution because address is not always available
    // should refactor AvatarUpload to make it work with new profiles
    // @ts-expect-error <StrictNullChecks/>
    if (addresses?.length > 0) {
      const oldProfile = new MinimumProfile(
        // @ts-expect-error <StrictNullChecks/>
        addresses[0].community.name,
        // @ts-expect-error <StrictNullChecks/>
        addresses[0].address,
      );

      oldProfile.initialize(
        name,
        // @ts-expect-error <StrictNullChecks/>
        addresses[0].address,
        avatarUrl,
        // @ts-expect-error <StrictNullChecks/>
        profile.id,
        // @ts-expect-error <StrictNullChecks/>
        addresses[0].community.name,
        null,
      );

      setAccount(
        new Account({
          // @ts-expect-error <StrictNullChecks/>
          community: addresses[0].community,
          // @ts-expect-error <StrictNullChecks/>
          address: addresses[0].address,
          profile: oldProfile,
          ignoreProfile: false,
        }),
      );
    } else {
      // @ts-expect-error <StrictNullChecks/>
      setAccount(null);
    }
  }, [addresses, avatarUrl, profile]);

  if (isLoadingProfile || isUpdatingProfile || !profile?.id) {
    return (
      <div className="EditProfile full-height">
        <div className="loading-spinner">
          <CWCircleMultiplySpinner />
        </div>
      </div>
    );
  }

  if (error || !profile) {
    return <PageNotFound message="We cannot find profile." />;
  }

  if (!error && profile) {
    const handleSubmit = (values: z.infer<typeof editProfileValidation>) => {
      if (links.filter((x) => x.value).length > 0 ? !areLinksValid() : false) {
        // TODO: fix empty link condition
        return;
      }

      // TODO: fix and add avatarUrl when saving

      const backgroundImage = values.backgroundImg.trim()
        ? JSON.stringify({
            url: values.backgroundImg.trim(),
            imageBehavior: ImageBehavior.Fill, // TODO: add this back in when seleting background image
          })
        : null;
      updateProfile({
        name: values.username.trim(),
        ...(backgroundImage && { backgroundImage }),
        email: values.email.trim(),
        socials: JSON.stringify((links || []).map((link) => link.value.trim())),
        bio: serializeDelta(values.bio),
        tagIds: preferenceTags
          .filter((tag) => tag.isSelected)
          .map((tag) => tag.item.id),
        profileId: profile?.id,
        address: app.user?.activeAccount?.address,
        chain: app.user?.activeAccount?.community?.id,
      })
        .then(() => {
          navigate(`/profile/id/${profile.id}`);

          if (userOnboardingEnabled && links?.length > 0) {
            markTrainingActionAsComplete(
              UserTrainingCardTypes.FinishProfile,
              profile.id,
            );
          }
        })
        .catch((err) => {
          notifyError(err?.response?.data?.error || 'Something went wrong.');
        });
    };

    const actionButtons = (
      <div className="buttons-container">
        <div className="buttons">
          <CWButton
            type="button"
            label="Cancel"
            buttonType="secondary"
            buttonWidth="wide"
            disabled={isUploadingProfileImage || isUploadingCoverImage}
            onClick={() => navigate(`/profile/id/${profile.id}`)}
          />
          <CWButton
            type="submit"
            label="Save"
            buttonType="primary"
            buttonWidth="wide"
            disabled={isUploadingProfileImage || isUploadingCoverImage}
          />
        </div>
      </div>
    );

    return (
      <CWPageLayout>
        <div className="EditProfile">
          <CWForm
            initialValues={{
              username: data.profile.profile_name || '',
              email: data.profile.email || '',
              backgroundImg: data.profile.background_image || '',
              bio: deserializeDelta(data?.profile?.bio),
            }}
            onSubmit={handleSubmit}
            validationSchema={editProfileValidation}
          >
            <div>
              <div>
                <CWText type="h3" fontWeight="medium">
                  Edit Profile
                </CWText>
                <CWText type="b1">
                  Add or change your general info and customize your profile.
                </CWText>
              </div>
              {actionButtons}
            </div>
            <CWDivider />
            <ProfileSection
              title="General Info"
              description="Let your community and others get to know you by sharing a bit about yourself."
              className="input-controls"
            >
              <div className="profile-image-section">
                <CWText type="caption" fontWeight="medium">
                  Profile image
                </CWText>
                <CWText type="caption" className="description">
                  Select an image from your files to upload
                </CWText>
                <div className="image-upload">
                  <AvatarUpload
                    scope="user"
                    account={account}
                    uploadStartedCallback={() =>
                      setIsUploadingProfileImage(true)
                    }
                    uploadCompleteCallback={(files) => {
                      setIsUploadingProfileImage(false);
                      files.forEach((f) => {
                        if (!f.uploadURL) return;
                        const url = f.uploadURL.replace(/\?.*/, '').trim();
                        setAvatarUrl(url);
                      });
                    }}
                  />
                </div>
              </div>
              <CWTextInput
                fullWidth
                placeholder="Enter your user name"
                label="Username"
                name="username" // TODO: unique username
                hookToForm
              />
              <CWTextInput
                fullWidth
                placeholder="Add an email address"
                label="Email"
                name="email"
                hookToForm
              />
              <ReactQuillEditor
                label="Bio"
                className="editor"
                hookToForm
                name="bio"
              />
              <CWDivider />
              <LinksArray
                label="Social links"
                addLinkButtonCTA="+ Add social link"
                links={links.map((link) => ({
                  ...link,
                  customElementAfterLink:
                    link.value && getLinkType(link.value, 'website') ? (
                      <CWTag
                        label={getLinkType(link.value, 'website')}
                        type="group"
                        classNames="link-type"
                      />
                    ) : (
                      <></>
                    ),
                }))}
                onLinkAdd={onLinkAdd}
                onLinkUpdatedAtIndex={onLinkUpdatedAtIndex}
                onLinkRemovedAtIndex={onLinkRemovedAtIndex}
                canAddLinks={links.length <= 5}
              />
            </ProfileSection>
            <ProfileSection
              title="Personalize Your Profile"
              description="Express yourself through imagery."
            >
              <CWText fontWeight="medium">Add a background image </CWText>
              <CWCoverImageUploader
                name="backgroundImg"
                hookToForm
                enableGenerativeAI
                showUploadAndGenerateText
                canSelectImageBehaviour={false}
                defaultImageBehavior={ImageBehavior.Fill}
                onImageProcessStatusChange={setIsUploadingCoverImage}
              />
            </ProfileSection>
            <ProfileSection
              title="Linked addresses"
              description="Manage your addresses."
            >
              <LinkedAddresses
                // @ts-expect-error <StrictNullChecks/>
                addresses={addresses}
                profile={profile}
                refreshProfiles={(address: string) => {
                  refetch().catch(console.error);
                  app.user.removeAddress(
                    // @ts-expect-error <StrictNullChecks/>
                    addresses.find((a) => a.address === address),
                  );
                }}
              />
              <CWText type="caption" fontWeight="medium">
                Link new addresses via the profile dropdown menu within a
                community
              </CWText>
            </ProfileSection>
            {userOnboardingEnabled && (
              <ProfileSection
                title="Preferences"
                description="Set your preferences to enhance your experience"
              >
                <div className="preferences-header">
                  <CWText type="h4" fontWeight="semiBold">
                    What are you interested in?
                  </CWText>
                  <CWText type="h5">(Select all that apply)</CWText>
                </div>
                <PreferenceTags
                  preferenceTags={preferenceTags}
                  onTagClick={toggleTagFromSelection}
                />
              </ProfileSection>
            )}
            {actionButtons}
          </CWForm>
        </div>
      </CWPageLayout>
    );
  }
};

export default EditProfile;

1	import { notifyError } from 'controllers/app/notifications';
2	import { linkValidationSchema } from 'helpers/formValidations/common';
3	import getLinkType from 'helpers/linkType';
4	import { useFlag } from 'hooks/useFlag';
5	import useUserLoggedIn from 'hooks/useUserLoggedIn';
6	import Account from 'models/Account';
7	import AddressInfo from 'models/AddressInfo';
8	import MinimumProfile from 'models/MinimumProfile';
9	import NewProfile from 'models/NewProfile';
10	import React, { useEffect, useState } from 'react';
11	import { useNavigate } from 'react-router-dom';
12	import app from 'state';
13	import {
14	useFetchProfileByIdQuery,
15	useUpdateProfileByAddressMutation,
16	} from 'state/api/profiles';
17	import useUserOnboardingSliderMutationStore from 'state/ui/userTrainingCards';
18	import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
19	import { z } from 'zod';
20	import { PageNotFound } from '../../pages/404';
21	import { AvatarUpload } from '../Avatar';
22	import { LinksArray, useLinksArray } from '../LinksArray';
23	import { PreferenceTags, usePreferenceTags } from '../PreferenceTags';
24	import { UserTrainingCardTypes } from '../UserTrainingSlider/types';
25	import {
26	CWCoverImageUploader,
27	ImageBehavior,
28	} from '../component_kit/cw_cover_image_uploader';
29	import { CWDivider } from '../component_kit/cw_divider';
30	import { CWText } from '../component_kit/cw_text';
31	import { CWButton } from '../component_kit/new_designs/CWButton';
32	import CWCircleMultiplySpinner from '../component_kit/new_designs/CWCircleMultiplySpinner';
33	import { CWForm } from '../component_kit/new_designs/CWForm';
34	import { CWTag } from '../component_kit/new_designs/CWTag';
35	import { CWTextInput } from '../component_kit/new_designs/CWTextInput';
36	import { LinkedAddresses } from '../linked_addresses';
37	import { ReactQuillEditor } from '../react_quill_editor';
38	import { deserializeDelta, serializeDelta } from '../react_quill_editor/utils';
39	import './EditProfile.scss';
40	import ProfileSection from './Section';
41	import { editProfileValidation } from './validation';
42
43	export type Image = {
44	url: string;
45	imageBehavior: ImageBehavior;
46	};
47
NEW 48	const EditProfile = () => {	×
NEW 49	const userOnboardingEnabled = useFlag('userOnboardingEnabled');	×
NEW 50	const navigate = useNavigate();	×
NEW 51	const { isLoggedIn } = useUserLoggedIn();	×
NEW 52	const [profile, setProfile] = useState<NewProfile>();	×
NEW 53	const [avatarUrl, setAvatarUrl] = useState();	×
NEW 54	const [addresses, setAddresses] = useState<AddressInfo[]>();	×
NEW 55	const [account, setAccount] = useState<Account>();	×
NEW 56	const [isUploadingProfileImage, setIsUploadingProfileImage] = useState(false);	×
NEW 57	const [isUploadingCoverImage, setIsUploadingCoverImage] = useState(false);	×
58
59	const {
60	areLinksValid,
61	links,
62	onLinkAdd,
63	onLinkRemovedAtIndex,
64	onLinkUpdatedAtIndex,
65	setLinks,
NEW 66	} = useLinksArray({	×
67	initialLinks: [],
68	linkValidation: linkValidationSchema,
69	});
70
71	const { preferenceTags, setPreferenceTags, toggleTagFromSelection } =
NEW 72	usePreferenceTags();	×
73
74	const { markTrainingActionAsComplete } =
NEW 75	useUserOnboardingSliderMutationStore();	×
76
77	const { mutateAsync: updateProfile, isLoading: isUpdatingProfile } =
NEW 78	useUpdateProfileByAddressMutation({	×
NEW 79	addressesWithChainsToUpdate: addresses?.map((a) => ({	×
80	address: a.address,
81	chain: a.community.id,
82	})),
83	});
84
85	const {
86	data,
87	isLoading: isLoadingProfile,
88	error,
89	refetch,
NEW 90	} = useFetchProfileByIdQuery({	×
91	apiCallEnabled: isLoggedIn,
92	shouldFetchSelfProfile: true,
93	});
94
NEW 95	useEffect(() => {	×
NEW 96	if (isLoadingProfile) return;	×
97
NEW 98	if (error) {	×
NEW 99	setProfile(undefined);	×
NEW 100	setAvatarUrl(undefined);	×
NEW 101	setPreferenceTags([]);	×
NEW 102	setAddresses([]);	×
NEW 103	return;	×
104	}
105
NEW 106	if (data) {	×
NEW 107	setProfile(new NewProfile(data.profile));	×
NEW 108	setAvatarUrl(data.profile.avatar_url);	×
NEW 109	setPreferenceTags((tags) =>	×
NEW 110	[...(tags \|\| [])].map((t) => ({	×
111	...t,
NEW 112	isSelected: !!data.tags.find((pt) => pt.id === t.item.id),	×
113	})),
114	);
NEW 115	setLinks(	×
NEW 116	(data.profile?.socials \|\| []).map((link) => ({	×
117	value: link,
118	canUpdate: true,
119	canDelete: true,
120	})),
121	);
NEW 122	setAddresses(	×
123	data.addresses.map((a) => {
NEW 124	try {	×
NEW 125	return new AddressInfo({	×
126	id: a.id,
127	address: a.address,
128	communityId: a.community_id,
129	keytype: a.keytype,
130	walletId: a.wallet_id,
131	walletSsoSource: a.wallet_sso_source,
132	ghostAddress: a.ghost_address,
133	});
134	} catch (err) {
NEW 135	console.error(`Could not return AddressInfo: "${err}"`);	×
NEW 136	return null;	×
137	}
138	}),
139	);
NEW 140	return;	×
141	}
142	}, [data, isLoadingProfile, error, setPreferenceTags, setLinks]);
143
NEW 144	useEffect(() => {	×
145	// need to create an account to pass to AvatarUpload to see last upload
146	// not the best solution because address is not always available
147	// should refactor AvatarUpload to make it work with new profiles
148	// @ts-expect-error <StrictNullChecks/>
NEW 149	if (addresses?.length > 0) {	×
NEW 150	const oldProfile = new MinimumProfile(	×
151	// @ts-expect-error <StrictNullChecks/>
152	addresses[0].community.name,
153	// @ts-expect-error <StrictNullChecks/>
154	addresses[0].address,
155	);
156
NEW 157	oldProfile.initialize(	×
158	name,
159	// @ts-expect-error <StrictNullChecks/>
160	addresses[0].address,
161	avatarUrl,
162	// @ts-expect-error <StrictNullChecks/>
163	profile.id,
164	// @ts-expect-error <StrictNullChecks/>
165	addresses[0].community.name,
166	null,
167	);
168
NEW 169	setAccount(	×
170	new Account({
171	// @ts-expect-error <StrictNullChecks/>
172	community: addresses[0].community,
173	// @ts-expect-error <StrictNullChecks/>
174	address: addresses[0].address,
175	profile: oldProfile,
176	ignoreProfile: false,
177	}),
178	);
179	} else {
180	// @ts-expect-error <StrictNullChecks/>
NEW 181	setAccount(null);	×
182	}
183	}, [addresses, avatarUrl, profile]);
184
NEW 185	if (isLoadingProfile \|\| isUpdatingProfile \|\| !profile?.id) {	×
NEW 186	return (	×
187	<div className="EditProfile full-height">
188	<div className="loading-spinner">
189	<CWCircleMultiplySpinner />
190	</div>
191	</div>
192	);
193	}
194
NEW 195	if (error \|\| !profile) {	×
NEW 196	return <PageNotFound message="We cannot find profile." />;	×
197	}
198
NEW 199	if (!error && profile) {	×
NEW 200	const handleSubmit = (values: z.infer<typeof editProfileValidation>) => {	×
NEW 201	if (links.filter((x) => x.value).length > 0 ? !areLinksValid() : false) {	×
202	// TODO: fix empty link condition
NEW 203	return;	×
204	}
205
206	// TODO: fix and add avatarUrl when saving
207
NEW 208	const backgroundImage = values.backgroundImg.trim()	×
209	? JSON.stringify({
210	url: values.backgroundImg.trim(),
211	imageBehavior: ImageBehavior.Fill, // TODO: add this back in when seleting background image
212	})
213	: null;
NEW 214	updateProfile({	×
215	name: values.username.trim(),
216	...(backgroundImage && { backgroundImage }),	×
217	email: values.email.trim(),
NEW 218	socials: JSON.stringify((links \|\| []).map((link) => link.value.trim())),	×
219	bio: serializeDelta(values.bio),
220	tagIds: preferenceTags
NEW 221	.filter((tag) => tag.isSelected)	×
NEW 222	.map((tag) => tag.item.id),	×
223	profileId: profile?.id,
224	address: app.user?.activeAccount?.address,
225	chain: app.user?.activeAccount?.community?.id,
226	})
227	.then(() => {
NEW 228	navigate(`/profile/id/${profile.id}`);	×
229
NEW 230	if (userOnboardingEnabled && links?.length > 0) {	×
NEW 231	markTrainingActionAsComplete(	×
232	UserTrainingCardTypes.FinishProfile,
233	profile.id,
234	);
235	}
236	})
237	.catch((err) => {
NEW 238	notifyError(err?.response?.data?.error \|\| 'Something went wrong.');	×
239	});
240	};
241
242	const actionButtons = (
NEW 243	<div className="buttons-container">	×
244	<div className="buttons">
245	<CWButton
246	type="button"
247	label="Cancel"
248	buttonType="secondary"
249	buttonWidth="wide"
250	disabled={isUploadingProfileImage \|\| isUploadingCoverImage}	×
NEW 251	onClick={() => navigate(`/profile/id/${profile.id}`)}	×
252	/>
253	<CWButton
254	type="submit"
255	label="Save"
256	buttonType="primary"
257	buttonWidth="wide"
258	disabled={isUploadingProfileImage \|\| isUploadingCoverImage}	×
259	/>
260	</div>
261	</div>
262	);
263
NEW 264	return (	×
265	<CWPageLayout>
266	<div className="EditProfile">
267	<CWForm
268	initialValues={{
269	username: data.profile.profile_name \|\| '',	×
270	email: data.profile.email \|\| '',	×
271	backgroundImg: data.profile.background_image \|\| '',	×
272	bio: deserializeDelta(data?.profile?.bio),
273	}}
274	onSubmit={handleSubmit}
275	validationSchema={editProfileValidation}
276	>
277	<div>
278	<div>
279	<CWText type="h3" fontWeight="medium">
280	Edit Profile
281	</CWText>
282	<CWText type="b1">
283	Add or change your general info and customize your profile.
284	</CWText>
285	</div>
286	{actionButtons}
287	</div>
288	<CWDivider />
289	<ProfileSection
290	title="General Info"
291	description="Let your community and others get to know you by sharing a bit about yourself."
292	className="input-controls"
293	>
294	<div className="profile-image-section">
295	<CWText type="caption" fontWeight="medium">
296	Profile image
297	</CWText>
298	<CWText type="caption" className="description">
299	Select an image from your files to upload
300	</CWText>
301	<div className="image-upload">
302	<AvatarUpload
303	scope="user"
304	account={account}
305	uploadStartedCallback={() =>
NEW 306	setIsUploadingProfileImage(true)	×
307	}
308	uploadCompleteCallback={(files) => {
NEW 309	setIsUploadingProfileImage(false);	×
NEW 310	files.forEach((f) => {	×
NEW 311	if (!f.uploadURL) return;	×
NEW 312	const url = f.uploadURL.replace(/\?.*/, '').trim();	×
NEW 313	setAvatarUrl(url);	×
314	});
315	}}
316	/>
317	</div>
318	</div>
319	<CWTextInput
320	fullWidth
321	placeholder="Enter your user name"
322	label="Username"
323	name="username" // TODO: unique username
324	hookToForm
325	/>
326	<CWTextInput
327	fullWidth
328	placeholder="Add an email address"
329	label="Email"
330	name="email"
331	hookToForm
332	/>
333	<ReactQuillEditor
334	label="Bio"
335	className="editor"
336	hookToForm
337	name="bio"
338	/>
339	<CWDivider />
340	<LinksArray
341	label="Social links"
342	addLinkButtonCTA="+ Add social link"
NEW 343	links={links.map((link) => ({	×
344	...link,
345	customElementAfterLink:
346	link.value && getLinkType(link.value, 'website') ? (	×
347	<CWTag
348	label={getLinkType(link.value, 'website')}
349	type="group"
350	classNames="link-type"
351	/>
352	) : (
353	<></>
354	),
355	}))}
356	onLinkAdd={onLinkAdd}
357	onLinkUpdatedAtIndex={onLinkUpdatedAtIndex}
358	onLinkRemovedAtIndex={onLinkRemovedAtIndex}
359	canAddLinks={links.length <= 5}
360	/>
361	</ProfileSection>
362	<ProfileSection
363	title="Personalize Your Profile"
364	description="Express yourself through imagery."
365	>
366	<CWText fontWeight="medium">Add a background image </CWText>
367	<CWCoverImageUploader
368	name="backgroundImg"
369	hookToForm
370	enableGenerativeAI
371	showUploadAndGenerateText
372	canSelectImageBehaviour={false}
373	defaultImageBehavior={ImageBehavior.Fill}
374	onImageProcessStatusChange={setIsUploadingCoverImage}
375	/>
376	</ProfileSection>
377	<ProfileSection
378	title="Linked addresses"
379	description="Manage your addresses."
380	>
381	<LinkedAddresses
382	// @ts-expect-error <StrictNullChecks/>
383	addresses={addresses}
384	profile={profile}
385	refreshProfiles={(address: string) => {
NEW 386	refetch().catch(console.error);	×
NEW 387	app.user.removeAddress(	×
388	// @ts-expect-error <StrictNullChecks/>
NEW 389	addresses.find((a) => a.address === address),	×
390	);
391	}}
392	/>
393	<CWText type="caption" fontWeight="medium">
394	Link new addresses via the profile dropdown menu within a
395	community
396	</CWText>
397	</ProfileSection>
398	{userOnboardingEnabled && (	×
399	<ProfileSection
400	title="Preferences"
401	description="Set your preferences to enhance your experience"
402	>
403	<div className="preferences-header">
404	<CWText type="h4" fontWeight="semiBold">
405	What are you interested in?
406	</CWText>
407	<CWText type="h5">(Select all that apply)</CWText>
408	</div>
409	<PreferenceTags
410	preferenceTags={preferenceTags}
411	onTagClick={toggleTagFromSelection}
412	/>
413	</ProfileSection>
414	)}
415	{actionButtons}
416	</CWForm>
417	</div>
418	</CWPageLayout>
419	);
420	}
421	};
422
423	export default EditProfile;

hicommonwealth / commonwealth / 9507729331

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous