Skip to content

Commit

Permalink
Merge pull request #385 from AOSSIE-Org/feature/update-notification-s…
Browse files Browse the repository at this point in the history 
…creen

Enhance Notifications UI
  • Loading branch information
@Aarush-Acharya
Aarush-Acharya authored Oct 29, 2024
2 parents 6609d76 + 62fd9d1 commit 26b3293
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 43 deletions.
15 changes: 15 additions & 0 deletions lib/utils/extensions/datetime_extension.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,19 @@ extension DateTimeExtensions on DateTime {

return '$localDate $localTime';
}
String formatDateTime() {
final now = DateTime.now();
final difference = now.difference(this);

if (difference.inMinutes < 60) {
return '${difference.inMinutes} minutes ago';
} else if (difference.inHours < 24) {
return '${difference.inHours} hours ago';
} else if (difference.inDays < 7) {
return '${difference.inDays} days ago';
} else {
return '$year-$month-$day';
}
}
}

164 changes: 123 additions & 41 deletions lib/views/screens/notifications_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,14 @@ import 'package:get/get.dart';
import 'package:resonate/models/notification.dart';
import 'package:resonate/utils/enums/notification_type.dart';
import 'package:resonate/views/screens/profile_screen.dart';

import '../../utils/app_images.dart';

class NotificationsScreen extends StatelessWidget {
final List<NotificationModel> notifications = getMockNotifications();

NotificationsScreen({super.key});

@override
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
Expand All @@ -20,12 +19,12 @@ class NotificationsScreen extends StatelessWidget {
leading: IconButton(
icon: const Icon(
Icons.keyboard_arrow_down,
// color: Colors.black,
size: 36,
),
onPressed: () => Navigator.of(context).pop(),
),
title: const Text('Notifications'),
title: const Text('Notifications',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
actions: [
Padding(
padding: const EdgeInsets.only(right: 16.0, left: 16),
Expand All @@ -42,73 +41,156 @@ class NotificationsScreen extends StatelessWidget {
),
],
),
body: const Padding(
padding: EdgeInsets.all(16.0),
child: Text("Notification screen under development")
body: Padding(
padding: const EdgeInsets.all(16.0),
child: ListView.builder(
itemCount: notifications.length,
itemBuilder: (context, index) {
final notification = notifications[index];
return NotificationTile(notification: notification);
},
),
),
);
}

}
}

String formatDateTime(DateTime dateTime) {
final now = DateTime.now();
final difference = now.difference(dateTime);
class NotificationTile extends StatelessWidget {
final NotificationModel notification;

const NotificationTile({super.key, required this.notification});

@override
Widget build(BuildContext context) {
String message;
Icon icon;

if (difference.inMinutes < 60) {
return '${difference.inMinutes} minutes ago';
} else if (difference.inHours < 24) {
return '${difference.inHours} hours ago';
} else if (difference.inDays < 7) {
return '${difference.inDays} days ago';
} else {
return dateTime.toIso8601String();
switch (notification.notificationType) {
case NotificationType.tag:
message = notification.isTagInUpcomingRoom
? '${notification.initiatorUsername} tagged you in an upcoming room: ${notification.subject}'
: '${notification.initiatorUsername} tagged you in room: ${notification.subject}';
icon = const Icon(Icons.tag, color: Colors.green);
break;
case NotificationType.like:
message =
'${notification.initiatorUsername} liked your story: ${notification.subject}';
icon = const Icon(Icons.favorite, color: Colors.redAccent);
break;
case NotificationType.subscribe:
message =
'${notification.initiatorUsername} subscribed to your room: ${notification.subject}';
icon = const Icon(Icons.notifications, color: Colors.orangeAccent);
break;
case NotificationType.follow:
message = '${notification.initiatorUsername} started following you';
icon = const Icon(Icons.person_add, color: Colors.blueAccent);
break;
default:
message = 'You have a new notification';
icon = const Icon(Icons.notifications, color: Colors.grey);
}

return Container(
margin: const EdgeInsets.symmetric(vertical: 8),
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
spreadRadius: 2,
blurRadius: 5,
offset: const Offset(0, 3),
),
],
),
child: Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(notification.initiatorProfileImgUrl),
radius: 24,
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
message,
style: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 16,
),
),
],
),
),
icon,
],
),
);
}
}

List<NotificationModel> getMockNotifications() {
return [
NotificationModel(
notificationType: NotificationType.subscribe,
initiatorUsername: 'john_doe',
initiatorProfileImgUrl: 'https://example.com/profile1.jpg',
subject: 'Upcoming Room Name',
isTagInUpcomingRoom: false
initiatorProfileImgUrl:
'https://www.perfocal.com/blog/content/images/2021/01/Perfocal_17-11-2019_TYWFAQ_100_standard-3.jpg',
subject: 'Machine Learning 101',
isTagInUpcomingRoom: false,
),
NotificationModel(
notificationType: NotificationType.like,
initiatorUsername: 'jane_doe',
initiatorProfileImgUrl: 'https://example.com/profile2.jpg',
subject: 'Story Name',
isTagInUpcomingRoom: false
initiatorProfileImgUrl:
'https://www.perfocal.com/blog/content/images/2021/01/Perfocal_17-11-2019_TYWFAQ_100_standard-3.jpg',
subject: 'Deep Dive into AI',
isTagInUpcomingRoom: false,
),
NotificationModel(
notificationType: NotificationType.follow,
initiatorUsername: 'mark_smith',
initiatorProfileImgUrl: 'https://example.com/profile3.jpg',
subject: 'null',
isTagInUpcomingRoom: false
initiatorProfileImgUrl:
'https://www.perfocal.com/blog/content/images/2021/01/Perfocal_17-11-2019_TYWFAQ_100_standard-3.jpg',
subject: '',
isTagInUpcomingRoom: false,
),
NotificationModel(
notificationType: NotificationType.tag,
initiatorUsername: 'lucy_brown',
initiatorProfileImgUrl: 'https://example.com/profile4.jpg',
subject: 'Room Name',
isTagInUpcomingRoom: true
initiatorProfileImgUrl:
'https://www.perfocal.com/blog/content/images/2021/01/Perfocal_17-11-2019_TYWFAQ_100_standard-3.jpg',
subject: 'Upcoming Coding Room',
isTagInUpcomingRoom: true,
),
NotificationModel(
notificationType: NotificationType.tag,
initiatorUsername: 'lucy_brown',
initiatorProfileImgUrl: 'https://example.com/profile4.jpg',
subject: 'Upcoming Name',
isTagInUpcomingRoom: false
notificationType: NotificationType.subscribe,
initiatorUsername: 'anna_kim',
initiatorProfileImgUrl:
'https://www.perfocal.com/blog/content/images/2021/01/Perfocal_17-11-2019_TYWFAQ_100_standard-3.jpg',
subject: 'AI for Beginners',
isTagInUpcomingRoom: true,
),
NotificationModel(
notificationType: NotificationType.like,
initiatorUsername: 'alex_lee',
initiatorProfileImgUrl:
'https://www.perfocal.com/blog/content/images/2021/01/Perfocal_17-11-2019_TYWFAQ_100_standard-3.jpg',
subject: 'Quantum Computing Basics',
isTagInUpcomingRoom: false,
),
NotificationModel(
notificationType: NotificationType.follow,
initiatorUsername: 'peter_williams',
initiatorProfileImgUrl: 'https://example.com/profile5.jpg',
subject: 'null',
isTagInUpcomingRoom: false
initiatorUsername: 'sara_white',
initiatorProfileImgUrl:
'https://www.perfocal.com/blog/content/images/2021/01/Perfocal_17-11-2019_TYWFAQ_100_standard-3.jpg',
subject: '',
isTagInUpcomingRoom: false,
),
];
}
4 changes: 2 additions & 2 deletions lib/views/screens/story_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import 'package:get/get.dart';
import 'package:loading_indicator/loading_indicator.dart';
import 'package:resonate/controllers/explore_story_controller.dart';
import 'package:resonate/models/story.dart';
import 'package:resonate/utils/extensions/datetime_extension.dart';
import 'package:resonate/views/screens/add_chapter_screen.dart';
import 'package:resonate/views/screens/chapter_play_screen.dart';
import 'package:resonate/views/screens/notifications_screen.dart';
import 'package:resonate/views/widgets/chapter_list_tile.dart';
import 'package:resonate/views/widgets/like_button.dart';

Expand Down Expand Up @@ -221,7 +221,7 @@ class _StoryScreenState extends State<StoryScreen> {
),
const SizedBox(height: 40),
Text(
'Created ${formatDateTime(widget.story.creationDate)}',
'Created ${widget.story.creationDate.formatDateTime()}',
style: Theme.of(context)
.textTheme
.bodyLarge!
Expand Down

0 comments on commit 26b3293

Please sign in to comment.