Skip to content

2
240
Commit 06fd6461 authored by Malsha Rathnasiri's avatar Malsha Rathnasiri
Browse files
Options

tts and chat screen design

parent 21820ebf
Show whitespace changes
Inline Side-by-side
Showing with 351 additions and 168 deletions
MobileApp/api/Authentication.js
View file @ 06fd6461
...@@ -48,6 +48,13 @@ import { Platform } from 'react-native' ...@@ -48,6 +48,13 @@ import { Platform } from 'react-native'
// const endpoint = getEnvironment().endpoint; // const endpoint = getEnvironment().endpoint;
export const isLoggedIn = async () => {
const token = await AsyncStorage.getItem('access_token')
console.log({ token })
return !!token
}
export const login = async (username, password) => { export const login = async (username, password) => {
const endpoint = false ? 'register' : 'login'; const endpoint = false ? 'register' : 'login';
...@@ -69,13 +76,17 @@ export const login = async (username, password) => { ...@@ -69,13 +76,17 @@ export const login = async (username, password) => {
axios.defaults.headers.common.Authorization = `Token ${access}`; axios.defaults.headers.common.Authorization = `Token ${access}`;
if (Platform.OS = 'web') { if (Platform.OS = 'web') {
console.log('no storage') await AsyncStorage.setItem('user_id', user.id)
await AsyncStorage.setItem('username', user.username)
await AsyncStorage.setItem('user_email', user.email)
await AsyncStorage.setItem('access_token', access)
await AsyncStorage.setItem('refresh_token', refresh)
} else { } else {
await AsyncStorage.setItem('user_id', user.id) await AsyncStorage.setItem('user_id', user.id)
await AsyncStorage.setitem('username', user.username) await AsyncStorage.setItem('username', user.username)
// AsyncStorage.setItem('user_email', user.email) await AsyncStorage.setItem('user_email', user.email)
// AsyncStorage.setitem('access_token', access) await AsyncStorage.setitem('access_token', access)
// AsyncStorage.setItem('refresh_token', refresh) await AsyncStorage.setItem('refresh_token', refresh)
} }
console.log("login successful") console.log("login successful")
...@@ -90,6 +101,10 @@ export const login = async (username, password) => { ...@@ -90,6 +101,10 @@ export const login = async (username, password) => {
} }
export const logout = async () => {
await AsyncStorage.clear()
}
// export const AuthProvider = ({ children }) => { // export const AuthProvider = ({ children }) => {
// const [isLoggedIn, setIsLoggedIn] = useState(false); // const [isLoggedIn, setIsLoggedIn] = useState(false);
......
MobileApp/api/api.js
View file @ 06fd6461
import { BACKEND_URL } from "./constants" import { BACKEND_URL } from "./constants"
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useNavigation } from "@react-navigation/native";
const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjYxMzU2NDA5LCJpYXQiOjE2NjAxNDY4MDksImp0aSI6ImFhMTljMmY2ZDNkMzRiNDdhZmZmM2FjMzVjNzI4MWJhIiwidXNlcl9pZCI6MX0.IVzibo_Rf2xzoT1J5o1L3zwu3mco6ODcNPC-7imu3Lo"
const headers = new Headers({ authorization: `Bearer ${token}`, 'Content-Type': 'application/json' })
export const create = (resource, values) => { //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjYxMzU2NDA5LCJpYXQiOjE2NjAxNDY4MDksImp0aSI6ImFhMTljMmY2ZDNkMzRiNDdhZmZmM2FjMzVjNzI4MWJhIiwidXNlcl9pZCI6MX0.IVzibo_Rf2xzoT1J5o1L3zwu3mco6ODcNPC-7imu3Lo"
// const headers =
const getHeaders = async () => {
var token = await AsyncStorage.getItem('access_token')
return new Headers({ authorization: `Bearer ${token}`, 'Content-Type': 'application/json' })
}
export const create = async (resource, values) => {
const headers = await getHeaders()
try { try {
return fetch(`${BACKEND_URL}/${resource}/`, { method: 'POST', body: JSON.stringify(values), headers }) return fetch(`${BACKEND_URL}/${resource}/`, { method: 'POST', body: JSON.stringify(values), headers })
} }
...@@ -12,6 +23,7 @@ export const create = (resource, values) => { ...@@ -12,6 +23,7 @@ export const create = (resource, values) => {
} }
} }
export const getList = (resource) => { export const getList = async (resource) => {
const headers = await getHeaders()
return fetch(`${BACKEND_URL}/${resource}/`, { method: 'GET', headers: headers }) return fetch(`${BACKEND_URL}/${resource}/`, { method: 'GET', headers: headers })
} }
\ No newline at end of file
MobileApp/api/constants.js
View file @ 06fd6461
// export const BACKEND_URL = "http://192.168.8.103:8000" // export const BACKEND_URL = "http://192.168.8.103:8000"
export const BACKEND_ADDRESS = "0be4-123-231-126-225.in.ngrok.io" export const BACKEND_ADDRESS = "127.0.0.1:8000"
export const BACKEND_URL = `https:/${BACKEND_ADDRESS}` export const BACKEND_URL = `http://${BACKEND_ADDRESS}`
\ No newline at end of file \ No newline at end of file
MobileApp/components/AudioRecorder.jsx
View file @ 06fd6461
...@@ -73,7 +73,7 @@ export const AudioRecorder = ({ setDetectedText }) => { ...@@ -73,7 +73,7 @@ export const AudioRecorder = ({ setDetectedText }) => {
return ( return (
<Button <Button
style={{ height: '100%', padding: 5 }} style={{ height: '100%', padding: 5 }}
title={recording ? 'Stop Recording' : 'Start Recording'} title={recording ? 'Stop' : 'Record'}
onPress={recording ? stopRecording : startRecording} onPress={recording ? stopRecording : startRecording}
/> />
......
MobileApp/components/PlayMessage.jsx 0 → 100644
View file @ 06fd6461
import { Ionicons } from "@expo/vector-icons";
import React, { useState } from "react";
import { View } from "react-native";
import { styles } from "../util/styles";
import * as Speech from 'expo-speech';
export const PlayMessage = ({ message }) => {
const [isPlaying, setIsPlaying] = useState(false)
const [isTtsReady, setIsTtsReady] = useState(false)
// // Tts.setDucking(true);
// Tts.addEventListener('tts-start', (event) => console.log("start"));
// Tts.addEventListener('tts-finish', (event) => console.log("finish"));
// const synth = window.speechSynthesis;
// const speech = new SpeechSynthesisUtterance(message)
// speech.lang = 'en'
// speech.onend((e) => console.log('end'))
const onSpeechDone = (props) => {
setIsPlaying(false)
}
const onPlayPress = () => {
setIsPlaying(true)
// synth.speak(speech)
Speech.speak(message, { onDone: onSpeechDone });
// speech.onend((e) => console.log('end'))
}
const onStopPress = () => {
Speech.stop()
setIsPlaying(false)
}
if (!isPlaying) {
return (
<Ionicons name="play" size={15} style={styles.chatIcon} onPress={onPlayPress} />
)
}
else {
return (
<Ionicons name="stop" size={15} style={styles.chatIcon} onPress={onStopPress} />
)
}
}
\ No newline at end of file
MobileApp/navigation/index.jsx
View file @ 06fd6461
...@@ -7,27 +7,31 @@ import { FontAwesome } from '@expo/vector-icons'; ...@@ -7,27 +7,31 @@ import { FontAwesome } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native'; import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Toast } from 'native-base'; import { Center, Toast } from 'native-base';
import * as React from 'react'; import * as React from 'react';
import { ColorSchemeName, Pressable } from 'react-native'; import { ColorSchemeName, Pressable, View, Button, Text, Image } from 'react-native';
import { login } from '../api/Authentication'; import { isLoggedIn, login, logout } from '../api/Authentication';
import Colors from '../constants/Colors'; import Colors from '../constants/Colors';
import useColorScheme from '../hooks/useColorScheme'; import useColorScheme from '../hooks/useColorScheme';
import { LoginScreen } from '../screens/loginScreen'; import { LoginScreen } from '../screens/loginScreen';
import ModalScreen from '../screens/ModalScreen'; import ModalScreen from '../screens/ModalScreen';
import NotFoundScreen from '../screens/NotFoundScreen'; import NotFoundScreen from '../screens/NotFoundScreen';
import { SignupScreen } from '../screens/SignupScreen';
import ChatScreen from '../screens/TabOneScreen'; import ChatScreen from '../screens/TabOneScreen';
import TabTwoScreen from '../screens/TabTwoScreen'; import TabTwoScreen from '../screens/TabTwoScreen';
import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types'; import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types';
import { ERROR_TOAST_PROPS } from '../util/util'; import { ERROR_TOAST_PROPS } from '../util/util';
import LinkingConfiguration from './LinkingConfiguration'; import LinkingConfiguration from './LinkingConfiguration';
import Small_logo from '../assets/images/Logo_small.jpeg'
export default function Navigation({ colorScheme }) { export default function Navigation({ colorScheme }) {
return ( return (
<NavigationContainer <NavigationContainer
linking={LinkingConfiguration} linking={LinkingConfiguration}
theme={colorScheme === 'dark' || true ? DarkTheme : DefaultTheme}> theme={colorScheme === 'dark' && false ? DarkTheme : DefaultTheme}>
<RootNavigator /> <RootNavigator />
</NavigationContainer> </NavigationContainer>
); );
...@@ -40,8 +44,9 @@ export default function Navigation({ colorScheme }) { ...@@ -40,8 +44,9 @@ export default function Navigation({ colorScheme }) {
const Stack = createNativeStackNavigator(); const Stack = createNativeStackNavigator();
function RootNavigator() { function RootNavigator() {
const [isAuthenticated, setIsAutheticated] = React.useState(false)
const [isAuthenticated, setIsAutheticated] = React.useState(true) isLoggedIn().then((res) => setIsAutheticated(true))
// console.log({ isLogged })
const onLogin = async (username, password) => { const onLogin = async (username, password) => {
await login(username, password).then(() => setIsAutheticated(true)).catch(e => { await login(username, password).then(() => setIsAutheticated(true)).catch(e => {
...@@ -51,14 +56,16 @@ function RootNavigator() { ...@@ -51,14 +56,16 @@ function RootNavigator() {
} }
const onLogout = () => { const onLogout = () => {
logout()
setIsAutheticated(false) setIsAutheticated(false)
} }
return ( return (
<Stack.Navigator > <Stack.Navigator >
{isAuthenticated ? <Stack.Screen name="Root" options={{ headerShown: false }}>{(props) => <BottomTabNavigator {...props} onLogout={onLogout} />}</Stack.Screen> : {isAuthenticated ? <Stack.Screen name="Root" options={{ headerShown: false }}>{(props) => <BottomTabNavigator {...props} onLogout={onLogout} />}</Stack.Screen> :
<Stack.Screen name='Root'>{(props) => <LoginScreen {...props} onLogin={onLogin} />}</Stack.Screen>} <Stack.Screen name='Root' options={{ headerShown: false }}>{(props) => <LoginScreen {...props} onLogin={onLogin} />}</Stack.Screen>}
<Stack.Screen name='Signup' component={SignupScreen} options={{ headerShown: false, title: 'Sign up' }} />
<Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} /> <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
<Stack.Group screenOptions={{ presentation: 'modal' }}> <Stack.Group screenOptions={{ presentation: 'modal' }}>
...@@ -81,14 +88,25 @@ function BottomTabNavigator({ onLogout }) { ...@@ -81,14 +88,25 @@ function BottomTabNavigator({ onLogout }) {
<BottomTab.Navigator <BottomTab.Navigator
initialRouteName="TabOne" initialRouteName="TabOne"
screenOptions={{ screenOptions={{
tabBarActiveTintColor: Colors[colorScheme].tint, tabBarActiveBackgroundColor: 'lightgray',
tabBarActiveTintColor: 'blue' //Colors[colorScheme].tint,
}}> }}>
<BottomTab.Screen
name="TabTwo"
component={TabTwoScreen}
options={{
title: 'Map',
tabBarIcon: ({ color }) => <TabBarIcon name="map" color={color} />,
}}
/>
<BottomTab.Screen <BottomTab.Screen
name="TabOne" name="TabOne"
component={ChatScreen} component={ChatScreen}
options={({ navigation }) => ({ options={({ navigation }) => ({
title: 'Chat', title: 'Chat',
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />, headerTitleAlign: 'center',
tabBarIcon: ({ color }) => <TabBarIcon name="comments" color={color} />,
headerLeft: () => (<Image source={Small_logo} style={{height: 40, width: 70, marginLeft: 20}}/>),
headerRight: () => ( headerRight: () => (
<Pressable <Pressable
// onPress={() => navigation.navigate('Modal')} // onPress={() => navigation.navigate('Modal')}
...@@ -99,21 +117,14 @@ function BottomTabNavigator({ onLogout }) { ...@@ -99,21 +117,14 @@ function BottomTabNavigator({ onLogout }) {
<FontAwesome <FontAwesome
name="info-circle" name="info-circle"
size={25} size={25}
color={Colors[colorScheme].text} // color={Colors[colorScheme].text}
style={{ marginRight: 15 }} style={{ marginRight: 15 }}
/> />
</Pressable> </Pressable>
), ),
})} })}
/> />
<BottomTab.Screen
name="TabTwo"
component={TabTwoScreen}
options={{
title: 'Tab Two',
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
}}
/>
</BottomTab.Navigator> </BottomTab.Navigator>
); );
} }
......
MobileApp/package.json
View file @ 06fd6461
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"dependencies": { "dependencies": {
"@expo/vector-icons": "^12.0.0", "@expo/vector-icons": "^12.0.0",
"@react-native-async-storage/async-storage": "~1.15.0", "@react-native-async-storage/async-storage": "~1.15.0",
"@react-native-community/slider": "4.1.12",
"@react-navigation/bottom-tabs": "^6.0.5", "@react-navigation/bottom-tabs": "^6.0.5",
"@react-navigation/native": "^6.0.2", "@react-navigation/native": "^6.0.2",
"@react-navigation/native-stack": "^6.1.0", "@react-navigation/native-stack": "^6.1.0",
...@@ -28,6 +29,7 @@ ...@@ -28,6 +29,7 @@
"expo-font": "~10.0.4", "expo-font": "~10.0.4",
"expo-linking": "~3.0.0", "expo-linking": "~3.0.0",
"expo-media-library": "~14.0.0", "expo-media-library": "~14.0.0",
"expo-speech": "~10.1.0",
"expo-splash-screen": "~0.14.0", "expo-splash-screen": "~0.14.0",
"expo-status-bar": "~1.2.0", "expo-status-bar": "~1.2.0",
"expo-web-browser": "~10.1.0", "expo-web-browser": "~10.1.0",
......
MobileApp/screens/SignupScreen.jsx 0 → 100644
View file @ 06fd6461
import React from "react";
import { View, Button, Text } from 'react-native'
import { styles } from "../util/styles";
export const SignupScreen = ({ navigation }) => {
return (
<View style={styles.container}><Text style={{
padding: 10,
textAlign: 'center',
// fontWeight: 'bold',
fontSize: 40
}}>Sign up</Text>
<View style={{ flexDirection: 'row', padding: 10, justifyContent: 'center' }}>
<Text style={{ textAlign: 'center' }}>Already have an account? </Text>
<Text style={{ fontWeight: 'bold', textAlign: 'center', }} onPress={() => navigation.replace('Root')}>Login</Text>
</View>
<SignupForm />
</View>
)
}
const SignupForm = () => {
return(
<View>
</View>
)
}
\ No newline at end of file
MobileApp/screens/TabOneScreen.jsx
View file @ 06fd6461
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { FlatList, StyleSheet, TextInput, SectionList, Button, ActivityIndicator } from 'react-native'; import { FlatList, StyleSheet, TextInput, SectionList, Button, ActivityIndicator, View, Text } from 'react-native';
import { AudioRecorder } from '../components/AudioRecorder'; import { AudioRecorder } from '../components/AudioRecorder';
import _ from 'lodash' import _ from 'lodash'
import EditScreenInfo from '../components/EditScreenInfo'; import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed'; // import { Text, View } from '../components/Themed';
import { RootTabScreenProps } from '../types'; import { RootTabScreenProps } from '../types';
import { create, getList } from '../api/api'; import { create, getList } from '../api/api';
import { BACKEND_ADDRESS } from '../api/constants'; import { BACKEND_ADDRESS } from '../api/constants';
import Ionicons from '@expo/vector-icons/Ionicons'; import Ionicons from '@expo/vector-icons/Ionicons';
import { styles } from '../util/styles';
import { StatusBar } from 'expo-status-bar';
import Slider from '@react-native-community/slider';
import { PlayMessage } from '../components/PlayMessage';
export default function ChatScreen({ navigation }) { export default function ChatScreen({ navigation }) {
const currentTime = new Date() const currentTime = new Date()
const defaultChatData = [{ from_user: 1, to_user: 2, message: 'msg1', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 1) }, const defaultChatData = [{ id: 1, from_user: 2, to_user: 1, message: 'How many passengers?', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 1).valueOf() },
{ from_user: 1, to_user: 2, message: 'msg2', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 2) }, { id: 2, from_user: 1, to_user: 2, message: 'Three', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 2).valueOf(), is_detected: true },
{ from_user: 2, to_user: 1, message: 'msg3', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 3), is_detected: false }, { id: 3, from_user: 2, to_user: 1, message: 'Should i turn left or right here?', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 3).valueOf(), is_detected: false },
{ from_user: 1, to_user: 2, message: 'left', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 4), is_detected: true }, { id: 4, from_user: 1, to_user: 2, message: 'Left', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 4).valueOf(), is_detected: true },
{ from_user: 2, to_user: 1, message: 'msg5', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 5) }, { id: 5, from_user: 1, to_user: 2, message: 'Please hurry', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 5).valueOf() },
{ id: 6, from_user: 2, to_user: 1, message: 'Ok', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 6).valueOf() },
{ from_user: 1, to_user: 2, message: 'msg1', timestamp: currentTime.setDate(currentTime.getDate() - 1) },
{ from_user: 1, to_user: 2, message: 'msg2', timestamp: currentTime.setDate(currentTime.getDate() - 2) }, // { from_user: 1, to_user: 2, message: 'msg1', timestamp: currentTime.setDate(currentTime.getDate() - 1).valueOf() },
{ from_user: 2, to_user: 1, message: 'msg3', timestamp: currentTime.setDate(currentTime.getDate() - 3) }, // { from_user: 1, to_user: 2, message: 'msg2', timestamp: currentTime.setDate(currentTime.getDate() - 2).valueOf() },
{ from_user: 1, to_user: 2, message: 'msg4', timestamp: currentTime.setDate(currentTime.getDate() - 4) }, // { from_user: 2, to_user: 1, message: 'msg3', timestamp: currentTime.setDate(currentTime.getDate() - 3).valueOf() },
{ from_user: 2, to_user: 1, message: 'msg5', timestamp: currentTime.setDate(currentTime.getDate() - 5) }, // { from_user: 1, to_user: 2, message: 'msg4', timestamp: currentTime.setDate(currentTime.getDate() - 4).valueOf() },
// { from_user: 2, to_user: 1, message: 'msg5', timestamp: currentTime.setDate(currentTime.getDate() - 5).valueOf() },
] ]
const [detectedText, setDetectedText] = useState("") const [detectedText, setDetectedText] = useState("")
const [playinId, setPlayingId] = useState(3)
const [chatDetails, setChatDetails] = useState({ from_user: 1, to_user: 2, conversation_id: 1 }) const [chatDetails, setChatDetails] = useState({ from_user: 1, to_user: 2, conversation_id: 1 })
const [chats, setChats] = useState([]) const [chats, setChats] = useState([])
const [input, setInput] = useState('test') const [input, setInput] = useState('test')
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const ws = new WebSocket(`ws://${BACKEND_ADDRESS}/chatSocket/`)
const loadSampleChats = () => {
const chats_ = defaultChatData//res.results
const sections = [...new Set(chats_.map(chat => new Date(chat.timestamp).setHours(0, 0, 0, 0)))];
const sectionChats = sections.map(section => {
console.log({ section })
return ({
title: section, data: chats_.filter(chat => {
console.log({ chat })
return (new Date(chat.timestamp).setHours(0, 0, 0, 0).valueOf() == section)
}).sort((a, b) => { return (a.timestamp - b.timestamp) })
})
})
console.log({ chats_, sections, sectionChats })
setChats(sectionChats)
console.log({ chats })
}
// const ws = new WebSocket(`ws://${BACKEND_ADDRESS}/chatSocket/`)
useEffect(() => { useEffect(() => {
// loadChats() loadChats()
// startWebsocket() // startWebsocket()
loadSampleChats() loadSampleChats()
setLoading(false) setLoading(false)
}, []) }, [])
const startWebsocket = () => { // const startWebsocket = () => {
ws.onopen = () => { // ws.onopen = () => {
// on connecting, do nothing but log it to the console // // on connecting, do nothing but log it to the console
console.log('connected') // console.log('connected')
} // }
ws.onmessage = evt => { // ws.onmessage = evt => {
// listen to data sent from the websocket server // // listen to data sent from the websocket server
const message = JSON.parse(evt.data) // const message = JSON.parse(evt.data)
// setState({ dataFromServer: message }) // // setState({ dataFromServer: message })
console.log(message) // console.log(message)
} // }
ws.onclose = () => { // ws.onclose = () => {
console.log('disconnected') // console.log('disconnected')
// automatically try to reconnect on connection loss // // automatically try to reconnect on connection loss
} // }
} // }
const loadSampleChats = () => {
const chats_ = defaultChatData//res.results
const sections = [...new Set(chats_.map(chat => new Date(chat.timestamp).setHours(0, 0, 0, 0)))];
const sectionChats = sections.map(section => ({ title: section, data: chats.filter(chat => new Date(chat.timestamp).setHours(0, 0, 0, 0) == section) }))
setChats(sectionChats)
console.log({chats})
}
const loadChats = async () => { const loadChats = async () => {
await getList('chats').then(res => { // await getList('chats').then(res => {
return res.json() // return res.json()
}).then(res => { // }).then(res => {
// console.log(res) // // console.log(res)
const chats = res.results // const chats = res.results
const sections = [...new Set(chats.map(chat => new Date(chat.timestamp).setHours(0, 0, 0, 0)))]; // const sections = [...new Set(chats.map(chat => new Date(chat.timestamp).setHours(0, 0, 0, 0)))];
const sectionChats = sections.map(section => ({ title: section, data: chats.filter(chat => new Date(chat.timestamp).setHours(0, 0, 0, 0) == section) })) // const sectionChats = sections.map(section => ({ title: section, data: chats.filter(chat => new Date(chat.timestamp).setHours(0, 0, 0, 0) == section) }))
setChats(sectionChats) // setChats(sectionChats)
}) // })
setLoading(false) setLoading(false)
} }
...@@ -109,13 +121,12 @@ export default function ChatScreen({ navigation }) { ...@@ -109,13 +121,12 @@ export default function ChatScreen({ navigation }) {
<View style={{ flex: 1, width: '100%' }}> <View style={{ flex: 1, width: '100%' }}>
<View style={{ display: 'flex', flex: 0.9, justifyContent: 'space-between' }}> <View style={{ display: 'flex', flex: 0.9, justifyContent: 'space-between' }}>
{/* <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1}}><Text style={{ fontSize: 50, color: 'white' }}>{detectedText}</Text> <StatusBar />
</View> */}
{loading ? <ActivityIndicator /> : {loading ? <ActivityIndicator /> :
<SectionList <SectionList
refreshing={loading} refreshing={loading}
onRefresh={() => loadChats()} // onRefresh={() => loadChats()}
inverted={true} inverted={true}
sections={chats} sections={chats}
keyExtractor={(item, index) => item + index} keyExtractor={(item, index) => item + index}
...@@ -123,11 +134,29 @@ export default function ChatScreen({ navigation }) { ...@@ -123,11 +134,29 @@ export default function ChatScreen({ navigation }) {
// console.log({ item }) // console.log({ item })
return ( return (
<View style={{ margin: 5, padding: 5 }}><Text <View style={{ margin: 5, padding: 5 }}><Text
style={[{ textAlign: chatDetails.from_user == item.from_user ? 'right' : 'left', backgroundColor: chatDetails.from_user == item.from_user ? 'blue' : 'green', borderRadius: 5, padding: 5 }, style={[{ textAlign: chatDetails.from_user == item.from_user ? 'right' : 'left', backgroundColor: chatDetails.from_user == item.from_user ? 'lightgray' : '#FFDE03', borderRadius: 5, padding: 5 },
chatDetails.from_user == item.from_user ? { marginLeft: 'auto' } : { marginRight: 'auto' } chatDetails.from_user == item.from_user ? { marginLeft: 'auto' } : { marginRight: 'auto' }
]} ]}
key={item.time}>{item.message}</Text> key={item.timestamp}>{item.message}</Text>
<Text style={{ textAlign: chatDetails.from_user == item.from_user ? 'right' : 'left', color: 'gray', fontSize: 11 }}>{new Date(item.timestamp).toLocaleTimeString()}</Text></View> <View style={{ flex: 1, flexDirection: chatDetails.from_user == item.from_user ? 'row-reverse' : 'row', textAlign: chatDetails.from_user == item.from_user ? 'right' : 'left' }}>
<Text style={{ textAlign: chatDetails.from_user == item.from_user ? 'right' : 'left', color: 'gray', fontSize: 11 }}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
{item.is_detected && <Ionicons name="mic" size={15} style={{}} />}
{/* {chatDetails.to_user == item.from_user && item.id != playinId && <Ionicons name="play" size={15} style={styles.chatIcon} />}
{chatDetails.to_user == item.from_user && item.id == playinId && <Ionicons name="pause" size={15} style={styles.chatIcon} />} */}
{chatDetails.to_user == item.from_user && <PlayMessage message={item.message} />}
</View>
{/* {item.id == playinId ?
<Slider
style={{ width: 200, height: 40, FborderRadius: 5, padding: 0, margin: 0 }}
minimumValue={0}
maximumValue={1}
value={0.67}
minimumTrackTintColor="black"
maximumTrackTintColor="grey"
/> : null
} */}
</View>
) )
}} }}
invertStickyHeaders invertStickyHeaders
...@@ -145,7 +174,6 @@ export default function ChatScreen({ navigation }) { ...@@ -145,7 +174,6 @@ export default function ChatScreen({ navigation }) {
return ( return (
<Text style={styles.header}>{date}</Text> <Text style={styles.header}>{date}</Text>
) )
}} }}
/> />
} }
...@@ -168,20 +196,20 @@ export default function ChatScreen({ navigation }) { ...@@ -168,20 +196,20 @@ export default function ChatScreen({ navigation }) {
</View> </View>
<View style={{ flex: 0.1, backgroundColor: 'rgb(10,10,10)' }}> <View style={{ flex: 0.075, padding:0, backgroundColor: 'white'}}>
<View style={{ flexDirection: 'row', display: 'flex', height: '100%' }}> <View style={{ flexDirection: 'row', display: 'flex', height: '100%' }}>
<View style={{ flex: 0.8, backgroundColor: 'rgb(10,10,10)', height: '100%' }}> <View style={{ flex: 0.8, height: '100%', flexDirection: 'column-reverse' }}>
<TextInput <TextInput
style={{ borderWidth: 2, borderColor: 'gray', color: 'white', padding: 5, borderRadius: 5 }} style={{ borderWidth: 2, borderColor: 'gray', color: 'black', marginHorizontal: 5,paddingHorizontal: 10, borderRadius: 5 }}
defaultValue={input} defaultValue={input}
onChange={(e) => setInput(e.target.value)}></TextInput> onChange={(e) => setInput(e.target.value)}></TextInput>
</View> </View>
{input ? {input ?
<View style={{ flex: 0.2, backgroundColor: 'rgb(10,10,10)', height: '100%' }}> <View style={{ flex: 0.2, height: '100%', flexDirection: 'column-reverse' }}>
<Button style={{ width: '100%', backgroundColor: 'rgb(10,10,10)', height: '100%' }} title='Send' onPress={onSendPress} /> <Button style={{ width: '100%', height: '100%' }} title='Send' onPress={onSendPress} />
</View> </View>
: :
<View style={{ flex: 0.2, backgroundColor: 'rgb(10,10,10)', height: '100%' }}><AudioRecorder setDetectedText={setInput} /></View> <View style={{ flex: 0.2, height: '100%', flexDirection: 'column-reverse' }}><AudioRecorder setDetectedText={setInput} /></View>
} }
</View> </View>
</View> </View>
...@@ -191,23 +219,4 @@ export default function ChatScreen({ navigation }) { ...@@ -191,23 +219,4 @@ export default function ChatScreen({ navigation }) {
); );
} }
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
separator: {
marginVertical: 30,
height: 1,
width: '80%',
},
convoFooter: {
},
header: { textAlign: 'center', backgroundColor: 'gray', marginRight: 'auto', marginLeft: 'auto', padding: 3, borderRadius: 5 }
});
MobileApp/screens/loginScreen.js
View file @ 06fd6461
import React, { useState } from 'react' import React, { useState } from 'react'
import { StyleSheet, TextInput } from 'react-native'; import { StyleSheet, TextInput, Button, Image, Dimensions, View, Text } from 'react-native';
import EditScreenInfo from '../components/EditScreenInfo'; import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed'; // import { Text, View } from '../components/Themed';
import { TouchableOpacity } from 'react-native'; import { TouchableOpacity } from 'react-native';
import { Toast } from 'native-base'; import { Toast } from 'native-base';
import { ERROR_TOAST_PROPS } from '../util/util'; import { ERROR_TOAST_PROPS } from '../util/util';
import { screenWidth, styles } from '../util/styles';
import TTS_logo from '../assets/images/TTS_logo.jpeg'
const LoginForm = ({ onLogin }) => { const LoginForm = ({ onLogin, navigation }) => {
var passwordInput var passwordInput
...@@ -20,14 +22,16 @@ const LoginForm = ({ onLogin }) => { ...@@ -20,14 +22,16 @@ const LoginForm = ({ onLogin }) => {
defaultValue={username} defaultValue={username}
onChangeText={(e) => { onChangeText={(e) => {
console.log(e); console.log(e);
setUsername(e)}} setUsername(e)
}}
autoCapitalize="none" autoCapitalize="none"
onSubmitEditing={() => passwordInput.focus()} onSubmitEditing={() => passwordInput.focus()}
autoCorrect={false} autoCorrect={false}
keyboardType='email-address' keyboardType='email-address'
returnKeyType="next" returnKeyType="next"
placeholder='Email' placeholder='Email'
placeholderTextColor='rgba(225,225,225,0.7)' /> // placeholderTextColor='rgba(225,225,225,0.7)'
/>
<TextInput style={styles.input} <TextInput style={styles.input}
defaultValue={password} defaultValue={password}
...@@ -35,7 +39,7 @@ const LoginForm = ({ onLogin }) => { ...@@ -35,7 +39,7 @@ const LoginForm = ({ onLogin }) => {
returnKeyType="go" returnKeyType="go"
ref={(input) => passwordInput = input} ref={(input) => passwordInput = input}
placeholder='Password' placeholder='Password'
placeholderTextColor='rgba(225,225,225,0.7)' // placeholderTextColor='rgba(225,225,225,0.7)'
secureTextEntry /> secureTextEntry />
<TouchableOpacity style={styles.buttonContainer} <TouchableOpacity style={styles.buttonContainer}
...@@ -43,9 +47,9 @@ const LoginForm = ({ onLogin }) => { ...@@ -43,9 +47,9 @@ const LoginForm = ({ onLogin }) => {
// disabled={!username || !password} // disabled={!username || !password}
onPress={() => { onPress={() => {
console.log({ username, password }) console.log({ username, password })
if(!username || !password){ if (!username || !password) {
Toast.show({title: 'Please fill in all the fields!', ...ERROR_TOAST_PROPS}) Toast.show({ title: 'Please fill in all the fields!', ...ERROR_TOAST_PROPS })
}else{ } else {
onLogin(username, password) onLogin(username, password)
} }
...@@ -58,11 +62,24 @@ const LoginForm = ({ onLogin }) => { ...@@ -58,11 +62,24 @@ const LoginForm = ({ onLogin }) => {
) )
} }
export const LoginScreen = ({ onLogin }) => { export const LoginScreen = ({ onLogin, navigation }) => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={{ alignContent: 'center', justifyContent: 'center' }}>
<Image source={TTS_logo} style={{ height: screenWidth - 30, width: screenWidth - 30, margin: 'auto' }} />
</View>
<Text style={{
padding: 10,
textAlign: 'center',
// fontWeight: 'bold',
fontSize: 40
}}>Login</Text>
<View style={{ flexDirection: 'row', padding: 10, justifyContent: 'center' }}>
<Text style={{ textAlign: 'center' }}>Don't have an account? </Text>
<Text style={{ fontWeight: 'bold', textAlign: 'center', }} onPress={() => navigation.replace('Signup')}>Sign up</Text>
</View>
<View style={styles.loginContainer}> <View style={styles.loginContainer}>
{/* r<Image resizeMode="contain" style={styles.logo} source={require('../../components/images/logo-dark-bg.png')} /> */} {/* r<Image resizeMode="contain" style={styles.logo} source={require('../../components/images/logo-dark-bg.png')} /> */}
</View> </View>
...@@ -74,43 +91,3 @@ export const LoginScreen = ({ onLogin }) => { ...@@ -74,43 +91,3 @@ export const LoginScreen = ({ onLogin }) => {
); );
} }
\ No newline at end of file
// define your styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#2c3e50',
},
loginContainer: {
alignItems: 'center',
flexGrow: 1,
justifyContent: 'center'
},
logo: {
position: 'absolute',
width: 300,
height: 100
},
container: {
padding: 20
},
input: {
height: 40,
backgroundColor: 'rgba(225,225,225,0.2)',
marginBottom: 10,
padding: 10,
color: '#fff'
},
buttonContainer: {
backgroundColor: '#2980b6',
paddingVertical: 15
},
buttonText: {
color: '#fff',
textAlign: 'center',
fontWeight: '700'
}
})
\ No newline at end of file
MobileApp/util/styles.jsx 0 → 100644
View file @ 06fd6461
import { StyleSheet, Dimensions } from "react-native"
export const screenWidth = Dimensions.get('window').width
export const styles = StyleSheet.create({
// container: {
// flex: 1,
// backgroundColor: '#2c3e50',
// },
loginContainer: {
alignItems: 'center',
flexGrow: 1,
justifyContent: 'center'
},
logo: {
position: 'absolute',
width: 300,
height: 100
},
container: {
padding: 20,
backgroundColor: 'white'
},
input: {
height: 40,
backgroundColor: 'rgba(225,225,225,0.2)',
marginBottom: 10,
padding: 10,
// color: '#fff',
borderRadius: 5,
},
buttonContainer: {
backgroundColor: '#2980b6',
paddingVertical: 15,
borderRadius: 5
},
buttonText: {
// color: '#fff',
textAlign: 'center',
fontWeight: '700'
},
chatIcon: {
paddingHorizontal: 4
},
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
separator: {
marginVertical: 30,
height: 1,
width: '80%',
},
convoFooter: {
},
header: { textAlign: 'center', backgroundColor: 'gray', marginRight: 'auto', marginLeft: 'auto', padding: 3, borderRadius: 5 }
})
\ No newline at end of file
MobileApp/util/util.js
View file @ 06fd6461
export const TOAST_PROPS = {placement : 'top'} export const TOAST_PROPS = {placement : 'top'}
export const ERROR_TOAST_PROPS = {...TOAST_PROPS, style:{backgroundColor: 'red'}} export const ERROR_TOAST_PROPS = {...TOAST_PROPS, style:{backgroundColor: '#B00020'}}
\ No newline at end of file \ No newline at end of file
MobileApp/yarn.lock
View file @ 06fd6461
...@@ -2159,6 +2159,11 @@ ...@@ -2159,6 +2159,11 @@
sudo-prompt "^9.0.0" sudo-prompt "^9.0.0"
wcwidth "^1.0.1" wcwidth "^1.0.1"
"@react-native-community/slider@4.1.12":
version "4.1.12"
resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-4.1.12.tgz#279ff7bbe487af92ad95ec758a029a54569e2a62"
integrity sha512-CiuLZ2orueBiWHYxfaJF57jQY6HY2Q3z5pdAE4MKH8EqIImr/jgDJrJ/UxOVZHK1Ng9P+XlGIKfVIcuWZ6guuA==
"@react-native/assets@1.0.0": "@react-native/assets@1.0.0":
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e" resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e"
...@@ -4221,6 +4226,11 @@ expo-modules-core@0.6.5: ...@@ -4221,6 +4226,11 @@ expo-modules-core@0.6.5:
compare-versions "^3.4.0" compare-versions "^3.4.0"
invariant "^2.2.4" invariant "^2.2.4"
expo-speech@~10.1.0:
version "10.1.1"
resolved "https://registry.yarnpkg.com/expo-speech/-/expo-speech-10.1.1.tgz#fc4a820fd1bd6203c388837ab3947e24242c3615"
integrity sha512-tovcfD3Qi5WvY91d+N+dMVDMz+GwW/c9ze/Ct3cZQLBJQubqlVtlDqb/cDD2Uwuwb+zjAH3N6NfAFSgCdhqwAQ==
expo-splash-screen@~0.14.0: expo-splash-screen@~0.14.0:
version "0.14.2" version "0.14.2"
resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.14.2.tgz#2598d6980e71ecd8b7467ca821fb9dbfb80f355b" resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.14.2.tgz#2598d6980e71ecd8b7467ca821fb9dbfb80f355b"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment