I had to repost my previous post because I had to update something.
Tired to minify the code and take out all the unused stuff as much as possible.
Thank you for helping me out
App.js
import React from 'react';
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import { Root, StyleProvider } from "native-base";
import { StatusBar, AppRegistry, TouchableWithoutFeedback, Keyboard } from "react-native";
import AppPreLoader from "./application/components/AppPreLoader";
import firebaseConfig from './application/utils/Firebase';
import * as firebase from 'firebase';
if (firebase.apps.length === 0) {
firebase.initializeApp(firebaseConfig);
}
import GuestNavigation from './application/navigations/Guest';
import LoggedNavigation from './application/navigations/Logged';
import { store, persistor } from './application/redux/store';
import { PersistGate } from 'redux-persist/integration/react'
import { Provider } from 'react-redux';
import { MenuProvider } from 'react-native-popup-menu';
import ExerciseFetching from './application/components/ExerciseFetching';
// Native base theme
import getTheme from "./native-base-theme/components";
import variables from "./native-base-theme/variables/platform";
console.disableYellowBox = true;
function cacheImages(images) {
return images.map(image => {
if (typeof image === 'string') {
return Image.prefetch(image);
} else {
return Asset.fromModule(image).downloadAsync();
}
});
}
export default class App extends React.Component {
constructor() {
super();
this.state = {
isLogged: false,
loaded: false,
isReady: false,
isLoadingComplete: false,
}
}
async _loadAssetsAsync() {
const imageAssets = cacheImages([,
require('./assets/images/logo.png'),
require('./assets/images/nointernet.png'),
require('./assets/images/contact.png'),
]);
await Promise.all([...imageAssets]);
}
async componentDidMount() {
await Expo.Font.loadAsync({
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
ssb_Bold: require('./assets/font/Source_Sans_Pro/SourceSansPro-Bold.ttf'),
ssb_Regular: require('./assets/font/Source_Sans_Pro/SourceSansPro-Regular.ttf'),
ssb_Light: require('./assets/font/Source_Sans_Pro/SourceSansPro-Light.ttf'),
ssb_SemiBold: require('./assets/font/Source_Sans_Pro/SourceSansPro-SemiBold.ttf'),
SimpleLineIcons: require('native-base/Fonts/SimpleLineIcons.ttf'),
Ionicons: require('native-base/Fonts/Ionicons.ttf'),
'Material Icons': require('native-base/Fonts/MaterialIcons.ttf'),
});
await firebase.auth().onAuthStateChanged((user) => {
if (user !== null) {
this.setState({
isLogged: true,
loaded: true
});
} else {
this.setState({
isLogged: false,
loaded: true
});
}
})
}
render() {
if (!this.state.isReady) {
return (
<AppLoading
startAsync={async () => {
await this._loadAssetsAsync();
ExerciseFetching.fetchExercises(() => {
this.setState({ isLoadingComplete: true });
})
}}
onFinish={() => this.setState({ isReady: true })}
onError={console.warn}
/>
);
}
// if (!this.state.isReady) {
// return (
// <AppLoading
// startAsync={this._loadAssetsAsync}
// onFinish={() => this.setState({ isReady: true })}
// onError={console.warn}
// />
// );
// }
const { isLogged, loaded, isReady } = this.state;
if (!loaded) {
return (
<AppPreLoader/>
);
}
if (isLogged && isReady) {
// if (isReady) {
return (
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss()
}}>
<StyleProvider style={getTheme(variables)}>
<Provider store={store}>
<PersistGate persistor={persistor}>
<MenuProvider>
<Root>
<StatusBar barStyle="dark-content" backgroundColor="white" />
<LoggedNavigation />
</Root>
</MenuProvider>
</PersistGate>
</Provider>
</StyleProvider>
</TouchableWithoutFeedback>
);
}
else {
return (
<Root>
<StatusBar hidden />
<GuestNavigation />
</Root>
);
}
}
}
AppRegistry.registerComponent('main', () => App);
ExerciseFetching
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { addExercise, receivedExercises, requestExercises } from '../redux/actions/exerciseActions';
import axios from 'axios';
class ExerciseFetching extends Component {
componentDidMount() {
fetchExercises(this.props, () => this.setState({ isLoadingComplete: false}));
}
fetchExercises = async (props, complete) => {
const { loadingExercises, exerciseCount, addExercise, receivedExercises } = props;
console.log(loadingExercises, exerciseCount);
if (exerciseCount >= 3000) {
await receivedExercises();
complete();
return
}
console.log('<> <> loadingExercise??? ', loadingExercises)
// Set loading true
await props.requestExercises();
const url = "link to the backend";
const parseBasicExercise = exercise => ({ id: exercise.id, name: exercise.Name });
console.log('<> <> DOING A FETCH <> <> with count ', exerciseCount);
const exercises = await axios.get(url, {
params: {
_limit: -1
}
}
).then(resp => {
const exercises = resp.data.map(parseBasicExercise);
console.log("Data", exercises)
return exercises;
}).catch(err => {
console.log('<> <> axios err ' + err)
});
console.log("<> <> got response pt 2" + " " + exercises.length)
exercises.forEach(async ({ id, name }) => {
await addExercise({ id: id.toString(), name });
});
complete();
}
}
const mapDispatchToProps = (dispatch) => ({
addExercise: (exercise) => dispatch(addExercise(exercise)),
});
export default connect(mapStateToProps, mapDispatchToProps)(ExerciseFetching);