Implemented cleaner way of grouping image

This commit is contained in:
Alex Tran 2022-02-13 11:42:40 -06:00
parent 7f477ad6d3
commit f7f4e9c710
3 changed files with 53 additions and 106 deletions

View file

@ -1,91 +1,22 @@
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/modules/home/models/get_all_asset_respose.model.dart';
import 'package:immich_mobile/modules/home/services/asset.service.dart';
import 'package:immich_mobile/shared/models/immich_asset.model.dart';
import 'package:immich_mobile/shared/services/device_info.service.dart';
import 'package:intl/intl.dart';
import 'package:collection/collection.dart';
import 'package:intl/intl.dart';
class AssetNotifier extends StateNotifier<List<ImmichAssetGroupByDate>> {
class AssetNotifier extends StateNotifier<List<ImmichAsset>> {
final AssetService _assetService = AssetService();
final DeviceInfoService _deviceInfoService = DeviceInfoService();
AssetNotifier() : super([]);
late String? nextPageKey = "";
bool isFetching = false;
getAllAsset() async {
List<ImmichAsset>? allAssets = await _assetService.getAllAsset();
// Get All assets
getAllAssets() async {
GetAllAssetResponse? res = await _assetService.getAllAsset();
nextPageKey = res?.nextPageKey;
if (res != null) {
for (var assets in res.data) {
state = [...state, assets];
}
}
}
// Get Asset From The Past
getOlderAsset() async {
if (nextPageKey != null && !isFetching) {
isFetching = true;
GetAllAssetResponse? res = await _assetService.getOlderAsset(nextPageKey);
if (res != null) {
nextPageKey = res.nextPageKey;
List<ImmichAssetGroupByDate> previousState = state;
List<ImmichAssetGroupByDate> currentState = [];
for (var assets in res.data) {
currentState = [...currentState, assets];
}
if (previousState.last.date == currentState.first.date) {
previousState.last.assets = [...previousState.last.assets, ...currentState.first.assets];
state = [...previousState, ...currentState.sublist(1)];
} else {
state = [...previousState, ...currentState];
}
}
isFetching = false;
}
}
// Get newer asset from the current time
getNewAsset() async {
if (state.isNotEmpty) {
var latestGroup = state.first;
// Sort the last asset group and put the lastest asset in front.
latestGroup.assets.sortByCompare<DateTime>((e) => DateTime.parse(e.createdAt), (a, b) => b.compareTo(a));
var latestAsset = latestGroup.assets.first;
var formatDateTemplate = 'y-MM-dd';
var latestAssetDateText = DateFormat(formatDateTemplate).format(DateTime.parse(latestAsset.createdAt));
List<ImmichAsset> newAssets = await _assetService.getNewAsset(latestAsset.createdAt);
if (newAssets.isEmpty) {
return;
}
// Grouping by data
var groupByDateList = groupBy<ImmichAsset, String>(
newAssets, (asset) => DateFormat(formatDateTemplate).format(DateTime.parse(asset.createdAt)));
groupByDateList.forEach((groupDateInFormattedText, assets) {
if (groupDateInFormattedText != latestAssetDateText) {
ImmichAssetGroupByDate newGroup = ImmichAssetGroupByDate(assets: assets, date: groupDateInFormattedText);
state = [newGroup, ...state];
} else {
latestGroup.assets.insertAll(0, assets);
state = [latestGroup, ...state.sublist(1)];
}
});
if (allAssets != null) {
allAssets.sortByCompare<DateTime>((e) => DateTime.parse(e.createdAt), (a, b) => b.compareTo(a));
state = allAssets;
}
}
@ -105,6 +36,12 @@ class AssetNotifier extends StateNotifier<List<ImmichAssetGroupByDate>> {
final currentLocalPageProvider = StateProvider<int>((ref) => 0);
final assetProvider = StateNotifierProvider<AssetNotifier, List<ImmichAssetGroupByDate>>((ref) {
final assetProvider = StateNotifierProvider<AssetNotifier, List<ImmichAsset>>((ref) {
return AssetNotifier();
});
final assetGroupByDateTimeProvider = StateProvider((ref) {
var assetGroup = ref.watch(assetProvider);
return assetGroup.groupListsBy((element) => DateFormat('y-MM-dd').format(DateTime.parse(element.createdAt)));
});

View file

@ -9,7 +9,20 @@ import 'package:immich_mobile/shared/services/network.service.dart';
class AssetService {
final NetworkService _networkService = NetworkService();
Future<GetAllAssetResponse?> getAllAsset() async {
Future<List<ImmichAsset>?> getAllAsset() async {
var res = await _networkService.getRequest(url: "asset/");
try {
List<dynamic> decodedData = jsonDecode(res.toString());
List<ImmichAsset> result = List.from(decodedData.map((a) => ImmichAsset.fromMap(a)));
return result;
} catch (e) {
debugPrint("Error getAllAsset ${e.toString()}");
}
return null;
}
Future<GetAllAssetResponse?> getAllAssetWithPagination() async {
var res = await _networkService.getRequest(url: "asset/all");
try {
Map<String, dynamic> decodedData = jsonDecode(res.toString());

View file

@ -10,7 +10,6 @@ import 'package:immich_mobile/modules/home/ui/image_grid.dart';
import 'package:immich_mobile/modules/home/ui/immich_sliver_appbar.dart';
import 'package:immich_mobile/modules/home/ui/monthly_title_text.dart';
import 'package:immich_mobile/modules/home/ui/profile_drawer.dart';
import 'package:immich_mobile/modules/home/models/get_all_asset_respose.model.dart';
import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
import 'package:sliver_tools/sliver_tools.dart';
@ -20,7 +19,8 @@ class HomePage extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
ScrollController _scrollController = useScrollController();
List<ImmichAssetGroupByDate> _assetGroup = ref.watch(assetProvider);
// List<ImmichAssetGroupByDate> _assetGroup = ref.watch(assetProvider);
var assetGroupByDateTime = ref.watch(assetGroupByDateTimeProvider);
List<Widget> _imageGridGroup = [];
var isMultiSelectEnable = ref.watch(homePageStateProvider).isMultiSelectEnable;
var homePageState = ref.watch(homePageStateProvider);
@ -29,12 +29,14 @@ class HomePage extends HookConsumerWidget {
var endOfPage = _scrollController.position.maxScrollExtent;
if (_scrollController.offset >= endOfPage - (endOfPage * 0.1) && !_scrollController.position.outOfRange) {
ref.read(assetProvider.notifier).getOlderAsset();
// ref.read(assetProvider.notifier).getOlderAsset();
}
}
useEffect(() {
ref.read(assetProvider.notifier).getAllAssets();
ref.read(assetProvider.notifier).getAllAsset();
// ref.read(assetProvider.notifier).getAllAssetsWithPagination();
_scrollController.addListener(_scrollControllerCallback);
return () {
@ -43,53 +45,48 @@ class HomePage extends HookConsumerWidget {
}, []);
onPopBackFromBackupPage() {
ref.read(assetProvider.notifier).getNewAsset();
// ref.read(assetProvider.notifier).getNewAsset();
// Remove and force getting new widget again if there is not many widget on screen.
// Otherwise do nothing.
if (_imageGridGroup.isNotEmpty && _imageGridGroup.length < 20) {
ref.read(assetProvider.notifier).getOlderAsset();
// ref.read(assetProvider.notifier).getOlderAsset();
} else if (_imageGridGroup.isEmpty) {
ref.read(assetProvider.notifier).getAllAssets();
// ref.read(assetProvider.notifier).getAllAssetsWithPagination();
}
}
Widget _buildBody() {
if (_assetGroup.isNotEmpty) {
String lastGroupDate = _assetGroup[0].date;
if (assetGroupByDateTime.isNotEmpty) {
int? lastMonth;
for (var group in _assetGroup) {
var dateTitle = group.date;
var assetGroup = group.assets;
assetGroupByDateTime.forEach((dateGroup, immichAssetList) {
DateTime parseDateGroup = DateTime.parse(dateGroup);
int currentMonth = parseDateGroup.month;
int? currentMonth = DateTime.tryParse(dateTitle)?.month;
int? previousMonth = DateTime.tryParse(lastGroupDate)?.month;
// Add Monthly Title Group if started at the beginning of the month
if (currentMonth != null && previousMonth != null) {
if ((currentMonth - previousMonth) != 0) {
if (lastMonth != null) {
if (currentMonth - lastMonth! != 0) {
_imageGridGroup.add(
MonthlyTitleText(isoDate: dateTitle),
MonthlyTitleText(
isoDate: dateGroup,
),
);
}
}
// Add Daily Title Group
_imageGridGroup.add(
DailyTitleText(
isoDate: dateTitle,
assetGroup: assetGroup,
isoDate: dateGroup,
assetGroup: immichAssetList,
),
);
// Add Image Group
_imageGridGroup.add(
ImageGrid(assetGroup: assetGroup),
ImageGrid(assetGroup: immichAssetList),
);
//
lastGroupDate = dateTitle;
}
lastMonth = currentMonth;
});
}
return SafeArea(