refactor: types

NoodleOfDeath · Oct 9, 2023 · 93a1d23 · 93a1d23
1 parent 4033f72
commit 93a1d23
Show file tree

Hide file tree

Showing 16 changed files with 54 additions and 67 deletions.
diff --git a/src/mobile/ios/ReadLess.xcodeproj/project.pbxproj b/src/mobile/ios/ReadLess.xcodeproj/project.pbxproj
@@ -1722,7 +1722,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.16.3;
+				MARKETING_VERSION = 1.16.4;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -1763,7 +1763,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.16.3;
+				MARKETING_VERSION = 1.16.4;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

diff --git a/src/mobile/ios/ReadLess.xcworkspace/contents.xcworkspacedata b/src/mobile/ios/ReadLess.xcworkspace/contents.xcworkspacedata
diff --git a/src/mobile/src/components/common/RoutedScreen.tsx b/src/mobile/src/components/common/RoutedScreen.tsx
@@ -18,7 +18,7 @@ export function RoutedScreen({ ...props }: ScreenProps) {
       Linking.getInitialURL().then((url) => {
         if (url) {
           setPreference('loadedInitialUrl', true);
-          router({ navigator: navigation?.getParent('Stack'), url });
+          router({ stackNav: navigation?.getParent('stackNav'), url });
         }
       });
     }

diff --git a/src/mobile/src/components/common/Screen.tsx b/src/mobile/src/components/common/Screen.tsx
@@ -16,7 +16,7 @@ export function Screen({
   children,
   safeArea = true,
   ...props
-}: ScreenViewProps) {
+}: ScreenProps) {
   const theme = useTheme();
   return (
     <React.Fragment>

diff --git a/src/mobile/src/hooks/useNavigation.tsx b/src/mobile/src/hooks/useNavigation.tsx
@@ -9,48 +9,50 @@ import {
   ReadingFormat,
 } from '~/api';
 import { SessionContext } from '~/contexts';
-import { RoutingParams } from '~/screens';
+import { NavigationID, RoutingParams } from '~/screens';
 import { readingFormat, usePlatformTools } from '~/utils';
 
+export type Navigation = NativeStackNavigationProp<RoutingParams, keyof RoutingParams, NavigationID>;
+
 export function useNavigation() {
 
   const { emitEvent } = usePlatformTools();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const navigation = useRNNavigation<NativeStackNavigationProp<RoutingParams>>();
+  const navigation = useRNNavigation<Navigation>();
 
   const { preferredReadingFormat, setPreference } = React.useContext(SessionContext);
 
-  const navigate = React.useCallback(<R extends keyof RoutingParams>(route: R, params?: RoutingParams[R], navigator?: any) => {
+  const navigate = React.useCallback(<R extends keyof RoutingParams>(route: R, params?: RoutingParams[R], stackNav?: Navigation) => {
     emitEvent('navigate', route);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (navigator?.push ?? (navigation as any).push ?? navigation.navigate)(route, params as RoutingParams[R]);
+    return (stackNav?.push ?? (navigation as any).push ?? navigation.navigate)(route, params as RoutingParams[R]);
   }, [emitEvent, navigation]);
 
-  const search = React.useCallback((params: RoutingParams['search'], navigator?: any) => {
+  const search = React.useCallback((params: RoutingParams['search'], stackNav?: Navigation) => {
     const prefilter = params.prefilter;
     if (!prefilter) {
       return;
     }
     setPreference('searchHistory', (prev) => Array.from(new Set([prefilter, ...(prev ?? [])])).slice(0, 10));
-    navigate('search', params, navigator);
+    navigate('search', params, stackNav);
   }, [navigate, setPreference]);
 
-  const openSummary = React.useCallback((props: RoutingParams['summary'], navigator?: any) => {
+  const openSummary = React.useCallback((props: RoutingParams['summary'], stackNav?: Navigation) => {
     navigate('summary', {
       ...props,
       initialFormat: props.initialFormat ?? preferredReadingFormat ?? ReadingFormat.Bullets,
-    }, navigator);
+    }, stackNav);
   }, [navigate, preferredReadingFormat]);
 
-  const openPublisher = React.useCallback((publisher: PublicPublisherAttributes) => {
-    navigate('publisher', { publisher });
+  const openPublisher = React.useCallback((publisher: PublicPublisherAttributes, stackNav?: Navigation) => {
+    navigate('publisher', { publisher }, stackNav);
   }, [navigate]);
 
-  const openCategory = React.useCallback((category: PublicCategoryAttributes) => {
-    navigate('category', { category });
+  const openCategory = React.useCallback((category: PublicCategoryAttributes, stackNav?: Navigation) => {
+    navigate('category', { category }, stackNav);
   }, [navigate]);
 
-  const router = React.useCallback(({ url, navigator }: { url: string, navigator?: any }) => {
+  const router = React.useCallback(({ url, stackNav }: { url: string, stackNav?: Navigation }) => {
     // http://localhost:6969/read/?s=158&f=casual
     // https://dev.readless.ai/read/?s=158&f=casual
     // https://www.readless.ai/read/?s=4070&f=bullets
@@ -71,7 +73,7 @@ export function useNavigation() {
         return;
       }
       const initialFormat = readingFormat(params['f']);
-      openSummary({ initialFormat, summary }, navigator);
+      openSummary({ initialFormat, summary }, stackNav);
     } else
     if (route === 'top') {
       navigate('topStories');
@@ -81,23 +83,25 @@ export function useNavigation() {
       if (!filter) {
         return;
       }
-      search({ prefilter: filter }, navigator);
+      search({ prefilter: filter }, stackNav);
     } else
     if (route === 'publisher') {
       const publisher = params['publisher']?.trim();
       if (!publisher) {
         return;
       }
-      openPublisher({ name: publisher });
+      openPublisher({ displayName: '', name: publisher }, stackNav);
     } else
     if (route === 'category') {
       const category = params['category']?.trim();
       if (!category) {
         return;
       }
-      openCategory({ name: category });
+      openCategory({
+        displayName: '', icon: '', name: category, 
+      }, stackNav);
     } 
-  }, [navigate, navigation, search, openSummary, openPublisher, openCategory]);
+  }, [navigate, search, openSummary, openPublisher, openCategory]);
 
   return {
     navigate,

diff --git a/src/mobile/src/screens/BookmarksScreen.tsx b/src/mobile/src/screens/BookmarksScreen.tsx
@@ -21,11 +21,11 @@ import {
 import { SessionContext } from '~/contexts';
 import { useApiClient } from '~/hooks';
 import { strings } from '~/locales';
-import { ScreenProps } from '~/screens';
+import { ScreenComponent } from '~/screens';
 
 const pageSize = 10;
 
-export function BookmarksScreen({ navigation }: ScreenProps<'bookmarks'>) {
+export function BookmarksScreen({ navigation }: ScreenComponent<'bookmarks'>) {
 
   const { 
     bookmarkedSummaries,
@@ -58,7 +58,7 @@ export function BookmarksScreen({ navigation }: ScreenProps<'bookmarks'>) {
       headerRight: () => undefined,
       headerTitle: `${strings.bookmarks_header} (${bookmarkCount})`,
     });
-  }, [bookmarkCount, navigation]));
+  }, [bookmarkCount, navigation, viewFeature]));
 
   return (
     <Screen>

diff --git a/src/mobile/src/screens/CategoryScreen.tsx b/src/mobile/src/screens/CategoryScreen.tsx
@@ -13,12 +13,12 @@ import { ChannelIcon } from '~/components/post/ChannelIcon';
 import { SessionContext } from '~/contexts';
 import { useApiClient } from '~/hooks';
 import { strings } from '~/locales';
-import { ScreenProps } from '~/screens';
+import { ScreenComponent } from '~/screens';
 
 export function CategoryScreen({
   route,
   navigation,
-}: ScreenProps<'category'>) {
+}: ScreenComponent<'category'>) {
 
   const { getSummaries } = useApiClient();
 

diff --git a/src/mobile/src/screens/PublisherScreen.tsx b/src/mobile/src/screens/PublisherScreen.tsx
@@ -13,12 +13,12 @@ import { ChannelIcon } from '~/components/post/ChannelIcon';
 import { SessionContext } from '~/contexts';
 import { useApiClient } from '~/hooks';
 import { strings } from '~/locales';
-import { ScreenProps } from '~/screens';
+import { ScreenComponent } from '~/screens';
 
 export function PublisherScreen({
   route,
   navigation,
-}: ScreenProps<'publisher'>) {
+}: ScreenComponent<'publisher'>) {
 
   const { getSummaries } = useApiClient();
 

diff --git a/src/mobile/src/screens/RecapScreen.tsx b/src/mobile/src/screens/RecapScreen.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
 import { Recap, RoutedScreen } from '~/components';
-import { ScreenProps } from '~/screens';
+import { ScreenComponent } from '~/screens';
 
-export function RecapScreen({ route }: ScreenProps<'recap'>) {
+export function RecapScreen({ route }: ScreenComponent<'recap'>) {
   const recap = React.useMemo(() => route?.params?.recap, [route]);
   return (
     <RoutedScreen>

diff --git a/src/mobile/src/screens/SearchScreen.tsx b/src/mobile/src/screens/SearchScreen.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 
 import { RoutedScreen, SummaryList } from '~/components';
 import { useApiClient } from '~/hooks';
-import { ScreenProps } from '~/screens';
+import { ScreenComponent } from '~/screens';
 
 export function SearchScreen({ 
   route,
   navigation: _navigation,
-}: ScreenProps<'search'>) {
+}: ScreenComponent<'search'>) {
 
   const { getSummaries } = useApiClient();
   return (

diff --git a/src/mobile/src/screens/StatsScreen.tsx b/src/mobile/src/screens/StatsScreen.tsx
@@ -9,12 +9,12 @@ import {
   View,
 } from '~/components';
 import { SessionContext } from '~/core';
-import { ScreenProps } from '~/screens';
+import { ScreenComponent } from '~/screens';
 
 export function StatsScreen({
   route: _route,
   navigation: _navigation,
-}: ScreenProps<'stats'>) {
+}: ScreenComponent<'stats'>) {
   const { setPreference } = React.useContext(SessionContext);
   return (
     <Screen>

diff --git a/src/mobile/src/screens/SummaryScreen.tsx b/src/mobile/src/screens/SummaryScreen.tsx
@@ -19,12 +19,12 @@ import {
 import {  SessionContext } from '~/contexts';
 import { useApiClient } from '~/hooks';
 import { strings } from '~/locales';
-import { ScreenProps } from '~/screens';
+import { ScreenComponent } from '~/screens';
 
 export function SummaryScreen({
   route,
   navigation,
-}: ScreenProps<'summary'>) {
+}: ScreenComponent<'summary'>) {
 
   const { getSummary, interactWithSummary } = useApiClient();
   const { preferredReadingFormat } = React.useContext(SessionContext);

diff --git a/src/mobile/src/screens/home/HomeScreen.tsx b/src/mobile/src/screens/home/HomeScreen.tsx
@@ -19,7 +19,7 @@ import {
   LiveFeedTab,
   OldNewsTab,
   RoutingParams,
-  ScreenProps,
+  ScreenComponent,
   TopStoriesTab,
   YourNewsTab,
 } from '~/screens';
@@ -29,7 +29,7 @@ const Tab = createMaterialTopTabNavigator();
 export function HomeScreen({ 
   route: _route,
   navigation: _navigation,
-}: ScreenProps<'home'>) {
+}: ScreenComponent<'home'>) {
 
   const theme = useTheme();
   const { followCount } = React.useContext(SessionContext);

diff --git a/src/mobile/src/screens/home/Tabs.tsx b/src/mobile/src/screens/home/Tabs.tsx
@@ -11,12 +11,12 @@ import {
 } from '~/components';
 import { SessionContext, useApiClient } from '~/core';
 import { strings } from '~/locales';
-import {  ScreenProps } from '~/screens';
+import {  ScreenComponent } from '~/screens';
 
 export function OldNewsTab({
   route: _route,
   navigation: _navigation,
-}: ScreenProps<'oldNews'>) {
+}: ScreenComponent<'oldNews'>) {
   return (
     <RecapList
       header={ (
@@ -33,7 +33,7 @@ export function OldNewsTab({
 export function YourNewsTab({ 
   route: _route,
   navigation: _navigation,
-}: ScreenProps<'yourNews'>) {
+}: ScreenComponent<'yourNews'>) {
   const { getSummaries } = useApiClient();
   const { followFilter } = React.useContext(SessionContext);
   const [filter, setFilter] = React.useState(followFilter);
@@ -53,7 +53,7 @@ export function YourNewsTab({
 export function TopStoriesTab({ 
   route: _route,
   navigation: _navigation,
-}: ScreenProps<'topStories'>) {
+}: ScreenComponent<'topStories'>) {
   const { getTopStories } = useApiClient();
   return ( 
     <SummaryList
@@ -68,7 +68,7 @@ export function TopStoriesTab({
 export function LiveFeedTab({ 
   route: _route,
   navigation: _navigation,
-}: ScreenProps<'liveFeed'>) {
+}: ScreenComponent<'liveFeed'>) {
   const { getSummaries } = useApiClient();
   return ( 
     <SummaryList 

diff --git a/src/mobile/src/screens/settings/SettingsScreen.tsx b/src/mobile/src/screens/settings/SettingsScreen.tsx
@@ -5,9 +5,9 @@ import {
   ScrollView,
   SettingsTable,
 } from '~/components';
-import { ScreenProps } from '~/screens';
+import { ScreenComponent } from '~/screens';
 
-export function SettingsScreen({ navigation }: ScreenProps<'settings'>) {
+export function SettingsScreen({ navigation }: ScreenComponent<'settings'>) {
   React.useEffect(() => {
     navigation?.setOptions({ headerRight: () => undefined });
   }, [navigation]);

diff --git a/src/mobile/src/screens/types.ts b/src/mobile/src/screens/types.ts
@@ -1,10 +1,6 @@
 import React from 'react';
 
-import {
-  LinkingOptions,
-  ParamListBase,
-  RouteProp,
-} from '@react-navigation/native';
+import { LinkingOptions, RouteProp } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import {
@@ -15,6 +11,8 @@ import {
   RecapAttributes,
 } from '~/api';
 
+export type NavigationID = 'stackNav' | 'leftDrawerNav' | 'rightDrawerNav';
+
 export type RoutingParams = {
   // main
   default: undefined;
@@ -82,19 +80,7 @@ export const NAVIGATION_LINKING_OPTIONS: LinkingOptions<RoutingParams> = {
   ],
 };
 
-export type ScreenComponentType<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList
-> =
-  | React.ComponentType<{
-      route: RouteProp<ParamList, RouteName>;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      navigation: any;
-    }>
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  | React.ComponentType<{}>;
-
-export type ScreenProps<Path extends keyof RoutingParams = keyof RoutingParams, C extends React.ComponentType = React.ComponentType> = {
+export type ScreenComponent<Path extends keyof RoutingParams = keyof RoutingParams, C extends React.ComponentType = React.ComponentType> = {
   name?: Path;
   component?: C;
   icon?: string;