Fixes from review

aeharding · Jul 23, 2023 · bef1818 · bef1818
1 parent a28a906
commit bef1818
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 71 deletions.
diff --git a/src/features/settings/gestures/SwipeSettings.tsx b/src/features/settings/gestures/SwipeSettings.tsx
@@ -64,28 +64,28 @@ export default function SwipeSettings() {
         name="Posts"
         selector={post}
         options={OSwipeActionPost}
-        far_start={setPostSwipeActionFarStart}
+        farStart={setPostSwipeActionFarStart}
         start={setPostSwipeActionStart}
         end={setPostSwipeActionEnd}
-        far_end={setPostSwipeActionFarEnd}
+        farEnd={setPostSwipeActionFarEnd}
       />
       <SwipeList
         name="Comments"
         selector={comment}
         options={OSwipeActionComment}
-        far_start={setCommentSwipeActionFarStart}
+        farStart={setCommentSwipeActionFarStart}
         start={setCommentSwipeActionStart}
         end={setCommentSwipeActionEnd}
-        far_end={setCommentSwipeActionFarEnd}
+        farEnd={setCommentSwipeActionFarEnd}
       />
       <SwipeList
         name="Inbox"
         selector={inbox}
         options={OSwipeActionInbox}
-        far_start={setInboxSwipeActionFarStart}
+        farStart={setInboxSwipeActionFarStart}
         start={setInboxSwipeActionStart}
         end={setInboxSwipeActionEnd}
-        far_end={setInboxSwipeActionFarEnd}
+        farEnd={setInboxSwipeActionFarEnd}
       />
       <>
         <ListHeader>
@@ -158,20 +158,20 @@ interface SwipeListProps {
   name: string;
   selector: SwipeActions;
   options: Dictionary<SwipeAction>;
-  far_start: ActionCreatorWithPayload<SwipeAction>;
+  farStart: ActionCreatorWithPayload<SwipeAction>;
   start: ActionCreatorWithPayload<SwipeAction>;
   end: ActionCreatorWithPayload<SwipeAction>;
-  far_end: ActionCreatorWithPayload<SwipeAction>;
+  farEnd: ActionCreatorWithPayload<SwipeAction>;
 }
 
 function SwipeList({
   name,
   selector,
   options,
-  far_start,
+  farStart,
   start,
   end,
-  far_end,
+  farEnd,
 }: SwipeListProps) {
   const Selector = SettingSelector<SwipeAction>;
 
@@ -200,8 +200,8 @@ function SwipeList({
         <Selector
           icon={LongSwipeSvg}
           title="Left Long Swipe"
-          selected={selector.far_start ?? options.None}
-          setSelected={far_start}
+          selected={selector.farStart ?? options.None}
+          setSelected={farStart}
           options={options}
           optionIcons={swipeIcons}
           disabled={disableLeftSwipes}
@@ -220,8 +220,8 @@ function SwipeList({
           icon={LongSwipeSvg}
           iconMirrored
           title="Right Long Swipe"
-          selected={selector.far_end ?? options.None}
-          setSelected={far_end}
+          selected={selector.farEnd ?? options.None}
+          setSelected={farEnd}
           options={options}
           optionIcons={swipeIcons}
           disabled={disableRightSwipes}

diff --git a/src/features/settings/gestures/gesturesSlice.tsx b/src/features/settings/gestures/gesturesSlice.tsx
@@ -1,11 +1,11 @@
 import { PayloadAction, createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import {
+  OSwipeActionComment,
+  OSwipeActionInbox,
+  OSwipeActionPost,
   SwipeAction,
   SwipeActions,
   db,
-  default_swipe_actions_post,
-  default_swipe_actions_comment,
-  default_swipe_actions_inbox,
 } from "../../../services/db";
 
 interface GestureState {
@@ -18,11 +18,32 @@ interface GestureState {
   };
 }
 
+const defaultSwipeActionsPost: SwipeActions = {
+  farStart: OSwipeActionPost.Downvote,
+  start: OSwipeActionPost.Upvote,
+  end: OSwipeActionPost.Reply,
+  farEnd: OSwipeActionPost.Hide,
+} as const;
+
+const defaultSwipeActionsComment: SwipeActions = {
+  farStart: OSwipeActionComment.Downvote,
+  start: OSwipeActionComment.Upvote,
+  end: OSwipeActionComment.Collapse,
+  farEnd: OSwipeActionComment.Reply,
+} as const;
+
+const defaultSwipeActionsInbox: SwipeActions = {
+  farStart: OSwipeActionInbox.Downvote,
+  start: OSwipeActionInbox.Upvote,
+  end: OSwipeActionInbox.MarkUnread,
+  farEnd: OSwipeActionInbox.Reply,
+} as const;
+
 const initialState: GestureState = {
   swipe: {
-    post: default_swipe_actions_post,
-    comment: default_swipe_actions_comment,
-    inbox: default_swipe_actions_inbox,
+    post: defaultSwipeActionsPost,
+    comment: defaultSwipeActionsComment,
+    inbox: defaultSwipeActionsInbox,
     disableLeftSwipes: false,
     disableRightSwipes: false,
   },
@@ -39,7 +60,7 @@ export const gestureSlice = createSlice({
   },
   reducers: {
     setPostSwipeActionFarStart(state, action: PayloadAction<SwipeAction>) {
-      state.swipe.post.far_start = action.payload;
+      state.swipe.post.farStart = action.payload;
       db.setSetting("gesture_swipe_post", { ...state.swipe.post });
     },
     setPostSwipeActionStart(state, action: PayloadAction<SwipeAction>) {
@@ -51,11 +72,11 @@ export const gestureSlice = createSlice({
       db.setSetting("gesture_swipe_post", { ...state.swipe.post });
     },
     setPostSwipeActionFarEnd(state, action: PayloadAction<SwipeAction>) {
-      state.swipe.post.far_end = action.payload;
+      state.swipe.post.farEnd = action.payload;
       db.setSetting("gesture_swipe_post", { ...state.swipe.post });
     },
     setCommentSwipeActionFarStart(state, action: PayloadAction<SwipeAction>) {
-      state.swipe.comment.far_start = action.payload;
+      state.swipe.comment.farStart = action.payload;
       db.setSetting("gesture_swipe_comment", { ...state.swipe.comment });
     },
     setCommentSwipeActionStart(state, action: PayloadAction<SwipeAction>) {
@@ -67,11 +88,11 @@ export const gestureSlice = createSlice({
       db.setSetting("gesture_swipe_comment", { ...state.swipe.comment });
     },
     setCommentSwipeActionFarEnd(state, action: PayloadAction<SwipeAction>) {
-      state.swipe.comment.far_end = action.payload;
+      state.swipe.comment.farEnd = action.payload;
       db.setSetting("gesture_swipe_comment", { ...state.swipe.comment });
     },
     setInboxSwipeActionFarStart(state, action: PayloadAction<SwipeAction>) {
-      state.swipe.inbox.far_start = action.payload;
+      state.swipe.inbox.farStart = action.payload;
       db.setSetting("gesture_swipe_inbox", { ...state.swipe.inbox });
     },
     setInboxSwipeActionStart(state, action: PayloadAction<SwipeAction>) {
@@ -83,7 +104,7 @@ export const gestureSlice = createSlice({
       db.setSetting("gesture_swipe_inbox", { ...state.swipe.inbox });
     },
     setInboxSwipeActionFarEnd(state, action: PayloadAction<SwipeAction>) {
-      state.swipe.inbox.far_end = action.payload;
+      state.swipe.inbox.farEnd = action.payload;
       db.setSetting("gesture_swipe_inbox", { ...state.swipe.inbox });
     },
     setDisableLeftSwipes(state, action: PayloadAction<boolean>) {
@@ -95,9 +116,9 @@ export const gestureSlice = createSlice({
       db.setSetting("disable_right_swipes", action.payload);
     },
     setAllSwipesToDefault(state) {
-      state.swipe.post = default_swipe_actions_post;
-      state.swipe.comment = default_swipe_actions_comment;
-      state.swipe.inbox = default_swipe_actions_inbox;
+      state.swipe.post = defaultSwipeActionsPost;
+      state.swipe.comment = defaultSwipeActionsComment;
+      state.swipe.inbox = defaultSwipeActionsInbox;
       db.setSetting("gesture_swipe_post", { ...state.swipe.post });
       db.setSetting("gesture_swipe_comment", { ...state.swipe.comment });
       db.setSetting("gesture_swipe_inbox", { ...state.swipe.inbox });

diff --git a/src/features/shared/sliding/BaseSlidingVote.tsx b/src/features/shared/sliding/BaseSlidingVote.tsx
@@ -3,7 +3,7 @@ import {
   arrowDownSharp,
   arrowUndo,
   arrowUpSharp,
-  bookmarkOutline,
+  bookmark,
   chevronCollapse,
   chevronExpand,
   eyeOffOutline,
@@ -110,7 +110,7 @@ function BaseSlidingVoteInternal({
     (state) => state.gestures.swipe.disableRightSwipes
   );
 
-  const vote = useCallback(
+  const onVote = useCallback(
     async (score: 1 | -1 | 0) => {
       if (presentLoginIfNeeded()) return;
 
@@ -163,7 +163,7 @@ function BaseSlidingVoteInternal({
 
   const saveAction = useMemo(() => {
     return {
-      icon: bookmarkOutline,
+      icon: bookmark,
       trigger: save,
       bgColor: "success",
       slash: isSaved,
@@ -224,23 +224,23 @@ function BaseSlidingVoteInternal({
     };
   }, [markUnread, isRead]);
 
-  const all_actions: {
+  const allActions: {
     [id in SwipeAction]: SlidingItemAction | undefined;
   } = useMemo(() => {
     return {
       none: undefined,
       upvote: {
         icon: arrowUpSharp,
         trigger: () => {
-          vote(currentVote === 1 ? 0 : 1);
+          onVote(currentVote === 1 ? 0 : 1);
         },
         bgColor: "primary",
         slash: currentVote === 1,
       },
       downvote: {
         icon: arrowDownSharp,
         trigger: () => {
-          vote(currentVote === -1 ? 0 : -1);
+          onVote(currentVote === -1 ? 0 : -1);
         },
         bgColor: "danger",
         slash: currentVote === -1,
@@ -262,23 +262,23 @@ function BaseSlidingVoteInternal({
     hideAction,
     collapseAction,
     markUnreadAction,
-    vote,
+    onVote,
   ]);
 
   const startActions: ActionList = useMemo(
     () =>
       !disableLeftSwipes
-        ? [all_actions[actions["start"]], all_actions[actions["far_start"]]]
+        ? [allActions[actions.start], allActions[actions.farStart]]
         : [undefined, undefined],
-    [disableLeftSwipes, all_actions, actions]
+    [disableLeftSwipes, allActions, actions]
   );
 
   const endActions: ActionList = useMemo(
     () =>
       !disableRightSwipes
-        ? [all_actions[actions["end"]], all_actions[actions["far_end"]]]
+        ? [allActions[actions.end], allActions[actions.farEnd]]
         : [undefined, undefined],
-    [disableRightSwipes, all_actions, actions]
+    [disableRightSwipes, allActions, actions]
   );
 
   return (

diff --git a/src/features/shared/sliding/SlidingItem.tsx b/src/features/shared/sliding/SlidingItem.tsx
@@ -8,7 +8,7 @@ import {
   IonItemSliding,
 } from "@ionic/react";
 import { Dictionary } from "@reduxjs/toolkit";
-import { bookmarkOutline, mailUnread } from "ionicons/icons";
+import { bookmark, mailUnread } from "ionicons/icons";
 import React, { useMemo, useRef, useState } from "react";
 import { bounceAnimation } from "../animations";
 
@@ -48,7 +48,7 @@ const OptionContainer = styled.div<{ active: boolean }>`
 `;
 
 const custom_slash_lengths: Dictionary<number> = {
-  [bookmarkOutline]: 35,
+  [bookmark]: 35,
   [mailUnread]: 40,
 };
 

diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
@@ -102,20 +102,14 @@ export default function SettingsPage() {
             </IconBg>
             <SettingLabel>General</SettingLabel>
           </InsetIonItem>
+
           <InsetIonItem routerLink="/settings/appearance">
             <IconBg color="color(display-p3 1 0 0)">
               <IonIcon icon={colorPalette} />
             </IconBg>
             <SettingLabel>Appearance</SettingLabel>
           </InsetIonItem>
 
-          <InsetIonItem routerLink="/settings/gestures">
-            <IconBg color="color(display-p3 0.95 0.65 0)">
-              <IonIcon icon={returnUpForwardOutline} />
-            </IconBg>
-            <SettingLabel>Gestures</SettingLabel>
-          </InsetIonItem>
-
           {currentHandle && (
             <InsetIonItem routerLink="/settings/blocks">
               <IconBg color="color(display-p3 0 0.6 1)">
@@ -124,6 +118,13 @@ export default function SettingsPage() {
               <SettingLabel>Filters & Blocks</SettingLabel>
             </InsetIonItem>
           )}
+
+          <InsetIonItem routerLink="/settings/gestures">
+            <IconBg color="color(display-p3 0.95 0.65 0)">
+              <IonIcon icon={returnUpForwardOutline} />
+            </IconBg>
+            <SettingLabel>Gestures</SettingLabel>
+          </InsetIonItem>
         </IonList>
 
         <IonList inset color="primary">

diff --git a/src/services/db.ts b/src/services/db.ts
@@ -109,30 +109,9 @@ export const OSwipeActionAll = {
 export type SwipeAction =
   (typeof OSwipeActionAll)[keyof typeof OSwipeActionAll];
 
-export type SwipeDirection = "far_start" | "start" | "end" | "far_end";
+export type SwipeDirection = "farStart" | "start" | "end" | "farEnd";
 export type SwipeActions = { [id in SwipeDirection]: SwipeAction };
 
-export const default_swipe_actions_post: SwipeActions = {
-  far_start: OSwipeActionPost.Downvote,
-  start: OSwipeActionPost.Upvote,
-  end: OSwipeActionPost.Reply,
-  far_end: OSwipeActionPost.Hide,
-} as const;
-
-export const default_swipe_actions_comment: SwipeActions = {
-  far_start: OSwipeActionComment.Downvote,
-  start: OSwipeActionComment.Upvote,
-  end: OSwipeActionComment.Collapse,
-  far_end: OSwipeActionComment.Reply,
-} as const;
-
-export const default_swipe_actions_inbox: SwipeActions = {
-  far_start: OSwipeActionInbox.Downvote,
-  start: OSwipeActionInbox.Upvote,
-  end: OSwipeActionInbox.MarkUnread,
-  far_end: OSwipeActionInbox.Reply,
-} as const;
-
 export type SettingValueTypes = {
   collapse_comment_threads: CommentThreadCollapse;
   user_instance_url_display: InstanceUrlDisplayMode;