Add friends search screen
This commit is contained in:
parent
7c95e78b2a
commit
74a6f77261
3 changed files with 336 additions and 0 deletions
|
|
@ -0,0 +1,10 @@
|
||||||
|
package be.ugent.sel.studeez.screens.friends.friends_search
|
||||||
|
|
||||||
|
import be.ugent.sel.studeez.data.local.models.User
|
||||||
|
import kotlinx.coroutines.flow.Flow
|
||||||
|
import kotlinx.coroutines.flow.emptyFlow
|
||||||
|
|
||||||
|
data class SearchFriendUiState(
|
||||||
|
val queryString: String = "",
|
||||||
|
val searchResults: Flow<List<User>> = emptyFlow()
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1,269 @@
|
||||||
|
package be.ugent.sel.studeez.screens.friends.friends_search
|
||||||
|
|
||||||
|
import androidx.compose.foundation.background
|
||||||
|
import androidx.compose.foundation.layout.*
|
||||||
|
import androidx.compose.foundation.lazy.LazyColumn
|
||||||
|
import androidx.compose.foundation.lazy.items
|
||||||
|
import androidx.compose.foundation.shape.CircleShape
|
||||||
|
import androidx.compose.material.*
|
||||||
|
import androidx.compose.material.icons.Icons
|
||||||
|
import androidx.compose.material.icons.filled.ArrowBack
|
||||||
|
import androidx.compose.material.icons.filled.Person
|
||||||
|
import androidx.compose.runtime.*
|
||||||
|
import androidx.compose.ui.Alignment
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.graphics.vector.ImageVector
|
||||||
|
import androidx.compose.ui.res.painterResource
|
||||||
|
import androidx.compose.ui.res.stringResource
|
||||||
|
import androidx.compose.ui.res.vectorResource
|
||||||
|
import androidx.compose.ui.text.style.TextOverflow
|
||||||
|
import androidx.compose.ui.tooling.preview.Preview
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import androidx.compose.ui.unit.sp
|
||||||
|
import be.ugent.sel.studeez.R
|
||||||
|
import be.ugent.sel.studeez.common.composable.SearchField
|
||||||
|
import be.ugent.sel.studeez.common.composable.drawer.DrawerEntry
|
||||||
|
import be.ugent.sel.studeez.data.local.models.User
|
||||||
|
import be.ugent.sel.studeez.resources
|
||||||
|
import be.ugent.sel.studeez.ui.theme.StudeezTheme
|
||||||
|
import kotlinx.coroutines.flow.*
|
||||||
|
import be.ugent.sel.studeez.R.string as AppText
|
||||||
|
|
||||||
|
data class SearchFriendsActions(
|
||||||
|
val onQueryStringChange: (String) -> Unit,
|
||||||
|
val getUsersWithUsername: (String) -> Unit,
|
||||||
|
val getAllUsers: () -> Flow<List<User>>,
|
||||||
|
val goToProfile: (String) -> Unit
|
||||||
|
)
|
||||||
|
|
||||||
|
fun getSearchFriendsActions(
|
||||||
|
viewModel: SearchFriendsViewModel,
|
||||||
|
open: (String) -> Unit
|
||||||
|
): SearchFriendsActions {
|
||||||
|
return SearchFriendsActions(
|
||||||
|
onQueryStringChange = viewModel::onQueryStringChange,
|
||||||
|
getUsersWithUsername = viewModel::getUsersWithUsername,
|
||||||
|
getAllUsers = { viewModel.getAllUsers() },
|
||||||
|
goToProfile = { userId -> viewModel.goToProfile(userId, open) }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun SearchFriendsRoute(
|
||||||
|
popUp: () -> Unit,
|
||||||
|
open: (String) -> Unit,
|
||||||
|
viewModel: SearchFriendsViewModel
|
||||||
|
) {
|
||||||
|
val uiState by viewModel.uiState
|
||||||
|
|
||||||
|
SearchFriendsScreen(
|
||||||
|
popUp = popUp,
|
||||||
|
uiState = uiState,
|
||||||
|
searchFriendsActions = getSearchFriendsActions(
|
||||||
|
viewModel = viewModel,
|
||||||
|
open = open
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun SearchFriendsScreen(
|
||||||
|
popUp: () -> Unit,
|
||||||
|
uiState: SearchFriendUiState,
|
||||||
|
searchFriendsActions: SearchFriendsActions
|
||||||
|
) {
|
||||||
|
var query by remember { mutableStateOf(uiState.queryString) }
|
||||||
|
val searchResults = searchFriendsActions.getAllUsers().collectAsState(
|
||||||
|
initial = emptyList()
|
||||||
|
)
|
||||||
|
|
||||||
|
Scaffold(
|
||||||
|
topBar = {
|
||||||
|
TopAppBar(
|
||||||
|
title = {
|
||||||
|
SearchField(
|
||||||
|
value = query,
|
||||||
|
onValueChange = { newValue ->
|
||||||
|
searchFriendsActions.onQueryStringChange(newValue)
|
||||||
|
query = newValue
|
||||||
|
},
|
||||||
|
onSubmit = { },
|
||||||
|
label = AppText.search_friends
|
||||||
|
)
|
||||||
|
},
|
||||||
|
navigationIcon = {
|
||||||
|
IconButton(onClick = popUp) {
|
||||||
|
Icon(
|
||||||
|
imageVector = Icons.Default.ArrowBack,
|
||||||
|
contentDescription = resources().getString(R.string.go_back)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
) { paddingValues ->
|
||||||
|
LazyColumn(
|
||||||
|
modifier = Modifier.padding(paddingValues)
|
||||||
|
) {
|
||||||
|
items (searchResults.value) { user ->
|
||||||
|
UserEntry(
|
||||||
|
user = user,
|
||||||
|
goToProfile = searchFriendsActions.goToProfile
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview
|
||||||
|
@Composable
|
||||||
|
fun SearchFriendsPreview() {
|
||||||
|
StudeezTheme {
|
||||||
|
SearchFriendsScreen(
|
||||||
|
popUp = {},
|
||||||
|
uiState = SearchFriendUiState(
|
||||||
|
queryString = "dit is een test",
|
||||||
|
searchResults = flowOf(listOf(User(
|
||||||
|
id = "someid",
|
||||||
|
username = "Eerste user",
|
||||||
|
biography = "blah blah blah"
|
||||||
|
)))
|
||||||
|
),
|
||||||
|
searchFriendsActions = SearchFriendsActions(
|
||||||
|
onQueryStringChange = {},
|
||||||
|
getUsersWithUsername = {},
|
||||||
|
getAllUsers = {
|
||||||
|
flowOf(listOf(User(
|
||||||
|
id = "someid",
|
||||||
|
username = "Eerste user",
|
||||||
|
biography = "blah blah blah"
|
||||||
|
)))
|
||||||
|
},
|
||||||
|
goToProfile = { }
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun UserEntry(
|
||||||
|
user: User,
|
||||||
|
goToProfile: (String) -> Unit
|
||||||
|
) {
|
||||||
|
Row(
|
||||||
|
modifier = Modifier
|
||||||
|
.fillMaxWidth()
|
||||||
|
) {
|
||||||
|
Box(
|
||||||
|
modifier = Modifier
|
||||||
|
.fillMaxWidth(0.15f)
|
||||||
|
.background(MaterialTheme.colors.primary, CircleShape)
|
||||||
|
) {
|
||||||
|
Icon(
|
||||||
|
painter = painterResource(id = R.drawable.ic_visibility_on),
|
||||||
|
contentDescription = null,
|
||||||
|
modifier = Modifier
|
||||||
|
.fillMaxHeight()
|
||||||
|
.align(Alignment.Center),
|
||||||
|
tint = MaterialTheme.colors.onPrimary
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
Box (
|
||||||
|
modifier = Modifier
|
||||||
|
.fillMaxWidth(0.65f)
|
||||||
|
) {
|
||||||
|
Column (
|
||||||
|
modifier = Modifier
|
||||||
|
.padding(vertical = 4.dp)
|
||||||
|
) {
|
||||||
|
Text(
|
||||||
|
text = user.username,
|
||||||
|
fontSize = 16.sp,
|
||||||
|
maxLines = 1,
|
||||||
|
overflow = TextOverflow.Ellipsis
|
||||||
|
)
|
||||||
|
Text(
|
||||||
|
text = "${resources().getString(AppText.app_name)} ${resources().getString(AppText.friend)}",
|
||||||
|
fontSize = 14.sp,
|
||||||
|
maxLines = 1,
|
||||||
|
overflow = TextOverflow.Ellipsis
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Box(
|
||||||
|
modifier = Modifier.fillMaxWidth(0.15f)
|
||||||
|
) {
|
||||||
|
SearchFriendsDropDown(
|
||||||
|
user = user,
|
||||||
|
goToProfile = goToProfile
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview
|
||||||
|
@Composable
|
||||||
|
fun UserEntryPreview() {
|
||||||
|
StudeezTheme {
|
||||||
|
UserEntry(
|
||||||
|
user = User(
|
||||||
|
id = "someid",
|
||||||
|
username = "Eerste user",
|
||||||
|
biography = "blah blah blah"
|
||||||
|
),
|
||||||
|
goToProfile = { }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Three dots that open a dropdown menu that allow to go the users profile.
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SearchFriendsDropDown(
|
||||||
|
user: User,
|
||||||
|
goToProfile: (String) -> Unit
|
||||||
|
) {
|
||||||
|
var expanded by remember { mutableStateOf(false) }
|
||||||
|
|
||||||
|
IconButton(
|
||||||
|
onClick = { expanded = true }
|
||||||
|
) {
|
||||||
|
Icon(
|
||||||
|
imageVector = ImageVector.vectorResource(id = R.drawable.ic_more_horizontal),
|
||||||
|
contentDescription = stringResource(AppText.view_more),
|
||||||
|
modifier = Modifier.fillMaxSize()
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
DropdownMenu(
|
||||||
|
expanded = expanded,
|
||||||
|
onDismissRequest = { expanded = false }
|
||||||
|
) {
|
||||||
|
DropdownMenuItem(onClick = { expanded = false }) {
|
||||||
|
DrawerEntry(
|
||||||
|
icon = Icons.Default.Person,
|
||||||
|
text = stringResource(id = AppText.show_profile)
|
||||||
|
) {
|
||||||
|
goToProfile(user.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview
|
||||||
|
@Composable
|
||||||
|
fun SearchFriendsDropDownPreview() {
|
||||||
|
StudeezTheme {
|
||||||
|
SearchFriendsDropDown(
|
||||||
|
user = User(
|
||||||
|
id = "someid",
|
||||||
|
username = "Eerste user",
|
||||||
|
biography = "blah blah blah"
|
||||||
|
),
|
||||||
|
goToProfile = { }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
package be.ugent.sel.studeez.screens.friends.friends_search
|
||||||
|
|
||||||
|
import androidx.compose.runtime.mutableStateOf
|
||||||
|
import be.ugent.sel.studeez.data.local.models.User
|
||||||
|
import be.ugent.sel.studeez.data.remote.FirebaseUser
|
||||||
|
import be.ugent.sel.studeez.domain.LogService
|
||||||
|
import be.ugent.sel.studeez.domain.UserDAO
|
||||||
|
import be.ugent.sel.studeez.navigation.StudeezDestinations
|
||||||
|
import be.ugent.sel.studeez.screens.StudeezViewModel
|
||||||
|
import be.ugent.sel.studeez.screens.profile.public_profile.SelectedProfileState
|
||||||
|
import dagger.hilt.android.lifecycle.HiltViewModel
|
||||||
|
import kotlinx.coroutines.flow.Flow
|
||||||
|
import javax.inject.Inject
|
||||||
|
|
||||||
|
@HiltViewModel
|
||||||
|
class SearchFriendsViewModel @Inject constructor(
|
||||||
|
private val userDAO: UserDAO,
|
||||||
|
private val selectedProfileState: SelectedProfileState,
|
||||||
|
logService: LogService
|
||||||
|
): StudeezViewModel(logService) {
|
||||||
|
|
||||||
|
var uiState = mutableStateOf(SearchFriendUiState())
|
||||||
|
private set
|
||||||
|
|
||||||
|
fun onQueryStringChange(newValue: String) {
|
||||||
|
uiState.value = uiState.value.copy(
|
||||||
|
queryString = newValue
|
||||||
|
)
|
||||||
|
uiState.value = uiState.value.copy(
|
||||||
|
searchResults = userDAO.getUsersWithQuery(
|
||||||
|
fieldName = FirebaseUser.USERNAME,
|
||||||
|
value = uiState.value.queryString
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
fun getUsersWithUsername(
|
||||||
|
value: String
|
||||||
|
): Flow<List<User>> {
|
||||||
|
return userDAO.getUsersWithQuery(
|
||||||
|
fieldName = FirebaseUser.USERNAME,
|
||||||
|
value = value
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
fun getAllUsers(): Flow<List<User>> {
|
||||||
|
return userDAO.getAllUsers()
|
||||||
|
}
|
||||||
|
|
||||||
|
fun goToProfile(
|
||||||
|
userId: String,
|
||||||
|
open: (String) -> Unit
|
||||||
|
) {
|
||||||
|
selectedProfileState.selectedUserId = userId
|
||||||
|
open(StudeezDestinations.PUBLIC_PROFILE_SCREEN)
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in a new issue