Merge pull request #31 from taller2-grupo5-rostov-1c2022/dev

Dev
taller2-grupo5-rostov-1c2022 · Jul 13, 2022 · 925935c · 925935c
2 parents e2f7208 + bb513b5
commit 925935c
Show file tree

Hide file tree

Showing 22 changed files with 396 additions and 131 deletions.
diff --git a/app.json b/app.json
@@ -2,7 +2,7 @@
   "expo": {
     "name": "Spotifiuby",
     "slug": "Spotifiuby",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "icon": "src/img/icon.png",
     "userInterfaceStyle": "automatic",
     "android": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spotifiuby",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "index.js",
   "scripts": {
     "start": "expo start --dev-client",
@@ -57,7 +57,9 @@
     "jest": "^26.6.3",
     "react-native-paper-dropdown": "^1.0.7",
     "react-native-safe-area-context": "4.2.4",
-    "react-native-screens": "~3.11.1"
+    "react-native-screens": "~3.11.1",
+    "react-native-star-rating-widget": "^1.2.0",
+    "react-native-svg": "^12.3.0"
   },
   "private": true,
   "eslintConfig": {
@@ -91,4 +93,4 @@
       "__DEV__": true
     }
   }
-}
+}
diff --git a/src/components/ThemeProvider.js b/src/components/ThemeProvider.js
@@ -113,7 +113,6 @@ const LightTheme = {
     ...PaperDefaultTheme.colors,
     ...NavigationDefaultTheme.colors,
     primary: "#3498db",
-    accent: "#f1c40f",
     info: "#555555",
   },
 };

diff --git a/src/components/account/managePlaylists/ManageMyPlaylists.js b/src/components/account/managePlaylists/ManageMyPlaylists.js
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import CrudList from "../../general/CrudList.js";
-import PlaylistForm, { defaultGen, getMySongs } from "./PlaylistForm";
+import PlaylistForm, { defaultGen } from "./PlaylistForm";
 import PlaylistItem from "../../playlists/PlaylistItem.js";
 import { MY_PLAYLISTS_URL, PLAYLISTS_URL } from "../../../util/services.js";
 import { savePlaylist, deletePlaylist } from "../../../util/requests";
@@ -19,7 +19,6 @@ export default function ManageMyPlaylists() {
         onSave: savePlaylist,
         onDelete: deletePlaylist,
         form: PlaylistForm,
-        extraFetcher: getMySongs,
       }}
     />
   );

diff --git a/src/components/account/menu/UserHeader.js b/src/components/account/menu/UserHeader.js
@@ -1,12 +1,14 @@
-import { Button, Subheading } from "react-native-paper";
+import { Button, Subheading, useTheme } from "react-native-paper";
 import { ShapedImage } from "../../general/ShapedImage.js";
 import { View } from "react-native";
-import styles from "../../styles.js";
 import PropTypes from "prop-types";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import styles from "../../styles.js";
 import { useSubLevels } from "../../../util/requests.js";
 
 export default function UserHeader({ navigation, user, onLogOut }) {
   const subLevels = useSubLevels();
+  const theme = useTheme();
 
   const accountLevel =
     subLevels?.find((sub) => sub.level === user?.sub_level)?.name ?? "";
@@ -24,9 +26,20 @@ export default function UserHeader({ navigation, user, onLogOut }) {
         <Subheading style={{ fontSize: 20, flexWrap: "wrap", maxHeight: 45 }}>
           {user?.name}
         </Subheading>
-        <Subheading style={{ fontSize: 15, flexWrap: "wrap", maxHeight: 45 }}>
-          {accountLevel} Account
-        </Subheading>
+        <View style={[styles.row, styles.containerCenter]}>
+          <Icon name="account" color={theme.colors.info} size={16} />
+          <Subheading
+            style={{
+              fontSize: 15,
+              flexWrap: "wrap",
+              maxHeight: 45,
+              flex: 1,
+              marginLeft: 10,
+            }}
+          >
+            {accountLevel} Account
+          </Subheading>
+        </View>
         <Button
           style={{
             alignItems: "flex-start",

diff --git a/src/components/account/subscriptions/ManageSubscription.js b/src/components/account/subscriptions/ManageSubscription.js
@@ -15,6 +15,7 @@ import { useSubLevels } from "../../../util/requests";
 import SubscribeDialog from "./SubscribeDialog";
 import styles from "../../styles";
 import Portal from "../../general/NavigationAwarePortal";
+import SubIcon from "../../general/SubIcon";
 
 const getRemainingDays = (str_date) => {
   if (!str_date) return null;
@@ -70,64 +71,45 @@ export default function ManageSubscription() {
           flexDirection: "row",
           alignItems: "center",
           justifyContent: "space-between",
+          marginBottom: 15,
         }}
       >
         <Subheading>{level} Account</Subheading>
         {remainingDays || remainingDays === 0 ? (
           <Text>{remainingDays} days remaining</Text>
         ) : null}
       </View>
-      <Headline style={{ marginTop: "10%" }}>Your wallet</Headline>
-      <View style={[styles.row, { justifyContent: "space-between" }]}>
-        <Caption
-          numberOfLines={1}
-          ellipsizeMode="middle"
-          style={{ textAlignVertical: "center", flex: 1 }}
-        >
-          {user?.wallet ?? ""}
-        </Caption>
-        <IconButton
-          icon="content-copy"
-          onPress={copyWallet}
-          color="gray"
-          style={{ marginVertical: 0 }}
-        />
-      </View>
-      <View style={[styles.row, { justifyContent: "space-between" }]}>
-        <Caption style={[styles.bold, { textAlignVertical: "center" }]}>
-          Current balance:
-        </Caption>
-        <Caption
-          numberOfLines={1}
-          style={{ flex: 1, textAlignVertical: "center" }}
-          ellipsizeMode="tail"
-        >
-          {` ${balance} `}
-        </Caption>
-        <Caption style={{ textAlignVertical: "center" }}>ETH</Caption>
-        <IconButton
-          icon="refresh"
-          onPress={_updateBalance}
-          color="gray"
-          style={{ marginVertical: 0 }}
-        />
-      </View>
-
+      <InfoButton
+        title="Your wallet"
+        text={user?.wallet}
+        icon="content-copy"
+        onPress={copyWallet}
+        ellipsizeMode="middle"
+      />
+      <InfoButton
+        title="Current balance"
+        text={balance}
+        icon="refresh"
+        right="ETH"
+        onPress={_updateBalance}
+        ellipsizeMode="tail"
+      />
       <Headline style={{ marginTop: "10%", marginBottom: "5%" }}>
         Change Subscription
       </Headline>
-      {subLevels
-        ?.filter((sub) => sub.level != user?.sub_level)
-        .map((sub, i) => (
+      {subLevels.map((sub, i) => (
+        <View key={i} style={[styles.row, styles.containerCenter]}>
+          <SubIcon subLevel={sub.level} style={{ marginRight: 15 }} />
           <Button
-            key={i}
             mode={"outlined"}
             onPress={subscribeTo(sub?.level)}
-            style={{ marginVertical: "2%" }}
+            style={{ marginVertical: 10, flex: 1, paddingVertical: 5 }}
+            disabled={sub?.level === user?.sub_level}
           >
-            <Text>{sub?.name}</Text>
+            {sub?.name}
           </Button>
-        ))}
+        </View>
+      ))}
 
       <Portal>
         <SubscribeDialog
@@ -139,8 +121,41 @@ export default function ManageSubscription() {
   );
 }
 
+const InfoButton = ({ title, text, icon, right, onPress, ellipsizeMode }) => (
+  <View
+    style={[styles.row, { justifyContent: "space-between", marginVertical: 2 }]}
+  >
+    <Caption style={[styles.bold, { textAlignVertical: "center" }]}>
+      {title}:
+    </Caption>
+    <Caption
+      numberOfLines={1}
+      style={{ flex: 1, textAlignVertical: "center" }}
+      ellipsizeMode={ellipsizeMode}
+    >
+      {` ${text ?? ""} `}
+    </Caption>
+    <Caption style={{ textAlignVertical: "center" }}>{right}</Caption>
+    <IconButton
+      icon={icon}
+      onPress={onPress}
+      color="gray"
+      style={{ marginVertical: 0 }}
+    />
+  </View>
+);
+
 ManageSubscription.propTypes = {
   navigation: PropTypes.shape({
     replace: PropTypes.func.isRequired,
   }).isRequired,
 };
+
+InfoButton.propTypes = {
+  title: PropTypes.string.isRequired,
+  text: PropTypes.string,
+  icon: PropTypes.string.isRequired,
+  right: PropTypes.string,
+  onPress: PropTypes.func.isRequired,
+  ellipsizeMode: PropTypes.string.isRequired,
+};