Add default comment sort (#210)

Also add general settings page and refactor appearanceSlice to settingsSlice

Co-authored-by: Alexander Harding <2166114+aeharding@users.noreply.github.com>

src/GlobalStyles.tsx

@@ -15,7 +15,7 @@ interface GlobalStylesProps {
 export default function GlobalStyles({ children }: GlobalStylesProps) {
   const systemDarkMode = useSystemDarkMode();
   const { fontSizeMultiplier, useSystemFontSize } = useAppSelector(
-    (state) => state.appearance.font
+    (state) => state.settings.appearance.font
   );
 
   const baseFontStyles = useSystemFontSize
@@ -27,7 +27,7 @@ export default function GlobalStyles({ children }: GlobalStylesProps) {
       `;
 
   const { userDarkMode, usingSystemDarkMode } = useAppSelector(
-    (state) => state.appearance.dark
+    (state) => state.settings.appearance.dark
   );
 
   const isDark = usingSystemDarkMode ? systemDarkMode : userDarkMode;

src/TabbedRoutes.tsx

@@ -55,6 +55,7 @@ import { PageContextProvider } from "./features/auth/PageContext";
 import { scrollUpIfNeeded } from "./helpers/scrollUpIfNeeded";
 import BlocksSettingsPage from "./pages/settings/BlocksSettingsPage";
 import { getDefaultServer } from "./services/app";
+import GeneralPage from "./pages/settings/GeneralPage";
 
 const Interceptor = styled.div`
   position: absolute;
@@ -70,6 +71,7 @@ export default function TabbedRoutes() {
   const totalUnread = useAppSelector(totalUnreadSelector);
   const { status: updateStatus } = useContext(UpdateContext);
   const shouldInstall = useShouldInstall();
+  const ready = useAppSelector((state) => state.settings.ready);
 
   const settingsNotificationCount =
     (shouldInstall ? 1 : 0) + (updateStatus === "outdated" ? 1 : 0);
@@ -209,6 +211,8 @@ export default function TabbedRoutes() {
     ];
   }
 
+  if (!ready) return;
+
   return (
     <PageContextProvider value={{ page: pageRef.current as HTMLElement }}>
       {/* TODO key={} resets the tab route stack whenever your instance changes. */}
@@ -321,6 +325,9 @@ export default function TabbedRoutes() {
           <Route exact path="/settings/update">
             <UpdateAppPage />
           </Route>
+          <Route exact path="/settings/general">
+            <GeneralPage />
+          </Route>
           <Route exact path="/settings/appearance">
             <AppearancePage />
           </Route>

src/features/comment/CommentSort.tsx

@@ -65,7 +65,7 @@ export default function CommentSort({ sort, setSort }: CommentSortProps) {
   );
 }
 
-function getSortIcon(sort: CommentSortType): string {
+export function getSortIcon(sort: CommentSortType): string {
   switch (sort) {
     case "Hot":
       return flameOutline;

src/features/comment/Comments.tsx

@@ -30,7 +30,7 @@ import useClient from "../../helpers/useClient";
 import { useSetActivePage } from "../auth/AppContext";
 import { FeedContext } from "../feed/FeedContext";
 import { jwtSelector } from "../auth/authSlice";
-import { defaultCommentDepthSelector } from "../settings/appearance/appearanceSlice";
+import { defaultCommentDepthSelector } from "../settings/settingsSlice";
 
 const centerCss = css`
   position: relative;

src/features/feed/Feed.tsx

@@ -50,7 +50,7 @@ export default function Feed<I>({
   const [atEnd, setAtEnd] = useState(false);
   const [present] = useIonToast();
   const postAppearanceType = useAppSelector(
-    (state) => state.appearance.posts.type
+    (state) => state.settings.appearance.posts.type
   );
 
   const filteredItems = useMemo(

src/features/feed/PostCommentFeed.tsx

@@ -37,7 +37,7 @@ export default function PostCommentFeed({
 }: PostCommentFeed) {
   const dispatch = useAppDispatch();
   const postAppearanceType = useAppSelector(
-    (state) => state.appearance.posts.type
+    (state) => state.settings.appearance.posts.type
   );
   const postHiddenById = useAppSelector(postHiddenByIdSelector);
 

src/features/post/inFeed/Post.tsx

@@ -63,7 +63,7 @@ export default function Post(props: PostProps) {
 
   const buildGeneralBrowseLink = useBuildGeneralBrowseLink();
   const postAppearanceType = useAppSelector(
-    (state) => state.appearance.posts.type
+    (state) => state.settings.appearance.posts.type
   );
 
   const postBody = (() => {

src/features/post/inFeed/compact/CompactPost.tsx

@@ -96,11 +96,11 @@ const EndDetails = styled.div`
 
 export default function CompactPost({ post, communityMode }: PostProps) {
   const compactThumbnailPositionType = useAppSelector(
-    (state) => state.appearance.compact.thumbnailsPosition
+    (state) => state.settings.appearance.compact.thumbnailsPosition
   );
 
   const compactShowVotingButtons = useAppSelector(
-    (state) => state.appearance.compact.showVotingButtons
+    (state) => state.settings.appearance.compact.showVotingButtons
   );
 
   const hasBeenRead: boolean =

src/features/post/inFeed/compact/Thumbnail.tsx

@@ -96,7 +96,9 @@ export default function Thumbnail({ post }: ImgProps) {
 
     if (markdownLoneImage) return markdownLoneImage.url;
   })();
-  const blurNsfw = useAppSelector((state) => state.appearance.posts.blurNsfw);
+  const blurNsfw = useAppSelector(
+    (state) => state.settings.appearance.posts.blurNsfw
+  );
 
   const nsfw = useMemo(() => isNsfwBlurred(post, blurNsfw), [post, blurNsfw]);
 

src/features/post/inFeed/large/LargePost.tsx

@@ -111,7 +111,9 @@ export default function LargePost({ post, communityMode }: PostProps) {
     () => (post.post.body ? findLoneImage(post.post.body) : undefined),
     [post]
   );
-  const blurNsfw = useAppSelector((state) => state.appearance.posts.blurNsfw);
+  const blurNsfw = useAppSelector(
+    (state) => state.settings.appearance.posts.blurNsfw
+  );
 
   function renderPostBody() {
     if (post.post.url) {

src/features/post/shared/Embed.tsx

@@ -80,7 +80,9 @@ export default function Embed({ post, className }: EmbedProps) {
     e.stopPropagation();
     dispatch(setPostRead(post.post.id));
   };
-  const blurNsfw = useAppSelector((state) => state.appearance.posts.blurNsfw);
+  const blurNsfw = useAppSelector(
+    (state) => state.settings.appearance.posts.blurNsfw
+  );
 
   return (
     <Container

src/features/settings/appearance/AppearanceSettings.tsx

@@ -1,14 +1,12 @@
 import TextSize from "./TextSize";
 import Posts from "./posts/Posts";
-import Comments from "./comments/Comments";
 import System from "./system/System";
 import CompactSettings from "./CompactSettings";
 
 export default function AppearanceSettings() {
   return (
     <>
       <TextSize />
-      <Comments />
       <Posts />
       <CompactSettings />
       <System />

src/features/settings/appearance/CompactSettings.tsx

@@ -11,7 +11,7 @@ import { InsetIonItem } from "../../user/Profile";
 import { useAppSelector, useAppDispatch } from "../../../store";
 import { useState } from "react";
 import { startCase } from "lodash";
-import { setShowVotingButtons, setThumbnailPosition } from "./appearanceSlice";
+import { setShowVotingButtons, setThumbnailPosition } from "../settingsSlice";
 import {
   OCompactThumbnailPositionType,
   CompactThumbnailPositionType,
@@ -33,11 +33,11 @@ export default function CompactSettings() {
 
   const dispatch = useAppDispatch();
   const compactThumbnailsPositionType = useAppSelector(
-    (state) => state.appearance.compact.thumbnailsPosition
+    (state) => state.settings.appearance.compact.thumbnailsPosition
   );
 
   const compactShowVotingButtons = useAppSelector(
-    (state) => state.appearance.compact.showVotingButtons
+    (state) => state.settings.appearance.compact.showVotingButtons
   );
 
   return (

src/features/settings/appearance/TextSize.tsx

@@ -3,7 +3,7 @@ import { css } from "@emotion/react";
 import { IonLabel, IonList, IonRange, IonToggle } from "@ionic/react";
 import { InsetIonItem } from "../../../pages/profile/ProfileFeedItemsPage";
 import { useAppDispatch, useAppSelector } from "../../../store";
-import { setFontSizeMultiplier, setUseSystemFontSize } from "./appearanceSlice";
+import { setFontSizeMultiplier, setUseSystemFontSize } from "../settingsSlice";
 
 export const ListHeader = styled.div`
   font-size: 0.8em;
@@ -44,7 +44,7 @@ const MIN_LARGER_FONT_ADJUSTMENT = 2;
 export default function TextSize() {
   const dispatch = useAppDispatch();
   const { fontSizeMultiplier, useSystemFontSize } = useAppSelector(
-    (state) => state.appearance.font
+    (state) => state.settings.appearance.font
   );
 
   const ranges =

src/features/settings/appearance/posts/BlurNsfw.tsx

@@ -9,7 +9,7 @@ import {
   OverlayEventDetail,
 } from "@ionic/core";
 import { OPostBlurNsfw, PostBlurNsfwType } from "../../../../services/db";
-import { setBlurNsfwState } from "../appearanceSlice";
+import { setBlurNsfwState } from "../../settingsSlice";
 
 const BUTTONS: ActionSheetButton<PostBlurNsfwType>[] = Object.values(
   OPostBlurNsfw
@@ -25,7 +25,7 @@ export default function BlurNsfw() {
 
   const dispatch = useAppDispatch();
   const nsfwBlurred = useAppSelector(
-    (state) => state.appearance.posts.blurNsfw
+    (state) => state.settings.appearance.posts.blurNsfw
   );
 
   return (

src/features/settings/appearance/posts/PostSize.tsx

@@ -7,7 +7,7 @@ import {
   OPostAppearanceType,
   PostAppearanceType,
   setPostAppearance,
-} from "../appearanceSlice";
+} from "../../settingsSlice";
 import { startCase } from "lodash";
 import { useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../../../store";
@@ -28,7 +28,7 @@ export default function PostSize() {
 
   const dispatch = useAppDispatch();
   const postsAppearanceType = useAppSelector(
-    (state) => state.appearance.posts.type
+    (state) => state.settings.appearance.posts.type
   );
 
   return (

src/features/settings/appearance/system/DarkMode.tsx

@@ -1,13 +1,13 @@
 import { IonLabel, IonList, IonToggle } from "@ionic/react";
 import { InsetIonItem } from "../../../../pages/profile/ProfileFeedItemsPage";
 import { useAppDispatch, useAppSelector } from "../../../../store";
-import { setUseSystemDarkMode } from "../appearanceSlice";
+import { setUseSystemDarkMode } from "../../settingsSlice";
 import UserDarkMode from "./UserDarkMode";
 
 export default function DarkMode() {
   const dispatch = useAppDispatch();
   const { usingSystemDarkMode } = useAppSelector(
-    (state) => state.appearance.dark
+    (state) => state.settings.appearance.dark
   );
 
   return (

src/features/settings/appearance/system/UserDarkMode.tsx

@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import { IonLabel, IonList, IonRadio, IonRadioGroup } from "@ionic/react";
 import { InsetIonItem } from "../../../../pages/profile/ProfileFeedItemsPage";
 import { useAppDispatch, useAppSelector } from "../../../../store";
-import { setUserDarkMode } from "../appearanceSlice";
+import { setUserDarkMode } from "../../settingsSlice";
 
 const ListHeader = styled.div`
   font-size: 0.8em;
@@ -14,7 +14,7 @@ const ListHeader = styled.div`
 export default function UserDarkMode() {
   const dispatch = useAppDispatch();
   const userDarkMode = useAppSelector(
-    (state) => state.appearance.dark.userDarkMode
+    (state) => state.settings.appearance.dark.userDarkMode
   );
 
   return (

src/features/settings/general/GeneralSettings.tsx

@@ -0,0 +1,9 @@
+import Comments from "./comments/Comments";
+
+export default function GeneralSettings() {
+  return (
+    <>
+      <Comments />
+    </>
+  );
+}

src/features/settings/appearance/comments/CollapsedByDefault.tsx → src/features/settings/general/comments/CollapsedByDefault.tsx

@@ -5,7 +5,7 @@ import { useAppDispatch, useAppSelector } from "../../../../store";
 import {
   OCommentThreadCollapse,
   setCommentsCollapsed,
-} from "../appearanceSlice";
+} from "../../settingsSlice";
 
 export const ListHeader = styled.div`
   font-size: 0.8em;
@@ -18,7 +18,7 @@ export default function CollapsedByDefault() {
   const dispatch = useAppDispatch();
   const { collapseCommentThreads } = useAppSelector(
     // this needs a better naming
-    (state) => state.appearance.comments
+    (state) => state.settings.general.comments
   );
 
   return (

src/features/settings/appearance/comments/Comments.tsx → src/features/settings/general/comments/Comments.tsx

@@ -1,5 +1,8 @@
 import { IonLabel, IonList } from "@ionic/react";
-import CollapsedByDefault, { ListHeader } from "./CollapsedByDefault";
+import CollapsedByDefault, {
+  ListHeader,
+} from "../../general/comments/CollapsedByDefault";
+import DefaultSort from "./DefaultSort";
 
 export default function Comments() {
   return (
@@ -9,6 +12,7 @@ export default function Comments() {
       </ListHeader>
       <IonList inset>
         <CollapsedByDefault />
+        <DefaultSort />
       </IonList>
     </>
   );

src/features/settings/general/comments/DefaultSort.tsx

@@ -0,0 +1,59 @@
+import { ActionSheetButton, IonActionSheet, IonLabel } from "@ionic/react";
+import { startCase } from "lodash";
+import { InsetIonItem } from "../../../user/Profile";
+import { useAppDispatch, useAppSelector } from "../../../../store";
+import { useState } from "react";
+import {
+  CommentDefaultSort,
+  OCommentDefaultSort,
+} from "../../../../services/db";
+import { IonActionSheetCustomEvent, OverlayEventDetail } from "@ionic/core";
+import { setDefaultCommentSort } from "../../settingsSlice";
+import { getSortIcon } from "../../../comment/CommentSort";
+
+const BUTTONS: ActionSheetButton<CommentDefaultSort>[] = Object.values(
+  OCommentDefaultSort
+).map(function (commentSort) {
+  return {
+    text: startCase(commentSort),
+    data: commentSort,
+    icon: getSortIcon(commentSort),
+  } as ActionSheetButton<CommentDefaultSort>;
+});
+
+export default function DefaultSort() {
+  const [open, setOpen] = useState(false);
+
+  const dispatch = useAppDispatch();
+  const postsAppearanceType = useAppSelector(
+    (state) => state.settings.general.comments.sort
+  );
+
+  return (
+    <>
+      <InsetIonItem button onClick={() => setOpen(true)}>
+        <IonLabel>Default Sort</IonLabel>
+        <IonLabel slot="end" color="medium">
+          {startCase(postsAppearanceType)}
+        </IonLabel>
+        <IonActionSheet
+          cssClass="left-align-buttons"
+          isOpen={open}
+          onDidDismiss={() => setOpen(false)}
+          onWillDismiss={(
+            e: IonActionSheetCustomEvent<OverlayEventDetail<CommentDefaultSort>>
+          ) => {
+            if (e.detail.data) {
+              dispatch(setDefaultCommentSort(e.detail.data));
+            }
+          }}
+          header="Default Comments Sort..."
+          buttons={BUTTONS.map((b) => ({
+            ...b,
+            role: postsAppearanceType === b.data ? "selected" : undefined,
+          }))}
+        />
+      </InsetIonItem>
+    </>
+  );
+}