Merge pull request #26 from Capstone-Projects-2024-Spring/jjames-branch

I made it so that each feature can be used with any language and added Italian and German as learning options

speakeasyapp/src/components/Profile.js

@@ -38,6 +38,8 @@ const Profile = () => {
         French: "france.png",
         English: "united-kingdom.png",
         Chinese: "china.png",
+        Italian: "italy.png",
+        German: "germany.png",
         // Add more mappings as necessary
     };
 

speakeasyapp/src/components/Section2Page.js

@@ -1,16 +1,20 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import './styles/Section1Page.css';
-
+import Axios from 'axios';
 import Logo from './assets/Logo.png';
 import Help from './assets/Help.png';
 import Book from './assets/Book.png';
 import User from './assets/User.png';
 import Settings from './assets/Settings.png';
 
-const sendMessageToBot = async (message) => {
+
+const sendMessageToBot = async (message, language) => {
+
+
+
     // Prepend the instruction to the message for the AI model
-    const modifiedMessage = `Translate in simple Spanish: ${message}`;
+    const modifiedMessage = `Translate in simple ${language}: ${message}`;
 
     try {
       const response = await fetch('http://localhost:3000/api/chat', {
@@ -37,7 +41,25 @@ const sendMessageToBot = async (message) => {
   };
 
 const Section2Page = () => {
-  const [messages, setMessages] = useState([{ text: "Welcome to translator from english to Spanish", sender: "bot" }]);
+
+  const [user, setUser] = useState({
+    firstName: '',
+    lastName: '',
+    languages: [],
+    dailyTarget: 0,
+});
+const userID = localStorage.getItem('userID');
+
+useEffect(() => {
+    Axios.get(`http://localhost:3000/user/${userID}`)
+    .then(response => {
+        setUser(response.data); // Update the user state with the fetched data
+    })
+    .catch(error => {
+        console.error('Error fetching profile data:', error);
+    });
+}, [userID]);
+  const [messages, setMessages] = useState([{ text: "Welcome to translator from english", sender: "bot" }]);
   const [input, setInput] = useState('');
 
   const handleSendMessage = async (e) => {
@@ -49,7 +71,7 @@ const Section2Page = () => {
       setMessages(prevMessages => [...prevMessages, userMessage]);
 
       // Send the message with the instruction to the backend
-      const response = await sendMessageToBot(input);
+      const response = await sendMessageToBot(input, user.languages[0]);
 
       // Now, display only the bot's response, not the prompt
       const botMessage = response.find(m => m.sender === 'bot');

speakeasyapp/src/components/Section3Page.js

@@ -1,16 +1,16 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import './styles/Section1Page.css';
-
+import Axios from 'axios';
 import Logo from './assets/Logo.png';
 import Help from './assets/Help.png';
 import Book from './assets/Book.png';
 import User from './assets/User.png';
 import Settings from './assets/Settings.png';
 
-const sendMessageToBot = async (message) => {
+const sendMessageToBot = async (message, language) => {
     // Prepend the instruction to the message for the AI model
-    const modifiedMessage = `Respond to what I say in spanish ${message}`;
+    const modifiedMessage = `Respond to what I say in ${language} as if we are having a conversation ${message}  in the end have the english translations in parentheses`;
 
     try {
       const response = await fetch('http://localhost:3000/api/chat', {
@@ -37,7 +37,25 @@ const sendMessageToBot = async (message) => {
   };
 
 const Section3Page = () => {
-  const [messages, setMessages] = useState([{ text: "Welcome to roleplaying conversions will only be in Spanish", sender: "bot" }]);
+  const [user, setUser] = useState({
+    firstName: '',
+    lastName: '',
+    languages: [],
+    dailyTarget: 0,
+});
+const userID = localStorage.getItem('userID');
+
+useEffect(() => {
+    Axios.get(`http://localhost:3000/user/${userID}`)
+    .then(response => {
+        setUser(response.data); // Update the user state with the fetched data
+    })
+    .catch(error => {
+        console.error('Error fetching profile data:', error);
+    });
+}, [userID]);
+
+  const [messages, setMessages] = useState([{ text: "Welcome to roleplaying", sender: "bot" }]);
   const [input, setInput] = useState('');
 
   const handleSendMessage = async (e) => {
@@ -49,7 +67,7 @@ const Section3Page = () => {
       setMessages(prevMessages => [...prevMessages, userMessage]);
 
       // Send the message with the instruction to the backend
-      const response = await sendMessageToBot(input);
+      const response = await sendMessageToBot(input, user.languages[0]);
 
       // Now, display only the bot's response, not the prompt
       const botMessage = response.find(m => m.sender === 'bot');
@@ -105,4 +123,4 @@ const Section3Page = () => {
   );
 };
 
-export default Section3Page;
+export default Section3Page;

speakeasyapp/src/components/Section4Page.js

@@ -1,17 +1,17 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import './styles/Section1Page.css';
 import FlashcardList from './FlashcardList.js';
-
+import Axios from 'axios';
 import Logo from './assets/Logo.png';
 import Help from './assets/Help.png';
 import Book from './assets/Book.png';
 import User from './assets/User.png';
 import Settings from './assets/Settings.png';
 
-const sendMessageToBot = async (message) => {
+const sendMessageToBot = async (message, language) => {
     // Prepend the instruction to the message for the AI model
-    const modifiedMessage = `Create 10 simple one word vocabulary in Spanish with its English meaning only in format "spanish word - english word", numbered${message}`;
+    const modifiedMessage = `Create 10 simple one word vocabulary in ${language} with its English meaning only in format "${language} word - english word", numbered${message}`;
 
     try {
         const response = await fetch('http://localhost:3000/api/chat', {
@@ -38,6 +38,24 @@ const sendMessageToBot = async (message) => {
 };
 
   const Section4Page = () => {
+    const [user, setUser] = useState({
+        firstName: '',
+        lastName: '',
+        languages: [],
+        dailyTarget: 0,
+    });
+    const userID = localStorage.getItem('userID');
+
+    useEffect(() => {
+        Axios.get(`http://localhost:3000/user/${userID}`)
+        .then(response => {
+            setUser(response.data); // Update the user state with the fetched data
+        })
+        .catch(error => {
+            console.error('Error fetching profile data:', error);
+        });
+    }, [userID]);
+
       const [messages, setMessages] = useState([{ text: "Welcome to Vocab Practice", sender: "bot" }]);
       const [input, setInput] = useState('');
       const [flashcardsData, setFlashcardsData] = useState([]); // State to hold flashcards
@@ -51,7 +69,7 @@ const sendMessageToBot = async (message) => {
             setMessages(prevMessages => [...prevMessages, userMessage]);
 
             // Send the message with the instruction to the backend
-            const response = await sendMessageToBot(input);
+              const response = await sendMessageToBot(input, user.languages[0]);
 
             // Now, display only the bot's response, not the prompt
             const botMessage = response.find(m => m.sender === 'bot');

speakeasyapp/src/components/SignupProgression2.js

@@ -46,7 +46,8 @@ const SignupProgression2 = () => {
                     >
                         <option value="Spanish">Spanish</option> 
                         <option value="French">French</option>
-                        <option value="Chinese">Chinese</option> 
+                        <option value="Italian">Italian </option> 
+                        <option value="German">German </option> 
                     </select>
                 </div>
                 <button type="submit">Submit</button> {/* Submit button */}

speakeasyapp/src/components/styles/Section1Page.css

@@ -90,19 +90,6 @@
     bottom: 0;
 }
 
-.user-message::after {
-    left: 60px; /* Adjusts the speech tail to appear on the left for user messages */
-    border-width: 10px 10px 10px 0;
-    border-style: solid;
-    border-color: transparent #fff transparent transparent;
-}
-.received-message::after {
-    left: -100px; /* Adjusts the speech tail to appear on the right for received messages */
-    border-width: 10px 0 10px 10px;
-    border-style: solid;
-    border-color: transparent transparent transparent #ddd;
-}
-
 /* Center the back button within the white-rectangle-container */
 .white-rectangle-container img[alt="Back"] {
     margin-right: auto;