Merge pull request #73 from COS301-SE-2024/feature/profile-page

merge 'Feature/profile page'

frontend/.gitignore

@@ -37,6 +37,7 @@ yarn-error.*
 
 # typescript
 *.tsbuildinfo
+tsconfig.json
 
 # Ruby
 .direnv

frontend/app/components/BioSection.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const BioSection = ({ content }) => {
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>Bio</Text>
+            <Text style={styles.content}>{content}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        marginBottom: 20,
+        width: 300,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: '600',
+        paddingBottom: 10,
+    },
+    content: {
+        fontSize: 14,
+        fontWeight: '400',
+    },
+    button: {
+        width: 155,
+        height: 37,
+        backgroundColor: 'rgba(158, 171, 184, 1)',
+        borderRadius: 18.5,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    buttonText: {
+        color: 'black',
+        fontWeight: '600',
+    },
+});
+
+export default BioSection;

frontend/app/components/EditDialog.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet, Modal } from 'react-native';
+
+const EditDialog = ({ title = 'Edit', initialText = '', visible = false, onClose = () => {}, onSave = () => {}, value = '', isBio = false }) => {
+    const [text, setText] = useState(initialText);
+
+    useEffect(() => {
+        setText(initialText);
+    }, [initialText]);
+
+    return (
+        <Modal
+            transparent={true}
+            animationType="slide"
+            visible={visible}
+            onRequestClose={onClose}
+        >
+            <View style={styles.modalContainer}>
+                <View style={styles.dialogContainer}>
+                    <Text style={styles.dialogTitle}>{title}</Text>
+                    <TextInput
+                        style={isBio ? styles.bioInput : styles.defaultInput}
+                        multiline={true}
+                        numberOfLines={3}
+                        value={text}
+                        onChangeText={setText}
+                    />
+                    <View style={styles.dialogButtons}>
+                        <TouchableOpacity onPress={onClose} style={styles.dialogButton}>
+                            <Text>Cancel</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            onPress={title === "Add Link" 
+                            ? () => {
+                                onSave(text);
+                                setText('');
+                              } 
+                            : () => onSave(text, value)}
+                            style={styles.dialogButton}
+                        >
+                            <Text>Save</Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    modalContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    dialogContainer: {
+        width: '80%',
+        padding: 20,
+        backgroundColor: 'white',
+        borderRadius: 10,
+        alignItems: 'center',
+    },
+    dialogTitle: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        marginBottom: 10,
+    },
+    defaultInput: {
+        width: '75%',
+        height: 38,
+        borderColor: 'gray',
+        borderWidth: 1,
+        borderRadius: 5,
+        padding: 10,
+        textAlignVertical: 'top',
+    },
+    bioInput: {
+        width: '100%',
+        height: 100,
+        borderColor: 'gray',
+        borderWidth: 1,
+        borderRadius: 5,
+        padding: 10,
+        textAlignVertical: 'top',
+    },
+    dialogButtons: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginTop: 20,
+    },
+    dialogButton: {
+        marginHorizontal: 10,
+        padding: 10,
+    },
+});
+
+export default EditDialog;
+

frontend/app/components/EditGenreBubble.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+const EditGenreBubble = ({ text, onPress }) => {
+    return (
+        <TouchableOpacity style={styles.container} onPress={onPress}>
+            <Text style={styles.text}>{text}</Text>
+            <Ionicons name="close" size={16} color="black" style={styles.icon} />
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginRight: 12,
+        marginBottom: 10,
+        paddingHorizontal: 10,
+        paddingVertical: 8,
+        backgroundColor: 'rgba(232, 235, 242, 1)',
+        borderRadius: 10,
+    },
+    text: {
+        color: 'black',
+        fontWeight: '500',
+        fontSize: 14,
+    },
+    icon: {
+        marginLeft: 3,
+    },
+});
+
+export default EditGenreBubble;
+

frontend/app/components/FavoriteSong.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
+import { MaterialIcons } from "@expo/vector-icons";
+
+const FavoriteSongs = ({ songTitle, artist, duration, albumArt='', toEdit=false, onPress }) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.playingContainer}>
+        <Image source={{ uri: albumArt }} style={styles.albumArt} />
+        <View style={styles.detailsContainer}>
+          <Text style={styles.songTitle}>{songTitle}</Text>
+          <Text style={styles.artist}>{artist}</Text>
+        </View>
+        <Text style={styles.duration}>{duration}</Text>
+        <TouchableOpacity onPress={onPress} style={styles.icon}>
+          <MaterialIcons
+            name={toEdit ? "close" : "more-horiz"}
+            size={24}
+            color="black"
+          />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    // marginBottom: 10,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "700",
+    paddingBottom: 10,
+  },
+  playingContainer: {
+    width: 330,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 0,
+    marginTop: 10, // Adjusted marginTop for space
+    paddingBottom: 10, // Added paddingVertical for space
+  },
+  albumArt: {
+    width: 57,
+    height: 57,
+    borderRadius: 12,
+    backgroundColor: "rgba(158, 171, 184, 1)",
+    marginRight: 16,
+  },
+  detailsContainer: {
+    flex: 1,
+  },
+  songTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  artist: {
+    fontSize: 12,
+    fontWeight: "400",
+    marginTop: 5,
+  },
+  duration: {
+    marginLeft:10,
+  },
+  icon: {
+    marginLeft: 30,
+  },
+});
+
+export default FavoriteSongs;

frontend/app/components/GenreBubble.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const GenreBubble = ({ text }) => {
+    return (
+        <View style={styles.container}>
+            <Text style={styles.text}>{text}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    text: {
+        color: 'black',
+        fontWeight: '500',
+        fontSize: 14,
+    },
+    container: {
+        marginRight: 12,
+        marginBottom: 10,
+        paddingHorizontal: 14,
+        paddingVertical: 8,
+        backgroundColor: 'rgba(232, 235, 242, 1)',
+        borderRadius: 10,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});
+
+export default GenreBubble;

frontend/app/components/GenreList.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import GenreBubble from './GenreBubble';
+
+const GenreList = ({ items }) => {
+    return (
+        <View style={styles.wrapper}>
+            <Text style={styles.title}>Favorite Genres</Text>
+            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                {items.map((item, index) => (
+                    <GenreBubble key={index} text={item} />
+                ))}
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    wrapper: {
+        marginBottom: 20,
+    },
+
+    title: {
+        fontSize: 20,
+        fontWeight: '600',
+        paddingBottom: 10,
+    },
+});
+
+export default GenreList;