v0.3.1

Development week 30/05

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Spotifiuby",
     "slug": "Spotifiuby",
-    "version": "0.3.0",
+    "version": "0.3.1",
     "icon": "src/img/icon.png",
     "android": {
       "icon": "src/img/icon.png",
@@ -13,10 +13,8 @@
       "package": "ar.uba.fi.rostov.spotifiuby",
       "userInterfaceStyle": "automatic"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "scheme": "spotifiuby",
     "userInterfaceStyle": "automatic"
   }
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spotifiuby",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "main": "index.js",
   "scripts": {
     "start": "expo start --dev-client",
@@ -83,4 +83,4 @@
       "toast": true
     }
   }
-}
+}

src/components/Stack.js

@@ -8,6 +8,8 @@ import ManageMyAlbums from "./account/manageAlbums/ManageMyAlbums";
 import UserListScreen from "./account/users/UserListScreen";
 import { Portal } from "react-native-paper";
 import ManageMyPlaylists from "./account/managePlaylists/ManageMyPlaylists";
+import ChatScreen from "./account/users/ChatScreen";
+
 const StackNavigator = createNativeStackNavigator();
 
 export default function Stack() {
@@ -44,6 +46,7 @@ export default function Stack() {
             component={UserListScreen}
             options={{ title: "Other users", headerShown: true }}
           />
+          <StackNavigator.Screen name="ChatScreen" component={ChatScreen} />
         </StackNavigator.Navigator>
       </Portal.Host>
     </AudioProvider>

src/components/account/users/ChatBubble.js

@@ -0,0 +1,72 @@
+import { View } from "react-native";
+import PropTypes from "prop-types";
+import { useTheme, Text, Surface } from "react-native-paper";
+import styles from "../../styles";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+
+const ICONS = {
+  sent: "check",
+  pending: "clock-outline",
+  error: "close",
+};
+
+export default function ChatBubble({ name, message, right, date, icon }) {
+  const theme = useTheme();
+  const Container = right ? Surface : View;
+
+  return (
+    <View style={right ? { alignItems: "flex-end" } : undefined}>
+      <Container
+        style={[styles.chatBubble].concat(
+          right
+            ? [{ borderBottomRightRadius: 0 }]
+            : [
+                {
+                  borderBottomLeftRadius: 0,
+                  backgroundColor: theme.colors.primary,
+                },
+              ]
+        )}
+      >
+        {name ? <Text style={styles.bold}>{name}</Text> : null}
+        <Text>{message}</Text>
+        <View
+          style={[styles.row].concat(
+            right ? [{ justifyContent: "flex-end" }] : []
+          )}
+        >
+          <Text
+            style={{
+              color: theme.colors.info,
+              fontSize: 10,
+              marginRight: "2%",
+            }}
+          >
+            {date ?? ""}
+          </Text>
+          {icon ? (
+            <Icon color={theme.colors.info} size={15} name={ICONS[icon]}></Icon>
+          ) : undefined}
+        </View>
+      </Container>
+      <Container
+        style={[
+          styles.triangle,
+          { borderBottomColor: theme.colors.background },
+        ].concat(
+          right
+            ? []
+            : [{ backgroundColor: theme.colors.primary }, styles.mirror]
+        )}
+      />
+    </View>
+  );
+}
+
+ChatBubble.propTypes = {
+  name: PropTypes.string,
+  message: PropTypes.string.isRequired,
+  right: PropTypes.bool.isRequired,
+  date: PropTypes.string,
+  icon: PropTypes.oneOf(["sent", "pending", "error"]),
+};

src/components/account/users/ChatHeader.js

@@ -0,0 +1,44 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { View } from "react-native";
+import { IconButton, Subheading, useTheme } from "react-native-paper";
+import { ShapedImage } from "../../general/ShapedImage";
+import styles from "../../styles";
+
+export default function ChatHeader({ user, navigation }) {
+  const theme = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.row,
+        {
+          alignItems: "center",
+          backgroundColor: theme.colors.surface,
+          paddingVertical: 6,
+        },
+      ]}
+    >
+      <IconButton icon="arrow-left" onPress={navigation.goBack} />
+      <ShapedImage
+        shape="circle"
+        size={40}
+        icon="account"
+        imageUri={user.pfp}
+        style={{ marginRight: "5%" }}
+      />
+      <Subheading>{user.name}</Subheading>
+    </View>
+  );
+}
+
+ChatHeader.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string,
+    pfp: PropTypes.string,
+  }).isRequired,
+  navigation: PropTypes.shape({
+    setOptions: PropTypes.func.isRequired,
+    goBack: PropTypes.func.isRequired,
+  }).isRequired,
+};