Skip to content

Commit cc18223

Browse files
bmc08gtbmc08gt
committed
fix(fc/profile): improve crossfade states
Signed-off-by: Brandon McAnsh <[email protected]>
1 parent 46005c2 commit cc18223

File tree

2 files changed

+110
-104
lines changed

2 files changed

+110
-104
lines changed

‎flipchatApp/src/main/kotlin/xyz/flipchat/app/features/profile/ProfileScreen.kt

Lines changed: 109 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ import com.getcode.ui.utils.getActivity
6666
import kotlinx.coroutines.CoroutineScope
6767
import kotlinx.coroutines.delay
6868
import kotlinx.coroutines.launch
69+
import kotlinx.parcelize.IgnoredOnParcel
6970
import kotlinx.parcelize.Parcelize
7071
import xyz.flipchat.app.R
7172
import xyz.flipchat.app.features.profile.components.ProfileContextAction
@@ -77,6 +78,7 @@ import xyz.flipchat.services.internal.data.mapper.nullIfEmpty
7778
@Parcelize
7879
class ProfileScreen(val userId: ID? = null, val isInTab: Boolean) : Screen, Parcelable {
7980

81+
@IgnoredOnParcel
8082
override val key: ScreenKey = uniqueScreenKey
8183

8284
@Composable
@@ -226,124 +228,128 @@ private fun ProfileContent(
226228
) {
227229
// Crossfade for linked vs unlinked content
228230
Crossfade(
229-
targetState = state.linkedSocialProfile != null,
231+
targetState = state.linkedSocialProfile,
230232
animationSpec = tween(durationMillis = 300)
231-
) { isLinked ->
232-
if (!isLinked) {
233-
// Unlinked state
234-
if (state.canConnectAccount && state.isSelf) {
235-
val xOAuthLauncher =
236-
rememberLauncherForOAuth(OAuthProvider.X) { accessToken ->
237-
dispatchEvent(ProfileViewModel.Event.LinkXAccount(accessToken))
238-
}
233+
) { profile ->
234+
when (profile) {
235+
SocialProfile.Unknown -> Unit
236+
null -> {
237+
// Unlinked state
238+
if (state.canConnectAccount && state.isSelf) {
239+
val xOAuthLauncher =
240+
rememberLauncherForOAuth(OAuthProvider.X) { accessToken ->
241+
dispatchEvent(ProfileViewModel.Event.LinkXAccount(accessToken))
242+
}
239243

240-
AnimatedVisibility(
241-
visible = true,
242-
enter = fadeIn() + slideInVertically(initialOffsetY = { it / 2 }),
243-
exit = fadeOut() + slideOutVertically(targetOffsetY = { it / 2 })
244-
) {
245-
CodeButton(
246-
modifier = Modifier
247-
.fillMaxWidth()
248-
.padding(top = CodeTheme.dimens.grid.x12)
249-
.padding(horizontal = CodeTheme.dimens.inset),
250-
buttonState = ButtonState.Filled,
251-
onClick = {
252-
xOAuthLauncher.launch(
253-
OAuthProvider.X.launchIntent(
254-
context
255-
)
256-
)
257-
},
258-
content = {
259-
Image(
260-
painter = rememberVectorPainter(
261-
image = ImageVector.vectorResource(
262-
id = R.drawable.ic_twitter_x
244+
AnimatedVisibility(
245+
visible = true,
246+
enter = fadeIn() + slideInVertically(initialOffsetY = { it / 2 }),
247+
exit = fadeOut() + slideOutVertically(targetOffsetY = { it / 2 })
248+
) {
249+
CodeButton(
250+
modifier = Modifier
251+
.fillMaxWidth()
252+
.padding(top = CodeTheme.dimens.grid.x12)
253+
.padding(horizontal = CodeTheme.dimens.inset),
254+
buttonState = ButtonState.Filled,
255+
onClick = {
256+
xOAuthLauncher.launch(
257+
OAuthProvider.X.launchIntent(
258+
context
263259
)
264-
),
265-
colorFilter = ColorFilter.tint(Color.Black),
266-
contentDescription = null
267-
)
268-
Spacer(Modifier.width(CodeTheme.dimens.grid.x2))
269-
Text(text = stringResource(R.string.action_connectYourAccount))
270-
}
271-
)
260+
)
261+
},
262+
content = {
263+
Image(
264+
painter = rememberVectorPainter(
265+
image = ImageVector.vectorResource(
266+
id = R.drawable.ic_twitter_x
267+
)
268+
),
269+
colorFilter = ColorFilter.tint(Color.Black),
270+
contentDescription = null
271+
)
272+
Spacer(Modifier.width(CodeTheme.dimens.grid.x2))
273+
Text(text = stringResource(R.string.action_connectYourAccount))
274+
}
275+
)
276+
}
272277
}
273278
}
274-
} else {
275-
// Linked state
276-
state.linkedSocialProfile?.let { linkedProfile ->
277-
Column(
278-
horizontalAlignment = Alignment.CenterHorizontally
279-
) {
280-
state.username?.let { username ->
281-
AnimatedVisibility(
282-
visible = true,
283-
enter = fadeIn(),
284-
exit = fadeOut() + shrinkVertically()
285-
) {
286-
Text(
287-
modifier = Modifier.fillMaxWidth(),
288-
text = username,
289-
style = CodeTheme.typography.textSmall,
290-
color = CodeTheme.colors.textSecondary,
291-
textAlign = TextAlign.Center
292-
)
293-
}
294-
}
295-
296-
when (linkedProfile) {
297-
is SocialProfile.X -> {
279+
else -> {
280+
// Linked state
281+
state.linkedSocialProfile?.let { linkedProfile ->
282+
Column(
283+
horizontalAlignment = Alignment.CenterHorizontally
284+
) {
285+
state.username?.let { username ->
298286
AnimatedVisibility(
299287
visible = true,
300288
enter = fadeIn(),
301289
exit = fadeOut() + shrinkVertically()
302290
) {
303-
Column(horizontalAlignment = Alignment.CenterHorizontally) {
304-
Text(
305-
modifier = Modifier
306-
.fillMaxWidth()
307-
.padding(top = CodeTheme.dimens.grid.x8),
308-
text = "${linkedProfile.followerCountFormatted} Followers",
309-
style = CodeTheme.typography.textSmall,
310-
color = CodeTheme.colors.textSecondary,
311-
textAlign = TextAlign.Center
312-
)
313-
Text(
314-
modifier = Modifier
315-
.fillMaxWidth(0.70f)
316-
.padding(top = CodeTheme.dimens.grid.x1),
317-
text = linkedProfile.description,
318-
style = CodeTheme.typography.textSmall,
319-
color = CodeTheme.colors.textSecondary,
320-
textAlign = TextAlign.Center
321-
)
322-
}
291+
Text(
292+
modifier = Modifier.fillMaxWidth(),
293+
text = username,
294+
style = CodeTheme.typography.textSmall,
295+
color = CodeTheme.colors.textSecondary,
296+
textAlign = TextAlign.Center
297+
)
323298
}
324299
}
325300

326-
is SocialProfile.Unknown -> Unit
327-
}
301+
when (linkedProfile) {
302+
is SocialProfile.X -> {
303+
AnimatedVisibility(
304+
visible = true,
305+
enter = fadeIn(),
306+
exit = fadeOut() + shrinkVertically()
307+
) {
308+
Column(horizontalAlignment = Alignment.CenterHorizontally) {
309+
Text(
310+
modifier = Modifier
311+
.fillMaxWidth()
312+
.padding(top = CodeTheme.dimens.grid.x8),
313+
text = "${linkedProfile.followerCountFormatted} Followers",
314+
style = CodeTheme.typography.textSmall,
315+
color = CodeTheme.colors.textSecondary,
316+
textAlign = TextAlign.Center
317+
)
318+
Text(
319+
modifier = Modifier
320+
.fillMaxWidth(0.70f)
321+
.padding(top = CodeTheme.dimens.grid.x1),
322+
text = linkedProfile.description,
323+
style = CodeTheme.typography.textSmall,
324+
color = CodeTheme.colors.textSecondary,
325+
textAlign = TextAlign.Center
326+
)
327+
}
328+
}
329+
}
328330

329-
if (!isInTab) {
330-
AnimatedVisibility(
331-
visible = true,
332-
enter = fadeIn() + slideInVertically(initialOffsetY = { it / 2 }),
333-
exit = fadeOut() + slideOutVertically(targetOffsetY = { it / 2 })
334-
) {
335-
CodeButton(
336-
modifier = Modifier
337-
.fillMaxWidth()
338-
.padding(top = CodeTheme.dimens.grid.x12)
339-
.padding(horizontal = CodeTheme.dimens.inset),
340-
buttonState = ButtonState.Filled,
341-
onClick = { uriHandler.openUri(linkedProfile.profileUrl) },
342-
text = stringResource(
343-
R.string.action_openProfileOnPlatform,
344-
linkedProfile.platformTypeName
331+
is SocialProfile.Unknown -> Unit
332+
}
333+
334+
if (!isInTab) {
335+
AnimatedVisibility(
336+
visible = true,
337+
enter = fadeIn() + slideInVertically(initialOffsetY = { it / 2 }),
338+
exit = fadeOut() + slideOutVertically(targetOffsetY = { it / 2 })
339+
) {
340+
CodeButton(
341+
modifier = Modifier
342+
.fillMaxWidth()
343+
.padding(top = CodeTheme.dimens.grid.x12)
344+
.padding(horizontal = CodeTheme.dimens.inset),
345+
buttonState = ButtonState.Filled,
346+
onClick = { uriHandler.openUri(linkedProfile.profileUrl) },
347+
text = stringResource(
348+
R.string.action_openProfileOnPlatform,
349+
linkedProfile.platformTypeName
350+
)
345351
)
346-
)
352+
}
347353
}
348354
}
349355
}

‎flipchatApp/src/main/kotlin/xyz/flipchat/app/features/profile/ProfileViewModel.kt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ class ProfileViewModel @Inject constructor(
4646
val id: ID? = null,
4747
val isSelf: Boolean = false,
4848
private val name: String = "",
49-
val linkedSocialProfile: SocialProfile? = null,
49+
val linkedSocialProfile: SocialProfile? = SocialProfile.Unknown,
5050
val isStaff: Boolean = false,
5151
val canConnectAccount: Boolean = false,
5252
val showConnectedSocial: Boolean = false,

0 commit comments

Comments
 (0)