Skip to content

Commit

Permalink
Change bottom sheet to instantiate options on click
Browse files Browse the repository at this point in the history
  • Loading branch information
@aeharding
aeharding committed Aug 13, 2023
1 parent 8e32252 commit ca70c38
Show file tree
Hide file tree
Showing 2 changed files with 262 additions and 322 deletions.
314 changes: 150 additions & 164 deletions src/features/comment/CommentEllipsis.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import styled from "@emotion/styled";
import {
IonActionSheet,
IonIcon,
useIonActionSheet,
useIonRouter,
Expand Down Expand Up @@ -92,195 +91,182 @@ export default function MoreActions({
const isMyComment = getRemoteHandle(commentView.creator) === myHandle;
const commentExists = !comment.deleted && !comment.removed;

return (
<>
<StyledIonIcon
icon={ellipsisHorizontal}
onClick={(e) => {
setOpen(true);
e.stopPropagation();
}}
/>

<IonActionSheet
cssClass="left-align-buttons"
onClick={(e) => e.stopPropagation()}
isOpen={open}
buttons={[
{
text: myVote !== 1 ? "Upvote" : "Undo Upvote",
role: "upvote",
icon: arrowUpOutline,
},
downvoteAllowed
? {
text: myVote !== -1 ? "Downvote" : "Undo Downvote",
role: "downvote",
icon: arrowDownOutline,
}
: undefined,
{
text: !mySaved ? "Save" : "Unsave",
role: "save",
icon: bookmarkOutline,
},
isMyComment && isCommentMutable(comment)
? {
text: "Edit",
role: "edit",
icon: pencilOutline,
}
: undefined,
isMyComment && isCommentMutable(comment)
? {
text: "Delete",
role: "delete",
icon: trashOutline,
}
: undefined,
{
text: "Reply",
role: "reply",
icon: arrowUndoOutline,
},
commentExists && comment.content
? {
text: "Select Text",
role: "select-text",
icon: textOutline,
}
: undefined,
{
text: getHandle(commentView.creator),
role: "person",
icon: personOutline,
},
{
text: "Share",
role: "share",
icon: shareOutline,
},
rootIndex !== undefined
? {
text: "Collapse to Top",
role: "collapse",
icon: chevronCollapseOutline,
}
: undefined,
{
text: "Report",
role: "report",
icon: flagOutline,
},
{
text: "Cancel",
role: "cancel",
},
].filter(notEmpty)}
onDidDismiss={() => setOpen(false)}
onWillDismiss={async (e) => {
switch (e.detail.role) {
case "upvote":
function onClick() {
presentActionSheet({
cssClass: "left-align-buttons",
buttons: [
{
text: myVote !== 1 ? "Upvote" : "Undo Upvote",
icon: arrowUpOutline,
handler: () => {
(async () => {
if (presentLoginIfNeeded()) return;

try {
await dispatch(voteOnComment(comment.id, myVote === 1 ? 0 : 1));
} catch (error) {
present(voteError);
}
})();
},
},
downvoteAllowed
? {
text: myVote !== -1 ? "Downvote" : "Undo Downvote",
icon: arrowDownOutline,
handler: () => {
(async () => {
if (presentLoginIfNeeded()) return;

break;
case "downvote":
if (presentLoginIfNeeded()) return;

try {
await dispatch(
voteOnComment(comment.id, myVote === -1 ? 0 : -1)
);
} catch (error) {
present(voteError);
}

break;
case "save":
try {
await dispatch(
voteOnComment(comment.id, myVote === -1 ? 0 : -1)
);
} catch (error) {
present(voteError);
}
})();
},
}
: undefined,
{
text: !mySaved ? "Save" : "Unsave",
icon: bookmarkOutline,
handler: () => {
(async () => {
if (presentLoginIfNeeded()) return;

try {
await dispatch(saveComment(comment.id, !mySaved));
} catch (error) {
present(saveError);
}
break;
case "edit": {
presentCommentEdit(comment);
break;
})();
},
},
isMyComment && isCommentMutable(comment)
? {
text: "Edit",
icon: pencilOutline,
handler: () => {
presentCommentEdit(comment);
},
}
case "delete":
presentActionSheet({
buttons: [
{
text: "Delete Comment",
role: "destructive",
handler: () => {
(async () => {
try {
await dispatch(deleteComment(comment.id));
} catch (error) {
: undefined,
isMyComment && isCommentMutable(comment)
? {
text: "Delete",
icon: trashOutline,
handler: () => {
presentActionSheet({
buttons: [
{
text: "Delete Comment",
role: "destructive",
handler: () => {
(async () => {
try {
await dispatch(deleteComment(comment.id));
} catch (error) {
present({
message:
"Problem deleting comment. Please try again.",
duration: 3500,
position: "bottom",
color: "danger",
});

throw error;
}

present({
message:
"Problem deleting comment. Please try again.",
message: "Comment deleted!",
duration: 3500,
position: "bottom",
color: "danger",
color: "primary",
});

throw error;
}

present({
message: "Comment deleted!",
duration: 3500,
position: "bottom",
color: "primary",
});
})();
})();
},
},
},
{
text: "Cancel",
role: "cancel",
},
],
});

break;
case "reply": {
{
text: "Cancel",
role: "cancel",
},
],
});
},
}
: undefined,
{
text: "Reply",
icon: arrowUndoOutline,
handler: () => {
(async () => {
if (presentLoginIfNeeded()) return;

const reply = await presentCommentReply(commentView);

if (reply) prependComments([reply]);
break;
})();
},
},
commentExists && comment.content
? {
text: "Select Text",
icon: textOutline,
handler: () => {
presentSelectText(comment.content);
},
}
case "select-text":
return presentSelectText(comment.content);
case "person":
router.push(
buildGeneralBrowseLink(`/u/${getHandle(commentView.creator)}`)
);
break;
case "share":
share(comment);
break;
case "collapse":
collapseRootComment();
break;
case "report":
presentReport(commentView);
break;
}
}}
/>
</>
: undefined,
{
text: getHandle(commentView.creator),
icon: personOutline,
handler: () => {
router.push(
buildGeneralBrowseLink(`/u/${getHandle(commentView.creator)}`)
);
},
},
{
text: "Share",
icon: shareOutline,
handler: () => {
share(comment);
},
},
rootIndex !== undefined
? {
text: "Collapse to Top",
icon: chevronCollapseOutline,
handler: () => {
collapseRootComment();
},
}
: undefined,
{
text: "Report",
role: "report",
icon: flagOutline,
handler: () => {
presentReport(commentView);
},
},
{
text: "Cancel",
role: "cancel",
},
].filter(notEmpty),
});
}

return (
<StyledIonIcon
icon={ellipsisHorizontal}
onClick={(e) => {
onClick();
e.stopPropagation();
}}
/>
);
}
Loading

0 comments on commit ca70c38

Please sign in to comment.