feat(profile): implemented stylized profile page

fix(custom_iconbutton): fixed on null isSelected
SethCohen · Apr 3, 2023 · 83c0aa4 · 83c0aa4
1 parent 17b657f
commit 83c0aa4
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 32 deletions.
diff --git a/src/lib/common/widgets/custom_iconbutton.dart b/src/lib/common/widgets/custom_iconbutton.dart
@@ -3,12 +3,12 @@ import '../themes/comfy_theme.dart';
 
 class CustomIconButton extends StatefulWidget {
   final Icon icon;
-  final bool? isSelected;
+  final bool isSelected;
   final VoidCallback onPressed;
 
   const CustomIconButton({
     super.key,
-    this.isSelected,
+    this.isSelected = false,
     required this.icon,
     required this.onPressed,
   });
@@ -31,7 +31,7 @@ class _CustomIconButtonState extends State<CustomIconButton> {
         icon: widget.icon,
         color: _isHovering
             ? themeData.extension<CustomPalette>()!.hover
-            : widget.isSelected!
+            : widget.isSelected
                 ? themeData.extension<CustomPalette>()!.selected
                 : themeData.extension<CustomPalette>()!.unselected,
         onPressed: widget.onPressed,

diff --git a/src/lib/features/authentication/google_provider.dart b/src/lib/features/authentication/google_provider.dart
@@ -43,6 +43,18 @@ class GoogleSignInProvider extends ChangeNotifier {
     }
   }
 
+  Future<void> deleteUser() async {
+    try {
+      await _user!.delete();
+      await _googleSignIn.disconnect();
+      await _auth.signOut();
+      _user = null;
+      notifyListeners();
+    } catch (error) {
+      debugPrint(error.toString());
+    }
+  }
+
   Future<User?> signInWithGoogle(GoogleSignInAccount googleUser) async {
     final GoogleSignInAuthentication googleAuth =
         await googleUser.authentication;

diff --git a/src/lib/features/profile/profile_page.dart b/src/lib/features/profile/profile_page.dart
@@ -1,7 +1,10 @@
-import 'package:firebase_auth/firebase_auth.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import '../../common/themes/comfy_theme.dart';
+import '../../common/widgets/custom_divider.dart';
+import '../../common/widgets/custom_iconbutton.dart';
 import '../authentication/google_provider.dart';
+import 'package:intl/intl.dart';
 
 class ProfilePage extends StatefulWidget {
   const ProfilePage({Key? key}) : super(key: key);
@@ -11,26 +14,94 @@ class ProfilePage extends StatefulWidget {
 }
 
 class _ProfilePageState extends State<ProfilePage> {
-  // TODO restyle with Streaks on side
-
   @override
   Widget build(BuildContext context) {
-    return ListView(
-      children: [
-        TextButton(
-          onPressed: _signOut,
-          child: const Text(
-            'Sign Out',
-            textScaleFactor: 1.05,
-          ),
-        ),
-        TextButton(
-          onPressed: _deleteAccount,
-          child: const Text(
-            'Delete Account',
+    final currentUser = context.read<GoogleSignInProvider>().user!;
+
+    return Align(
+      alignment: Alignment.topCenter,
+      child: Card(
+        child: Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Row(
+            children: [
+              CircleAvatar(
+                radius: 50,
+                backgroundImage: NetworkImage(currentUser.photoURL!),
+              ),
+              const SizedBox(width: 20),
+              RichText(
+                text: TextSpan(
+                  text: currentUser.displayName!,
+                  style: Theme.of(context).textTheme.displaySmall!.copyWith(
+                      color:
+                          Theme.of(context).extension<CustomPalette>()!.text),
+                  children: [
+                    TextSpan(
+                      text:
+                          '\nJoined on ${DateFormat.yMMMd().format(currentUser.metadata.creationTime!)}',
+                      style: Theme.of(context).textTheme.titleSmall!.copyWith(
+                          color: Theme.of(context)
+                              .extension<CustomPalette>()!
+                              .unselected),
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(width: 20),
+              RoundedDivider(
+                color:
+                    Theme.of(context).extension<CustomPalette>()!.background!,
+                height: 100,
+                width: 8,
+              ),
+              const SizedBox(width: 20),
+              RichText(
+                text: TextSpan(
+                  text: 'Streak',
+                  style: Theme.of(context).textTheme.titleSmall!.copyWith(
+                      color: Theme.of(context)
+                          .extension<CustomPalette>()!
+                          .unselected),
+                  children: [
+                    TextSpan(
+                      // TODO get streak from database
+                      text: '\n0',
+                      style: Theme.of(context).textTheme.titleLarge!.copyWith(
+                          color: Theme.of(context)
+                              .extension<CustomPalette>()!
+                              .text),
+                    ),
+                  ],
+                ),
+              ),
+              const Spacer(
+                flex: 1,
+              ),
+              Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Tooltip(
+                    message: 'Sign Out',
+                    child: CustomIconButton(
+                      onPressed: _signOut,
+                      icon: const Icon(Icons.logout),
+                    ),
+                  ),
+                  Tooltip(
+                    message: 'Delete Account',
+                    child: CustomIconButton(
+                      onPressed: _deleteAccount,
+                      icon: const Icon(Icons.delete),
+                    ),
+                  ),
+                ],
+              ),
+            ],
           ),
         ),
-      ],
+      ),
     );
   }
 
@@ -44,7 +115,6 @@ class _ProfilePageState extends State<ProfilePage> {
     showDialog<String>(
         context: context,
         builder: (BuildContext context) => AlertDialog(
-              backgroundColor: Colors.grey.shade900,
               title: const Text('Are You Sure?'),
               content: const Text(
                   'You\'re trying to delete your account.\nYour account and data will be deleted immediately. This action is not reversible.\nPlease hold YES to confirm.'),
@@ -55,18 +125,10 @@ class _ProfilePageState extends State<ProfilePage> {
                 ),
                 TextButton(
                   onLongPress: () {
-                    FirebaseAuth.instance.currentUser!.delete();
-                    final provider = Provider.of<GoogleSignInProvider>(context,
-                        listen: false);
-                    provider.googleLogout();
-                    Navigator.pop(context);
-
-                    const snackBar = SnackBar(
-                      content: Text('Account Deleted'),
-                    );
+                    context.read<GoogleSignInProvider>().deleteUser();
+                    const snackBar = SnackBar(content: Text('Account Deleted'));
 
                     ScaffoldMessenger.of(context).showSnackBar(snackBar);
-
                     Navigator.pop(context);
                   },
                   onPressed: () {},

diff --git a/src/pubspec.lock b/src/pubspec.lock
@@ -254,7 +254,7 @@ packages:
     source: hosted
     version: "4.0.2"
   intl:
-    dependency: "direct overridden"
+    dependency: "direct main"
     description:
       name: intl
       sha256: a3715e3bc90294e971cb7dc063fbf3cd9ee0ebf8604ffeafabd9e6f16abbdbe6

diff --git a/src/pubspec.yaml b/src/pubspec.yaml
@@ -22,6 +22,7 @@ dependencies:
   firebase_core: ^2.9.0
   firebase_auth: ^4.4.0
   cloud_firestore: ^4.5.0
+  intl: ^0.18.0
 
 dependency_overrides:
   intl: ^0.18.0