10144759904

Committed 29 Jul 2024 12:58PM UTC coverage: 16.036% (+0.05%) from 15.986%

Build # 10144759904

Build Type

push

github

Committed by

web-flow

Commit Message

Refactors create and update profile api with new model (#8574)

* refactor update

* remove user create with profile

* create command to update users

* fix link, add validation

* fix issues

* fix initializing minimum profile

* fix schema

* fix schema

* fix updates

* fix comments

---------

Co-authored-by: rotorsoft <rotorsoft@outlook.com>

Run Details

3594 of 21067 branches covered (17.06%)

Branch coverage included in aggregate %.

18 of 91 new or added lines in 15 files covered. (19.78%)

3 existing lines in 3 files now uncovered.

4823 of 31420 relevant lines covered (15.35%)

5.07 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 { useUpdateUserMutation } from 'client/scripts/state/api/user';
import { notifyError } from 'controllers/app/notifications';
import { linkValidationSchema } from 'helpers/formValidations/common';
import getLinkType from 'helpers/linkType';
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 { useCommonNavigate } from 'navigation/helpers';
import React, { useEffect, useState } from 'react';
import { useFetchProfileByIdQuery } from 'state/api/profiles';
import useUserStore from 'state/ui/user';
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 navigate = useCommonNavigate();
  const { isLoggedIn } = useUserLoggedIn();
  const user = useUserStore();
  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 [backgroundImageBehaviour, setBackgroundImageBehaviour] =
    useState<ImageBehavior>();

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

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

  const { markTrainingActionAsComplete } =
    useUserOnboardingSliderMutationStore();

  const { mutateAsync: updateUser, isLoading: isUpdatingProfile } =
    useUpdateUserMutation({
      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,
          userId: data.userId,
          isOwner: data.userId === user.id,
        }),
      );
      // @ts-expect-error <StrictNullChecks/>
      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(
        // @ts-expect-error <StrictNullChecks/>
        data.addresses.map((a) => {
          try {
            return new AddressInfo({
              userId: a.user_id!,
              id: a.id!,
              address: a.address,
              communityId: a.community_id!,
              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, user.id]);

  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 address = addresses![0];
      const oldProfile = new MinimumProfile(
        address.address,
        address.community.name,
      );

      oldProfile.initialize(
        profile!.userId,
        profile!.name,
        address.address,
        avatarUrl!,
        address.community.name,
        null,
      );

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

  if (isLoadingProfile || isUpdatingProfile) {
    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) {
        return;
      }

      // TODO: fix and add avatarUrl when saving - https://github.com/hicommonwealth/commonwealth/issues/8151
      const backgroundImage = values.backgroundImg.trim()
        ? JSON.stringify({
            url: values.backgroundImg.trim(),
            imageBehavior: backgroundImageBehaviour,
          })
        : null;

      const updates = {
        id: user.id.toString(),
        profile: {
          name: values.username.trim(),
          email: values.email.trim(),
          bio: serializeDelta(values.bio).trim(),
          background_image: backgroundImage && JSON.parse(backgroundImage),
          avatar_url: avatarUrl,
          socials: (links || [])
            .filter((l) => l.value.trim())
            .map((l) => l.value.trim()),
        },
        tag_ids: preferenceTags
          .filter((tag) => tag.isSelected)
          .map((tag) => tag.item.id),
      };

      updateUser(updates)
        .then(() => {
          navigate(`/profile/id/${user.id}`);

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

hicommonwealth / commonwealth / 10144759904

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