feat(app): configure eslint

Author: Gapur

.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
   extends: '@react-native-community',
-}
+};

.prettierrc.js

@@ -5,5 +5,5 @@ module.exports = {
   singleQuote: true,
   trailingComma: 'all',
   quoteProps: 'preserve',
-  semi: false,
+  semi: true,
 };

index.js

@@ -1,5 +1,5 @@
-import { AppRegistry } from 'react-native'
-import App from './src/app'
-import { name as appName } from './app.json'
+import { AppRegistry } from 'react-native';
+import App from './src/app';
+import { name as appName } from './app.json';
 
-AppRegistry.registerComponent(appName, () => App)
+AppRegistry.registerComponent(appName, () => App);

package.json

@@ -7,7 +7,20 @@
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "lint:write": "eslint . --fix",
+    "prettier": "prettier --write \"**/*.+(js|jsx|scss|json)\""
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.(js|jsx)": [
+      "npm run lint:write",
+      "git add"
+    ]
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.10",
@@ -34,8 +47,12 @@
     "@react-native-community/eslint-config": "^2.0.0",
     "babel-jest": "^26.6.3",
     "eslint": "^7.16.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "husky": "^4.3.7",
     "jest": "^26.6.3",
+    "lint-staged": "^10.5.3",
     "metro-react-native-babel-preset": "^0.64.0",
+    "prettier": "^2.2.1",
     "react-test-renderer": "16.13.1"
   },
   "jest": {

server.js

@@ -1,32 +1,34 @@
-require('dotenv').config()
+require('dotenv').config();
 
-const Twilio = require('twilio')
-const express = require('express')
+const Twilio = require('twilio');
+const express = require('express');
 
-const app = express()
+const app = express();
 
-const AccessToken = Twilio.jwt.AccessToken
-const ChatGrant = AccessToken.ChatGrant
+const AccessToken = Twilio.jwt.AccessToken;
+const ChatGrant = AccessToken.ChatGrant;
 
 app.get('/token/:identity', (req, res) => {
-  const identity = req.params.identity
+  const identity = req.params.identity;
   const token = new AccessToken(
     process.env.TWILIO_ACCOUNT_SID,
     process.env.TWILIO_API_KEY,
-    process.env.TWILIO_API_SECRET
+    process.env.TWILIO_API_SECRET,
   );
 
-  token.identity = identity
-  token.addGrant(new ChatGrant({
-    serviceSid: process.env.TWILIO_CHAT_SERVICE_SID
-  }));
+  token.identity = identity;
+  token.addGrant(
+    new ChatGrant({
+      serviceSid: process.env.TWILIO_CHAT_SERVICE_SID,
+    }),
+  );
 
   res.send({
     identity: token.identity,
-    jwt: token.toJwt()
-  })
-})
+    jwt: token.toJwt(),
+  });
+});
 
 app.listen(3001, function () {
-  console.log('Programmable Chat server running on port 3001!')
-})
+  console.log('Programmable Chat server running on port 3001!');
+});

src/app.js

@@ -1,31 +1,35 @@
-import React from 'react'
-import { NavigationContainer } from '@react-navigation/native'
-import { createStackNavigator } from '@react-navigation/stack'
-import FlashMessage from 'react-native-flash-message'
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import FlashMessage from 'react-native-flash-message';
 
-import { WelcomeScreen } from './screens/welcome-screen'
-import { ChatListScreen } from './screens/chat-list-screen'
-import { ChatRoomScreen } from './screens/chat-room-screen'
-import { ChatCreateScreen } from './screens/chat-create-screen'
+import { WelcomeScreen } from './screens/welcome-screen';
+import { ChatListScreen } from './screens/chat-list-screen';
+import { ChatRoomScreen } from './screens/chat-room-screen';
+import { ChatCreateScreen } from './screens/chat-create-screen';
 
-import { colors } from './theme'
+import { colors } from './theme';
 
 const Stack = createStackNavigator();
 
 export const routes = {
   Welcome: {
-    name: 'welcome', title: 'Welcome'
+    name: 'welcome',
+    title: 'Welcome',
   },
   ChatList: {
-    name: 'chat-list', title: 'Chat List'
+    name: 'chat-list',
+    title: 'Chat List',
   },
   ChatRoom: {
-    name: 'chat-room', title: 'Chat Room'
+    name: 'chat-room',
+    title: 'Chat Room',
   },
   ChatCreat: {
-    name: 'chat-create', title: 'New Channel'
-  }
-}
+    name: 'chat-create',
+    title: 'New Channel',
+  },
+};
 
 export default function App() {
   const screenOptions = (title) => ({
@@ -37,12 +41,12 @@ export default function App() {
     headerTitleStyle: {
       fontWeight: '700',
     },
-  })
+  });
 
   return (
     <NavigationContainer>
       <Stack.Navigator>
-        <Stack.Screen 
+        <Stack.Screen
           name={routes.Welcome.name}
           options={screenOptions(routes.Welcome.title)}
           component={WelcomeScreen}
@@ -65,6 +69,5 @@ export default function App() {
       </Stack.Navigator>
       <FlashMessage position="bottom" />
     </NavigationContainer>
-  )
+  );
 }
-

src/assets/index.js

@@ -1,4 +1,4 @@
 export const images = {
   logo: require('./twilio.png'),
-  message: require('./message.png')
-}
+  message: require('./message.png'),
+};

src/screens/chat-create-screen.js

@@ -1,35 +1,40 @@
-import React, { useState } from 'react'
-import { View, Text, TextInput, StyleSheet, Image, TouchableOpacity } from 'react-native'
-import { showMessage } from 'react-native-flash-message'
+import React, { useState } from 'react';
+import { View, Text, TextInput, StyleSheet, Image, TouchableOpacity } from 'react-native';
+import { showMessage } from 'react-native-flash-message';
 
-import { colors } from '../theme'
-import { images } from '../assets'
-import { TwilioService } from '../services/twilio-service'
+import { colors } from '../theme';
+import { images } from '../assets';
+import { TwilioService } from '../services/twilio-service';
 
 export function ChatCreateScreen({ navigation }) {
-  const [channelName, setChannelName] = useState("")
+  const [channelName, setChannelName] = useState('');
 
-  const onPress = () => TwilioService.getInstance().getChatClient()
-    .then((client) => client.getChannelByUniqueName(channelName)
-      .then((channel) => {
-        if (channel.channelState.status !== 'joined') {
-          return channel.join()
-        } else {
-          throw new Error('You are already joined.')
-        }
-      })
-      .catch((err) => {
-        if (err.message === 'Not Found') {
-          return client
-            .createChannel({ uniqueName: channelName, friendlyName: channelName })
-            .then(channel => channel.join())
-        }
-        showMessage({
-          message: err.message,
-          type: 'danger'
-        })
-      }))
-    .then(() => navigation.goBack())
+  const onPress = () =>
+    TwilioService.getInstance()
+      .getChatClient()
+      .then((client) =>
+        client
+          .getChannelByUniqueName(channelName)
+          .then((channel) => {
+            if (channel.channelState.status !== 'joined') {
+              return channel.join();
+            } else {
+              throw new Error('You are already joined.');
+            }
+          })
+          .catch((err) => {
+            if (err.message === 'Not Found') {
+              return client
+                .createChannel({ uniqueName: channelName, friendlyName: channelName })
+                .then((channel) => channel.join());
+            }
+            showMessage({
+              message: err.message,
+              type: 'danger',
+            });
+          }),
+      )
+      .then(() => navigation.goBack());
 
   return (
     <View style={styles.screen}>
@@ -45,7 +50,7 @@ export function ChatCreateScreen({ navigation }) {
         <Text style={styles.buttonText}>Create</Text>
       </TouchableOpacity>
     </View>
-  )
+  );
 }
 
 const styles = StyleSheet.create({
@@ -77,10 +82,10 @@ const styles = StyleSheet.create({
     backgroundColor: colors.malibu,
     borderRadius: 8,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   buttonText: {
     fontSize: 17,
-    color: colors.white
-  }
-});
+    color: colors.white,
+  },
+});