add listing type context menu

src/components/Common/ContextMenu/components/buttons/ListingTypeContextMenuButton.tsx

@@ -0,0 +1,31 @@
+import React, { useCallback, useMemo } from 'react';
+import { ListingType } from 'lemmy-js-client';
+import { OnPressMenuItemEventObject } from 'react-native-ios-context-menu';
+import ContextMenuButton from '@components/Common/ContextMenu/components/buttons/ContextMenuButton';
+import { IconMap } from '@src/types/IconMap';
+import ListingTypeContextMenu from '@components/Common/ContextMenu/components/ListingTypeContextMenu';
+
+interface IProps {
+  listingType: ListingType;
+  setListingType: React.Dispatch<React.SetStateAction<ListingType>>;
+}
+
+function SortTypeContextMenuButton({
+  listingType,
+  setListingType,
+}: IProps): React.JSX.Element {
+  const onPress = useCallback((e: OnPressMenuItemEventObject) => {
+    setListingType(e.nativeEvent.actionKey as ListingType);
+  }, []);
+
+  // @ts-expect-error - TODO Fix this
+  const icon = useMemo(() => IconMap[listingType], [listingType]);
+
+  return (
+    <ListingTypeContextMenu selection={listingType} onPressMenuItem={onPress}>
+      <ContextMenuButton icon={icon} />
+    </ListingTypeContextMenu>
+  );
+}
+
+export default React.memo(SortTypeContextMenuButton);

src/components/Feed/components/MainFeed.tsx

@@ -18,14 +18,16 @@ import CommunityHeader from '@components/Feed/components/Community/CommunityHead
 import { FlashList } from '@shopify/flash-list';
 import RefreshControl from '@components/Common/Gui/RefreshControl';
 import { useScrollToTop } from '@react-navigation/native';
-import { SortType } from 'lemmy-js-client';
+import { ListingType, SortType } from 'lemmy-js-client';
 import {
   useDefaultCommunitySort,
+  useDefaultListingType,
   useDefaultSort,
 } from '@src/state/settings/settingsStore';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { useCurrentAccount } from '@src/state/account/accountStore';
 import SortTypeContextMenuButton from '@components/Common/ContextMenu/components/buttons/SortTypeContextMenuButton';
+import HStack from '@components/Common/Stack/HStack';
+import ListingTypeContextMenuButton from '@components/Common/ContextMenu/components/buttons/ListingTypeContextMenuButton';
 
 interface RenderItem {
   item: number;
@@ -46,11 +48,14 @@ export default function MainFeed(): React.JSX.Element {
 
   const defaultSort = useDefaultSort();
   const defaultCommunitySort = useDefaultCommunitySort();
-  const account = useCurrentAccount();
+  const defaultListingType = useDefaultListingType();
 
   const [sortType, setSortType] = useState<SortType>(
     params?.name != null ? defaultCommunitySort ?? 'Hot' : defaultSort ?? 'Hot',
   );
+  const [listingType, setListingType] = useState<ListingType>(
+    defaultListingType ?? 'All',
+  );
 
   const flashListRef = useRef<FlashList<number>>();
 
@@ -62,8 +67,9 @@ export default function MainFeed(): React.JSX.Element {
     (): IGetPostOptions => ({
       communityName: (params?.name as unknown as string) ?? undefined,
       sort: sortType,
+      ...(params?.name == null && { type: listingType }),
     }),
-    [params?.name, sortType],
+    [params?.name, sortType, listingType],
   );
 
   // Create our data loader and get the initial content
@@ -90,10 +96,16 @@ export default function MainFeed(): React.JSX.Element {
   useEffect(() => {
     navigation.setOptions({
       headerRight: () => (
-        <SortTypeContextMenuButton
-          sortType={sortType}
-          setSortType={setSortType}
-        />
+        <HStack space="$4">
+          <ListingTypeContextMenuButton
+            listingType={listingType}
+            setListingType={setListingType}
+          />
+          <SortTypeContextMenuButton
+            sortType={sortType}
+            setSortType={setSortType}
+          />
+        </HStack>
       ),
     });
 
@@ -102,7 +114,7 @@ export default function MainFeed(): React.JSX.Element {
       onRefresh();
       flashListRef.current?.scrollToOffset({ offset: 0 });
     }
-  }, [sortType]);
+  }, [sortType, listingType]);
 
   // Callback for loading more data when we hit the end
   const onEndReached = useCallback(() => {
@@ -116,6 +128,8 @@ export default function MainFeed(): React.JSX.Element {
 
   // Callback for refreshing the data
   const onRefresh = useCallback(() => {
+    console.log(defaultOptions);
+
     refresh(async () => {
       await instance.getPosts(key, {
         ...defaultOptions,

src/state/settings/settingsStore.ts

@@ -243,3 +243,6 @@ export const useDefaultCommunitySort = (): SortType | undefined =>
 
 export const useDefaultCommentSort = (): CommentSortType | undefined =>
   useSettingsStore((state) => state.defaultCommentSort);
+
+export const useDefaultListingType = (): ListingType | undefined =>
+  useSettingsStore((state) => state.defaultListingType);

src/types/IconMap.tsx

@@ -3,6 +3,7 @@ import {
   ArrowUp,
   Bookmark,
   BookmarkCheck,
+  Box,
   CalendarCheck,
   CalendarDays,
   CalendarMinus,
@@ -13,7 +14,10 @@ import {
   Clock11,
   Clock6,
   Flame,
+  Globe,
+  Heart,
   MessageCircle,
+  Shield,
   Zap,
 } from '@tamagui/lucide-icons';
 
@@ -41,6 +45,10 @@ export const IconMap = {
   TopAll: ArrowUp,
   MostComments: MessageCircle,
   NewComments: MessageCircle,
+  Moderated: Shield,
+  Local: Box,
+  Subscribed: Heart,
+  All: Globe,
 };
 
 export type IconType = keyof typeof IconMap;