Frontend codacy errors

frontend/.eslintrc.js

@@ -24,6 +24,19 @@ module.exports = {
   ],
   rules: {
     "react/prop-types": ["error", { "ignore": ["navigation"] }],
-    "no-underscore-dangle": [2, { "allow": ["_id"] }]
+    "no-underscore-dangle": [2, { "allow": ["_id"] }],
+    "react/sort-comp": [1, {
+      order: [
+        "static-variables",
+        "instance-variables",
+        "constructor",
+        "static-methods",
+        "lifecycle",
+        "everything-else",
+        "render",
+      ]
+    }]
   },
 };
+
+

frontend/android/app/src/main/java/com/jobtogo/MainApplication.java

@@ -1,17 +1,13 @@
 package com.jobtogo;
 
 import android.app.Application;
-import android.util.Log;
 
 import com.facebook.react.PackageList;
-import com.facebook.hermes.reactexecutor.HermesExecutorFactory;
-import com.facebook.react.bridge.JavaScriptExecutorFactory;
 import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.soloader.SoLoader;
-import io.invertase.firebase.RNFirebasePackage;
-import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;                       
+import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
 import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;
 
 import java.util.List;

frontend/package.json

@@ -17,6 +17,7 @@
     "react-native-firebase": "^5.5.6",
     "react-native-gesture-handler": "^1.4.1",
     "react-native-google-signin": "^2.1.0",
+    "react-native-logger": "^1.0.3",
     "react-native-reanimated": "^1.3.0",
     "react-native-swipe-gestures": "^1.0.4",
     "react-navigation": "^4.0.10",

frontend/src/App.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Platform } from 'react-native';
+import { Platform, Alert } from 'react-native';
 import { createAppContainer, createSwitchNavigator } from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';
 import { createDrawerNavigator } from 'react-navigation-drawer';
 import firebase from 'react-native-firebase';
+import { logger } from 'react-native-logger';
 
 import SignIn from './screens/SignIn';
 import SignUp from './screens/SignUp';
@@ -14,33 +15,33 @@ import EditSkills from './screens/EditSkills';
 
 import { appStyles } from './styles';
 
-
+const styles = appStyles;
 export default class App extends React.Component {
   async componentDidMount() {
     if (Platform.OS === 'android') {
       try {
         await firebase.messaging().requestPermission();
         const fcmToken = await firebase.messaging().getToken();
         if (fcmToken) {
-          console.log('FCM Token: ', fcmToken);
+          logger.log('FCM Token: ', fcmToken);
           global.firebaseToken = fcmToken;
           const enabled = await firebase.messaging().hasPermission();
           if (enabled) {
-            console.log(`FCM messaging has permission:${enabled}`);
+            logger.log(`FCM messaging has permission:${enabled}`);
           } else {
             try {
               await firebase.messaging().requestPermission();
-              console.log('FCM permission granted');
+              logger.log('FCM permission granted');
             } catch (error) {
-              console.log('FCM Permission Error', error);
+              logger.log('FCM Permission Error', error);
             }
           }
           this.createNotificationListeners();
         } else {
-          console.log('FCM Token not available');
+          logger.log('FCM Token not available');
         }
       } catch (e) {
-        console.log('Error initializing FCM', e);
+        logger.log('Error initializing FCM', e);
       }
     }
   }
@@ -51,10 +52,10 @@ export default class App extends React.Component {
   }
 
   showAlert = (title, body) => {
-    alert(
+    Alert.alert(
       title, body,
       [
-        { text: 'OK', onPress: () => console.log('OK Pressed') },
+        { text: 'OK', onPress: () => logger.log('OK Pressed') },
       ],
       { cancelable: false },
     );
@@ -68,37 +69,12 @@ export default class App extends React.Component {
       const { title, body } = notification;
       this.showAlert(title, body);
     });
-
-    /*
-    * If your app is in background, you can listen for when a notification
-    * is clicked / tapped / opened as follows:
-    * */
-    this.notificationOpenedListener = firebase.notifications()
-      .onNotificationOpened((notificationOpen) => {
-        const { title, body } = notificationOpen.notification;
-      });
-
-    /*
-    * If your app is closed, you can check if it was opened by a notification
-    * being clicked / tapped / opened as follows:
-    * */
-    const notificationOpen = await firebase.notifications().getInitialNotification();
-    if (notificationOpen) {
-      const { title, body } = notificationOpen.notification;
-    }
-    /*
-    * Triggered for data only payload in foreground
-    * */
-    this.messageListener = firebase.messaging().onMessage((message) => {
-      // process data message
-      console.log(JSON.stringify(message));
-    });
   }
 
   render() {
     return (
       <AppContainer
-        styles={appStyles.containerStyle}
+        styles={styles.container}
       />
     );
   }

frontend/src/components/Button.jsx

@@ -2,22 +2,22 @@ import React from 'react';
 import { Text, TouchableOpacity, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 
-import { buttonStyles } from '../styles';
+import { buttonStyles, containerStyles } from '../styles';
 
 
-const styles = buttonStyles;
+const styles = { ...containerStyles, ...buttonStyles };
 const Button = ({
   style, backgroundColor, textColor, title, enable, onPress,
 }) => (
   <TouchableOpacity
     style={[{
       opacity: enable ? 1 : 0.3,
       backgroundColor,
-    }, styles.containerStyle, style]}
+    }, styles.alignJustifyCenter, styles.container, style]}
     disabled={!enable}
     onPress={onPress}
   >
-    <Text style={[{ color: textColor }, styles.textStyle]}>
+    <Text style={[{ color: textColor }, styles.text]}>
       {title}
     </Text>
   </TouchableOpacity>

frontend/src/components/ImageButton.jsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { TouchableOpacity, Image } from 'react-native';
 import PropTypes from 'prop-types';
 
-import { imageButtonStyles } from '../styles';
+import { containerStyles } from '../styles';
 
 
-const styles = imageButtonStyles;
+const styles = containerStyles;
 const ImageButton = ({ source, onPress }) => (
   <TouchableOpacity
-    style={[styles.containerStyle]}
+    style={[styles.alignJustifyCenter]}
     onPress={onPress}
   >
     <Image

frontend/src/components/JobDetails.jsx

@@ -7,9 +7,9 @@ import PropTypes from 'prop-types';
 
 import ImageButton from './ImageButton';
 import images from '../constants/images';
-import { jobDetailsStyles } from '../styles';
-
+import { containerStyles, jobDetailsStyles } from '../styles';
 
+const styles = { ...containerStyles, ...jobDetailsStyles };
 class JobDetails extends Component {
   constructor(props) {
     super(props);
@@ -23,67 +23,66 @@ class JobDetails extends Component {
   }
 
   render() {
-    const styles = jobDetailsStyles;
     const { modalVisible } = this.state;
     const {
       company, title, location, description,
     } = this.props;
     return (
-      <View style={[styles.containerStyle]}>
+      <View style={[styles.container]}>
         <Modal
           animationType="slide"
           transparent={false}
           visible={modalVisible}
         >
-          <View style={[styles.modalContainerStyle]}>
+          <View style={[styles.modalContainer]}>
             <ImageButton
               source={images.iconChevronDown}
               onPress={() => {
                 this.setModalVisible(false);
               }}
             />
-            <Text style={[styles.headerStyle]}>{company}</Text>
-            <View style={[styles.subHeaderContainerStyle]}>
+            <Text style={[styles.header]}>{company}</Text>
+            <View style={[styles.subHeaderContainer]}>
               <Image
                 source={images.iconJob}
-                styles={[styles.iconStyle]}
+                styles={[styles.icon]}
               />
-              <Text style={[styles.subHeaderStyle]}>{title}</Text>
+              <Text style={[styles.subHeader]}>{title}</Text>
             </View>
-            <View style={[styles.subHeaderContainerStyle]}>
+            <View style={[styles.subHeaderContainer]}>
               <Image
                 source={images.iconLocation}
-                styles={[styles.iconStyle]}
+                styles={[styles.icon]}
               />
-              <Text style={[styles.subHeaderStyle]}>{location}</Text>
+              <Text style={[styles.subHeader]}>{location}</Text>
             </View>
-            <ScrollView style={[styles.scrollStyle]}>
+            <ScrollView style={[styles.scroll]}>
               <Text>{description}</Text>
             </ScrollView>
           </View>
         </Modal>
 
-        <View style={[styles.textContainerStyle]}>
+        <View style={[styles.textContainer]}>
           <ImageButton
             source={images.iconChevronUp}
             onPress={() => {
               this.setModalVisible(true);
             }}
           />
-          <Text style={[styles.headerStyle]}>{company}</Text>
-          <View style={[styles.subHeaderContainerStyle]}>
+          <Text style={[styles.header]}>{company}</Text>
+          <View style={[styles.subHeaderContainer]}>
             <Image
               source={images.iconJob}
-              styles={[styles.iconStyle]}
+              styles={[styles.icon]}
             />
-            <Text style={[styles.subHeaderStyle]}>{title}</Text>
+            <Text style={[styles.subHeader]}>{title}</Text>
           </View>
-          <View style={[styles.subHeaderContainerStyle]}>
+          <View style={[styles.subHeaderContainer]}>
             <Image
               source={images.iconLocation}
-              styles={[styles.iconStyle]}
+              styles={[styles.icon]}
             />
-            <Text style={[styles.subHeaderStyle]}>{location}</Text>
+            <Text style={[styles.subHeader]}>{location}</Text>
           </View>
         </View>
       </View>

frontend/src/components/JobImage.jsx

@@ -3,13 +3,16 @@ import { Text, ImageBackground } from 'react-native';
 import PropTypes from 'prop-types';
 
 import images from '../constants/images';
-import { jobImageStyles } from '../styles';
+import { containerStyles, displayStyles, jobImageStyles } from '../styles';
 
 
-const styles = jobImageStyles;
+const styles = { ...containerStyles, ...displayStyles, ...jobImageStyles };
 const JobImage = ({ company }) => (
-  <ImageBackground source={images.tempBg1} style={[styles.containerStyle]}>
-    <Text style={[styles.textStyle]}>{company}</Text>
+  <ImageBackground
+    source={images.jobBackground}
+    style={[styles.flexRowContainer, styles.container]}
+  >
+    <Text style={[styles.lightText, styles.text]}>{company}</Text>
   </ImageBackground>
 );
 

frontend/src/components/Loader.jsx

@@ -3,15 +3,15 @@ import { Image, View } from 'react-native';
 
 import images from '../constants/images';
 
-import { loaderStyles } from '../styles';
+import { containerStyles, displayStyles, loaderStyles } from '../styles';
 
 
-const styles = loaderStyles;
+const styles = { ...containerStyles, ...displayStyles, ...loaderStyles };
 const Loader = () => (
-  <View style={[styles.containerStyle]}>
+  <View style={[styles.flexRowContainer, styles.accentBackground]}>
     <Image
       source={images.iconLogo}
-      style={[styles.imageStyle]}
+      style={[styles.image]}
     />
   </View>
 );

frontend/src/components/MainHeader.jsx

@@ -4,16 +4,17 @@ import PropTypes from 'prop-types';
 
 import ImageButton from './ImageButton';
 import images from '../constants/images';
-import { mainHeaderStyles } from '../styles';
+import { containerStyles, mainHeaderStyles } from '../styles';
 
-const styles = mainHeaderStyles;
+
+const styles = { ...containerStyles, ...mainHeaderStyles };
 const MainHeader = ({ onPressMenu, onPressSend }) => (
-  <View style={[styles.containerStyle]}>
+  <View style={[styles.flexRowContainer, styles.container]}>
     <ImageButton
       source={images.iconMenu}
       onPress={onPressMenu}
     />
-    <Image source={images.logoLight} style={[styles.logoStyle]} />
+    <Image source={images.logoLight} style={[styles.logo]} />
     <ImageButton
       source={images.iconSend}
       onPress={onPressSend}