allow users change pfp from library

utmgdsc · Dec 1, 2023 · d6bad8f · d6bad8f
1 parent 5ecfd82
commit d6bad8f
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 43 deletions.
diff --git a/frontend/app.json b/frontend/app.json
@@ -2,6 +2,14 @@
   "expo": {
     "name": "CarbonTrack",
     "slug": "CarbonTrack",
+    "plugins": [
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "The app accesses your photos to let you share them with your friends."
+        }
+      ]
+    ],
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",

diff --git a/frontend/assets/colorConstants.tsx b/frontend/assets/colorConstants.tsx
@@ -7,6 +7,7 @@ const Colors = {
   BLACK: '000',
   DARKLIMEGREEN: '#4B8552',
   GREY: '#ccc',
+  LIGHTGREY: 'ddd',
   FILLGREEN: '#7CA982',
   ERROR: 'red',
   TRANSGREEN: '#366959',

diff --git a/frontend/package.json b/frontend/package.json
@@ -27,6 +27,7 @@
     "events": "^3.3.0",
     "expo": "~49.0.12",
     "expo-font": "~11.4.0",
+    "expo-image-picker": "~14.3.2",
     "expo-status-bar": "~1.6.0",
     "firebase": "^10.5.2",
     "formik": "^2.4.5",
@@ -38,6 +39,7 @@
     "react-native-circular-progress-indicator": "^4.4.2",
     "react-native-elements": "^3.4.3",
     "react-native-gesture-handler": "^2.13.3",
+    "react-native-image-picker": "^7.0.3",
     "react-native-paper": "^5.11.1",
     "react-native-reanimated": "^3.5.4",
     "react-native-safe-area-context": "^4.6.3",

diff --git a/frontend/src/APIs/FLASK_API.tsx b/frontend/src/APIs/FLASK_API.tsx
@@ -1,6 +1,6 @@
 import axios from "axios";
 import firebaseService from "../utilities/firebase";
-const FLASK_LOCAL_ADDRESS: string = "http://100.112.45.130:6050";
+const FLASK_LOCAL_ADDRESS: string = "http://192.168.2.12:6050";
 
 // Function to get the Firebase authentication token
 const getFirebaseAuthToken = async (): Promise<string | null> => {

diff --git a/frontend/src/components/types.tsx b/frontend/src/components/types.tsx
@@ -27,6 +27,5 @@ export interface WidgetBoxProps {
 }
 
 export interface profileWidgetBoxProps {
-  photoURL: string;
   user: User;
 }
diff --git a/frontend/src/screens/dashboard.tsx b/frontend/src/screens/dashboard.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
 import { useFonts } from 'expo-font';
 import Colors from '../../assets/colorConstants';
 import ProfileWidgetBox from '../widgets/profileWidget';
@@ -22,7 +22,6 @@ export default function DashBoardScreen(): JSX.Element {
   const [transportationEntry, setTransportationEntry] = useState<TransportationEntry>();
   const [foodEntry, setFoodEntry] = useState<FoodEntry>();
   const [energyEntry, setEnergyEntry] = useState<EnergyEntry>();
-  const [photoURL] = useState<string>("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Default_pfp.svg/2048px-Default_pfp.svg.png");
 
   const navigation = useNavigation<StackNavigation>();
 
@@ -59,24 +58,16 @@ export default function DashBoardScreen(): JSX.Element {
   }
 
   return (
-    <View style={styles.container}>
-      <View style={styles.headerContainer}>
-        <View style={styles.headerBox}>
-          <Text style={styles.header}>Dashboard</Text>
-        </View>
-      </View>
-
+    <ScrollView style={styles.container}>
       <View style={styles.profileWidgetContainer}>
         <View style={styles.widgetBoarder}>
             <ProfileWidgetBox
-            photoURL={photoURL}
             user={user}
             />
           </View>
       </View>
-
+      <View style={styles.widgetRow1}>
       <View style={styles.widgetContainer}>
-
         <View style={styles.widgetBoarder}>
           <TouchableOpacity
             onPress={() => {
@@ -97,8 +88,10 @@ export default function DashBoardScreen(): JSX.Element {
           </TouchableOpacity>
         </View>
       </View>
-      <View style={styles.widgetContainer}>
+      </View>
+
 
+      <View style={styles.widgetContainer}>
         <View style={styles.widgetBoarder}>
           <TouchableOpacity
             onPress={() => {
@@ -110,34 +103,26 @@ export default function DashBoardScreen(): JSX.Element {
         </View>
 
       </View>
-    </View>
+    </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: 'center',
     backgroundColor: Colors.WHITE,
-    flex: 1,
-    justifyContent: 'center',
-  },
-  header: {
-    fontSize: 24,
-  },
-  headerBox: {
-    backgroundColor: Colors.WHITE,
-  },
-  headerContainer: {
-    alignItems: 'center',
+    flexGrow: 1,
   },
   profileWidgetContainer: {
     padding: 10,
     flexDirection: 'column',
+    alignItems: 'center',
   },
   widgetContainer: {
-    padding: 10,
     flexDirection: 'row',
   },
+  widgetRow1:{
+    alignItems: 'center',
+  },
   widgetBoarder: {
     padding: 10,
   },

diff --git a/frontend/src/screens/signup.tsx b/frontend/src/screens/signup.tsx
@@ -65,7 +65,7 @@ export default function SignUp(): JSX.Element {
             console.warn('User was not created: ' + res);
           } else {
             console.log('User was created succesfully:', email);
-            navigation.navigate('DashBoard');
+            navigation.navigate('MainApp', { screen: 'DashBoard' });
           }
         });
       }).catch((err) => {

diff --git a/frontend/src/widgets/profileWidget.tsx b/frontend/src/widgets/profileWidget.tsx
@@ -1,28 +1,76 @@
-import React from 'react';
-import { View, Text, Image, StyleSheet } from 'react-native';
+import React, { useState } from 'react';
+import { View, Text, Image, StyleSheet, TouchableOpacity, Alert } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
 import Colors from '../../assets/colorConstants';
 import { type profileWidgetBoxProps } from '../components/types';
 import { useFonts } from 'expo-font';
 import { getUserLevel } from '../models/User';
 
-const ProfileWidgetBox: React.FC<profileWidgetBoxProps> = ({ photoURL, user }) => {
+interface CustomImagePickerSuccessResult {
+  uri?: string;
+}
+
+function isImagePickerSuccessResult(result: any): result is CustomImagePickerSuccessResult {
+  return Boolean(result) && typeof result.uri === 'string';
+}
+
+const defaultProfilePicture = { uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Default_pfp.svg/2048px-Default_pfp.svg.png' }
+
+
+const ProfileWidgetBox: React.FC<profileWidgetBoxProps> = ({ user }) => {
   const [loaded] = useFonts({
     Montserrat: require('../../assets/fonts/MontserratThinRegular.ttf'),
     Josefin: require('../../assets/fonts/JosefinSansThinRegular.ttf'),
   });
 
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+
   if (!loaded) {
     return <></>;
   }
 
+  const handleEditProfilePicture = (): void => {
+    void ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 1,
+    }).then((result) => {
+      if (!result.canceled && isImagePickerSuccessResult(result)) {
+        const uri: string | undefined = result.uri;
+        setSelectedImage(uri ?? null);
+      }
+    });
+  };
+
+  const promptChangeProfilePicture = (): void => {
+    Alert.alert(
+      'Change Profile Picture',
+      'Do you want to change your profile picture?',
+      [
+        {
+          text: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          text: 'OK',
+          onPress: handleEditProfilePicture,
+        },
+      ],
+      { cancelable: false }
+    );
+  };
+
   return (
     <View style={styles.boxContainer}>
-        <Image source={{ uri: photoURL }} style={styles.profilePicture} />
-        <View>
-          <Text style={styles.name}> {user.full_name} </Text>
-          <Text style={styles.level}> Email: {user.email} </Text>
-          <Text style={styles.level}> Level: {getUserLevel(user)} </Text>
-        </View>
+      <TouchableOpacity onPress={promptChangeProfilePicture}>
+        <Image source={(selectedImage != null) ? { uri: String(selectedImage) } : defaultProfilePicture} style={styles.profilePicture}/>
+      </TouchableOpacity>
+      <View>
+        <Text style={styles.name}> {user.full_name} </Text>
+        <Text style={styles.level}> Email: {user.email} </Text>
+        <Text style={styles.level}> Level: {getUserLevel(user)} </Text>
+      </View>
     </View>
   );
 };
@@ -37,11 +85,11 @@ const styles = StyleSheet.create({
     width: 300,
     flexDirection: 'column',
   },
-  level:{
+  level: {
     color: Colors.WHITE,
     fontSize: 16,
     flex: 1,
-    },
+  },
   name: {
     flex: 1,
     fontSize: 16,
@@ -54,8 +102,8 @@ const styles = StyleSheet.create({
     height: 50,
     borderRadius: 25,
     alignItems: 'flex-start',
-    top: '15%',
-
+    top: '100%',
+    
   },
 });