Issue 96, 86, 85, 78

app.json

@@ -24,11 +24,15 @@
           }
         ]
       },
-      "associatedDomains": ["applinks:firmcollective.org"],
+      "associatedDomains": [
+        "applinks:firmcollective.org"
+      ],
       "bundleIdentifier": "com.firmcollective.OneVoiceEcho"
     },
     "android": {
-      "permissions": ["android.permission.INTERNET"],
+      "permissions": [
+        "android.permission.INTERNET"
+      ],
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
@@ -44,7 +48,10 @@
               "pathPrefix": "/login"
             }
           ],
-          "category": ["BROWSABLE", "DEFAULT"]
+          "category": [
+            "BROWSABLE",
+            "DEFAULT"
+          ]
         }
       ],
       "package": "com.firmcollective.OneVoiceEcho"
@@ -62,7 +69,10 @@
             "extraPods": [
               {
                 "name": "simdjson",
-                "configurations": ["Debug", "Release"],
+                "configurations": [
+                  "Debug",
+                  "Release"
+                ],
                 "path": "../node_modules/@nozbe/simdjson",
                 "modular_headers": true
               }
@@ -72,7 +82,8 @@
       ],
       "expo-router",
       "expo-secure-store",
-      "expo-build-properties"
+      "expo-build-properties",
+      "expo-font"
     ],
     "experiments": {
       "typedRoutes": true

app/(home)/index.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
-import { View, Text } from 'react-native';
-
+import {View, Text} from 'react-native';
 
 export default function Home() {
   return (
     <View>
-    <Text>Welcome to the Home Screen</Text>
-  </View>
-  )
+      <Text>Welcome to the Home Screen</Text>
+    </View>
+  );
 }
 
-
-

app/(user)/_layout.tsx

@@ -1,7 +1,6 @@
 import {Redirect, Stack} from 'expo-router';
 import {useAuth} from '@/providers/AuthProvider';
 import {JournalEntriesProvider} from '@/providers/JournalEntriesProvider';
-import SearchScreen from '@/components/user/search-screen/SearchScreen';
 export default function TabLayout() {
   const {session} = useAuth();
 
@@ -14,12 +13,12 @@ export default function TabLayout() {
     <JournalEntriesProvider>
       <Stack>
         <Stack.Screen name="home/index" options={{headerShown: false}} />
-        <Stack.Screen name="text-entry" options={{headerShown: true}} />
-        <Stack.Screen name="edit/[id]" options={{headerShown: true}} />
-        <Stack.Screen name="settings" options={{headerShown: true}} />
+        <Stack.Screen name="text-entry" options={{headerShown: false}} />
+        <Stack.Screen name="edit/[id]" options={{headerShown: false}} />
+        <Stack.Screen name="settings" options={{headerShown: false}} />
         <Stack.Screen name="profile" options={{headerShown: true}} />
         <Stack.Screen name="search/index" />
-        </Stack>
+      </Stack>
     </JournalEntriesProvider>
   );
 }

app/index.tsx

@@ -4,6 +4,7 @@ import {Redirect} from 'expo-router';
 import {ActivityIndicator} from 'react-native';
 import 'react-native-gesture-handler';
 import 'react-native-reanimated';
+import Home from './(home)';
 
 export default function IndexPage() {
   const {session, loading} = useAuth();
@@ -17,5 +18,6 @@ export default function IndexPage() {
     return <WelcomeScreen />;
   }
 
-  return <Redirect href={'/home'} />;
+  return <Redirect href={'/(user)/home'} />;
+  // return <Home />;
 }

components/Navbar.tsx

@@ -1,17 +1,17 @@
-import React, { useState } from 'react';
-import { View, SafeAreaView, Image, StyleSheet } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import React, {useState} from 'react';
+import {View, SafeAreaView, Image, StyleSheet} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 import Icon from 'react-native-vector-icons/MaterialIcons'; // Import the icon
-import { useLayout } from '@/components/context/LayoutContext'; // Import the context hook
-import { useNavigation } from '@react-navigation/native';
-import { useRouter } from "expo-router"
+import {useLayout} from '@/components/context/LayoutContext'; // Import the context hook
+import {useNavigation} from '@react-navigation/native';
+import {useRouter} from 'expo-router';
 
 const Navbar = () => {
   const router = useRouter();
   // State to track which button is selected
   const [selectedLayout, setSelectedLayout] = useState(null);
 
-  const { layout, setLayout } = useLayout(); // Use the context hook
+  const {layout, setLayout} = useLayout(); // Use the context hook
   const navigation = useNavigation();
   return (
     <SafeAreaView style={styles.container}>
@@ -46,17 +46,22 @@ const Navbar = () => {
       {/* Right-aligned group (subcontainer) */}
       <View style={styles.subcontainer}>
         {/* Searching button */}
-        <TouchableOpacity style={styles.button} onPress={() => router.push('search')}>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => router.push('/search' as any)}
+        >
           <Icon name="search" size={30} color="purple" />
         </TouchableOpacity>
 
         {/* User Avatar button on press go to setting */}
-        <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('profile')}>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => router.push('/profile/settings' as any)}
+        >
           <Image
             source={require('../assets/images/User/defaultAvatar.jpeg')} // Simplified path
             style={styles.avatar}
           />
-
         </TouchableOpacity>
       </View>
     </SafeAreaView>
@@ -79,7 +84,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     alignSelf: 'flex-end',
-
   },
   button: {
     justifyContent: 'center',
@@ -94,12 +98,12 @@ const styles = StyleSheet.create({
   },
   homepageLayout: {
     flexDirection: 'row',
-    alignItems: 'center',  // This centers the items vertically inside the container
-    justifyContent: 'flex-start',  // Align items to the left side of the container
-    marginLeft: 30,  // Add margin for spacing from the left side
+    alignItems: 'center', // This centers the items vertically inside the container
+    justifyContent: 'flex-start', // Align items to the left side of the container
+    marginLeft: 30, // Add margin for spacing from the left side
   },
   horizontalLayout: {
-    marginRight: 5,  // Space between the items horizontally
+    marginRight: 5, // Space between the items horizontally
     width: 45,
     height: 40,
     flexDirection: 'row',

components/context/LayoutContext.tsx

@@ -1,21 +1,23 @@
-import React, { createContext, useContext, useState } from 'react';
-import { Text } from 'react-native';
+import React, {createContext, useContext, useState} from 'react';
+import {Text} from 'react-native';
 
 // Define the context type
 type LayoutContextType = {
   layout: 'horizontal' | 'vertical' | null;
-  setLayout: (layout: 'horizontal' | 'vertical' | null) => void;
+  setLayout: React.Dispatch<React.SetStateAction<'horizontal' | 'vertical'>>;
 };
 
 // Create the context
 const LayoutContext = createContext<LayoutContextType | undefined>(undefined);
 
 // Provide the context to children
-export const LayoutProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const LayoutProvider: React.FC<{children: React.ReactNode}> = ({
+  children,
+}) => {
   const [layout, setLayout] = useState<'horizontal' | 'vertical'>('horizontal');
 
   return (
-    <LayoutContext.Provider value={{ layout, setLayout }}>
+    <LayoutContext.Provider value={{layout, setLayout}}>
       {children}
     </LayoutContext.Provider>
   );

components/user/home-screen/Post.tsx

@@ -1,36 +1,54 @@
-import { Image, StyleSheet, View, TouchableOpacity, SafeAreaView } from 'react-native';
-import { Card } from '@rneui/themed';
-import { Text, TextSemiBold } from '@/components/StyledText';
+import {
+  Image,
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  SafeAreaView,
+} from 'react-native';
+import {Card} from '@rneui/themed';
+import {Text, TextSemiBold} from '@/components/StyledText';
 import Tag from './Tag';
-import { IJournalEntry } from '@/models/data/IJournalEntry';
-import { useLayout } from '@/components/context/LayoutContext';
+import {IJournalEntry} from '@/models/data/IJournalEntry';
+import {useLayout} from '@/components/context/LayoutContext';
 
 const CONTENT_LENGTH = 200;
 
 const formatDate = (date: Date, layout: 'vertical' | 'horizontal') => {
-  const options = layout === 'vertical' 
-    ? { weekday: 'short', day: 'numeric' } // Mon 26
-    : { weekday: 'long', month: 'long', day: 'numeric' }; // Monday, August 26
+  const options =
+    layout === 'vertical'
+      ? {weekday: 'short' as const, day: 'numeric' as const} // Mon 26
+      : {
+          weekday: 'long' as const,
+          month: 'long' as const,
+          day: 'numeric' as const,
+        }; // Monday, August 26
 
   const formattedDate = new Date(date).toLocaleDateString('en-US', options);
-  
+
   if (layout === 'horizontal') {
     return formattedDate;
   }
 
   // Split the formatted date into parts for vertical layout
   const [weekday, day] = formattedDate.split(' ');
-  return `${weekday} ${day}`;  // Return a formatted string instead of an object
+  return `${weekday} ${day}`; // Return a formatted string instead of an object
 };
 
-const Post = ({ id, date, title, imagePath, content, tags, onOpen }: IJournalEntry & { onOpen: () => void }) => {
-  const { layout } = useLayout(); // Access the selected layout
-  const dateString = formatDate(date, layout); // Get formatted date as string
+const Post = ({
+  id,
+  date,
+  title,
+  imagePath,
+  content,
+  tags,
+  onOpen,
+}: IJournalEntry & {onOpen: () => void}) => {
+  const {layout} = useLayout(); // Access the selected layout
+  const dateString = layout ? formatDate(date, layout) : ''; // Get formatted date as string
 
   return (
     <SafeAreaView>
-
-    {/* <Card containerStyle={styles.card}> */}
+      {/* <Card containerStyle={styles.card}> */}
       {layout === 'vertical' ? (
         <View style={styles.verticalLayout}>
           <View style={styles.dateContainer}>
@@ -50,7 +68,9 @@ const Post = ({ id, date, title, imagePath, content, tags, onOpen }: IJournalEnt
               </TouchableOpacity>
             </View>
             <View style={styles.contentContainer}>
-              <Text style={styles.content}>{content.substring(0, CONTENT_LENGTH)}</Text>
+              <Text style={styles.content}>
+                {content.substring(0, CONTENT_LENGTH)}
+              </Text>
             </View>
           </View>
         </View>
@@ -67,7 +87,9 @@ const Post = ({ id, date, title, imagePath, content, tags, onOpen }: IJournalEnt
           </View>
           <TextSemiBold style={styles.title}>{title}</TextSemiBold>
           <View style={styles.contentContainer}>
-            <Text style={styles.content}>{content.substring(0, CONTENT_LENGTH)}</Text>
+            <Text style={styles.content}>
+              {content.substring(0, CONTENT_LENGTH)}
+            </Text>
           </View>
           <View style={styles.tagsContainer}>
             {tags.map((tag, i) => (
@@ -76,18 +98,17 @@ const Post = ({ id, date, title, imagePath, content, tags, onOpen }: IJournalEnt
           </View>
         </View>
       )}
-    {/* </Card> */}
+      {/* </Card> */}
     </SafeAreaView>
   );
 };
 
-
 const styles = StyleSheet.create({
   card: {
     borderWidth: 0,
     paddingVertical: 14,
     paddingHorizontal: 15,
-    margin: 0, 
+    margin: 0,
     shadowColor: 'rgba(0, 0, 0, 0)',
     //ios
     shadowOffset: {
@@ -98,7 +119,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.5,
     //android
     elevation: 10,
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
   },
   cardTop: {
     flex: 1,
@@ -111,10 +132,10 @@ const styles = StyleSheet.create({
     fontSize: 12,
   },
   boldDate: {
-    fontWeight: 'bold',  // Makes the day number bold
+    fontWeight: 'bold', // Makes the day number bold
   },
   dateVertical: {
-    fontSize: 16,  // Enlarge the font size for the date in vertical layout
+    fontSize: 16, // Enlarge the font size for the date in vertical layout
     color: 'black',
   },
   title: {
@@ -203,10 +224,6 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: 'black',
   },
-  boldDate: {
-    fontWeight: 'bold', 
-    fontSize: 14,  // You can adjust this size as needed
-  },
   horizontalLayout: {
     marginTop: 20,
     marginHorizontal: 15,
@@ -226,17 +243,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.5,
     //android
     elevation: 10,
-
-
-
   },
-
 });
 
 export default Post;
-
-
-
-
-
-