Handle logged-out cases
This commit is contained in:
Lim Chee Aun
parent
7f22ec6a9b
commit
d5bceb1d81
|
|
@ -60,7 +60,7 @@ function Status({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
const { masto, instance } = api({ instance: propInstance });
|
||||
const { masto, instance, authenticated } = api({ instance: propInstance });
|
||||
const { instance: currentInstance } = api();
|
||||
const sameInstance = instance === currentInstance;
|
||||
|
||||
|
|
@ -388,7 +388,7 @@ function Status({
|
|||
<Poll
|
||||
lang={language}
|
||||
poll={poll}
|
||||
readOnly={readOnly || !sameInstance}
|
||||
readOnly={readOnly || !sameInstance || !authenticated}
|
||||
onUpdate={(newPoll) => {
|
||||
states.statuses[sKey].poll = newPoll;
|
||||
}}
|
||||
|
|
@ -517,7 +517,7 @@ function Status({
|
|||
icon="comment"
|
||||
count={repliesCount}
|
||||
onClick={() => {
|
||||
if (!sameInstance) {
|
||||
if (!sameInstance || !authenticated) {
|
||||
return alert(unauthInteractionErrorMessage);
|
||||
}
|
||||
states.showCompose = {
|
||||
|
|
@ -537,7 +537,7 @@ function Status({
|
|||
icon="rocket"
|
||||
count={reblogsCount}
|
||||
onClick={async () => {
|
||||
if (!sameInstance) {
|
||||
if (!sameInstance || !authenticated) {
|
||||
return alert(unauthInteractionErrorMessage);
|
||||
}
|
||||
try {
|
||||
|
|
@ -580,7 +580,7 @@ function Status({
|
|||
icon="heart"
|
||||
count={favouritesCount}
|
||||
onClick={async () => {
|
||||
if (!sameInstance) {
|
||||
if (!sameInstance || !authenticated) {
|
||||
return alert(unauthInteractionErrorMessage);
|
||||
}
|
||||
try {
|
||||
|
|
@ -616,7 +616,7 @@ function Status({
|
|||
class="bookmark-button"
|
||||
icon="bookmark"
|
||||
onClick={async () => {
|
||||
if (!sameInstance) {
|
||||
if (!sameInstance || !authenticated) {
|
||||
return alert(unauthInteractionErrorMessage);
|
||||
}
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -36,21 +36,20 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.status-deck footer {
|
||||
.post-status-banner {
|
||||
position: sticky;
|
||||
bottom: 16px;
|
||||
bottom: max(16px, env(safe-area-inset-bottom));
|
||||
font-size: 90%;
|
||||
background-color: var(--bg-faded-blur-color);
|
||||
backdrop-filter: blur(16px);
|
||||
background-color: var(--bg-faded-color);
|
||||
padding: 16px;
|
||||
margin: 16px;
|
||||
margin: 0 16px;
|
||||
border-radius: 16px;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.2;
|
||||
max-width: var(--main-width);
|
||||
}
|
||||
.status-deck footer > p:first-of-type {
|
||||
.post-status-banner > p:first-of-type {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ function resetScrollPosition(id) {
|
|||
|
||||
function StatusPage() {
|
||||
const { id, ...params } = useParams();
|
||||
const { masto, instance } = api({ instance: params.instance });
|
||||
const { masto, instance, authenticated } = api({ instance: params.instance });
|
||||
const { masto: currentMasto, instance: currentInstance } = api();
|
||||
const sameInstance = instance === currentInstance;
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -609,19 +609,70 @@ function StatusPage() {
|
|||
} ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`}
|
||||
>
|
||||
{isHero ? (
|
||||
<InView
|
||||
threshold={0.1}
|
||||
onChange={onView}
|
||||
class="status-focus"
|
||||
tabIndex={0}
|
||||
>
|
||||
<Status
|
||||
statusID={statusID}
|
||||
instance={instance}
|
||||
withinContext
|
||||
size="l"
|
||||
/>
|
||||
</InView>
|
||||
<>
|
||||
<InView
|
||||
threshold={0.1}
|
||||
onChange={onView}
|
||||
class="status-focus"
|
||||
tabIndex={0}
|
||||
>
|
||||
<Status
|
||||
statusID={statusID}
|
||||
instance={instance}
|
||||
withinContext
|
||||
size="l"
|
||||
/>
|
||||
</InView>
|
||||
{!sameInstance && uiState !== 'loading' && (
|
||||
<div class="post-status-banner">
|
||||
<p>
|
||||
This post is from another instance (
|
||||
<b>{instance}</b>). Interactions (reply, boost, etc)
|
||||
are not possible.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
(async () => {
|
||||
try {
|
||||
const results = await currentMasto.v2.search({
|
||||
q: heroStatus.url,
|
||||
type: 'statuses',
|
||||
resolve: true,
|
||||
limit: 1,
|
||||
});
|
||||
if (results.statuses.length) {
|
||||
const status = results.statuses[0];
|
||||
navigate(`/s/${status.id}`);
|
||||
} else {
|
||||
throw new Error('No results');
|
||||
}
|
||||
} catch (e) {
|
||||
alert('Error: ' + e);
|
||||
console.error(e);
|
||||
}
|
||||
})();
|
||||
}}
|
||||
>
|
||||
<Icon icon="transfer" /> Switch to my instance to
|
||||
enable interactions
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{sameInstance &&
|
||||
!authenticated &&
|
||||
uiState !== 'loading' && (
|
||||
<div class="post-status-banner">
|
||||
<p>
|
||||
You're not logged in. Interactions (reply, boost,
|
||||
etc) are not possible.
|
||||
</p>
|
||||
<Link to="/login" class="button">
|
||||
Log in
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Link
|
||||
class="status-link"
|
||||
|
|
@ -730,40 +781,6 @@ function StatusPage() {
|
|||
)}
|
||||
</>
|
||||
)}
|
||||
{!sameInstance && uiState !== 'loading' && (
|
||||
<footer class="">
|
||||
<p>
|
||||
This post is from another instance (<b>{instance}</b>), different
|
||||
from your current logged-in instance (<b>{currentInstance}</b>).
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
(async () => {
|
||||
try {
|
||||
const results = await currentMasto.v2.search({
|
||||
q: heroStatus.url,
|
||||
type: 'statuses',
|
||||
resolve: true,
|
||||
limit: 1,
|
||||
});
|
||||
if (results.statuses.length) {
|
||||
const status = results.statuses[0];
|
||||
navigate(`/s/${status.id}`);
|
||||
} else {
|
||||
throw new Error('No results');
|
||||
}
|
||||
} catch (e) {
|
||||
alert('Error: ' + e);
|
||||
console.error(e);
|
||||
}
|
||||
})();
|
||||
}}
|
||||
>
|
||||
<Icon icon="transfer" /> Switch to my instance
|
||||
</button>
|
||||
</footer>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue