Mobx tutorial changes from the video

src/store/superheroes.js

@@ -0,0 +1,27 @@
+import {action, computed, makeObservable, observable} from 'mobx';
+
+class Superheroes {
+  superheroes = [];
+
+  constructor() {
+    makeObservable(this, {
+      superheroes: observable,
+      addHero: action,
+      deleteHero: action,
+      count: computed,
+    });
+  }
+  addHero(hero) {
+    console.log('* ADD HERO: ' + JSON.stringify({...hero, id: Math.random()}));
+    this.superheroes = [...this.superheroes, {...hero, id: Math.random()}];
+  }
+
+  deleteHero(id) {
+    this.superheroes = this.superheroes.filter((hero) => hero.id !== id);
+  }
+  get count() {
+    return this.superheroes.length;
+  }
+}
+
+export const superheroStore = new Superheroes();

src/view/ListScreen.js

@@ -1,38 +1,28 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
+import {observer} from 'mobx-react';
 
-import { CheeatahListText } from '../style/text';
-import { Container } from '../style/container';
-import { FlatList } from 'react-native';
-import { ListSeparator } from '../style/separator';
+import {CheeatahListText} from '../style/text';
+import {Container} from '../style/container';
+import {FlatList} from 'react-native';
+import {ListSeparator} from '../style/separator';
+import {superheroStore} from '../store/superheroes';
 
-export default ListScreen = ({ route }) => {
-	const [superheroList, setHeroList] = useState([]);
-
-	useEffect(() => {
-		setHeroList(route.params.list)
-	}, [])
-
-
-	deleteHero = (id) => {
-		let filteredHeroes = superheroList.filter(hero => hero.id !== id)
-		setHeroList(filteredHeroes)
-	}
-
-	return (
-		<Container>
-			<FlatList
-				data={superheroList}
-				keyExtractor={(item) => item.id}
-				style={{ width: '100%', marginTop: 20, paddingBottom: 10 }}
-				ItemSeparatorComponent={() => <ListSeparator />}
-				renderItem={({ item }) => (
-					<CheeatahListText
-						content={`Name: ${item.name}`}
-						onLongPress={() => deleteHero(item.id)}
-						description={`Power: ${item.power}`}
-					/>
-				)}
-			/>
-		</Container>
-	);
-}
+export default ListScreen = observer(() => {
+  return (
+    <Container>
+      <FlatList
+        data={superheroStore.superheroes}
+        keyExtractor={(item) => item.id}
+        style={{width: '100%', marginTop: 20, paddingBottom: 10}}
+        ItemSeparatorComponent={() => <ListSeparator />}
+        renderItem={({item}) => (
+          <CheeatahListText
+            content={`Name: ${item.name}`}
+            onLongPress={() => superheroStore.deleteHero(item.id)}
+            description={`Power: ${item.power}`}
+          />
+        )}
+      />
+    </Container>
+  );
+});

src/view/home.js

@@ -1,44 +1,59 @@
-import React, { useState } from 'react';
+import React, {useState} from 'react';
+import {FlatList} from 'react-native';
+import {Observer} from 'mobx-react';
 
-import { Title } from '../style/text';
-import { Container, RowContainer } from '../style/container';
-import { CheetahInput } from '../style/input';
-import { CheeatahButton } from '../style/button';
+import {superheroStore} from '../store/superheroes';
+import {CheeatahListText} from '../style/text';
+import {ListSeparator} from '../style/separator';
+import {Title} from '../style/text';
+import {Container, RowContainer} from '../style/container';
+import {CheetahInput} from '../style/input';
+import {CheeatahButton} from '../style/button';
 
-export default Home = ({ navigation }) => {
+export default Home = ({navigation}) => {
+  const [name, setName] = useState('');
+  const [power, setPower] = useState('');
 
-	const [superheroList, setHeroList] = useState([]);
-	const [name, setName] = useState('');
-	const [power, setPower] = useState('');
+  console.log('* reloading screen...');
 
-	addHero = () => {
-		setHeroList(list => [...list, { name, power, id: Math.random() }])
-	}
+  addHero = () => {
+    setHeroList((list) => [...list, {name, power, id: Math.random()}]);
+  };
 
-	return (
-		<Container>
-			<Title>Superheroes</Title>
-			<CheetahInput
-				hint='Name'
-				onChangeText={text => setName(text)}
-			/>
-			<CheetahInput
-				hint='Power'
-				onChangeText={text => setPower(text)}
-			/>
-			<RowContainer>
-				<CheeatahButton
-					title="Add"
-					onPress={(text) => addHero(text)}
-					marginRight={12}
-				/>
-				<CheeatahButton
-					title="View List"
-					onPress={() => navigation.navigate('List', {
-						list: superheroList,
-					})}
-				/>
-			</RowContainer>
-		</Container>
-	);
-}
+  return (
+    <Container>
+      <Title>Superheroes</Title>
+      <CheetahInput hint="Name" onChangeText={(text) => setName(text)} />
+      <CheetahInput hint="Power" onChangeText={(text) => setPower(text)} />
+      <RowContainer>
+        <CheeatahButton
+          title="Add"
+          onPress={(text) => superheroStore.addHero({name, power})}
+          marginRight={12}
+        />
+        <CheeatahButton
+          title="View List"
+          onPress={() => navigation.navigate('List')}
+        />
+      </RowContainer>
+
+      <Observer>
+        {() => (
+          <FlatList
+            data={superheroStore.superheroes}
+            keyExtractor={(item) => item.id}
+            style={{width: '100%', marginTop: 20, paddingBottom: 10}}
+            ItemSeparatorComponent={() => <ListSeparator />}
+            renderItem={({item}) => (
+              <CheeatahListText
+                content={`Name: ${item.name}`}
+                onLongPress={() => superheroStore.deleteHero(item.id)}
+                description={`Power: ${item.power}`}
+              />
+            )}
+          />
+        )}
+      </Observer>
+    </Container>
+  );
+};