style: applied eslint, prettier auto-fixes

Signed-off-by: Rifa Achrinza <[email protected]>

.eslintrc.js

@@ -1,7 +1,4 @@
 // https://docs.expo.dev/guides/using-eslint/
 module.exports = {
-  extends: [
-    'expo',
-    'plugin:prettier/recommended',
-  ],
+  extends: ['expo', 'plugin:prettier/recommended'],
 };

.husky/pre-commit

@@ -1,2 +1,3 @@
 npm test
 npm run lint
+

app/(tabs)/_layout.tsx

@@ -1,50 +1,50 @@
-import { Tabs } from "expo-router";
-import { Image } from 'expo-image';
-import { Colors } from "@/constants/Colors";
-import { useColorScheme } from "@/hooks/useColorScheme";
+import {Tabs} from 'expo-router';
+import {Image} from 'expo-image';
+import {Colors} from '@/constants/Colors';
+import {useColorScheme} from '@/hooks/useColorScheme';
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
+        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
         headerShown: false,
       }}
     >
       <Tabs.Screen
         name="index"
         options={{
-          title: "Home",
-          tabBarIcon: ({ size, color, focused }) => (
+          title: 'Home',
+          tabBarIcon: ({size, color, focused}) => (
             <Image
-              style={{ width: size, height: size }}
-              source={require("../../assets/tab_icons/home.svg")}
+              style={{width: size, height: size}}
+              source={require('../../assets/tab_icons/home.svg')}
             />
           ),
         }}
       />
       <Tabs.Screen
         name="sos"
         options={{
-          title: "SOS",
-          tabBarIcon: ({ size, color, focused }) => (
+          title: 'SOS',
+          tabBarIcon: ({size, color, focused}) => (
             <Image
-              style={{ width: size, height: size }}
-              source={require("../../assets/tab_icons/sos.svg")}
+              style={{width: size, height: size}}
+              source={require('../../assets/tab_icons/sos.svg')}
             />
           ),
         }}
       />
       <Tabs.Screen
         name="resources"
         options={{
-          title: "Resources",
-          tabBarIcon: ({ size, color, focused }) => (
+          title: 'Resources',
+          tabBarIcon: ({size, color, focused}) => (
             <Image
-              style={{ width: size, height: size }}
-              source={require("../../assets/tab_icons/feedback.svg")}
+              style={{width: size, height: size}}
+              source={require('../../assets/tab_icons/feedback.svg')}
             />
           ),
         }}

app/(tabs)/index.tsx

@@ -1,24 +1,14 @@
 import moment from 'moment';
 import {Image} from 'expo-image';
-import React, {
-  useEffect,
-  useState,
-  type PropsWithChildren,
-} from 'react';
-import {
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import React, {useEffect, useState, type PropsWithChildren} from 'react';
+import {ScrollView, StyleSheet, Text, View} from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import MoodScale from '@/components/MoodScale';
 import Quote from '@/components/Quote';
 import Activities from '@/components/Activities';
 
 export default function Index() {
   const [name, setName] = useState('');
-
 
   useEffect(() => {
     const fetchUserData = async () => {
@@ -32,18 +22,17 @@ export default function Index() {
   return (
     <ScrollView style={styles.container}>
       <Text style={styles.greeter}>Hey, {name}!</Text>
-      <DiaryHero/>
+      <DiaryHero />
       <Section title="Quote of the Day">
-        <Quote/>
+        <Quote />
       </Section>
       <Section title="Activities">
-        <Activities/>
+        <Activities />
       </Section>
-      
+
       <Section title="Explore">
-        <Explore/>
+        <Explore />
       </Section>
-
     </ScrollView>
   );
 }
@@ -54,10 +43,12 @@ function DiaryHero() {
   const handleMoodSelect = async (selectedMood: number) => {
     setMood(selectedMood);
     const currentDate = new Date().toISOString().split('T')[0]; // date formatted as YYYY-MM-DD
-    await AsyncStorage.setItem('mood', JSON.stringify({ date: currentDate, mood: selectedMood }));
-
+    await AsyncStorage.setItem(
+      'mood',
+      JSON.stringify({date: currentDate, mood: selectedMood}),
+    );
   };
-  
+
   const styles = StyleSheet.create({
     container: {
       paddingTop: 15,
@@ -77,44 +68,51 @@ function DiaryHero() {
       fontSize: 12,
     },
   });
-  
+
   return (
     <View style={styles.container}>
-      <Text style={styles.dateLarge}>{ moment().format('dddd') }</Text>
-      <Text style={styles.dateSmall}>{ moment().format('DD MMMM YYYY') }</Text>
+      <Text style={styles.dateLarge}>{moment().format('dddd')}</Text>
+      <Text style={styles.dateSmall}>{moment().format('DD MMMM YYYY')}</Text>
       <MoodScale currentMood={mood} onSelectMood={handleMoodSelect} />
     </View>
-  )
+  );
 }
 
 type ExploreCardProps = {
   bgColor: string;
   imgSrc: Image['props']['source'];
   text: string;
-}
+};
 
 function ExploreCard({bgColor, imgSrc, text}: ExploreCardProps) {
   return (
-    <View style={{
-      backgroundColor: bgColor,
-      borderRadius: 6,
-      marginRight: 15,
-      padding: 15,
-      width: 180,
-      height: 200
-    }}>
-      <Text style={{
-        textAlign: 'right',
-        fontWeight: 'bold',
-        color: '#2A4E4C'
-      }}>{text}</Text>
+    <View
+      style={{
+        backgroundColor: bgColor,
+        borderRadius: 6,
+        marginRight: 15,
+        padding: 15,
+        width: 180,
+        height: 200,
+      }}
+    >
+      <Text
+        style={{
+          textAlign: 'right',
+          fontWeight: 'bold',
+          color: '#2A4E4C',
+        }}
+      >
+        {text}
+      </Text>
       <Image
         style={{
           flexGrow: 1,
         }}
-        source={imgSrc}/>
+        source={imgSrc}
+      />
     </View>
-  )
+  );
 }
 
 function Explore() {
@@ -139,18 +137,19 @@ function Explore() {
       bgColor: '#FFE7E7',
       imgSrc: require('../../assets/explore-categories/lived_experience.svg'),
     },
-  ]
+  ];
   return (
     <ScrollView horizontal={true}>
-      {exploreCards.map((x, i) => 
+      {exploreCards.map((x, i) => (
         <ExploreCard
           key={i}
           bgColor={x.bgColor}
           text={x.text}
-          imgSrc={x.imgSrc}/>
-      )}
+          imgSrc={x.imgSrc}
+        />
+      ))}
     </ScrollView>
-  )
+  );
 }
 
 function Section({title, children}: PropsWithChildren & {title: string}) {
@@ -165,13 +164,13 @@ function Section({title, children}: PropsWithChildren & {title: string}) {
       color: '#765000',
     },
   });
-  
+
   return (
     <View style={styles.section}>
       <Text style={styles.title}>{title}</Text>
       {children}
     </View>
-  )
+  );
 }
 
 const styles = StyleSheet.create({

app/(tabs)/resources.tsx

@@ -1,4 +1,4 @@
-import { ScrollView, Text, StyleSheet } from 'react-native';
+import {ScrollView, Text, StyleSheet} from 'react-native';
 import TelegramCard from '@/components/TelegramCard';
 import ContactCard from '@/components/ContactCard';
 
@@ -16,7 +16,7 @@ export default function ResourcesScreen() {
         image={require('../../assets/resources_tab/csscom_wellbeing_channel.svg')} //
         title="CSSCOM Well-Being"
         description="Join our Telegram channel for a daily mental well-being boost"
-        backgroundColor = "#DEF7E5"
+        backgroundColor="#DEF7E5"
       />
       <TelegramCard
         image={require('../../assets/resources_tab/mindline_sg.svg')} //
@@ -25,25 +25,24 @@ export default function ResourcesScreen() {
         backgroundColor="#DDF1FE"
       />
       <Text style={styles.smallText}>Useful Contacts</Text>
-      <ContactCard 
-        organisation="Singapore Armed Forces" 
-        phoneNumber="1800 278 0022" 
+      <ContactCard
+        organisation="Singapore Armed Forces"
+        phoneNumber="1800 278 0022"
         details="24/7Hrs"
         mode="raised"
       />
-      <ContactCard 
-        organisation="Singapore Civil Defence Force" 
-        phoneNumber="1800 286 6666" 
+      <ContactCard
+        organisation="Singapore Civil Defence Force"
+        phoneNumber="1800 286 6666"
         details="24/7Hrs"
         mode="raised"
       />
-      <ContactCard 
-        organisation="Singapore Police Force" 
+      <ContactCard
+        organisation="Singapore Police Force"
         phoneNumber="1800 255 1151"
         details="Weekdays 8.30am-6.30pm"
         mode="raised"
       />
-
     </ScrollView>
   );
 }
@@ -53,9 +52,9 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     justifyContent: 'flex-start',
     alignItems: 'center',
-    paddingTop:50,
-    paddingHorizontal:20,
-    paddingBottom:30,
+    paddingTop: 50,
+    paddingHorizontal: 20,
+    paddingBottom: 30,
   },
   largeText: {
     marginBottom: 20,