[FEATURE for Developers] Add And Configure ESlint and Prettier

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+/.expo

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+    extends: ["universe", "universe/shared/typescript-analysis"],
+    overrides: [
+        {
+            files: ["*.ts", "*.tsx", "*.d.ts"],
+            parserOptions: {
+                project: "./tsconfig.json",
+            },
+        },
+    ],
+    rules: {
+        "import/newline-after-import": ["error", { count: 1 }],
+    },
+};

.expo-shared/assets.json

@@ -1,4 +1,4 @@
-{
-  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
-  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
-}
+{
+    "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+    "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+/.expo
+*.md

.prettierrc

@@ -0,0 +1,10 @@
+{
+    "singleQuote": false,
+    "printWidth": 120,
+    "tabWidth": 4,
+    "useTabs": false,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "semi": true,
+    "endOfLine": "auto"
+}

App.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-
-import MainContainer from './navigation/MainContainer';
-
-const App = () => {
-  return <MainContainer />;
-};
-
-export default App;
+import React from "react";
+
+import MainContainer from "./navigation/MainContainer";
+
+const App = () => {
+    return <MainContainer />;
+};
+
+export default App;

app.json

@@ -1,31 +1,31 @@
-{
-  "expo": {
-    "name": "thecyberhub-app",
-    "slug": "thecyberhub-app",
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "center",
-      "backgroundColor": "#141516"
-    },
-    "updates": {
-      "fallbackToCacheTimeout": 0
-    },
-    "assetBundlePatterns": ["**/*"],
-    "ios": {
-      "supportsTablet": true
-    },
-    "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#141516"
-      }
-    },
-    "web": {
-      "favicon": "./assets/favicon.png"
-    }
-  }
-}
+{
+    "expo": {
+        "name": "thecyberhub-app",
+        "slug": "thecyberhub-app",
+        "version": "1.0.0",
+        "orientation": "portrait",
+        "icon": "./assets/icon.png",
+        "userInterfaceStyle": "light",
+        "splash": {
+            "image": "./assets/splash.png",
+            "resizeMode": "center",
+            "backgroundColor": "#141516"
+        },
+        "updates": {
+            "fallbackToCacheTimeout": 0
+        },
+        "assetBundlePatterns": ["**/*"],
+        "ios": {
+            "supportsTablet": true
+        },
+        "android": {
+            "adaptiveIcon": {
+                "foregroundImage": "./assets/adaptive-icon.png",
+                "backgroundColor": "#141516"
+            }
+        },
+        "web": {
+            "favicon": "./assets/favicon.png"
+        }
+    }
+}

babel.config.js

@@ -1,6 +1,6 @@
-module.exports = function(api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-  };
-};
+module.exports = function (api) {
+    api.cache(true);
+    return {
+        presets: ["babel-preset-expo"],
+    };
+};

components/JobCard.tsx

@@ -1,105 +1,95 @@
-import React from "react";
-import { View, Text, TouchableOpacity } from "react-native";
-import { jobCardStyles as styles } from "./styles";
-import Fa5Icons from "@expo/vector-icons/FontAwesome5";
-import FaIcons from "@expo/vector-icons/FontAwesome";
-import MaterialIcons from "@expo/vector-icons/MaterialCommunityIcons";
-
-// component props
-type Props = {
-  status?: string;
-  jobTitle: string;
-  jobRoleTitle: string;
-  jobRating: number;
-  jobLocation: string;
-  jobDetails: Array<
-    {
-      type: string;
-      label: string;
-      status?: string;
-    }[]
-  >;
-  jobReq: Array<Record<"id" | "title", string>>;
-  jobTimeline: {
-    datePosted: string;
-    directory: string;
-  };
-  keyChild: string
-};
-
-const JobsCard = ({
-  status,
-  jobTitle,
-  jobRoleTitle,
-  jobRating,
-  jobLocation,
-  jobDetails,
-  jobReq,
-  jobTimeline,
-  keyChild,
-}: Props) => {
-  return (
-    <View style={styles.container}>
-      <>
-        <View
-          style={styles.contentContainer}
-        >
-          <View>
-            {status ? <Text style={styles.status}>{status}</Text> : null}
-            <Text
-              style={styles.jobTitle}
-            >
-              {jobTitle}
-            </Text>
-            <View style={styles.jobRoleTitle}>
-              <Text>{jobRoleTitle}</Text>
-              <Text style={styles.jobRating}>
-                {jobRating.toFixed(1)}
-                <FaIcons name="star" color="orange" />
-              </Text>
-            </View>
-            <Text>{jobLocation}</Text>
-          </View>
-          <TouchableOpacity style={styles.moreIcon}>
-            <Fa5Icons name="ellipsis-v" size={15} />
-          </TouchableOpacity>
-        </View>
-        {jobDetails.map((item) => (
-          <View
-            style={styles.jobDetailsContainer}
-            key={`${keyChild} + ${Math.random() *100}`}
-          >
-            {item.map((data) => (
-              <Text style={styles.jobDetailsTag} key={keyChild+data.type}>
-                <MaterialIcons
-                  name={data.type as keyof typeof MaterialIcons.glyphMap}
-                  size={15}
-                  color={data.status === "priority" ? "orange" : undefined}
-                />
-                <Text>{`  ${data.label}`}</Text>
-              </Text>
-            ))}
-          </View>
-        ))}
-        {Array.isArray(jobReq) && jobReq.length > 0
-          ? jobReq.map(({ id, title }) => (
-              <Text key={id} style={styles.jobReqItem}>
-                {`\u2022  `}
-                {title}
-              </Text>
-            ))
-          : null}
-      </>
-      <View style={{ marginTop: 24, flexDirection: "row" }}>
-        <Text>{jobTimeline.datePosted}</Text>
-        <Text style={{ marginHorizontal: 8 }}>{`\u2022`}</Text>
-        <Text>
-          <Text>{`From `}</Text>
-          <Text style={{ fontWeight: "500" }}>{jobTimeline.directory}</Text>
-        </Text>
-      </View>
-    </View>
-  );
-};
-
-export default JobsCard;
+import FaIcons from "@expo/vector-icons/FontAwesome";
+import Fa5Icons from "@expo/vector-icons/FontAwesome5";
+import MaterialIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+
+import { jobCardStyles as styles } from "./styles";
+
+// component props
+type Props = {
+    status?: string;
+    jobTitle: string;
+    jobRoleTitle: string;
+    jobRating: number;
+    jobLocation: string;
+    jobDetails: {
+        type: string;
+        label: string;
+        status?: string;
+    }[][];
+    jobReq: Record<"id" | "title", string>[];
+    jobTimeline: {
+        datePosted: string;
+        directory: string;
+    };
+    keyChild: string;
+};
+
+const JobsCard = ({
+    status,
+    jobTitle,
+    jobRoleTitle,
+    jobRating,
+    jobLocation,
+    jobDetails,
+    jobReq,
+    jobTimeline,
+    keyChild,
+}: Props) => {
+    return (
+        <View style={styles.container}>
+            <>
+                <View style={styles.contentContainer}>
+                    <View>
+                        {status ? <Text style={styles.status}>{status}</Text> : null}
+                        <Text style={styles.jobTitle}>{jobTitle}</Text>
+                        <View style={styles.jobRoleTitle}>
+                            <Text>{jobRoleTitle}</Text>
+                            <Text style={styles.jobRating}>
+                                {jobRating.toFixed(1)}
+                                <FaIcons name="star" color="orange" />
+                            </Text>
+                        </View>
+                        <Text>{jobLocation}</Text>
+                    </View>
+                    <TouchableOpacity style={styles.moreIcon}>
+                        <Fa5Icons name="ellipsis-v" size={15} />
+                    </TouchableOpacity>
+                </View>
+                {jobDetails.map((item) => (
+                    <View style={styles.jobDetailsContainer} key={`${keyChild} + ${Math.random() * 100}`}>
+                        {item.map((data) => (
+                            <Text style={styles.jobDetailsTag} key={keyChild + data.type}>
+                                <MaterialIcons
+                                    name={data.type as keyof typeof MaterialIcons.glyphMap}
+                                    size={15}
+                                    color={data.status === "priority" ? "orange" : undefined}
+                                />
+                                <Text>{`  ${data.label}`}</Text>
+                            </Text>
+                        ))}
+                    </View>
+                ))}
+                {Array.isArray(jobReq) && jobReq.length > 0
+                    ? jobReq.map(({ id, title }) => (
+                          <Text key={id} style={styles.jobReqItem}>
+                              {`\u2022  `}
+                              {title}
+                          </Text>
+                      ))
+                    : null}
+            </>
+            <View style={{ marginTop: 24, flexDirection: "row" }}>
+                <Text>{jobTimeline.datePosted}</Text>
+                <Text style={{ marginHorizontal: 8 }}>{`\u2022`}</Text>
+                <Text>
+                    <Text>{`From `}</Text>
+                    <Text style={{ fontWeight: "500" }}>{jobTimeline.directory}</Text>
+                </Text>
+            </View>
+        </View>
+    );
+};
+
+export default JobsCard;