Merge branch '19-chat-functionality-user-types-a-message-app-responds…

…' of https://github.com/InternAcademy/CookingApp into 19-chat-functionality-user-types-a-message-app-responds

.gitignore

@@ -398,4 +398,4 @@ FodyWeavers.xsd
 *.sln.iml
 
 .env
-/src/server/CookingApp/appsettings.json
+appsettings.json

src/client/CookingAppFE/.gitignore

@@ -33,3 +33,7 @@ yarn-error.*
 
 # typescript
 *.tsbuildinfo
+
+# Prettier
+.prettierignore
+.prettierrc

src/client/CookingAppFE/App.js

@@ -1,20 +1,226 @@
-import { StatusBar } from "expo-status-bar";
-import React from "react";
-import { StyleSheet, View } from "react-native";
-import LandingPage from "./components/LandingPage";
+import * as React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import Home from './components/Home';
+import LandingPage from './components/LandingPage';
+import Favourite from './components/Favourite';
+import Navigation from './components/Navigation';
+import Sidebar from './components/Sidebar';
+import UserMenu from './components/UserMenu';
+import About from './components/About';
+import Contact from './components/Contacts';
+import Previous from './components/Previous';
+import ArchivedRecipes from './components/ArchivedRecipes';
+import ProfileSettings from './components/ProfileSettings';
+import RecentRecipes from './components/RecentRecipes';
+import Subscription from './components/Subscription';
+import AlergensAndFoodPreferences from './components/AlergensAndFoodPreferences';
+import LanguageAndTheme from './components/LanguageAndTheme';
+import RulesAndPolicies from './components/RulesAndPolicies';
+import { NavigationProvider, useNavigationContext } from './components/NavigationContext';
+import { View } from 'react-native';
+import tw from 'twrnc';
+import { useEffect } from 'react';
+
+const Stack = createStackNavigator();
+
+const MainStack = () => {
+  const { setCurrentRoute } = useNavigationContext();
+
+  return (
+    <Stack.Navigator initialRouteName="LandingPage">
+      <Stack.Screen
+        name="LandingPage"
+        component={LandingPage}
+        options={{ headerShown: false }}
+        listeners={({ navigation }) => ({
+          focus: () => setCurrentRoute('LandingPage'),
+          state: e => {
+            const route = e.data.state.routes[e.data.state.index].name;
+            setCurrentRoute(route);
+          }
+        })}
+      />
+      <Stack.Screen
+        name="Home"
+        component={Home}
+        options={{ headerShown: false }}
+        listeners={({ navigation }) => ({
+          focus: () => setCurrentRoute('Home'),
+          state: e => {
+            const route = e.data.state.routes[e.data.state.index].name;
+            setCurrentRoute(route);
+          }
+        })}
+      />
+      <Stack.Screen
+        name="Favourite"
+        component={Favourite}
+        options={{ headerShown: false }}
+        listeners={({ navigation }) => ({
+          focus: () => setCurrentRoute('Favourite'),
+          state: e => {
+            const route = e.data.state.routes[e.data.state.index].name;
+            setCurrentRoute(route);
+          }
+        })}
+      />
+      <Stack.Screen
+        name="UserMenu"
+        component={UserMenu}
+        options={{ headerShown: false }}
+        listeners={({ navigation }) => ({
+          focus: () => setCurrentRoute('UserMenu'),
+          state: e => {
+            const route = e.data.state.routes[e.data.state.index].name;
+            setCurrentRoute(route);
+          }
+        })}
+      />
+      <Stack.Screen
+        name="About"
+        component={About}
+        options={{ headerShown: false }}
+        listeners={({ navigation }) => ({
+          focus: () => setCurrentRoute('About'),
+          state: e => {
+            const route = e.data.state.routes[e.data.state.index].name;
+            setCurrentRoute(route);
+          }
+        })}
+      />
+      <Stack.Screen
+        name="Contact"
+        component={Contact}
+        options={{ headerShown: false }}
+        listeners={({ navigation }) => ({
+          focus: () => setCurrentRoute('Contact'),
+          state: e => {
+            const route = e.data.state.routes[e.data.state.index].name;
+            setCurrentRoute(route);
+          }
+        })}
+      />
+      <Stack.Screen
+        name="Previous"
+        component={Previous}
+        options={{ headerShown: false }}
+        listeners={({ navigation }) => ({
+          focus: () => setCurrentRoute('Previous'),
+          state: e => {
+            const route = e.data.state.routes[e.data.state.index].name;
+            setCurrentRoute(route);
+          }
+        })}
+      />
+      <Stack.Screen
+        name="ArchivedRecipes"
+        component={ArchivedRecipes}
+        options={{ headerShown: false }}
+        listeners={({ navigation }) => ({
+          focus: () => setCurrentRoute('ArchivedRecipes'),
+          state: e => {
+            const route = e.data.state.routes[e.data.state.index].name;
+            setCurrentRoute(route);
+          }
+        })}
+      />
+      <Stack.Screen
+        name="ProfileSettings"
+        component={ProfileSettings}
+        options={{ headerShown: false }}
+        listeners={({ navigation }) => ({
+          focus: () => setCurrentRoute('ProfileSettings'),
+          state: e => {
+            const route = e.data.state.routes[e.data.state.index].name;
+            setCurrentRoute(route);
+          }
+        })}
+      />
+      <Stack.Screen
+        name="RecentRecipes"
+        component={RecentRecipes}
+        options={{ headerShown: false }}
+        listeners={({ navigation }) => ({
+          focus: () => setCurrentRoute('RecentRecipes'),
+          state: e => {
+            const route = e.data.state.routes[e.data.state.index].name;
+            setCurrentRoute(route);
+          }
+        })}
+      />
+      <Stack.Screen
+        name="Subscription"
+        component={Subscription}
+        options={{ headerShown: false }}
+        listeners={({ navigation }) => ({
+          focus: () => setCurrentRoute('Subscription'),
+          state: e => {
+            const route = e.data.state.routes[e.data.state.index].name;
+            setCurrentRoute(route);
+          }
+        })}
+      />
+      <Stack.Screen
+        name="AlergensAndFoodPreferences"
+        component={AlergensAndFoodPreferences}
+        options={{ headerShown: false }}
+        listeners={({ navigation }) => ({
+          focus: () => setCurrentRoute('AlergensAndFoodPreferences'),
+          state: e => {
+            const route = e.data.state.routes[e.data.state.index].name;
+            setCurrentRoute(route);
+          }
+        })}
+      />
+      <Stack.Screen
+        name="LanguageAndTheme"
+        component={LanguageAndTheme}
+        options={{ headerShown: false }}
+        listeners={({ navigation }) => ({
+          focus: () => setCurrentRoute('LanguageAndTheme'),
+          state: e => {
+            const route = e.data.state.routes[e.data.state.index].name;
+            setCurrentRoute(route);
+          }
+        })}
+      />
+      <Stack.Screen
+        name="RulesAndPolicies"
+        component={RulesAndPolicies}
+        options={{ headerShown: false }}
+        listeners={({ navigation }) => ({
+          focus: () => setCurrentRoute('RulesAndPolicies'),
+          state: e => {
+            const route = e.data.state.routes[e.data.state.index].name;
+            setCurrentRoute(route);
+          }
+        })}
+      />
+    </Stack.Navigator>
+  );
+};
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <LandingPage />
-      <StatusBar style="auto" />
-    </View>
+    <NavigationProvider>
+      <AppInner />
+    </NavigationProvider>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#f39c12",
-  },
-});
+const AppInner = () => {
+  const { currentRoute } = useNavigationContext();
+
+  return (
+    <NavigationContainer>
+      <View style={tw`flex-1 flex-row`}>
+        {currentRoute !== 'LandingPage' && <Sidebar />}
+        <View style={tw`flex-1`}>
+          {currentRoute !== 'LandingPage' && <Navigation />}
+          <MainStack />
+        </View>
+      </View>
+    </NavigationContainer>
+  );
+};

src/client/CookingAppFE/app.json

@@ -7,7 +7,7 @@
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
     "splash": {
-      "image": "./assets/splash.png",
+      "image": "./assets/Main/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
@@ -16,7 +16,7 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
+        "foregroundImage": "./assets/Main/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       }
     },

src/client/CookingAppFE/babel.config.js

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

src/client/CookingAppFE/components/About.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import tw from 'twrnc';
+
+const About = () => {
+  return (
+    <ScrollView style={tw`flex-1 p-6 bg-white`}>
+      <Text style={tw`text-2xl font-bold mb-4 text-orange-400`}>About</Text>
+      <Text style={tw`text-base leading-6 mb-5`}>This is a sample text. Welcome to [Your Restaurant Name], where culinary passion meets exceptional service. Established in [Year], we are dedicated to bringing you a dining experience like no other. Our menu features a delightful blend of traditional and contemporary dishes, crafted from the freshest ingredients sourced locally and globally.</Text>
+      <Text style={tw`text-base leading-6 mb-5`}>At [Your Restaurant Name], we believe that food is more than just sustenance; it's a way to connect, celebrate, and create memories. Whether you're here for a casual meal, a special occasion, or just a cup of our signature coffee, we strive to make every visit unforgettable.</Text>
+      <Text style={tw`text-base leading-6 mb-5`}>Our team of talented chefs and friendly staff are committed to providing you with top-notch service and a warm, inviting atmosphere. We are passionate about what we do, and it shows in every plate we serve.</Text>
+      <Text style={tw`text-base leading-6 mb-5`}>Thank you for choosing [Your Restaurant Name]. We look forward to welcoming you and sharing our love for food with you.</Text>
+    </ScrollView>
+  );
+};
+
+export default About;

src/client/CookingAppFE/components/AlergensAndFoodPreferences.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import tw from 'twrnc';
+
+const ProfileSettings = () => {
+  return (
+    <View style={tw`flex-1 justify-center items-center`}>
+      <Text style={tw`text-xl font-bold`}>Alergens And Food Preferences</Text>
+    </View>
+  );
+};
+
+export default ProfileSettings;

src/client/CookingAppFE/components/ArchivedRecipes.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import tw from 'twrnc';
+
+const ProfileSettings = () => {
+  return (
+    <View style={tw`flex-1 justify-center items-center`}>
+      <Text style={tw`text-xl font-bold`}>Archived Recipes</Text>
+    </View>
+  );
+};
+
+export default ProfileSettings;

src/client/CookingAppFE/components/Contacts.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View, Text, TextInput, TouchableOpacity } from 'react-native';
+import tw from 'twrnc';
+
+const Contacts = () => {
+  return (
+    <View style={tw`flex-1 p-5 pt-20 bg-amber-100`}>
+      <Text style={tw`text-lg text-gray-800 mb-2`}>Subject</Text>
+      <TextInput style={tw`h-12 border border-amber-200 rounded-full mb-5 px-3 bg-amber-300`} placeholder="What would you like to talk about?" />
+      <Text style={tw`text-lg text-gray-800 mb-2`}>Message</Text>
+      <TextInput style={tw`h-64 border border-amber-200 rounded-lg px-3 pt-2 mb-5 bg-amber-300`} placeholder="Enter your message here..." multiline textAlignVertical="top" />
+      <TouchableOpacity style={tw`h-12 bg-orange-400 justify-center items-center rounded-full`}>
+        <Text style={tw`text-lg text-gray-800`}>Send</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default Contacts;

src/client/CookingAppFE/components/Favourite.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import tw from 'twrnc';
+
+const Favourite = () => {
+  return (
+    <View style={tw`mx-4`}>
+      <Text style={tw`text-lg font-bold mt-20 mb-2`}>Favorite Recipes</Text>
+      <View style={tw`bg-gray-200 py-4 px-2 rounded-md`}>
+        <Text style={tw`text-base font-medium`}>Lava Cake</Text>
+      </View>
+    </View>
+  );
+};
+
+export default Favourite;