Improve login (verify JWT token), add the app state to Redux + various imprvoments

Author: GeorgianSorinMaxim

.eslint.json

@@ -46,7 +46,6 @@
   },
   "rules": {
     "import/newline-after-import": "error",
-    "import/no-cycle": "error",
     "no-fallthrough": "off",
     "no-return-await": "off",
     "no-undef": "off",
@@ -63,6 +62,8 @@
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/no-empty-interface": "off"
+    "@typescript-eslint/no-empty-interface": "off",
+    "import/no-cycle": "off",
+    "camelcase": "off"
   }
 }

App.tsx

@@ -7,10 +7,8 @@ import { PersistGate } from "redux-persist/integration/react";
 
 // Navigation
 import { NavigationContainer } from "@react-navigation/native";
-import useLinking from "./src/navigation/useLinking";
 import { navigationRef } from './src/navigation/RootNavigation';
 
-
 import { Root } from "./src/screens/Root";
 
 // Redux store
@@ -23,48 +21,24 @@ const Loading = () => (
   </View>
 );
 
-const App = () => {
-  const [ isLoadingComplete, setLoadingComplete ] = React.useState(false);
-  const [ initialNavigationState, setInitialNavigationState ] = React.useState();
-  const { getInitialState } = useLinking(navigationRef);
-
-  // Load any resources or data that we need prior to rendering the app
-  React.useEffect(() => {
-    const loadResourcesAndDataAsync = async () => {
-      try {
-        // Load our initial navigation state
-        setInitialNavigationState(await getInitialState());
-      } catch (e) {
-        // We might want to provide this error information to an error reporting service
-        console.warn(e);
-      } finally {
-        setLoadingComplete(true);
-      }
-    };
-
-    loadResourcesAndDataAsync();
-  }, []);
-
-  if (!isLoadingComplete) {
-    return null;
+class App extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Provider store={store}>
+          <PersistGate loading={<Loading />} persistor={persistor}>
+            {Platform.OS === "ios" && <StatusBar barStyle="default" />}
+            <NavigationContainer
+              // @ts-ignore
+              ref={navigationRef}
+            >
+              <Root />
+            </NavigationContainer>
+          </PersistGate>
+        </Provider>
+      </View>
+    );
   }
-
-  return (
-    <View style={styles.container}>
-      <Provider store={store}>
-        <PersistGate loading={<Loading />} persistor={persistor}>
-          {Platform.OS === "ios" && <StatusBar barStyle="default" />}
-          <NavigationContainer
-            // @ts-ignore
-            ref={navigationRef}
-            initialState={initialNavigationState}
-          >
-            <Root />
-          </NavigationContainer>
-        </PersistGate>
-      </Provider>
-    </View>
-  );
 };
 
 const styles = StyleSheet.create({

config/config.json

@@ -1,5 +1,5 @@
 {
   "API": {
-    "dataURL": "https://storage.googleapis.com/nandos-engineering-public/coding-challenge-rn/restaurantlist.json"
+    "dataURL": "https://raw.githubusercontent.com/GeorgianSorinMaxim/json-data/gh-pages/list-of-universities.json"
   }
 }

firebase/config.js firebase.jsfirebase/config.js renamed to firebase.js

@@ -1,4 +1,5 @@
 import * as firebase from "firebase";
+
 import "@firebase/auth";
 import "@firebase/firestore";
 

readme.MD

@@ -60,7 +60,7 @@
 - Eslint (for TypeScript) is used in the project for checking the JS/TS errors.
 - TypeScript is used in the project.
 - react-native-vector-icons has been used to improve the UI apprerance using icons in the navigator and in other UI elements.
-  - Icons: https://ionicons.com
+  - Icons: https://infinitered.github.io/ionicons-version-3-search/
 
 ### Components
 - Button
@@ -76,10 +76,14 @@
 - Screen header with title and left / right buttons
 - Screen container
 - WebView container with `react-native-webview` and `uri-js`
-- Progress indicators and spinners with `react-native-progess`
 
-### TODO Integrations
-- Analytics (GA) and Crashlytics with `react-native-firebase`, `react-native-device-info` and `react-native-uuid`
+### TODO
+- WIP: Auto-login with token verification with `jwt-decode`
+- Use AppCenter CI to build and sign the app
+- UI improvments for login / signup forms with `react-native-keyboard-aware-scroll-view`
+- Fetch data from Firebase Database using with `react-native-firebase`
+- Logging and tracking service: Analytics (GA) and Crashlytics with `react-native-firebase`, `react-native-device-info` and `react-native-uuid`
+- Progress indicators and spinners with `react-native-progess`
 - Use biometric authentication and store user creds in the KeyChain and KeyStore with `react-native-secure-key-store` - https://www.freecodecamp.org/news/how-to-implement-secure-biometric-authentication-on-mobile-devices-4dc518558c5c/
 - Run the app in different environments: dev, prod, uat with `react-native-config`
 - Allow to natively share urls with `react-native-share`
@@ -91,9 +95,14 @@
 - Render maps with `react-native-maps`
 - Render PDFs in-app with `react-native-pdf`
 - Ask your users to rate the app with `react-native-rate`
+- Render SVGs with `react-native-svg` and `react-native-svg-transformer`
 - Feature flagging with Firebase
 - Push notifications with Firebase / Azure
 - Local notifications
+- SPIKE Apollo Client
+  - Manage manage the local data using Apollo Client (with apollo-link-state).
+  - Access the Apollo cache with apollo-cache-inmemory.
+
 
 ### TODOs before going live
 - Manual test the app on multiple devices on both platforms (or use AWS Device Farm).

src/api/firebaseApi.js

@@ -1,6 +1,6 @@
 import { DateTime } from "luxon";
 
-import { firebase } from "../../firebase/config";
+import { firebase } from "../../firebase";
 
 export class FirebaseApi {
   constructor() {
@@ -95,7 +95,7 @@ export class FirebaseApi {
     }
   }
 
-  async getIdToken() {
+  async getToken() {
     const { currentUser } = firebase.auth();
 
     if (currentUser) {

src/assets/images/picturePlaceholder.png

@@ -1,13 +1,15 @@
 import * as React from "react";
-import { Linking, StyleSheet, TouchableOpacity, View } from "react-native";
+import { Image, Linking, StyleSheet, TouchableOpacity, View } from "react-native";
+
+import ImagePlaceholder from "./ImagePlaceholder";
 
 import Colors from "../constants/Colors";
 import BodyText from "./BodyText";
 
-import { Restaurant } from "../store/types/state";
+import { University } from "../store/types/state";
 
 interface Props {
-  item: Restaurant;
+  item: University;
 }
 
 interface State {}
@@ -23,40 +25,70 @@ class Card extends React.Component<Props, State> {
 
   render() {
     const { item } = this.props;
-    const { streetAddress, postalCode, addressLocality } = item.geo.address;
-    const address = `${streetAddress}, ${postalCode}, ${addressLocality}`;
+    const { imageUrl, geo } = item;
+
+    let address = "No address";
+    if (geo && geo.address) {
+      const { streetAddress, postalCode, addressLocality } = geo.address;
+      address = `${streetAddress}, ${postalCode}, ${addressLocality}`;
+    }
 
     return (
       <TouchableOpacity onPress={() => this.onItemTap(item.url)}>
-        <View style={styles.item}>
-          <BodyText style={styles.restaurantName}>{item.name}</BodyText>
-          <BodyText style={styles.address}>{address}</BodyText>
+        <View style={styles.row}>
+          <View style={styles.leftColumn}>
+            <BodyText style={styles.universityName}>{item.name}</BodyText>
+            <BodyText style={styles.address}>{address}</BodyText>
+          </View>
+          <View style={styles.rightColumn}>
+            {!imageUrl || imageUrl.includes("svg") ? (
+              <ImagePlaceholder />
+            ) : (
+              <Image source={{ uri: imageUrl }} style={styles.image} />
+            )}
+          </View>
         </View>
       </TouchableOpacity>
     );
   }
 }
 
 const styles = StyleSheet.create({
-  item: {
+  row: {
     marginBottom: 12,
     borderRadius: 6,
     width: "100%",
-    backgroundColor: Colors.red,
     padding: 12,
     display: "flex",
     alignItems: "flex-start",
+    borderColor: Colors.grey,
+    borderWidth: 1,
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  leftColumn: {
+    width: "60%",
   },
-  restaurantName: {
+  rightColumn: {
+    width: "40%",
+    alignItems: "flex-end",
+  },
+  universityName: {
+    marginTop: 12,
     fontWeight: "bold",
-    color: Colors.white,
+    color: Colors.black,
     overflow: "hidden",
   },
   address: {
-    color: Colors.white,
+    color: Colors.black,
     overflow: "hidden",
     paddingTop: 12,
   },
+  image: {
+    width: 100,
+    height: 100,
+    resizeMode: "contain",
+  },
 });
 
 export default Card;