Redux

packages/components/__tests__/redux/actions/appActions.test.ts

@@ -1,10 +1,7 @@
-import { v4 as uuidv4 } from 'uuid'
-import moment from 'moment'
 import configureStore from 'redux-mock-store'
 
 import _ from 'lodash'
 import * as actions from '../../../src/redux/actions'
-import { authReducer } from '../../../src/redux/reducers/authReducer'
 
 const middleWares = []
 const mockStore = configureStore(middleWares)

packages/components/__tests__/redux/reducers/authReducer.test.ts

@@ -5,6 +5,7 @@ import configureStore from 'redux-mock-store'
 import _ from 'lodash'
 import * as actions from '../../../src/redux/actions'
 import { authReducer } from '../../../src/redux/reducers/authReducer'
+import { formatPassword } from '../../../src/services/auth'
 
 const middleWares = []
 const mockStore = configureStore(middleWares)
@@ -20,9 +21,9 @@ describe('authReducer', () => {
     location: 'Urban',
     country: 'ZA',
     province: '',
-    password: _.toLower('00AAaa').trim(),
+    password: formatPassword('00AAaa'),
     secretQuestion: 'favourite_teacher',
-    secretAnswer: _.toLower('secret_answer').trim(),
+    secretAnswer: formatPassword('secret_answer'),
   }
 
   it('returns the initial state', () => {
@@ -40,14 +41,14 @@ describe('authReducer', () => {
     const expectedType = `CREATE_ACCOUNT_REQUEST`
     expect(scopedActions[0].type).toEqual(expectedType)
   })
-  it('Login As guest account', () => {
-    const action = actions.loginSuccessAsGuestAccount(mockPayload)
-    const newStore = authReducer(undefined, action)
-    // Dispatch the action
+  // it('Login As guest account', () => {
+  //   const action = actions.loginSuccessAsGuestAccount(mockPayload)
+  //   const newStore = authReducer(undefined, action)
+  //   // Dispatch the action
 
-    expect(newStore?.user?.name).toEqual(mockPayload.name)
-    expect(newStore?.user?.isGuest).toEqual(true)
-  })
+  //   expect(newStore?.user?.name).toEqual(mockPayload.name)
+  //   expect(newStore?.user?.isGuest).toEqual(true)
+  // })
   it('Login Out guest account', () => {
     const action = actions.logout()
     const newStore = authReducer(undefined, action)

packages/components/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@oky/core": "*",
     "@react-native-community/art": "^1.2.0",
+    "@react-native-async-storage/async-storage": "1.21.0",
     "circular-buffer": "^1.0.2",
     "i18n-js": "^3.3.0",
     "lodash": "^4.17.11",
@@ -44,7 +45,9 @@
     "tslint-react": "^4.0.0",
     "typescript": "4.7.4",
     "uuid": "9.0.0",
-    "react-native-get-random-values": "1.9.0"
+    "react-native-get-random-values": "1.9.0",
+    "js-sha256": "0.10.1",
+    "react-native-crypto-js": "^1.0.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.136",

packages/components/src/components/App.tsx

@@ -2,16 +2,13 @@ import 'react-native-get-random-values' // Required for uuid package
 import React from 'react'
 import { AppProvider } from './AppProvider'
 import AppNavigator from '../navigators/AppNavigator'
-import { configureStore } from '../redux/store'
 import { setTopLevelNavigator } from '../services/navigationService'
 import { notificationListener } from '../services/notifications'
 import { SafeAreaView } from 'react-navigation'
 import SplashScreen from 'react-native-splash-screen'
 import { Platform } from 'react-native'
 import Orientation from 'react-native-orientation-locker'
 
-const { persistor, store } = configureStore()
-
 export default function App() {
   React.useEffect(() => {
     Orientation.lockToPortrait()
@@ -28,7 +25,7 @@ export default function App() {
   }, [])
 
   return (
-    <AppProvider store={store} persistor={persistor}>
+    <AppProvider>
       <SafeAreaView
         forceInset={{ bottom: 'never' }}
         style={{ flex: 1, backgroundColor: '#757575' }}

packages/components/src/components/AppProvider.tsx

@@ -1,27 +1,24 @@
 import React from 'react'
-import { Provider as ReduxProvider } from 'react-redux'
-import { PersistGate } from 'redux-persist/integration/react'
 import { ThemeProvider } from './context/ThemeContext'
 import { LocaleProvider } from './context/LocaleContext'
 import { DisplayTextProvider } from './context/DisplayTextContext'
 import { PredictionProvider } from './context/PredictionProvider'
 import { AlertContextProvider } from './context/AlertContext'
 import { FlowerProvider } from '../optional/Flower'
+import { StoreCoordinator } from '../redux/StoreCoordinator'
 
-export const AppProvider = ({ children, store, persistor }) => (
-  <ReduxProvider store={store}>
-    <PersistGate loading={null} persistor={persistor}>
-      <LocaleProvider>
-        <ThemeProvider>
-          <PredictionProvider>
-            <FlowerProvider>
-              <AlertContextProvider>
-                <DisplayTextProvider>{children}</DisplayTextProvider>
-              </AlertContextProvider>
-            </FlowerProvider>
-          </PredictionProvider>
-        </ThemeProvider>
-      </LocaleProvider>
-    </PersistGate>
-  </ReduxProvider>
+export const AppProvider = ({ children }) => (
+  <StoreCoordinator>
+    <LocaleProvider>
+      <ThemeProvider>
+        <PredictionProvider>
+          <FlowerProvider>
+            <AlertContextProvider>
+              <DisplayTextProvider>{children}</DisplayTextProvider>
+            </AlertContextProvider>
+          </FlowerProvider>
+        </PredictionProvider>
+      </ThemeProvider>
+    </LocaleProvider>
+  </StoreCoordinator>
 )

packages/components/src/components/common/Avatar/Avatar.tsx

@@ -8,7 +8,7 @@ import { FloatingQuestion } from './FloatingQuestion'
 import styled from 'styled-components/native'
 import { Icon } from '../Icon'
 import { HeartAnimation } from './HeartAnimation'
-import { useSelector } from '../../../hooks/useSelector'
+import { useSelector } from '../../../redux/useSelector'
 import * as selectors from '../../../redux/selectors/index'
 import moment from 'moment'
 import { useDisplayText } from '../../context/DisplayTextContext'

packages/components/src/components/common/CalendarList.tsx

@@ -3,7 +3,7 @@ import { Image } from 'react-native'
 import { CalendarList as DefaultCalendarList, LocaleConfig } from 'react-native-calendars'
 import momentTimezone from 'moment-timezone'
 import { assets } from '../../assets/index'
-import { useSelector } from '../../hooks/useSelector'
+import { useSelector } from '../../redux/useSelector'
 import * as selectors from '../../redux/selectors'
 import { calendarTranslations } from '@oky/core'
 

packages/components/src/components/common/DateBadge.tsx

@@ -6,12 +6,12 @@ import { translate } from '../../i18n'
 import { TouchableOpacity } from 'react-native'
 import _ from 'lodash'
 import moment from 'moment'
-import { useSelector } from 'react-redux'
 import * as selectors from '../../redux/selectors'
 import {
   useTodayPrediction,
   useActualCurrentStartDateSelector,
 } from '../../components/context/PredictionProvider'
+import { useSelector } from '../../redux/useSelector'
 
 function checkForVerifiedDay(cardValues) {
   if (_.has(cardValues, 'periodDay')) {

packages/components/src/components/common/DayBadge.tsx

@@ -4,12 +4,12 @@ import styled from 'styled-components/native'
 import { TextWithoutTranslation, Text } from './Text'
 import _ from 'lodash'
 import moment from 'moment'
-import { useSelector } from 'react-redux'
 import * as selectors from '../../redux/selectors'
 import {
   useTodayPrediction,
   useActualCurrentStartDateSelector,
 } from '../../components/context/PredictionProvider'
+import { useSelector } from '../../redux/useSelector'
 
 function checkForVerifiedDay(cardValues) {
   if (_.has(cardValues, 'periodDay')) {

packages/components/src/components/common/LanguageSelect.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components/native'
-import { useSelector } from '../../hooks/useSelector'
+import { useSelector } from '../../redux/useSelector'
 import * as selectors from '../../redux/selectors'
 import * as actions from '../../redux/actions/index'
 import { useDispatch } from 'react-redux'

packages/components/src/components/common/TextInput.tsx

@@ -27,6 +27,7 @@ export const TextInput = ({
   errorContent = 'No message',
   placeholderColor = '#28b9cb',
   infoAccessibilityLabel = '',
+  editable = true,
 }) => {
   const [isVisible, setIsVisible] = React.useState(false)
   return (
@@ -47,6 +48,7 @@ export const TextInput = ({
             style={{ color: '#555', ...inputStyle }}
             secureTextEntry={secureTextEntry}
             value={value}
+            editable={editable}
           />
           {isValid && !hasError && (
             <Icon

packages/components/src/components/context/DisplayTextContext.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Tts from 'react-native-tts'
 import _ from 'lodash'
 import { translate } from '../../i18n'
-import { useSelector } from '../../hooks/useSelector'
+import { useSelector } from '../../redux/useSelector'
 import * as selectors from '../../redux/selectors'
 
 interface Props {

packages/components/src/components/context/LocaleContext.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { useSelector } from '../../hooks/useSelector'
+import { useSelector } from '../../redux/useSelector'
 import { currentLocale, configureI18n } from '../../i18n'
 
 export function LocaleProvider({ children }) {
-  const locale = useSelector(state => state.app.locale)
+  const locale = useSelector((state) => state.app.locale)
   const [syncLocale, setSyncLocale] = React.useState(currentLocale())
 
   React.useLayoutEffect(() => {

packages/components/src/components/context/PredictionProvider.tsx

@@ -3,7 +3,7 @@ import moment, { Moment } from 'moment'
 import _ from 'lodash'
 import { PredictionState, PredictionEngine } from '../../prediction'
 
-import { useSelector } from '../../hooks/useSelector'
+import { useSelector } from '../../redux/useSelector'
 import { useDispatch } from 'react-redux'
 import * as actions from '../../redux/actions'
 

packages/components/src/components/context/ThemeContext.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ThemeContext, ThemeProvider as StyledThemeProvider } from 'styled-components'
-import { useSelector } from '../../hooks/useSelector'
+import { useSelector } from '../../redux/useSelector'
 import * as selectors from '../../redux/selectors'
 import { themes } from '@oky/core'
 

packages/components/src/components/layout/BackgroundTheme.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components/native'
 import { useTheme } from '../context/ThemeContext'
 import { useTodayPrediction } from '../context/PredictionProvider'
 import { assets } from '../../assets'
-import { ThemeName } from '@oky/core'
+import { ThemeName, defaultTheme } from '@oky/core'
 
 function getBackgroundImage(theme: ThemeName, onPeriod: boolean) {
   const background = assets.backgrounds[theme]
@@ -25,6 +25,13 @@ export function BackgroundTheme({ theme = null, ...props }) {
   return <Background source={backgroundImage} {...props} />
 }
 
+export function DefaultBackgroundTheme({ ...props }) {
+  // TODO_ALEX getAsset() safely
+  const backgroundImage = assets.backgrounds[defaultTheme].default
+
+  return <Background source={backgroundImage} {...props} />
+}
+
 const Background = styled.ImageBackground`
   width: 100%;
   height: 100%;

packages/components/src/config/env.ts

@@ -6,4 +6,4 @@ export const PREDICTION_ENDPOINT = env.PREDICTION_ENDPOINT
 export const WEBSITE_URL = env.WEBSITE_URL
 
 // Development purposes only
-export const FAST_SIGN_UP = false
+export const FAST_SIGN_UP = true

packages/components/src/config/speech.ts

@@ -80,28 +80,31 @@ export const profileScreenSpeech = ({
   dateOfBirth,
   selectedAvatar,
   theme,
-}) => [
-  translate('arrow_button'),
-  translate('profile'),
-  translate('name'),
-  currentUser.name,
-  translate('age'),
-  translate(dateOfBirth.format('MMM')) + ' ' + dateOfBirth.format('YYYY'),
-  translate('gender'),
-  translate(currentUser.gender),
-  translate('green_btn_with_two_arrows'),
-  translate('location'),
-  translate(currentUser.location),
-  translate('green_btn_with_two_arrows'),
-  translate('cycle_length'),
-  todayInfo.cycleLength.toString() + translate('days'),
-  translate('period_length'),
-  todayInfo?.periodLength?.toString() + translate('days'),
-  // translate(`selected_avatar`),
-  translate(selectedAvatar),
-  // translate('selected_theme'),
-  translate(theme),
-]
+}) => {
+  if (!currentUser) return [translate('arrow_button'), translate('profile')]
+  return [
+    translate('arrow_button'),
+    translate('profile'),
+    translate('name'),
+    currentUser.name,
+    translate('age'),
+    translate(dateOfBirth.format('MMM')) + ' ' + dateOfBirth.format('YYYY'),
+    translate('gender'),
+    translate(currentUser.gender),
+    translate('green_btn_with_two_arrows'),
+    translate('location'),
+    translate(currentUser.location),
+    translate('green_btn_with_two_arrows'),
+    translate('cycle_length'),
+    todayInfo.cycleLength.toString() + translate('days'),
+    translate('period_length'),
+    todayInfo?.periodLength?.toString() + translate('days'),
+    // translate(`selected_avatar`),
+    translate(selectedAvatar),
+    // translate('selected_theme'),
+    translate(theme),
+  ]
+}
 
 export const settingsScreenText = ({ hasTtsActive }) => [
   translate('settings'),

packages/components/src/hooks/useTextToSpeechHook.ts

@@ -1,6 +1,6 @@
 import React from 'react'
 import { speakArray, clearTTSQueue } from '../services/textToSpeech'
-import { useSelector } from './useSelector'
+import { useSelector } from '../redux/useSelector'
 import * as selectors from '../redux/selectors'
 
 export function useTextToSpeechHook({ navigation, text }) {

packages/components/src/navigators/AppNavigator.tsx

@@ -28,6 +28,12 @@ import { FindHelpScreen } from '../screens/FindHelpScreen'
 import { PasswordRequestScreen } from '../screens/PasswordRequestScreen'
 import { VideoScreen } from '../screens/VideoScreen'
 import { VideosScreen } from '../screens/VideosScreen'
+import { StoreSwitchSplash } from '../redux/StoreSwitchSplash'
+
+const StoreSwitchStack = createStackNavigator(
+  { StoreSwitchSplash },
+  { headerMode: 'none', initialRouteName: 'StoreSwitchSplash' },
+)
 
 const TutorialFirstStack = createStackNavigator(
   { TutorialFirstScreen },
@@ -131,6 +137,7 @@ const MainStack = createBottomTabNavigator(
 
 const AppNavigator = createStackNavigator(
   {
+    StoreSwitchStack,
     SplashScreen,
     OnboardingScreen,
     PasswordRequestScreen,

packages/components/src/prediction/PredictionState.ts

@@ -1,5 +1,4 @@
 import moment, { Moment } from 'moment'
-import { AppState } from '../redux/reducers/appReducer'
 import CircularBuffer from 'circular-buffer'
 
 interface CurrentCycle {