mobx migration 2

.eslintrc.json

@@ -33,6 +33,7 @@
         }
     },
     "rules": {
+        "@typescript-eslint/explicit-function-return-type": "error",
         "@typescript-eslint/no-unused-vars": "error",
         "@typescript-eslint/space-infix-ops": "error",
         "@typescript-eslint/type-annotation-spacing": "error",

src/App.tsx

@@ -1,4 +1,6 @@
 
+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"
@@ -9,7 +11,7 @@ import {Navigation} from "./navigation/Navigation"
 import {persistor, store} from "./store"
 import {StoresProvider} from "./store/StoresProvider"
 
-export function App() {
+export function App(): ReactElement | null {
     const isLoadingComplete = useBootstrapApp()
 
     if (!isLoadingComplete) {

src/components/ActionSheet/Submit.tsx

@@ -1,3 +1,4 @@
+import type {ReactElement} from "react"
 import {StyleSheet} from "react-native"
 
 import {primaryColors} from "../../colors/colors"
@@ -17,7 +18,7 @@ const styles = StyleSheet.create({
 export function Submit({onPress, text}: {
     text: string
     onPress: () => void
-}) {
+}): ReactElement {
     return (
         <Div
             style={styles.root}

src/components/ActionSheet/Title.tsx

@@ -1,4 +1,4 @@
-import {Fragment} from "react"
+import {Fragment, type ReactElement} from "react"
 import {StyleSheet, TextStyle, TouchableOpacity} from "react-native"
 
 import MaterialIcons from "@expo/vector-icons/MaterialIcons"
@@ -28,7 +28,7 @@ export const colors: Record<"divider", ThemeProps> = {
 export function Title({children, onClosePress}: {
     children: string
     onClosePress?: () => void
-}) {
+}): ReactElement {
     const textColor = useThemeColor("text")
     const dividerColor = useThemeColor("text", colors.divider)
 

src/components/Loader.tsx

@@ -1,4 +1,4 @@
-import {memo, useMemo} from "react"
+import {memo, useMemo, type ReactElement} from "react"
 import {StyleSheet, View, ActivityIndicator, ViewStyle} from "react-native"
 
 import {useThemeColor} from "../colors/useThemeColor"
@@ -13,7 +13,7 @@ const container: ViewStyle = {
 
 const staticStyles = StyleSheet.create({container})
 
-function Loader() {
+export const Loader = memo(function Loader(): ReactElement {
     const backgroundColor = useThemeColor("loaderBackground")
     const loaderColor = useThemeColor("loaderColor")
 
@@ -28,6 +28,4 @@ function Loader() {
                 size="large" />
         </View>
     )
-}
-
-export default memo(Loader)
+})

src/components/OverlayLoader.tsx

@@ -1,4 +1,4 @@
-import {memo, useMemo} from "react"
+import {memo, useMemo, type ReactElement} from "react"
 import {StyleSheet, View, ActivityIndicator, ViewStyle} from "react-native"
 
 import {useThemeColor} from "../colors/useThemeColor"
@@ -16,7 +16,7 @@ const container: ViewStyle = {
 
 const staticStyles = StyleSheet.create({container})
 
-function OverlayLoader() {
+export const OverlayLoader = memo(function OverlayLoader(): ReactElement {
     const color = useThemeColor("text")
     const backgroundColor = useThemeColor("overlayBackground")
 
@@ -31,6 +31,4 @@ function OverlayLoader() {
                 size="large" />
         </View>
     )
-}
-
-export default memo(OverlayLoader)
+})

src/components/PageTitle.tsx

@@ -1,3 +1,4 @@
+import type {ReactElement} from "react"
 import {TextStyle, ViewStyle} from "react-native"
 
 import {layout} from "../constants/layout"
@@ -28,7 +29,7 @@ const styles = createStaticStyles({
 export function PageTitle({title, icon}: {
     title: string
     icon?: string
-}) {
+}): ReactElement {
     return (
         <Div style={styles.container}>
             {icon && (

src/components/SkillImage.tsx

@@ -1,4 +1,4 @@
-import {useMemo} from "react"
+import {useMemo, type ReactElement} from "react"
 import {ImageRequireSource} from "react-native"
 
 import {Image} from "expo-image"
@@ -31,7 +31,7 @@ const styles = createStaticStyles({
 export default function SkillImage({name, banner}: {
     name: string
     banner?: boolean
-}) {
+}): ReactElement {
     const source = useMemo(() => {
         try {
             // eslint-disable-next-line import/namespace

src/components/Toggle.tsx

@@ -1,4 +1,4 @@
-import {memo, useState} from "react"
+import {memo, useState, type ReactElement} from "react"
 import {Switch} from "react-native"
 
 import {memoize} from "lodash"
@@ -10,10 +10,10 @@ const inactiveColor = "rgba(155,166,171,0.38)"
 const trackColor = memoize((activeColor: string) => ({false: inactiveColor, true: activeColor}))
 const thumbColor = memoize((state, activeColor: string) => state ? activeColor : "rgb(122,122,122)")
 
-function Toggle({onToggle, defaultValue = false}: {
+export const Toggle = memo(function Toggle({onToggle, defaultValue = false}: {
     onToggle?: (state: boolean) => void
     defaultValue?: boolean
-}) {
+}): ReactElement {
     const [state, setState] = useState(defaultValue)
     const trackThemeColor = useThemeColor("buttonBackground", primaryColors.background)
     const thumbThemeColor = useThemeColor("buttonText", primaryColors.color)
@@ -33,6 +33,4 @@ function Toggle({onToggle, defaultValue = false}: {
             value={state}
             onValueChange={handleToggle} />
     )
-}
-
-export default memo(Toggle)
+})

src/features/skills/NewSkillForm.tsx

@@ -1,4 +1,4 @@
-import {useState, useRef, useCallback} from "react"
+import {useState, useRef, useCallback, type ReactElement} from "react"
 import {TextStyle, ViewStyle, StyleSheet, View, TextInput} from "react-native"
 
 import {Container} from "../../components/ActionSheet/Container"
@@ -30,10 +30,10 @@ const staticStyles = StyleSheet.create({
     view,
 })
 
-function NewSkillForm(props: {
+export function NewSkillForm(props: {
     submit: (value: string) => void
     dismiss: () => void
-}) {
+}): ReactElement {
     const [value, setValue] = useState<string>("")
 
     const handleSubmit = (): void => props.submit(value)
@@ -69,5 +69,3 @@ function NewSkillForm(props: {
         </Container>
     )
 }
-
-export default NewSkillForm

src/features/skills/SelectedSkillProvider.tsx

@@ -1,4 +1,4 @@
-import {createContext, Component, PropsWithChildren} from "react"
+import {createContext, Component, PropsWithChildren, type ReactElement} from "react"
 
 import {Skill} from "../../store/skills/types"
 
@@ -22,7 +22,7 @@ class SelectedSkillProvider extends Component<PropsWithChildren> {
         setSelected: this.setSelected,
     }
 
-    render() {
+    render(): ReactElement {
         return (
             <SelectedSkillContext.Provider
                 value={this.state}>

src/features/skills/SkillsList.tsx

@@ -1,14 +1,14 @@
-import {memo, useCallback} from "react"
-import {ListRenderItemInfo, FlatList} from "react-native"
+import {memo, type ReactElement} from "react"
+import {FlatList} from "react-native"
 
 import {flatList} from "../../constants/defaultStyles"
 import {__t} from "../../helpers/i18n"
 import {Categories} from "../../store/skills/types"
 
 import {SelectedSkillProvider} from "./SelectedSkillProvider"
-import SkillsListHeader from "./SkillsListHeader"
-import SkillsListLoader from "./SkillsListLoader"
-import SkillsListSectionCard from "./SkillsListSectionCard"
+import {SkillsListHeader} from "./SkillsListHeader"
+import {SkillsListLoader} from "./SkillsListLoader"
+import {SkillsListSectionCard} from "./SkillsListSectionCard"
 
 type SkillsSection = {
     key: Categories
@@ -21,14 +21,19 @@ const sections: Array<SkillsSection> = [
     {key: "other", title: __t("exercises.sections.other")},
 ]
 
-const renderItem = ({item}: ListRenderItemInfo<SkillsSection>) => (
-    <SkillsListSectionCard
-        category={item.key}
-        title={item.title} />
-)
+function renderItem({item}: {item: SkillsSection}): ReactElement {
+    return (
+        <SkillsListSectionCard
+            category={item.key}
+            title={item.title} />
+    )
+}
+
+function keyExtractor(item: SkillsSection): string {
+    return item.key
+}
 
-export const SkillsList = memo(function SkillsList() {
-    const keyExtractor = useCallback((item: SkillsSection): string => item.key, [])
+export const SkillsList = memo(function SkillsList(): ReactElement {
     return (
         <SelectedSkillProvider>
             <FlatList

src/features/skills/SkillsListHeader.tsx

@@ -1,7 +1,8 @@
-import {Fragment, memo, useCallback, useContext} from "react"
+import {Fragment, useCallback, useContext, type ReactElement} from "react"
 import {StyleSheet, TextStyle, View, ViewStyle} from "react-native"
 
 import {isEmpty} from "lodash"
+import {observer} from "mobx-react"
 
 import {primaryColors, secondaryColors} from "../../colors/colors"
 import {Div} from "../../components/Div"
@@ -15,10 +16,10 @@ import {useBoolean} from "../../hooks/useBoolean"
 import {useKeyboard} from "../../hooks/useKeyboard"
 import {navigation} from "../../navigation/config"
 import {useAppDispatch, useAppSelector} from "../../store"
-import {addCustomSkill} from "../../store/skills/actions"
+import {useStores} from "../../store/useStores"
 import {addSkillToWorkout} from "../../store/workouts/actions"
 
-import NewSkillForm from "./NewSkillForm"
+import {NewSkillForm} from "./NewSkillForm"
 import {SelectedSkillContext} from "./SelectedSkillProvider"
 
 const container: ViewStyle = {
@@ -54,9 +55,10 @@ const staticStyles = StyleSheet.create({
     text,
 })
 
-function SkillsListHeader() {
+export const SkillsListHeader = observer(function SkillsListHeader(): ReactElement | null {
+    const {skillsStore} = useStores()
+
     const workout = useAppSelector(state => state.workouts.current)
-    const skills = useAppSelector(state => state.skills.store)
 
     const {selected, setSelected} = useContext(SelectedSkillContext)
 
@@ -77,9 +79,9 @@ function SkillsListHeader() {
         closeModal()
         if (text.length > 0) {
             analytics.sendEvent("new_skill_form_submit", {title: text})
-            dispatch(addCustomSkill(text))
+            skillsStore.addCustomSkill(text)
         }
-    }, [closeModal, dispatch])
+    }, [closeModal, skillsStore])
 
     const openNewSkillModal = useCallback(() => {
         analytics.sendEvent("new_skill_form_open")
@@ -94,7 +96,6 @@ function SkillsListHeader() {
     return (
         <Fragment>
             <View style={staticStyles.container}>
-
                 <Div
                     style={staticStyles.card}
                     theme={primaryColors.background}
@@ -106,15 +107,13 @@ function SkillsListHeader() {
                         {__t("exercises.create")}
                     </Span>
                 </Div>
-
                 <Modal
                     closeModal={closeModal}
                     visible={visible}>
                     <NewSkillForm
                         dismiss={closeModal}
                         submit={handleSubmitNewSkill} />
                 </Modal>
-
                 <Div
                     style={staticStyles.card}
                     theme={secondaryColors.background}>
@@ -123,10 +122,9 @@ function SkillsListHeader() {
                         style={staticStyles.text}>
                         {__t("exercises.selected")}
                         {":\n"}
-                        {selected ? skills[selected.id].title[__locale()] : "-"}
+                        {selected ? skillsStore.registry.get(selected.id)!.title[__locale()] : "-"}
                     </Span>
                 </Div>
-
                 <Div
                     disabled={!selected}
                     style={staticStyles.card}
@@ -139,13 +137,8 @@ function SkillsListHeader() {
                         {__t("workouts.addToWorkout")}
                     </Span>
                 </Div>
-
             </View>
-
             <PageTitle title={__t("exercises.title")} />
-
         </Fragment>
     )
-}
-
-export default memo(SkillsListHeader)
+})