diff --git a/src/components/account-info.css b/src/components/account-info.css index 8811c652..a0ef6ce2 100644 --- a/src/components/account-info.css +++ b/src/components/account-info.css @@ -781,3 +781,33 @@ } } } + +#edit-profile-container { + p { + margin-block: 8px; + } + + label { + input, + textarea { + display: block; + width: 100%; + } + + textarea { + resize: vertical; + min-height: 5em; + max-height: 50vh; + } + } + + footer { + display: flex; + justify-content: space-between; + padding: 8px 0; + + * { + vertical-align: middle; + } + } +} diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx index 13402ff6..4fd29301 100644 --- a/src/components/account-info.jsx +++ b/src/components/account-info.jsx @@ -341,6 +341,17 @@ function AccountInfo({ [standalone, id, statusesCount], ); + const onProfileUpdate = useCallback( + (newAccount) => { + if (newAccount.id === id) { + console.log('Updated account info', newAccount); + setInfo(newAccount); + states.accounts[`${newAccount.id}@${instance}`] = newAccount; + } + }, + [id, instance], + ); + return (
@@ -809,8 +822,10 @@ const FAMILIAR_FOLLOWERS_LIMIT = 3; function RelatedActions({ info, instance, + standalone, authenticated, onRelationshipChange = () => {}, + onProfileUpdate = () => {}, }) { if (!info) return null; const { @@ -921,6 +936,7 @@ function RelatedActions({ const [showTranslatedBio, setShowTranslatedBio] = useState(false); const [showAddRemoveLists, setShowAddRemoveLists] = useState(false); const [showPrivateNoteModal, setShowPrivateNoteModal] = useState(false); + const [showEditProfile, setShowEditProfile] = useState(false); const [lists, setLists] = useState([]); return ( @@ -1341,6 +1357,19 @@ function RelatedActions({ )} + {currentAuthenticated && isSelf && standalone && ( + <> + + { + setShowEditProfile(true); + }} + > + + Edit profile + + + )} {import.meta.env.DEV && currentAuthenticated && isSelf && ( <> @@ -1482,6 +1511,22 @@ function RelatedActions({ /> )} + {!!showEditProfile && ( + { + setShowEditProfile(false); + }} + > + { + setShowEditProfile(false); + if (state === 'success' && account) { + onProfileUpdate(account); + } + }} + /> + + )} ); } @@ -1769,4 +1814,112 @@ function PrivateNoteSheet({ ); } +function EditProfileSheet({ onClose = () => {} }) { + const { masto } = api(); + const [uiState, setUIState] = useState('loading'); + const [account, setAccount] = useState(null); + + useEffect(() => { + (async () => { + try { + const acc = await masto.v1.accounts.verifyCredentials(); + setAccount(acc); + setUIState('default'); + } catch (e) { + console.error(e); + setUIState('error'); + } + })(); + }, []); + + console.log('EditProfileSheet', account); + const { displayName, source } = account || {}; + const { note } = source || {}; + + return ( +
+ {!!onClose && ( + + )} +
+ Edit profile +
+
+ {uiState === 'loading' ? ( +

+ +

+ ) : ( +
{ + e.preventDefault(); + const formData = new FormData(e.target); + const displayName = formData.get('display_name'); + const note = formData.get('note'); + (async () => { + try { + const newAccount = await masto.v1.accounts.updateCredentials({ + displayName, + note, + }); + console.log('updated account', newAccount); + onClose?.({ + state: 'success', + account: newAccount, + }); + } catch (e) { + console.error(e); + alert(e?.message || 'Unable to update profile.'); + } + })(); + }} + > +

+ +

+

+