mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-27 19:59:17 +03:00
Code Issues Projects Releases Packages Wiki Activity

Better error state for Account sheet

Browse source 
Some accounts… can't be resolved by the API
This commit is contained in:
Lim Chee Aun 2023-01-26 11:26:24 +08:00
parent 285f8b46f2
commit dda83c7834
1 changed files with 141 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

271
src/components/account.jsx
View file

@ -41,10 +41,8 @@ function Account({ account }) {
setUIState('default'); setUIState('default');
return; return;
} }
alert('Account not found');
setUIState('error'); setUIState('error');
} catch (err) { } catch (err) {
alert(err);
console.error(err); console.error(err);
setUIState('error'); setUIState('error');
} }
@ -123,7 +121,17 @@ function Account({ account }) {
id="account-container" id="account-container"
class={`sheet ${uiState === 'loading' ? 'skeleton' : ''}`} class={`sheet ${uiState === 'loading' ? 'skeleton' : ''}`}
> >
{!info || uiState === 'loading' ? ( {uiState === 'error' && (
<div class="ui-state">
<p>Unable to load account.</p>
<p>
<a href={account} target="_blank">
Go to account page <Icon icon="external" />
</a>
</p>
</div>
)}
{uiState === 'loading' ? (
<> <>
<header> <header>
<Avatar size="xxxl" /> <Avatar size="xxxl" />
@ -142,138 +150,141 @@ function Account({ account }) {
</main> </main>
</> </>
) : ( ) : (
<> info && (
<header> <>
<Avatar url={avatar} size="xxxl" /> <header>
<NameText account={info} showAcct external /> <Avatar url={avatar} size="xxxl" />
</header> <NameText account={info} showAcct external />
<main tabIndex="-1"> </header>
{bot && ( <main tabIndex="-1">
<> {bot && (
<span class="tag"> <>
<Icon icon="bot" /> Automated <span class="tag">
</span> <Icon icon="bot" /> Automated
</> </span>
)} </>
<div
class="note"
onClick={handleAccountLinks()}
dangerouslySetInnerHTML={{
__html: enhanceContent(note, { emojis }),
}}
/>
{fields?.length > 0 && (
<div class="profile-metadata">
{fields.map(({ name, value, verifiedAt }) => (
<div
class={`profile-field ${
verifiedAt ? 'profile-verified' : ''
}`}
key={name}
>
<b>
<span
dangerouslySetInnerHTML={{
__html: emojifyText(name, emojis),
}}
/>{' '}
{!!verifiedAt && <Icon icon="check-circle" size="s" />}
</b>
<p
dangerouslySetInnerHTML={{
__html: enhanceContent(value, { emojis }),
}}
/>
</div>
))}
</div>
)}
<p class="stats">
<span>
<b title={statusesCount}>{shortenNumber(statusesCount)}</b>{' '}
Posts
</span>
<span>
<b title={followingCount}>{shortenNumber(followingCount)}</b>{' '}
Following
</span>
<span>
<b title={followersCount}>{shortenNumber(followersCount)}</b>{' '}
Followers
</span>
{!!createdAt && (
<span>
Joined:{' '}
<b>
<time datetime={createdAt}>
{Intl.DateTimeFormat('en', {
year: 'numeric',
month: 'short',
day: 'numeric',
}).format(new Date(createdAt))}
</time>
</b>
</span>
)} )}
</p> <div
<p class="actions"> class="note"
{followedBy ? <span class="tag">Following you</span> : <span />}{' '} onClick={handleAccountLinks()}
{relationshipUIState !== 'loading' && relationship && ( dangerouslySetInnerHTML={{
<button __html: enhanceContent(note, { emojis }),
type="button" }}
class={`${following || requested ? 'light swap' : ''}`} />
data-swap-state={following || requested ? 'danger' : ''} {fields?.length > 0 && (
disabled={relationshipUIState === 'loading'} <div class="profile-metadata">
onClick={() => { {fields.map(({ name, value, verifiedAt }) => (
setRelationshipUIState('loading'); <div
(async () => { class={`profile-field ${
try { verifiedAt ? 'profile-verified' : ''
let newRelationship; }`}
if (following || requested) { key={name}
const yes = confirm( >
requested <b>
? 'Are you sure that you want to withdraw follow request?' <span
: 'Are you sure that you want to unfollow this account?', dangerouslySetInnerHTML={{
); __html: emojifyText(name, emojis),
if (yes) { }}
newRelationship = await masto.v1.accounts.unfollow( />{' '}
{!!verifiedAt && <Icon icon="check-circle" size="s" />}
</b>
<p
dangerouslySetInnerHTML={{
__html: enhanceContent(value, { emojis }),
}}
/>
</div>
))}
</div>
)}
<p class="stats">
<span>
<b title={statusesCount}>{shortenNumber(statusesCount)}</b>{' '}
Posts
</span>
<span>
<b title={followingCount}>{shortenNumber(followingCount)}</b>{' '}
Following
</span>
<span>
<b title={followersCount}>{shortenNumber(followersCount)}</b>{' '}
Followers
</span>
{!!createdAt && (
<span>
Joined:{' '}
<b>
<time datetime={createdAt}>
{Intl.DateTimeFormat('en', {
year: 'numeric',
month: 'short',
day: 'numeric',
}).format(new Date(createdAt))}
</time>
</b>
</span>
)}
</p>
<p class="actions">
{followedBy ? <span class="tag">Following you</span> : <span />}{' '}
{relationshipUIState !== 'loading' && relationship && (
<button
type="button"
class={`${following || requested ? 'light swap' : ''}`}
data-swap-state={following || requested ? 'danger' : ''}
disabled={relationshipUIState === 'loading'}
onClick={() => {
setRelationshipUIState('loading');
(async () => {
try {
let newRelationship;
if (following || requested) {
const yes = confirm(
requested
? 'Are you sure that you want to withdraw follow request?'
: 'Are you sure that you want to unfollow this account?',
);
if (yes) {
newRelationship =
await masto.v1.accounts.unfollow(id);
}
} else {
newRelationship = await masto.v1.accounts.follow(
id, id,
); );
} }
} else { if (newRelationship) setRelationship(newRelationship);
newRelationship = await masto.v1.accounts.follow(id); setRelationshipUIState('default');
} catch (e) {
alert(e);
setRelationshipUIState('error');
} }
if (newRelationship) setRelationship(newRelationship); })();
setRelationshipUIState('default'); }}
} catch (e) { >
alert(e); {following ? (
setRelationshipUIState('error'); <>
} <span>Following</span>
})(); <span>Unfollow…</span>
}} </>
> ) : requested ? (
{following ? ( <>
<> <span>Requested</span>
<span>Following</span> <span>Withdraw…</span>
<span>Unfollow…</span> </>
</> ) : locked ? (
) : requested ? ( <>
<> <Icon icon="lock" /> <span>Follow</span>
<span>Requested</span> </>
<span>Withdraw…</span> ) : (
</> 'Follow'
) : locked ? ( )}
<> </button>
<Icon icon="lock" /> <span>Follow</span> )}
</> </p>
) : ( </main>
'Follow' </>
)} )
</button>
)}
</p>
</main>
</>
)} )}
</div> </div>
); );