First step of adding filter editing support

src/utils/navigation/navigators.ts

@@ -186,3 +186,18 @@ export type TabMeProfileStackParamList = {
 }
 export type TabMeProfileStackScreenProps<T extends keyof TabMeProfileStackParamList> =
   NativeStackScreenProps<TabMeProfileStackParamList, T>
+
+export type TabMePreferencesStackParamList = {
+  'Tab-Me-Preferences-Root': undefined
+  'Tab-Me-Preferences-Filters': undefined
+  'Tab-Me-Preferences-Filter':
+    | {
+        type: 'add'
+      }
+    | {
+        type: 'edit'
+        filter: Mastodon.Filter<'v2'>
+      }
+}
+export type TabMePreferencesStackScreenProps<T extends keyof TabMePreferencesStackParamList> =
+  NativeStackScreenProps<TabMePreferencesStackParamList, T>

src/utils/queryHooks/apps.ts

@@ -1,10 +1,4 @@
-import {
-  QueryFunctionContext,
-  useMutation,
-  UseMutationOptions,
-  useQuery,
-  UseQueryOptions
-} from '@tanstack/react-query'
+import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
 import apiGeneral from '@utils/api/general'
 import apiInstance from '@utils/api/instance'
 import { AxiosError } from 'axios'
@@ -12,7 +6,7 @@ import * as AuthSession from 'expo-auth-session'
 
 export type QueryKeyApps = ['Apps']
 
-const queryFunctionApps = async ({ queryKey }: QueryFunctionContext<QueryKeyApps>) => {
+const queryFunctionApps = async () => {
   const res = await apiInstance<Mastodon.Apps>({
     method: 'get',
     url: 'apps/verify_credentials'

src/utils/queryHooks/filters.ts

@@ -1,24 +1,57 @@
-import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { QueryFunctionContext, useQuery, UseQueryOptions } from '@tanstack/react-query'
 import apiInstance from '@utils/api/instance'
 import { AxiosError } from 'axios'
 
-export type QueryKeyFilters = ['Filters']
+export type QueryKeyFilter = ['Filter', { id: Mastodon.Filter<'v2'>['id'] }]
 
-const queryFunction = () =>
-  apiInstance<Mastodon.Filter<'v1'>[]>({
+const filterQueryFunction = async ({ queryKey }: QueryFunctionContext<QueryKeyFilter>) => {
+  const res = await apiInstance<Mastodon.Filter<'v2'>>({
     method: 'get',
-    url: 'filters'
-  }).then(res => res.body)
+    version: 'v2',
+    url: `filters/${queryKey[1].id}`
+  })
+  return res.body
+}
 
-const useFiltersQuery = (params?: {
-  options: UseQueryOptions<Mastodon.Filter<'v1'>[], AxiosError>
+const useFilterQuery = ({
+  filter,
+  options
+}: {
+  filter: Mastodon.Filter<'v2'>
+  options?: UseQueryOptions<Mastodon.Filter<'v2'>, AxiosError>
 }) => {
-  const queryKey: QueryKeyFilters = ['Filters']
-  return useQuery(queryKey, queryFunction, {
+  const queryKey: QueryKeyFilter = ['Filter', { id: filter.id }]
+  return useQuery(queryKey, filterQueryFunction, {
+    ...options,
+    staleTime: Infinity,
+    cacheTime: Infinity
+  })
+}
+
+export type QueryKeyFilters = ['Filters', { version: 'v1' | 'v2' }]
+
+const filtersQueryFunction = async <T extends 'v1' | 'v2' = 'v1'>({
+  queryKey
+}: QueryFunctionContext<QueryKeyFilters>) => {
+  const version = queryKey[1].version
+  const res = await apiInstance<Mastodon.Filter<T>[]>({
+    method: 'get',
+    version,
+    url: 'filters'
+  })
+  return res.body
+}
+
+const useFiltersQuery = <T extends 'v1' | 'v2' = 'v1'>(params?: {
+  version?: T
+  options?: UseQueryOptions<Mastodon.Filter<T>[], AxiosError>
+}) => {
+  const queryKey: QueryKeyFilters = ['Filters', { version: params?.version || 'v1' }]
+  return useQuery(queryKey, filtersQueryFunction, {
     ...params?.options,
     staleTime: Infinity,
     cacheTime: Infinity
   })
 }
 
-export { useFiltersQuery }
+export { useFilterQuery, useFiltersQuery }

src/utils/styles/themes.ts

@@ -42,9 +42,9 @@ const themeColors: {
     dark_darker: 'rgb(130, 130, 130)'
   },
   disabled: {
-    light: 'rgb(200, 200, 200)',
-    dark_lighter: 'rgb(120, 120, 120)',
-    dark_darker: 'rgb(66, 66, 66)'
+    light: 'rgb(220, 220, 220)',
+    dark_lighter: 'rgb(70, 70, 70)',
+    dark_darker: 'rgb(50, 50, 50)'
   },
   blue: {
     light: 'rgb(43, 144, 221)',