refactor: redux to zustand refactor part 1

app/components/dailyQuestion/DailyQuestionComponent.tsx

@@ -1,13 +1,12 @@
 import React, {useCallback} from 'react';
 import {View, StyleSheet} from 'react-native';
-import {useSelector} from 'react-redux';
 import {TouchableDebounce} from '..';
 import {DailyQuestionChoice, HomeBlockDailyQuestion} from '../../api/Types';
-import {selectDailyQuestionChoice} from '../../redux/selectors';
 import {useTheme} from '../../Theme';
 import {IconCheck} from '../svg';
 import TextComponent from '../text/Text';
 import {useSetDailyQuestionChoice} from './useSetDailyQuestionChoice';
+import {useSettingsStore} from '../../state/settings_store';
 
 interface DailyQuestionComponentProps {
   block: HomeBlockDailyQuestion;
@@ -17,7 +16,7 @@ const DailyQuestionComponent: React.FC<DailyQuestionComponentProps> = ({block})
   const {data: dailyQuestion} = block;
   const {colors, strings} = useTheme();
 
-  const answer = useSelector(selectDailyQuestionChoice);
+  const answer = useSettingsStore((state) => state.daily_question_response);
   const callVoteAPI = useSetDailyQuestionChoice();
 
   const renderChoice = useCallback(

app/components/dailyQuestion/DailyQuestionWrapper.tsx

@@ -2,8 +2,7 @@ import React, {useEffect} from 'react';
 import {StyleSheet, View} from 'react-native';
 import useDailyQuestionData from './useDailyQuestionData';
 import DailyQuestionComponent from './DailyQuestionComponent';
-import {useSelector} from 'react-redux';
-import {selectDailyQuestionChoice} from '../../redux/selectors';
+import {useSettingsStore} from '../../state/settings_store';
 
 interface DailyQuestionWrapperProps {
   id: string | number;
@@ -14,7 +13,7 @@ const VOTES_REFRESH_RATE = 1000 * 15; // 15 sec
 
 const DailyQuestionWrapper: React.FC<DailyQuestionWrapperProps> = ({id, contentMargin}) => {
   const {question, refresh} = useDailyQuestionData(id);
-  const answer = useSelector(selectDailyQuestionChoice);
+  const answer = useSettingsStore((state) => state.daily_question_response);
 
   useEffect(() => {
     let interval: NodeJS.Timeout;

app/components/dailyQuestion/useSetDailyQuestionChoice.ts

@@ -1,15 +1,14 @@
 import {useCallback, useState} from 'react';
-import {useDispatch} from 'react-redux';
 import {DailyQuestionChoice} from '../../api/Types';
-import {setDailyQuestionChoice} from '../../redux/actions';
 import {setDailyQuestionVote} from '../../api';
+import {useSettingsStore} from '../../state/settings_store';
 
 export const useSetDailyQuestionChoice = () => {
   const [state, setState] = useState({
     isLoading: false,
   });
 
-  const dispatch = useDispatch();
+  const setDailyQuestionChoice = useSettingsStore((state) => state.setDailyQuestionChoice);
 
   const callApi = useCallback(
     async (questionId: number, choice: DailyQuestionChoice) => {
@@ -22,14 +21,14 @@ export const useSetDailyQuestionChoice = () => {
       try {
         const response = await setDailyQuestionVote(questionId, choice.id);
         if (response.status >= 200 && response.status < 300) {
-          dispatch(setDailyQuestionChoice(questionId, choice));
+          setDailyQuestionChoice(questionId, choice);
         }
         setState({isLoading: false});
       } catch (e) {
         setState({isLoading: false});
       }
     },
-    [dispatch, state.isLoading],
+    [state.isLoading],
   );
 
   return callApi;

app/components/drawer/Drawer.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import {View, StyleSheet} from 'react-native';
-import {useSelector} from 'react-redux';
-import {selectDrawerData} from '../../redux/selectors';
+
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {useTheme} from '../../Theme';
 import Divider from '../divider/Divider';
-import {checkEqual} from '../../util/LodashEqualityCheck';
 import {DrawerContentComponentProps} from '@react-navigation/drawer';
 import DrawerBlockProjects from './components/DrawerBlockProjects';
 import DrawerBlockChannels from './components/DrawerBlockChannels';
@@ -17,19 +15,31 @@ import {useCallback} from 'react';
 import useOnDrawerClose from './useOnDrawerClose';
 import {useRef} from 'react';
 import MyScrollView from '../MyScrollView/MyScrollView';
+import {useNavigationStore} from '../../state/navigation_store';
+import {useShallow} from 'zustand/shallow';
 
 type Props = DrawerContentComponentProps;
 
 const DrawerComponent: React.FC<React.PropsWithChildren<Props>> = ({navigation}) => {
   const {colors, dim} = useTheme();
-  const data = useSelector(selectDrawerData, checkEqual);
+
+  const data = useNavigationStore(
+    useShallow((state) => ({
+      routes: state.routes,
+      channels: state.channels,
+      pages: state.pages,
+      projects: state.projects,
+    })),
+  );
+
   const insets = useSafeAreaInsets();
 
   const scrollRef = useRef<MyScrollView>(null);
 
-  const Line = useCallback(() => <Divider style={{marginHorizontal: dim.drawerPadding * 2}} />, [
-    dim.drawerPadding,
-  ]);
+  const Line = useCallback(
+    () => <Divider style={{marginHorizontal: dim.drawerPadding * 2}} />,
+    [dim.drawerPadding],
+  );
 
   useOnDrawerClose(
     useCallback(() => {
@@ -65,7 +75,7 @@ const DrawerComponent: React.FC<React.PropsWithChildren<Props>> = ({navigation})
 
         <Line />
         <DrawerBlockNews key="news" navigation={navigation} items={data.routes} />
-        <DrawerBlockProjects key="projects" navigation={navigation} projectBlocks={data.webPageProjects} />
+        <DrawerBlockProjects key="projects" navigation={navigation} projectBlocks={data.projects} />
         <Line />
         <DrawerBlockPages key="pages" navigation={navigation} pages={data.pages} />
         <Line />

app/components/drawer/components/DrawerBlockNews.tsx

@@ -1,13 +1,12 @@
 import {DrawerNavigationHelpers} from '@react-navigation/drawer/lib/typescript/src/types';
 import React from 'react';
-import {useDispatch} from 'react-redux';
 import {MenuItem, MenuItemCategory} from '../../../api/Types';
-import {openCategoryForName} from '../../../redux/actions';
 import {useTheme} from '../../../Theme';
 import {checkEqual} from '../../../util/LodashEqualityCheck';
 import DrawerItem from '../../drawerItem/DrawerItem';
 
 import DrawerCollapsibleBlock from './DrawerCollapsibleBlock';
+import {useNavigationStore} from '../../../state/navigation_store';
 
 interface Props {
   navigation: DrawerNavigationHelpers;
@@ -17,8 +16,6 @@ interface Props {
 const DrawerBlockNews: React.FC<React.PropsWithChildren<Props>> = ({items, navigation}) => {
   const {strings} = useTheme();
 
-  const dispatch = useDispatch();
-
   if (!items || items.length <= 0) {
     console.log('invalid news data');
     return null;
@@ -33,7 +30,7 @@ const DrawerBlockNews: React.FC<React.PropsWithChildren<Props>> = ({items, navig
             text={route.name}
             onPress={() => {
               navigation.closeDrawer();
-              dispatch(openCategoryForName(route.name));
+              useNavigationStore.getState().openCategoryByName(route.name);
             }}
           />
         );

app/components/facebookReactions/FacebookReactions.tsx

@@ -3,7 +3,7 @@ import {View, StyleSheet, ViewStyle} from 'react-native';
 import {useTheme} from '../../Theme';
 import TextComponent from '../text/Text';
 import {IconFacebook} from '../svg';
-import {useSettingsStore} from '../../state/settings';
+import {useSettingsStore} from '../../state/settings_store';
 
 interface Props {
   style?: ViewStyle;

app/components/forecast/ForecastComponent.tsx

@@ -1,14 +1,13 @@
 import React, {useEffect, useState} from 'react';
 import {View, StyleSheet, ActivityIndicator, ViewStyle} from 'react-native';
-import {useSelector} from 'react-redux';
 import {fetchForecast} from '../../api';
 import {Forecast, ForecastLocation} from '../../api/Types';
 import {DEFAULT_FORECAST_LOCATION} from '../../constants';
 import useCancellablePromise from '../../hooks/useCancellablePromise';
-import {selectForecastLocation} from '../../redux/selectors';
 import {useTheme} from '../../Theme';
 import {getIconForWeatherConditions} from '../../util/UI';
 import TextComponent from '../text/Text';
+import {useSettingsStore} from '../../state/settings_store';
 
 interface Props {
   style?: ViewStyle;
@@ -21,7 +20,7 @@ const ForecastComponent: React.FC<React.PropsWithChildren<Props>> = (props) => {
   const [forecast, setForecast] = useState<Forecast | undefined>();
   const {colors} = useTheme();
 
-  const storedLocation = useSelector(selectForecastLocation);
+  const storedLocation = useSettingsStore((state) => state.forecastLocation);
   const location = (props.location ? props.location : storedLocation) as ForecastLocation;
 
   const cancellablePromise = useCancellablePromise();

app/components/logo/Logo.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import {useSelector} from 'react-redux';
-import {selectLogo} from '../../redux/selectors';
 import {SvgCss} from 'react-native-svg/css';
 import {LRTLogo} from '../svg';
 import {themeDark, useTheme} from '../../Theme';
-import {useSettingsStore} from '../../state/settings';
+import {useSettingsStore} from '../../state/settings_store';
+import {useShallow} from 'zustand/shallow';
 
 interface Props {
   width?: number;
@@ -18,10 +17,10 @@ const LogoComponent: React.FC<React.PropsWithChildren<Props>> = ({
   height = 32,
   useOnlyInternal = false,
 }) => {
-  const isDarkMode = useSettingsStore((state) => state.isDarkMode);
+  const isDarkMode = useSettingsStore(useShallow((state) => state.isDarkMode));
   const {colors} = useTheme();
 
-  const logo = useSelector(selectLogo);
+  const logo = useSettingsStore((state) => state.logo);
 
   if (logo?.svg && !useOnlyInternal) {
     //Replace svg fill colors for dark mode to "headerTint" color

app/components/photoCount/PhotoCount.tsx

@@ -3,7 +3,7 @@ import {View, StyleSheet, ViewStyle} from 'react-native';
 import {useTheme} from '../../Theme';
 import {IconPhotoCamera} from '../svg';
 import TextComponent from '../text/Text';
-import {useSettingsStore} from '../../state/settings';
+import {useSettingsStore} from '../../state/settings_store';
 
 interface Props {
   style?: ViewStyle;

app/components/text/useTextStyle.tsx

@@ -2,7 +2,7 @@ import {useMemo} from 'react';
 import {Falsy, StyleSheet, TextStyle} from 'react-native';
 import {useTheme} from '../../Theme';
 import {TextComponentProps} from './Text';
-import {useSettingsStore} from '../../state/settings';
+import {useSettingsStore} from '../../state/settings_store';
 import {useShallow} from 'zustand/react/shallow';
 
 const DEFAULT_FONT_SIZE = 15;

app/components/touchableDebounce/TouchableDebounce.tsx

@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import {debounce} from 'lodash';
 import {TouchableOpacity, TouchableOpacityProps} from 'react-native';
-import {GenericTouchableProps} from 'react-native-gesture-handler/lib/typescript/components/touchables/GenericTouchable';
+import {GenericTouchableProps} from 'react-native-gesture-handler/lib/typescript/components/touchables/GenericTouchableProps';
 
 type Props = TouchableOpacityProps &
   GenericTouchableProps & {

app/components/videoComponent/TheoMediaPlayer.tsx

@@ -30,7 +30,7 @@ import FastImage from 'react-native-fast-image';
 import {VideoTextTrack} from '../../api/Types';
 import usePlayerSubtitles from './usePlayerSubtitles';
 import Orientation from 'react-native-orientation-locker';
-import {useSettingsStore} from '../../state/settings';
+import {useSettingsStore} from '../../state/settings_store';
 
 export type PlayerAction = 'togglePlay' | 'setFullScreen';
 

app/navigation/MainStack.tsx

@@ -11,7 +11,7 @@ import {NavigatorScreenParams} from '@react-navigation/native';
 import SearchContextProvider from '../screens/search/context/SearchContextProvider';
 import ChannelContextProvider from '../screens/channel/context/ChannelContextProvider';
 import {Article} from '../../Types';
-import {useSettingsStore} from '../state/settings';
+import {useSettingsStore} from '../state/settings_store';
 
 export type MainStackParamList = {
   Home: undefined;

app/navigation/useHandleLaunchUrl.ts

@@ -1,21 +1,23 @@
 import {useEffect} from 'react';
 import {Linking} from 'react-native';
-import {useDispatch, useSelector} from 'react-redux';
-import {clearLaunchUrl} from '../redux/actions';
-import {RootState} from '../redux/reducers';
+import {useNavigationStore} from '../state/navigation_store';
+import {useShallow} from 'zustand/shallow';
 
 const useHandleLaunchUrl = (enabled: boolean) => {
-  const launchUrl = useSelector((state: RootState) => state.navigation.launchUrl);
-
-  const dispatch = useDispatch();
+  const {launchUrl, setLaunchUrl} = useNavigationStore(
+    useShallow((state) => ({
+      launchUrl: state.launchUrl,
+      setLaunchUrl: state.setLaunchUrl,
+    })),
+  );
 
   useEffect(() => {
     if (launchUrl) {
       if (!enabled) {
         console.log('LaunchUrl handler: waiting to be enabled...');
       } else {
         Linking.openURL(launchUrl);
-        dispatch(clearLaunchUrl());
+        setLaunchUrl(undefined);
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

app/redux/actions/actionTypes.ts

@@ -35,26 +35,3 @@ export const API_POPULAR_ERROR = 'API_POPULAR_ERROR';
 export const ADD_ARTICLE_TO_HISTORY = 'ADD_ARTICLE_TO_HISTORY';
 export const SAVE_ARTICLE = 'SAVE_ARTICLE';
 export const REMOVE_ARTICLE = 'REMOVE_ARTICLE';
-
-//Navigation
-export const FETCH_MENU_ITEMS = 'FETCH_MENU_ITEMS';
-export const API_MENU_ITEMS_RESULT = 'API_MENU_ITEMS_RESULT';
-export const API_MENU_ITEMS_ERROR = 'API_MENU_ITEMS_ERROR';
-
-export const FETCH_PROGRAM = 'FETCH_PROGRAM';
-export const API_PROGRAM_RESULT = 'API_PROGRAM_RESULT';
-export const API_PROGRAM_ERROR = 'API_PROGRAM_ERROR';
-
-export const SET_LAUNCH_URL = 'SET_LAUNCH_URL';
-export const CLEAR_LAUNCH_URL = 'CLEAR_LAUNCH_URL';
-
-//Settings
-export const SET_CONFIG = 'SET_CONFIG';
-export const SET_FORECAST_LOCATION = 'SET_FORECAST_LOCATION';
-
-export const OPEN_CATEGORY_FOR_NAME = 'OPEN_CATEGORY_FOR_NAME';
-export const OPEN_CATEGORY = 'OPEN_CATEGORY';
-
-export const SET_DAILY_QUESTION_CHOICE = 'SET_DAILY_QUESTION_CHOICE';
-
-export const UPDATE_LOGO_CACHE = 'UPDATE_LOGO_CACHE';

app/redux/actions/index.ts

@@ -1,5 +1,2 @@
 export * from './articles';
-export * from './navigation';
-export * from './config';
-export * from './program';
 export * from './articleStorage';