Use provider and context to get Album data

skantus · Apr 8, 2020 · 2fc2426 · 2fc2426
1 parent 591d72c
commit 2fc2426
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 34 deletions.
diff --git a/App.tsx b/App.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import AppNavigator from 'src/components/AppNavigator';
 
-const App: () => React.ReactNode = () => {
+const App = () => {
   return <AppNavigator />;
 };
 

diff --git a/src/api/AlbumProvider.tsx b/src/api/AlbumProvider.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import AlbumContext from 'src/store/AlbumContext';
+import data from 'src/api/data/data';
+
+class AlbumProvider extends React.Component {
+  render() {
+    return (
+      <AlbumContext.Provider value={{data}}>
+        {this.props.children}
+      </AlbumContext.Provider>
+    );
+  }
+}
+
+export default AlbumProvider;
diff --git a/src/components/Albums/Albums.tsx b/src/components/Albums/Albums.tsx
@@ -4,6 +4,7 @@ import {SafeAreaView} from 'react-navigation';
 import StatusBar from '@react-native-community/status-bar';
 import {SharedElementRenderer} from 'react-native-motion';
 import AnimatedHeader from 'src/components/common/AnimatedHeader';
+import AlbumProvider from 'src/api/AlbumProvider';
 import List from './List';
 import Detail from './Detail';
 import styles from './styles';
@@ -50,24 +51,26 @@ const Albums = () => {
         <View style={styles.content}>
           <AnimatedHeader isHidden={phase !== PHASE_1 && phase !== PHASE_2} />
           <View style={styles.container}>
-            <List
-              selectedItem={selectedItem}
-              onItemPress={onItemPressed}
-              phase={phase}
-              theme={null}
-              screenProps={null}
-            />
-            <Detail
-              phase={phase}
-              selectedItem={selectedItem}
-              onBackPress={onBackPressed}
-              onSharedElementMovedToDestination={
-                onSharedElementMovedToDestination
-              }
-              onSharedElementMovedToSource={onSharedElementMovedToSource}
-              theme={null}
-              screenProps={null}
-            />
+            <AlbumProvider>
+              <List
+                selectedItem={selectedItem}
+                onItemPress={onItemPressed}
+                phase={phase}
+                theme={null}
+                screenProps={null}
+              />
+              <Detail
+                phase={phase}
+                selectedItem={selectedItem}
+                onBackPress={onBackPressed}
+                onSharedElementMovedToDestination={
+                  onSharedElementMovedToDestination
+                }
+                onSharedElementMovedToSource={onSharedElementMovedToSource}
+                theme={null}
+                screenProps={null}
+              />
+            </AlbumProvider>
           </View>
         </View>
       </SafeAreaView>

diff --git a/src/components/Albums/List/List.tsx b/src/components/Albums/List/List.tsx
@@ -5,7 +5,7 @@ import {NavigationStackScreenProps} from 'react-navigation-stack';
 import {SharedElement} from 'react-native-motion';
 import Header from './Header';
 import Card from 'src/components/common/Card';
-import data from 'src/api/data/data';
+import AlbumContext from 'src/store/AlbumContext';
 import styles from './styles';
 
 type Props = {
@@ -73,19 +73,25 @@ const List = (props: Props & NavigationStackScreenProps) => {
   const {phase} = props;
 
   return (
-    <View style={styles.container}>
-      <Header
-        isHidden={phase !== PHASE_0}
-        onPress={() => props.navigation.navigate('ProfileTab')}
-      />
-      <FlatList
-        data={data}
-        showsVerticalScrollIndicator={false}
-        extraData={{phase, opacityOfSelectedItem}}
-        keyExtractor={(item) => item.title}
-        renderItem={renderItem}
-      />
-    </View>
+    <AlbumContext.Consumer>
+      {(context) => {
+        return (
+          <View style={styles.container}>
+            <Header
+              isHidden={phase !== PHASE_0}
+              onPress={() => props.navigation.navigate('ProfileTab')}
+            />
+            <FlatList
+              data={context.data}
+              showsVerticalScrollIndicator={false}
+              extraData={{phase, opacityOfSelectedItem}}
+              keyExtractor={(item) => item.title}
+              renderItem={renderItem}
+            />
+          </View>
+        );
+      }}
+    </AlbumContext.Consumer>
   );
 };
 

diff --git a/src/components/common/AnimatedFadeView/AnimatedFadeView.tsx b/src/components/common/AnimatedFadeView/AnimatedFadeView.tsx
@@ -4,7 +4,7 @@ import {AnimatedValue} from 'react-navigation';
 
 type Props = {
   isHidden: boolean;
-  children: React.ReactNode;
+  children: any;
 };
 
 const SHOW = 1;

diff --git a/src/store/AlbumContext.tsx b/src/store/AlbumContext.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const AlbumContent = React.createContext(null);
+
+export default AlbumContent;