Merge pull request #12 from Miskamyasa/mm/mobx

pr: mobx intergration

package.json

@@ -40,20 +40,20 @@
         "@types/react-redux": "7.1.30",
         "@typescript-eslint/eslint-plugin": "6.11.0",
         "@typescript-eslint/parser": "6.11.0",
-        "eslint": "8.52.0",
+        "eslint": "8.57.0",
         "eslint-plugin-import": "2.29.0",
         "eslint-plugin-import-newlines": "1.4.0",
         "eslint-plugin-react": "7.33.2",
         "eslint-plugin-react-hooks": "4.6.0",
         "eslint-plugin-react-native": "4.1.0",
         "eslint-plugin-sort-keys-fix": "1.1.2",
         "eslint-plugin-unused-imports": "3.0.0",
-        "expo": "51.0.36",
+        "expo": "51.0.38",
         "expo-application": "5.9.1",
         "expo-asset": "10.0.10",
         "expo-build-properties": "0.12.5",
         "expo-constants": "16.0.2",
-        "expo-dev-client": "4.0.27",
+        "expo-dev-client": "4.0.28",
         "expo-device": "6.0.2",
         "expo-file-system": "17.0.1",
         "expo-image": "1.13.0",
@@ -62,7 +62,7 @@
         "expo-random": "14.0.1",
         "expo-splash-screen": "0.27.6",
         "expo-status-bar": "1.12.1",
-        "expo-updates": "0.25.26",
+        "expo-updates": "0.25.27",
         "i18n-js": "3.8.0",
         "lodash": "4.17.21",
         "metro-core": "0.80.12",

src/App.tsx

@@ -1,14 +1,10 @@
-
 import type {ReactElement} from "react"
 
 import {initialWindowMetrics, SafeAreaProvider} from "react-native-safe-area-context"
-import {Provider} from "react-redux"
-import {PersistGate} from "redux-persist/integration/react"
 
 import {Popups} from "./components/popups/Popups"
 import {useBootstrapApp} from "./hooks/useBootstrapApp"
 import {Navigation} from "./navigation/Navigation"
-import {persistor, store} from "./store"
 import {StoresProvider} from "./store/StoresProvider"
 
 export function App(): ReactElement | null {
@@ -21,14 +17,8 @@ export function App(): ReactElement | null {
     return (
         <SafeAreaProvider initialMetrics={initialWindowMetrics}>
             <StoresProvider>
-                <Provider store={store}>
-                    <PersistGate
-                        loading={null}
-                        persistor={persistor}>
-                        <Navigation />
-                        <Popups />
-                    </PersistGate>
-                </Provider>
+                <Navigation/>
+                <Popups/>
             </StoresProvider>
         </SafeAreaProvider>
     )

src/components/ApproachCard.tsx

@@ -4,8 +4,8 @@ import {View, type ViewStyle} from "react-native"
 import {layout} from "../constants/layout"
 import {createStaticStyles} from "../helpers/createStaticStyles"
 import {__date} from "../helpers/i18n"
-import {useAppSelector} from "../store"
-import type {Approach} from "../store/approaches/types"
+import type {Approach} from "../store/approaches/ApproachesStore"
+import {useStores} from "../store/useStores"
 
 import {Div} from "./Div"
 import {Span} from "./Span"
@@ -14,7 +14,7 @@ const width
   // screen width
   = layout.width
   // minus icon and title paddings
-  - (layout.gap * 4.5)
+  - (layout.gap * 3.5)
   // minus icon width
   - layout.iconWidth
   // minus skill title width
@@ -72,48 +72,43 @@ export const ApproachCard = memo(function ApproachCard(props: {
     flex?: boolean
 }) {
     const {id, date = false, flex = false} = props
-    const data = useAppSelector(state => state.approaches.store[id])
-    const workout = useAppSelector(state => state.workouts.store[data.workoutId])
+    const {workoutsStore, approachesStore} = useStores()
+
+    const data = approachesStore.registry[id]
+    const workout = workoutsStore.registry[data.workoutId]!
 
     return (
         <Div style={flex ? styles.fullWidth : styles.container}>
-
             <View style={styles["30"]}>
                 <Span>{date ? __date(workout.date) : ""}</Span>
             </View>
-
             <View style={styles["10"]}>
                 <Span>&nbsp;</Span>
             </View>
-
             <View style={styles["20"]}>
                 <Span
                     size={20}
                     weight="900">
                     {data.repeats}
                 </Span>
             </View>
-
             <View style={styles["10"]}>
                 <Span
                     size={17}
                     weight="900">
                     &times;
                 </Span>
             </View>
-
             <View style={styles["25"]}>
                 <Span
                     size={20}
                     weight="900">
                     {data.weight}
                 </Span>
             </View>
-
             <View style={styles["5"]}>
                 <Span>&nbsp;</Span>
             </View>
-
         </Div>
     )
 })

src/components/SkillImage.tsx

@@ -41,7 +41,7 @@ export default function SkillImage({name, banner}: {
             }
         }
         catch (e) {
-            analytics.sendEvent((e as Error).message)
+            analytics.trackError(e)
         }
         return images.customIcon
     }, [name])

src/components/popups/Popups.tsx

@@ -35,7 +35,7 @@ export const Popups = observer(function Portal() {
                 isVisible={portalStore.visible}
                 style={styles.modal}>
                 <Div style={styles.content}>
-                    {portalStore.component ?? null}
+                    {portalStore.current ?? null}
                 </Div>
             </Modal>
             <Errors />

src/constants/common.ts

@@ -8,3 +8,5 @@ export const appVersion = String(__DEV__
 export const defaultRepeats = 10
 
 export const defaultWeight = 0
+
+export const EMPTY_ARRAY: [] = [] as const

src/features/skills/SelectedSkillProvider.tsx

@@ -1,6 +1,6 @@
 import {createContext, Component, type ReactElement, type ReactNode} from "react"
 
-import type {Skill} from "../../store/skills/types"
+import type {Skill} from "../../store/skills/SkillsStore"
 
 type ContextValue = {
     selected: null | Skill
@@ -14,9 +14,7 @@ const SelectedSkillContext = createContext<ContextValue>({
 
 SelectedSkillContext.displayName = "SelectedSkillContext"
 
-class SelectedSkillProvider extends Component<{
-    children: ReactNode
-}> {
+class SelectedSkillProvider extends Component<{children: ReactNode}> {
     setSelected = (selected: Skill | null): void => this.setState(() => ({selected}))
 
     state = {

src/features/skills/SkillsList.tsx

@@ -3,7 +3,7 @@ import {FlatList} from "react-native"
 
 import {flatList} from "../../constants/defaultStyles"
 import {__t} from "../../helpers/i18n"
-import type {Categories} from "../../store/skills/types"
+import type {Categories} from "../../store/skills/SkillsStore"
 
 import {SelectedSkillProvider} from "./SelectedSkillProvider"
 import {SkillsListHeader} from "./SkillsListHeader"
@@ -15,7 +15,7 @@ type SkillsSection = {
     title: string
 }
 
-const sections: Array<SkillsSection> = [
+const sections: SkillsSection[] = [
     {key: "custom", title: __t("exercises.sections.custom")},
     {key: "base", title: __t("exercises.sections.base")},
     {key: "other", title: __t("exercises.sections.other")},
@@ -29,11 +29,11 @@ function renderItem({item}: {item: SkillsSection}): ReactElement {
     )
 }
 
-function keyExtractor(item: SkillsSection): string {
+const keyExtractor = function keyExtractor(item: SkillsSection): string {
     return item.key
 }
 
-export const SkillsList = memo(function SkillsList(): ReactElement {
+export const SkillsList = memo(function SkillsList() {
     return (
         <SelectedSkillProvider>
             <FlatList

src/features/skills/SkillsListHeader.tsx

@@ -1,7 +1,6 @@
-import {Fragment, useCallback, useContext, type ReactElement} from "react"
+import {Fragment, useCallback, useContext} from "react"
 import {StyleSheet, View} from "react-native"
 
-import {isEmpty} from "lodash"
 import {observer} from "mobx-react"
 
 import {primaryColors, secondaryColors} from "../../colors/colors"
@@ -14,10 +13,7 @@ import {analytics} from "../../helpers/analytics"
 import {__locale, __t} from "../../helpers/i18n"
 import {useBoolean} from "../../hooks/useBoolean"
 import {useKeyboard} from "../../hooks/useKeyboard"
-import {navigation} from "../../navigation/config"
-import {useAppDispatch, useAppSelector} from "../../store"
 import {useStores} from "../../store/useStores"
-import {addSkillToWorkout} from "../../store/workouts/actions"
 
 import {NewSkillForm} from "./NewSkillForm"
 import {SelectedSkillContext} from "./SelectedSkillProvider"
@@ -47,44 +43,35 @@ const staticStyles = StyleSheet.create({
     },
 })
 
-export const SkillsListHeader = observer(function SkillsListHeader(): ReactElement | null {
-    const {skillsStore} = useStores()
-
-    const workout = useAppSelector(state => state.workouts.current)
+export const SkillsListHeader = observer(function SkillsListHeader() {
+    const {skillsStore, workoutsStore} = useStores()
 
     const {selected, setSelected} = useContext(SelectedSkillContext)
 
     const [, dismissKeyboard] = useKeyboard()
     const [visible, openModal, closeModal] = useBoolean(false, undefined, dismissKeyboard)
 
-    const dispatch = useAppDispatch()
-
     const handleStart = useCallback(() => {
         if (selected) {
-            analytics.sendEvent("add_skill_to_workout", {skill: selected.title["en"]})
-            dispatch(addSkillToWorkout(selected.id))
+            workoutsStore.addSkillToWorkout(selected.id)
+            analytics.trackEvent("add_skill_to_workout", {skill: selected.title["en"]})
             setSelected(null)
         }
-    }, [dispatch, selected, setSelected])
+    }, [workoutsStore, selected, setSelected])
 
     const handleSubmitNewSkill = useCallback((text: string) => {
         closeModal()
         if (text.length > 0) {
-            analytics.sendEvent("new_skill_form_submit", {title: text})
+            analytics.trackEvent("new_skill_form_submit", {title: text})
             skillsStore.addCustomSkill(text)
         }
     }, [closeModal, skillsStore])
 
     const openNewSkillModal = useCallback(() => {
-        analytics.sendEvent("new_skill_form_open")
+        analytics.trackEvent("new_skill_form_open")
         openModal()
     }, [openModal])
 
-    if (!workout || isEmpty(workout)) {
-        navigation.replace("HomeScreen", undefined)
-        return null
-    }
-
     return (
         <Fragment>
             <View style={staticStyles.container}>
@@ -114,7 +101,7 @@ export const SkillsListHeader = observer(function SkillsListHeader(): ReactEleme
                         style={staticStyles.text}>
                         {__t("exercises.selected")}
                         {":\n"}
-                        {selected ? skillsStore.registry.get(selected.id)!.title[__locale()] : "-"}
+                        {selected ? skillsStore.registry[selected.id]!.title[__locale()] : "-"}
                     </Span>
                 </Div>
                 <Div

src/features/skills/SkillsListItem.tsx

@@ -1,20 +1,19 @@
-import {useCallback, useContext, type ReactElement} from "react"
+import {useCallback, useContext} from "react"
 import {StyleSheet, TouchableOpacity, type ViewStyle} from "react-native"
 
 import MaterialIcons from "@expo/vector-icons/MaterialIcons"
-import {isEmpty} from "lodash"
 import {observer} from "mobx-react"
 
 import {useThemeColor} from "../../colors/useThemeColor"
 import {Div} from "../../components/Div"
 import SkillImage from "../../components/SkillImage"
 import {Span} from "../../components/Span"
+import {EMPTY_ARRAY} from "../../constants/common"
 import {layout} from "../../constants/layout"
 import {analytics} from "../../helpers/analytics"
 import {__locale} from "../../helpers/i18n"
 import {navigation} from "../../navigation/config"
-import {useAppSelector} from "../../store"
-import type {Skill} from "../../store/skills/types"
+import type {Skill} from "../../store/skills/SkillsStore"
 import {useStores} from "../../store/useStores"
 
 import {SelectedSkillContext} from "./SelectedSkillProvider"
@@ -33,47 +32,39 @@ const selected: ViewStyle = {
     backgroundColor: "rgba(184,184,184, 0.2)",
 }
 
-const help: ViewStyle = {
-    marginRight: layout.gap,
-}
-
 const staticStyles = StyleSheet.create({
     container,
-    help,
+    help: {
+        marginRight: layout.gap,
+    },
     selected,
 })
 
-const hitSlop = {left: 8, top: 8, right: 8, bottom: 8}
-
-export const SkillsListItem = observer(function SkillsListItem({id}: {
+export const SkillsListItem = observer(function SkillsListItem(props: {
     id: Skill["id"]
-}): ReactElement | null {
-    const {skillsStore} = useStores()
+}) {
     const color = useThemeColor("text")
+    const {skillsStore, workoutsStore} = useStores()
 
-    const skill = skillsStore.registry.get(id)!
+    const skill = skillsStore.registry[props.id]!
 
-    const currentSkills = useAppSelector(state => state.workouts.current?.skills)
+    const currentSkills = workoutsStore.registry[workoutsStore.current!]?.skills || EMPTY_ARRAY
 
     const {selected, setSelected} = useContext(SelectedSkillContext)
 
     const showInfoScreen = useCallback(() => {
-        analytics.sendEvent("show_info_for_skill", {title: skill.title["en"]})
-        navigation.navigate("SkillInfoScreen", {id})
-    }, [id, skill.title])
+        analytics.trackEvent("show_info_for_skill", {title: skill.title["en"]})
+        navigation.navigate("SkillInfoScreen", {id: props.id})
+    }, [props.id, skill.title])
 
     const toggleSelected = useCallback(() => {
         setSelected(skill)
     }, [skill, setSelected])
 
-    if (isEmpty(skill)) {
-        return null
-    }
-
     return (
         <Div
             disabled={currentSkills?.includes(skill.id)}
-            style={selected?.id === id ? staticStyles.selected : staticStyles.container}
+            style={selected?.id === props.id ? staticStyles.selected : staticStyles.container}
             onPress={toggleSelected}>
             <SkillImage name={skill.icon} />
             <Span
@@ -84,7 +75,7 @@ export const SkillsListItem = observer(function SkillsListItem({id}: {
             {skill.category !== "custom" && skill.description[__locale()]
                 ? (
                     <TouchableOpacity
-                        hitSlop={hitSlop}
+                        hitSlop={layout.hitSlop}
                         style={staticStyles.help}
                         onPress={showInfoScreen}>
                         <MaterialIcons