Preview Async Images

app/src/main/java/com/cornellappdev/resell/android/ui/components/global/ResellAsyncImage.kt

@@ -0,0 +1,54 @@
+package com.cornellappdev.resell.android.ui.components.global
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.Image
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.DefaultAlpha
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalInspectionMode
+import androidx.compose.ui.res.painterResource
+import coil.compose.AsyncImage
+import coil.compose.AsyncImagePainter
+import coil.compose.AsyncImagePainter.Companion.DefaultTransform
+import com.cornellappdev.resell.android.R
+
+/**
+ * A wrapper around coil's AsyncImage, but contains an extra parameter, previewImageResource, which
+ * allows us to specify what image should be used when the image is being viewed in a Preview. This
+ * is useful because AsyncImages don't load in previews and it causes the previews to not look good.
+ */
+@Composable
+fun ResellAsyncImage(
+    model: Any?,
+    contentDescription: String?,
+    modifier: Modifier = Modifier,
+    transform: (AsyncImagePainter.State) -> AsyncImagePainter.State = DefaultTransform,
+    onState: ((AsyncImagePainter.State) -> Unit)? = null,
+    alignment: Alignment = Alignment.Center,
+    contentScale: ContentScale = ContentScale.Fit,
+    alpha: Float = DefaultAlpha,
+    @DrawableRes previewImageResource: Int = R.drawable.ic_image,
+) {
+    if (LocalInspectionMode.current) {
+        Image(
+            painterResource(previewImageResource),
+            contentDescription = contentDescription,
+            contentScale = contentScale,
+            modifier = modifier,
+            alpha = alpha,
+        )
+    } else {
+        AsyncImage(
+            model,
+            contentDescription,
+            modifier,
+            transform,
+            onState,
+            alignment,
+            contentScale,
+            alpha,
+        )
+    }
+}

app/src/main/java/com/cornellappdev/resell/android/ui/components/global/ResellTextButton.kt

@@ -29,9 +29,12 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.compose.ui.unit.dp
 import com.cornellappdev.resell.android.ui.theme.AppDev
 import com.cornellappdev.resell.android.ui.theme.Primary
+import com.cornellappdev.resell.android.ui.theme.ResellPreview
 import com.cornellappdev.resell.android.ui.theme.ResellPurple
 import com.cornellappdev.resell.android.ui.theme.Style
 import com.cornellappdev.resell.android.ui.theme.Warning
@@ -209,44 +212,16 @@ private fun ResellTextButtonPreview(
     }
 }
 
-@Preview
-@Composable
-private fun ResellPrimaryTextButtonPreview() {
-    ResellTextButtonPreview()
-}
-
-@Preview
-@Composable
-private fun ResellSecondaryTextButtonPreview() {
-    ResellTextButtonPreview(containerType = ResellTextButtonContainer.SECONDARY)
-}
-
-@Preview
-@Composable
-private fun ResellPrimaryRedTextButtonPreview() {
-    ResellTextButtonPreview(containerType = ResellTextButtonContainer.PRIMARY_RED)
-}
-
-@Preview
-@Composable
-private fun ResellSecondaryRedTextButtonPreview() {
-    ResellTextButtonPreview(containerType = ResellTextButtonContainer.SECONDARY_RED)
-}
-
-@Preview
-@Composable
-private fun ResellSecondaryNakedButtonPreview() {
-    ResellTextButtonPreview(containerType = ResellTextButtonContainer.NAKED)
-}
-
-@Preview
-@Composable
-private fun ResellSecondaryNakedRedTextButtonPreview() {
-    ResellTextButtonPreview(containerType = ResellTextButtonContainer.NAKED_RED)
-}
+private class ResellTextButtonContainerPreviewProvider(
+    override val values: Sequence<ResellTextButtonContainer> = sequenceOf(
+        *ResellTextButtonContainer.entries.toTypedArray()
+    )
+) : PreviewParameterProvider<ResellTextButtonContainer>
 
 @Preview
 @Composable
-private fun ResellPrimaryNakedButtonPreview() {
-    ResellTextButtonPreview(containerType = ResellTextButtonContainer.NAKED_PRIMARY)
-}
+private fun ResellButtonPreview(
+    @PreviewParameter(ResellTextButtonContainerPreviewProvider::class) container: ResellTextButtonContainer
+) = ResellPreview {
+    ResellTextButtonPreview(container)
+}

app/src/main/java/com/cornellappdev/resell/android/ui/components/main/ProfilePictureView.kt

@@ -6,21 +6,32 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import coil.compose.AsyncImage
+import com.cornellappdev.resell.android.R
+import com.cornellappdev.resell.android.ui.components.global.ResellAsyncImage
+import com.cornellappdev.resell.android.ui.theme.ResellPreview
+
 
 @Composable
 fun ProfilePictureView(
     imageUrl: String,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
-    // TODO Improve loading animation & shimmer
-    AsyncImage(
+
+    ResellAsyncImage(
         model = imageUrl,
         contentDescription = "pfp",
         modifier = modifier
             .sizeIn(minWidth = 31.dp, minHeight = 31.dp)
             .clip(CircleShape),
-        contentScale = ContentScale.Crop
+        contentScale = ContentScale.Crop,
+        previewImageResource = R.drawable.ic_empty_pfp,
     )
 }
+
+@Preview
+@Composable
+fun ProfilePictureViewPreview() = ResellPreview {
+    ProfilePictureView("https://core-docs.s3.amazonaws.com/murray_county_central_schools_ar/article/image/66f00638-2227-4795-84cc-8cefe4e4fb75.png")
+}

app/src/main/java/com/cornellappdev/resell/android/ui/components/profile/ProfileHeader.kt

@@ -17,11 +17,16 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.compose.ui.unit.dp
 import com.cornellappdev.resell.android.R
 import com.cornellappdev.resell.android.ui.components.global.ResellTabBar
 import com.cornellappdev.resell.android.ui.components.main.ProfilePictureView
 import com.cornellappdev.resell.android.ui.theme.IconInactive
+import com.cornellappdev.resell.android.ui.theme.ResellPreview
 import com.cornellappdev.resell.android.ui.theme.Secondary
 import com.cornellappdev.resell.android.ui.theme.Style
 import com.cornellappdev.resell.android.util.clickableNoIndication
@@ -56,7 +61,6 @@ fun ProfileHeader(
                 imageUrl = imageUrl,
             )
 
-
             if (leftIcon != null) {
                 Icon(
                     painter = painterResource(id = leftIcon),
@@ -108,6 +112,7 @@ fun ProfileHeader(
                 maxLines = 3,
                 style = Style.body2,
                 textAlign = TextAlign.Center,
+                overflow = TextOverflow.Ellipsis,
             )
         }
 
@@ -135,3 +140,25 @@ fun ProfileHeader(
         }
     }
 }
+
+class BioPreviewProvider(
+    override val values: Sequence<String> = sequenceOf(
+        "This is a short bio.",
+        "This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio.This is an insanely super duper very very extremely so long super duper long omg I don't think I've ever seen something this long it is just so long I cannot begin to fathom how long it is bio."
+    )
+) : PreviewParameterProvider<String>
+
+@Preview
+@Composable
+fun ProfileHeaderBiosPreview(
+    @PreviewParameter(BioPreviewProvider::class) bio: String
+) = ResellPreview {
+    ProfileHeader(
+        imageUrl = "",
+        shopName = "Hello",
+        vendorName = "world",
+        bio = bio,
+        selectedTab = null,
+        onTabSelected = {}
+    )
+}

app/src/main/res/drawable/profile_background.xml

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector
+    android:height="108dp"
+    android:width="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108"
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#3DDC84"
+          android:pathData="M0,0h108v108h-108z"/>
+    <path android:fillColor="#00000000" android:pathData="M9,0L9,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,0L19,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M29,0L29,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M39,0L39,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M49,0L49,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M59,0L59,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M69,0L69,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M79,0L79,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M89,0L89,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M99,0L99,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,9L108,9"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,19L108,19"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,29L108,29"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,39L108,39"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,49L108,49"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,59L108,59"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,69L108,69"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,79L108,79"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,89L108,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,99L108,99"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,29L89,29"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,39L89,39"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,49L89,49"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,59L89,59"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,69L89,69"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,79L89,79"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M29,19L29,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M39,19L39,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M49,19L49,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M59,19L59,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M69,19L69,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M79,19L79,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+</vector>

app/src/main/res/mipmap-anydpi-v26/profile.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/profile_background"/>
+    <foreground android:drawable="@mipmap/profile_foreground"/>
+</adaptive-icon>