Add in eslint (#13)

* add eslint

* add pre commit hook

* edit lint rules

* edit eslint and linted some files

.eslintrc.json

@@ -0,0 +1,38 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "react-native/react-native": true
+    },
+    "extends": [
+        "plugin:react/recommended",
+        "google"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "react-native",
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "react-native/no-unused-styles": 1,
+        "react-native/split-platform-components": 1,
+        "react-native/no-inline-styles": 0,
+        "react-native/no-color-literals": 0,
+        "react-native/no-raw-text": 1,
+        "react-native/no-single-element-style-arrays": 1,
+        "require-jsdoc" : 0,
+        "object-curly-spacing": 0,
+        "no-tabs": 0,
+        "quotes": "off",
+        "@typescript-eslint/quotes": ["error", "double"],
+        "space-before-function-paren": 0
+    }
+}

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+PATH=$PATH:/usr/local/bin:/usr/local/sbin
+npm run lint:fix

App.tsx

@@ -7,16 +7,16 @@ import Navigation from "./navigation";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 
 export default function App() {
-	const isLoadingComplete = useCachedResources();
-	const colorScheme = useColorScheme();
+  const isLoadingComplete = useCachedResources();
+  const colorScheme = useColorScheme();
 
-	if (!isLoadingComplete) {
-		return null;
-	} else {
-		return (
-			<SafeAreaProvider>
-				<Navigation colorScheme={colorScheme} />
-			</SafeAreaProvider>
-		);
-	}
+  if (!isLoadingComplete) {
+    return null;
+  } else {
+    return (
+      <SafeAreaProvider>
+        <Navigation colorScheme={colorScheme} />
+      </SafeAreaProvider>
+    );
+  }
 }

babel.config.js

@@ -1,7 +1,7 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
-    plugins: ['react-native-reanimated/plugin'],
+    presets: ["babel-preset-expo"],
+    plugins: ["react-native-reanimated/plugin"],
   };
 };

components/EditScreenInfo.tsx

@@ -1,10 +1,10 @@
-import * as WebBrowser from 'expo-web-browser';
-import React from 'react';
-import { StyleSheet, TouchableOpacity } from 'react-native';
+import * as WebBrowser from "expo-web-browser";
+import React from "react";
+import { StyleSheet, TouchableOpacity } from "react-native";
 
-import Colors from '../constants/Colors';
-import { MonoText } from './StyledText';
-import { Text, View } from './Themed';
+import Colors from "../constants/Colors";
+import { MonoText } from "./StyledText";
+import { Text, View } from "./Themed";
 
 export default function EditScreenInfo({ path }: { path: string }) {
   return (
@@ -45,13 +45,13 @@ export default function EditScreenInfo({ path }: { path: string }) {
 
 function handleHelpPress() {
   WebBrowser.openBrowserAsync(
-    'https://docs.expo.io/get-started/create-a-new-app/#opening-the-app-on-your-phonetablet'
+      "https://docs.expo.io/get-started/create-a-new-app/#opening-the-app-on-your-phonetablet",
   );
 }
 
 const styles = StyleSheet.create({
   getStartedContainer: {
-    alignItems: 'center',
+    alignItems: "center",
     marginHorizontal: 50,
   },
   homeScreenFilename: {
@@ -64,17 +64,17 @@ const styles = StyleSheet.create({
   getStartedText: {
     fontSize: 17,
     lineHeight: 24,
-    textAlign: 'center',
+    textAlign: "center",
   },
   helpContainer: {
     marginTop: 15,
     marginHorizontal: 20,
-    alignItems: 'center',
+    alignItems: "center",
   },
   helpLink: {
     paddingVertical: 15,
   },
   helpLinkText: {
-    textAlign: 'center',
+    textAlign: "center",
   },
 });

components/FormButton.tsx

@@ -3,30 +3,30 @@ import { StyleSheet, Text, TouchableOpacity } from "react-native";
 import { windowHeight } from "../utils/Dimensions";
 
 const FormButton = ({ buttonTitle, bgColor, ...rest }) => {
-	return (
-		<TouchableOpacity
-			style={[styles.button, { backgroundColor: bgColor }]}
-			{...rest}
-		>
-			<Text style={styles.btnText}>{buttonTitle}</Text>
-		</TouchableOpacity>
-	);
+  return (
+    <TouchableOpacity
+      style={[styles.button, { backgroundColor: bgColor }]}
+      {...rest}
+    >
+      <Text style={styles.btnText}>{buttonTitle}</Text>
+    </TouchableOpacity>
+  );
 };
 
 export default FormButton;
 
 const styles = StyleSheet.create({
-	button: {
-		justifyContent: "center",
-		borderRadius: 10,
-		padding: 10,
-		margin: 5,
-		width: "75%",
-		height: 38,
-		alignItems: "center"
-	},
-	btnText: {
-		color: "#fff8dc",
-		fontSize: 15
-	}
+  button: {
+    justifyContent: "center",
+    borderRadius: 10,
+    padding: 10,
+    margin: 5,
+    width: "75%",
+    height: 38,
+    alignItems: "center",
+  },
+  btnText: {
+    color: "#fff8dc",
+    fontSize: 15,
+  },
 });

components/StyledText.tsx

@@ -1,7 +1,12 @@
-import * as React from 'react';
+import * as React from "react";
 
-import { Text, TextProps } from './Themed';
+import { Text, TextProps } from "./Themed";
 
 export function MonoText(props: TextProps) {
-  return <Text {...props} style={[props.style, { fontFamily: 'space-mono' }]} />;
+  return <Text
+    {...props}
+    style={[props.style, {
+      fontFamily: "space-mono",
+    }]}
+  />;
 }

components/__tests__/StyledText-test.js

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import renderer from 'react-test-renderer';
+import * as React from "react";
+import renderer from "react-test-renderer";
 
-import { MonoText } from '../StyledText';
+import { MonoText } from "../StyledText";
 
-it(`renders correctly`, () => {
+it("renders correctly", () => {
   const tree = renderer.create(<MonoText>Snapshot test!</MonoText>).toJSON();
 
   expect(tree).toMatchSnapshot();

firebase/config.js

@@ -2,23 +2,23 @@ import firebase from "firebase/app";
 import "firebase/auth";
 import "firebase/database";
 // import "firebase/firestore";
-//import "firebase/functions";
-//import "firebase/storage";
+// import "firebase/functions";
+// import "firebase/storage";
 
 const firebaseConfig = {
-	apiKey: "AIzaSyBE_zjVzY9Dd77dlNb_7cZaeeZqB46dSAw",
-	authDomain: "pometo.firebaseapp.com",
-	projectId: "pometo",
-	storageBucket: "pometo.appspot.com",
-	messagingSenderId: "459963816492",
-	appId: "1:459963816492:web:5f49f1b60711db53bb0f89",
-	measurementId: "G-454MJWV6YZ",
-	databaseURL:
-		"https://pometo-default-rtdb.asia-southeast1.firebasedatabase.app"
+  apiKey: "AIzaSyBE_zjVzY9Dd77dlNb_7cZaeeZqB46dSAw",
+  authDomain: "pometo.firebaseapp.com",
+  projectId: "pometo",
+  storageBucket: "pometo.appspot.com",
+  messagingSenderId: "459963816492",
+  appId: "1:459963816492:web:5f49f1b60711db53bb0f89",
+  measurementId: "G-454MJWV6YZ",
+  databaseURL:
+    "https://pometo-default-rtdb.asia-southeast1.firebasedatabase.app",
 };
 
 if (!firebase.apps.length) {
-	firebase.initializeApp(firebaseConfig);
+  firebase.initializeApp(firebaseConfig);
 }
 
 export { firebase };

index.d.ts

@@ -1 +1 @@
-declare module 'lodash';
+declare module "lodash";

navigation/AuthStack.tsx

@@ -10,16 +10,16 @@ import { View } from "react-native";
 const Stack = createStackNavigator();
 
 const AuthStack = () => {
-	return (
-		<Stack.Navigator screenOptions={{ headerShown: false }}>
-			<Stack.Screen
-				name="OnboardingScreen"
-				component={OnboardingScreen}
-			/>
-			<Stack.Screen name="LoginScreen" component={LoginScreen} />
-			<Stack.Screen name="SignUpScreen" component={SignUpScreen} />
-		</Stack.Navigator>
-	);
+  return (
+    <Stack.Navigator screenOptions={{ headerShown: false }}>
+      <Stack.Screen
+        name="OnboardingScreen"
+        component={OnboardingScreen}
+      />
+      <Stack.Screen name="LoginScreen" component={LoginScreen} />
+      <Stack.Screen name="SignUpScreen" component={SignUpScreen} />
+    </Stack.Navigator>
+  );
 };
 
 export default AuthStack;