Merge pull request #58 from InternAcademy/FrontEnd-transitioning-to-r…

…edux

Major FE State changes

src/client/CookingAppFE/App.js

@@ -1,50 +1,53 @@
 // App.js
-import * as React from 'react';
-import { useState, useEffect } from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { View, ActivityIndicator } from 'react-native';
-import tw from 'twrnc';
-import Sidebar from './components/navigation/Sidebar';
-import Navigation from './components/navigation/Navigation';
-import MainStack from './components/navigation/MainStack';
-import { NavigationProvider, useNavigationContext } from './context/NavigationContext';
-import { ChatProvider } from './context/ChatContext';
-import { ThemeProvider, useTheme } from './context/ThemeContext';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-// import { Provider } from 'react-redux';
-// import store from './redux/store';
-
+import * as React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { View, ActivityIndicator } from "react-native";
+import tw from "twrnc";
+import Navigation from "./components/navigation/Navigation";
+import MainStack from "./components/navigation/MainStack";
+import {
+  NavigationProvider,
+  useNavigationContext,
+} from "./context/NavigationContext";
+import { useSelector } from "react-redux";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Provider } from "react-redux";
+import store from "./redux/store";
+const client = new QueryClient();
 export default function App() {
   return (
-    // <Provider store={store}>
-    <ThemeProvider>
+    <Provider store={store}>
       <NavigationProvider>
-        <ChatProvider>
+        <QueryClientProvider client={client}>
           <AppInner />
-        </ChatProvider>
+        </QueryClientProvider>
       </NavigationProvider>
-    </ThemeProvider>
-    // </Provider>
+    </Provider>
   );
 }
 
 const AppInner = () => {
   const { currentRoute, isLoading } = useNavigationContext();
-  const { isDarkTheme } = useTheme();
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
 
   if (isLoading) {
     return (
       <View style={tw`flex-1 justify-center items-center`}>
-        <ActivityIndicator size="large" color={isDarkTheme ? '#ffffff' : '#000000'} />
+        <ActivityIndicator
+          size="large"
+          color={isDarkTheme ? "#ffffff" : "#000000"}
+        />
       </View>
     );
   }
 
   return (
     <NavigationContainer>
-      <View style={tw`flex-1 flex-row ${isDarkTheme ? 'bg-[#202020]' : 'bg-white'}`}>
+      <View
+        style={tw`flex-1 flex-row ${isDarkTheme ? "bg-[#202020]" : "bg-white"}`}
+      >
         <View style={tw`flex-1`}>
-          {currentRoute !== 'LandingPage' && <Navigation />}
+          {currentRoute !== "LandingPage" && <Navigation />}
           <MainStack />
         </View>
       </View>

src/client/CookingAppFE/components/bot/ChatInput.js

@@ -0,0 +1,70 @@
+import { View, Image, TextInput, TouchableOpacity } from "react-native";
+import tw from "twrnc";
+import { uiActions } from "../../redux/uiSlice";
+import { useSelector, useDispatch } from "react-redux";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { userActions } from "../../redux/userSlice";
+import useChatMutation from "../../hooks/useNewChat";
+import useContinueChatMutation from "../../hooks/useKeepChatting";
+export default function ChatInput() {
+  const input = useSelector((state) => state.ui.input);
+  const isDarkTheme = useSelector((state) => state.ui.isDarkTheme);
+  const selectedChat = useSelector((state) => state.user.selectedChat);
+  const dispatch = useDispatch();
+  const { initialMessage, isPending, isError, error } = useChatMutation();
+  const { keepChatting, isChatting, isChatError, chatError } =
+    useContinueChatMutation();
+
+  async function sendMessage() {
+    const token = await AsyncStorage.getItem("token");
+    const newMessage = { role: "user", content: input };
+
+    if (!selectedChat) {
+      initialMessage({ token: token, message: input });
+      dispatch(
+        userActions.selectChat({
+          ...selectedChat,
+          content: [newMessage],
+        })
+      );
+    } else {
+      keepChatting({ token: token, chatId: selectedChat.id, message: input });
+      dispatch(
+        userActions.selectChat({
+          ...selectedChat,
+          content: [...selectedChat.content, newMessage],
+        })
+      );
+    }
+  }
+  function handleTyping(value) {
+    dispatch(uiActions.setInput(value));
+  }
+  return (
+    <>
+      <View
+        style={tw`flex w-6/8 flex-row justify-center items-center border ${isDarkTheme ? "border-gray-700 bg-gray-900" : "border-gray-300 bg-amber-50"} rounded-full px-2 mx-1`}
+      >
+        <TouchableOpacity onPress={sendMessage} style={tw`p-1`}>
+          <Image
+            source={require("../../assets/HomeMessageBar/paperClip.png")}
+            style={tw`w-5 h-5 ${isDarkTheme ? "tint-white" : ""}`}
+          />
+        </TouchableOpacity>
+        <TextInput
+          style={tw`flex-1 h-10 px-1 ${isDarkTheme ? "text-white" : "text-black"}`}
+          placeholder="Message MealMasterBot"
+          placeholderTextColor={isDarkTheme ? "gray" : "black"}
+          value={input}
+          onChangeText={handleTyping}
+        />
+        <TouchableOpacity onPress={sendMessage} style={tw`p-1`}>
+          <Image
+            source={require("../../assets/HomeMessageBar/arrowUpCircle.png")}
+            style={tw`w-6 h-6 ${isDarkTheme ? "tint-white" : ""}`}
+          />
+        </TouchableOpacity>
+      </View>
+    </>
+  );
+}