Add useAppToast, add haptics, present below app navigation bars

Resolves #147
aeharding · Oct 12, 2023 · d3026cc · d3026cc
1 parent c4e14fc
commit d3026cc
Show file tree

Hide file tree

Showing 29 changed files with 249 additions and 238 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
   },
   "pnpm": {
     "overrides": {
-      "@ionic/core": "npm:voyager-ionic-core@^7.4.3"
+      "@ionic/core": "npm:voyager-ionic-core@^7.5.0"
     }
   },
   "dependencies": {
@@ -47,7 +47,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@github/markdown-toolbar-element": "^2.2.1",
-    "@ionic/core": "npm:voyager-ionic-core@^7.4.3",
+    "@ionic/core": "npm:voyager-ionic-core@^7.5.0",
     "@ionic/react": "^7.4.3",
     "@ionic/react-router": "^7.4.3",
     "@reduxjs/toolkit": "^1.9.7",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/features/auth/Login.tsx b/src/features/auth/Login.tsx
@@ -13,7 +13,6 @@ import {
   IonRadio,
   IonSpinner,
   IonList,
-  useIonToast,
   IonText,
   IonRouterLink,
   useIonModal,
@@ -28,6 +27,7 @@ import { preventPhotoswipeGalleryFocusTrap } from "../gallery/GalleryImg";
 import { getCustomServers } from "../../services/app";
 import { isNative } from "../../helpers/device";
 import { Browser } from "@capacitor/browser";
+import useAppToast from "../../helpers/useAppToast";
 
 const JOIN_LEMMY_URL = "https://join-lemmy.org/instances";
 
@@ -53,7 +53,7 @@ export default function Login({
 }: {
   onDismiss: (data?: string | null | undefined | number, role?: string) => void;
 }) {
-  const [present] = useIonToast();
+  const presentToast = useAppToast();
   const dispatch = useAppDispatch();
   const [servers] = useState(getCustomServers());
   const [server, setServer] = useState(servers[0]);
@@ -104,23 +104,21 @@ export default function Login({
 
   async function submit() {
     if (!server && !customServer) {
-      present({
-        message: `Please enter your instance domain name`,
-        duration: 3500,
-        position: "bottom",
+      presentToast({
+        message: "Please enter your instance domain name",
         color: "danger",
+        fullscreen: true,
       });
       return;
     }
 
     if (!serverConfirmed) {
       if (customServer) {
         if (!customServerHostname) {
-          present({
+          presentToast({
             message: `${customServer} is not a valid server URL. Please try again`,
-            duration: 3500,
-            position: "bottom",
             color: "danger",
+            fullscreen: true,
           });
 
           return;
@@ -130,11 +128,10 @@ export default function Login({
         try {
           await getClient(customServerHostname).getSite({});
         } catch (error) {
-          present({
+          presentToast({
             message: `Problem connecting to ${customServerHostname}. Please try again`,
-            duration: 3500,
-            position: "bottom",
             color: "danger",
+            fullscreen: true,
           });
 
           throw error;
@@ -148,21 +145,19 @@ export default function Login({
     }
 
     if (!username || !password) {
-      present({
+      presentToast({
         message: "Please fill out username and password fields",
-        duration: 3500,
-        position: "bottom",
         color: "danger",
+        fullscreen: true,
       });
       return;
     }
 
     if (!totp && needsTotp) {
-      present({
+      presentToast({
         message: `Please enter your second factor authentication code for ${username}`,
-        duration: 3500,
-        position: "bottom",
         color: "danger",
+        fullscreen: true,
       });
       return;
     }
@@ -183,11 +178,10 @@ export default function Login({
         setPassword("");
       }
 
-      present({
+      presentToast({
         message: getLoginErrorMessage(error, server ?? customServer),
-        duration: 3500,
-        position: "bottom",
         color: "danger",
+        fullscreen: true,
       });
 
       throw error;
@@ -196,10 +190,8 @@ export default function Login({
     }
 
     onDismiss();
-    present({
+    presentToast({
       message: "Login successful",
-      duration: 2000,
-      position: "bottom",
       color: "success",
     });
   }

diff --git a/src/features/comment/CommentEllipsis.tsx b/src/features/comment/CommentEllipsis.tsx
@@ -1,10 +1,5 @@
 import styled from "@emotion/styled";
-import {
-  IonIcon,
-  useIonActionSheet,
-  useIonRouter,
-  useIonToast,
-} from "@ionic/react";
+import { IonIcon, useIonActionSheet, useIonRouter } from "@ionic/react";
 import {
   arrowDownOutline,
   arrowUndoOutline,
@@ -36,6 +31,7 @@ import { handleSelector, isDownvoteEnabledSelector } from "../auth/authSlice";
 import { CommentsContext } from "./CommentsContext";
 import { deleteComment, saveComment, voteOnComment } from "./commentSlice";
 import useCollapseRootComment from "./useCollapseRootComment";
+import useAppToast from "../../helpers/useAppToast";
 
 const StyledIonIcon = styled(IonIcon)`
   padding: 8px 12px;
@@ -57,7 +53,7 @@ export default function MoreActions({
   const dispatch = useAppDispatch();
   const { prependComments } = useContext(CommentsContext);
   const myHandle = useAppSelector(handleSelector);
-  const [present] = useIonToast();
+  const presentToast = useAppToast();
   const [presentActionSheet] = useIonActionSheet();
   const [presentSecondaryActionSheet] = useIonActionSheet();
   const collapseRootComment = useCollapseRootComment(commentView, rootIndex);
@@ -105,7 +101,7 @@ export default function MoreActions({
               try {
                 await dispatch(voteOnComment(comment.id, myVote === 1 ? 0 : 1));
               } catch (error) {
-                present(voteError);
+                presentToast(voteError);
               }
             })();
           },
@@ -123,7 +119,7 @@ export default function MoreActions({
                       voteOnComment(comment.id, myVote === -1 ? 0 : -1),
                     );
                   } catch (error) {
-                    present(voteError);
+                    presentToast(voteError);
                   }
                 })();
               },
@@ -139,7 +135,7 @@ export default function MoreActions({
               try {
                 await dispatch(saveComment(comment.id, !mySaved));
               } catch (error) {
-                present(saveError);
+                presentToast(saveError);
               }
             })();
           },
@@ -168,21 +164,17 @@ export default function MoreActions({
                           try {
                             await dispatch(deleteComment(comment.id));
                           } catch (error) {
-                            present({
+                            presentToast({
                               message:
                                 "Problem deleting comment. Please try again.",
-                              duration: 3500,
-                              position: "bottom",
                               color: "danger",
                             });
 
                             throw error;
                           }
 
-                          present({
+                          presentToast({
                             message: "Comment deleted!",
-                            duration: 3500,
-                            position: "bottom",
                             color: "primary",
                           });
                         })();

diff --git a/src/features/comment/CommentExpander.tsx b/src/features/comment/CommentExpander.tsx
@@ -5,11 +5,12 @@ import CommentHr from "./CommentHr";
 import { useContext, useState } from "react";
 import { CommentsContext } from "./CommentsContext";
 import useClient from "../../helpers/useClient";
-import { IonIcon, IonSpinner, useIonToast } from "@ionic/react";
+import { IonIcon, IonSpinner } from "@ionic/react";
 import { chevronDown } from "ionicons/icons";
 import AnimateHeight from "react-animate-height";
 import { MAX_DEFAULT_COMMENT_DEPTH } from "../../helpers/lemmy";
 import { css } from "@emotion/react";
+import useAppToast from "../../helpers/useAppToast";
 
 const MoreRepliesBlock = styled.div<{ hidden: boolean }>`
   display: flex;
@@ -53,7 +54,7 @@ export default function CommentExpander({
   missing,
   collapsed,
 }: CommentExpanderProps) {
-  const [present] = useIonToast();
+  const presentToast = useAppToast();
   const { appendComments } = useContext(CommentsContext);
   const client = useClient();
   const [loading, setLoading] = useState(false);
@@ -72,10 +73,8 @@ export default function CommentExpander({
         max_depth: Math.max((depth += 2), MAX_DEFAULT_COMMENT_DEPTH),
       });
     } catch (error) {
-      present({
+      presentToast({
         message: "Problem fetching more comments. Please try again.",
-        duration: 3500,
-        position: "bottom",
         color: "danger",
       });
       throw error;
@@ -84,10 +83,8 @@ export default function CommentExpander({
     }
 
     if (response.comments.length === 0) {
-      present({
+      presentToast({
         message: `Uh-oh. Looks like Lemmy returned 0 comments, but there's actually ${missing}`,
-        duration: 3500,
-        position: "bottom",
         color: "danger",
       });
       return;

diff --git a/src/features/comment/Comments.tsx b/src/features/comment/Comments.tsx
@@ -11,12 +11,7 @@ import {
   buildCommentsTreeWithMissing,
 } from "../../helpers/lemmy";
 import CommentTree from "./CommentTree";
-import {
-  IonRefresher,
-  IonRefresherContent,
-  IonSpinner,
-  useIonToast,
-} from "@ionic/react";
+import { IonRefresher, IonRefresherContent, IonSpinner } from "@ionic/react";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { CommentSortType, CommentView, Person } from "lemmy-js-client";
@@ -32,6 +27,7 @@ import { CommentsContext } from "./CommentsContext";
 import { jwtSelector } from "../auth/authSlice";
 import { defaultCommentDepthSelector } from "../settings/settingsSlice";
 import { isSafariFeedHackEnabled } from "../../pages/shared/FeedContent";
+import useAppToast from "../../helpers/useAppToast";
 
 const centerCss = css`
   position: relative;
@@ -92,7 +88,7 @@ export default forwardRef<CommentsHandle, CommentsProps>(function Comments(
   );
   const client = useClient();
   const [isListAtTop, setIsListAtTop] = useState<boolean>(true);
-  const [present] = useIonToast();
+  const presentToast = useAppToast();
   const defaultCommentDepth = useAppSelector(defaultCommentDepthSelector);
 
   const highlightedCommentId = commentPath
@@ -151,10 +147,8 @@ export default forwardRef<CommentsHandle, CommentsProps>(function Comments(
       });
     } catch (error) {
       if (reqPostId === postId && reqCommentId === commentId)
-        present({
+        presentToast({
           message: "Problem fetching comments. Please try again.",
-          duration: 3500,
-          position: "bottom",
           color: "danger",
         });