use selector function to make fetch request for second model and subs…

…cribe to this selector with useRecoilValue and wrap rendered component with suspense for asynch loading

App.jsx

@@ -12,7 +12,14 @@ import {
  AddDataNavigator,
  SummaryNavigator,
  ExportNavigator
- } from './src/containers/NavigationScreens'
+} from './src/containers/NavigationScreens'
+import {
+ RecoilRoot,
+ atom,
+ selector,
+ useRecoilState,
+ useRecoilValue,
+} from 'recoil';
 import l from "./helpers/consolelog";
 
 // this has to be turned off for web dev use
@@ -28,6 +35,7 @@ export default class App extends React.Component {
 
  const Drawer = createDrawerNavigator();
  return (
+ <RecoilRoot>
  <NativeBaseProvider theme={defaultTheme}>
  <NavigationContainer>
  <Drawer.Navigator 
@@ -47,6 +55,7 @@ export default class App extends React.Component {
  </Drawer.Navigator>
  </NavigationContainer>
  </NativeBaseProvider>
+ </RecoilRoot>
  );
  }
 }

package.json

@@ -49,6 +49,7 @@
  "react-native-web": "~0.13.12",
  "react-table": "^7.7.0",
  "react-table-plugins": "^1.3.2",
+ "recoil": "^0.7.3-alpha.2",
  "styled-components": "^5.3.5",
  "virtual-dom": "^2.1.1"
  },

src/containers/TabRouteSecond.jsx

@@ -1,16 +1,28 @@
-import React from 'react';
-import { VStack, Center, Text, Box, Button, Dimensions, useColorModeValue, Pressable} from "native-base";
+import React, { ErrorBoundary }  from 'react';
+import { VStack, Center, Text, Box, Button, Dimensions, useColorModeValue, Pressable, Input} from "native-base";
 import { SceneMap } from 'react-native-tab-view';
+import { atom, selector, useRecoilState, useRecoilValue } from 'recoil';
+import l from '../../helpers/consolelog';
+import { DetailsWithSuspense } from '../functions/selectors/DetailsWithSuspense';
+// import { todoListState } from '../atoms/todoListState';
+// import TodoItemCreator from '../atoms/TodoItemCreator';
 
-const TabRouteSecond = () => ( 
- <Center flex={1}>
- This is Tab 2
- </Center> 
-);
 
-export default TabRouteSecond;
+export default function TabRouteSecond() {
 
 
 
 
+ return(
+ <Center>
+ <Text>Second </Text>
+ <React.Suspense fallback={<Text>Loading...</Text>}>
+ <DetailsWithSuspense />
+ </React.Suspense>
+ </Center>
+ )
+}
+
+
+
 

src/functions/selectors/DetailsWithSuspense.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { selector, useRecoilValue } from 'recoil';
+import { Text } from 'native-base';
+import l from '../../../helpers/consolelog';
+
+// makeing erquests
+// const url ="https://catfact.ninja/fact"
+const momentsURL = 'http://localhost:3000/api/alerts/';
+
+// Selector that fetches data
+const fetchAlertnessDetails = selector({
+ key: 'userDetailsSelector',
+ get: async ({ get }) => {
+ try {
+ const response = await fetch(momentsURL);
+
+
+
+ const data = await response.json();
+ return data;
+ }catch(error){
+ throw error;
+ }
+ }
+});
+
+// subscribe to the selector 
+// Data returned from Select is READ-ONLY
+export const DetailsWithSuspense = () => {
+// subscribing to the Selector
+ const userDetails = useRecoilValue(fetchAlertnessDetails);
+ const data = userDetails;
+ l("Subscribed data from Selector: ", data);
+ return ( 
+ <Text>Level: </Text>
+ );
+}

src/screens/SummaryScreen.jsx

@@ -68,7 +68,6 @@ export default function SummaryScreen({ navigation }){
  > 
  <Pressable 
  onPress={() => {
- l(i);
  setIndex(i);
  }}
  >