Display dummy resources

src/containers/Resources.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import {Text, View, SectionList} from 'react-native';
 import {useResources} from '../hooks';
-import {ResourceType} from '../types';
 
 const Resources = () => {
   const data = useResources();
 
   return (
     <View>
-      <Text>{JSON.stringify(data, null, 2)}</Text>
+      <SectionList
+        sections={data}
+        renderSectionHeader={({section}) => <Text>{section.header}</Text>}
+        renderItem={({item}) => <Text>{item.name}</Text>}
+      />
     </View>
   );
 };
 
 export default Resources;
-
-const styles = StyleSheet.create({});

src/hooks.ts

@@ -8,11 +8,9 @@ export const useResourcesByCategory = (category: string) => {
 };
 
 export const useResources = () => {
-  const resources = useSelector(
-    (state: ReduxState) => state.game.resourceCount,
-  );
+  const resources = useSelector((state: ReduxState) => state.game.resources);
 
-  return chain(resources)
+  const resourceGroups = chain(Object.values(resources))
     .pickBy((r) => r.unlocked)
     .filter(
       (r) =>
@@ -23,4 +21,11 @@ export const useResources = () => {
     )
     .groupBy((r) => r && r.category)
     .value();
+
+  return Object.keys(resourceGroups).map((key) => {
+    return {
+      header: key,
+      data: resourceGroups[key],
+    };
+  });
 };