talksik/fl-query
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: move devtools to separate library

Browse Source
This commit is contained in:
Kingkor Roy Tirtho
2023-06-23 23:00:10 +06:00
parent e0c5282e19
commit 5bb89ed1fb
32 changed files with 331 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/fl_query_devtools/lib/src/devtools.dart
+95
View File
@@ -0,0 +1,95 @@
import 'package:fl_query_devtools/src/widgets/devtools_root.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class FlQueryDevtools extends StatefulWidget {
final Widget? child;
const FlQueryDevtools({
super.key,
this.child,
});
@override
State<FlQueryDevtools> createState() => _FlQueryDevtoolsState();
}
class _FlQueryDevtoolsState extends State<FlQueryDevtools> {
bool _showDevtools = false;
@override
Widget build(BuildContext context) {
if (kReleaseMode) {
return SizedBox.shrink(child: widget.child);
}
return Navigator(
onPopPage: (route, result) {
return true;
},
pages: [
MaterialPage(
child: Scaffold(
body: Stack(
children: [
if (widget.child != null) widget.child!,
if (_showDevtools) ...[
Positioned(
child: GestureDetector(
onTap: () {
setState(() {
_showDevtools = false;
});
},
child: const SizedBox.expand(
child: ColoredBox(
color: Colors.black38,
),
),
),
),
Positioned(
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
height: MediaQuery.of(context).size.height * 0.7,
width: double.infinity,
margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(8.0),
),
child: DevtoolsRoot(
onClose: () {
setState(() {
_showDevtools = false;
});
},
),
),
),
),
]
],
),
floatingActionButtonLocation:
FloatingActionButtonLocation.startFloat,
floatingActionButton: AnimatedScale(
duration: const Duration(milliseconds: 100),
scale: _showDevtools ? 0 : 1,
child: FloatingActionButton.extended(
onPressed: () {
setState(() {
_showDevtools = !_showDevtools;
});
},
label: const Text("Fl-Query Devtools"),
icon: const Icon(Icons.search_rounded),
),
),
),
),
],
);
}
}
packages/fl_query_devtools/lib/src/helpers/jsonify_value.dart
+29
View File
@@ -0,0 +1,29 @@
import 'dart:convert';
import 'package:fl_query/fl_query.dart';
Object? jsonifyValue(data, JsonConfig? jsonConfig) {
switch (data.runtimeType) {
case String:
case int:
case double:
case bool:
case Null:
return data;
case Iterable:
case Map:
try {
jsonEncode(data);
return data is Iterable ? data.toList() : data;
} catch (e) {
return "[Parsing Error]: ${data.runtimeType} contains unsupported non-primitive and non-jsonEncodable value";
}
default:
if (jsonConfig == null) {
return "$data"
"\nProvide `jsonConfig: JsonConfig(...)` to enable Json view for data";
} else {
return (jsonConfig as dynamic).toJson(data);
}
}
}
packages/fl_query_devtools/lib/src/helpers/primitvify_value.dart
+22
View File
@@ -0,0 +1,22 @@
import 'dart:convert';
Object? primitivifyValue(data) {
switch (data.runtimeType) {
case String:
case int:
case double:
case bool:
case Null:
return data;
case Iterable:
case Map:
try {
jsonEncode(data);
return data;
} catch (e) {
return "[Parsing Error]: ${data.runtimeType} contains unsupported non-primitive and non-jsonEncodable value";
}
default:
return data.toString();
}
}
packages/fl_query_devtools/lib/src/widgets/devtools_root.dart
+46
View File
@@ -0,0 +1,46 @@
import 'package:fl_query_devtools/src/widgets/tabs/infinite_query_tab.dart';
import 'package:fl_query_devtools/src/widgets/tabs/mutation_tab.dart';
import 'package:fl_query_devtools/src/widgets/tabs/query_tab.dart';
import 'package:flutter/material.dart';
class DevtoolsRoot extends StatefulWidget {
final VoidCallback? onClose;
const DevtoolsRoot({super.key, this.onClose});
@override
State<DevtoolsRoot> createState() => _DevtoolsRootState();
}
class _DevtoolsRootState extends State<DevtoolsRoot> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: const Text('FlQuery Devtools'),
actions: [
IconButton(
onPressed: widget.onClose,
icon: const Icon(Icons.close),
),
],
bottom: const TabBar(
tabs: [
Tab(text: 'Queries'),
Tab(text: 'Infinite Queries'),
Tab(text: 'Mutations'),
],
),
),
body: const TabBarView(
children: [
QueryTab(),
InfiniteQueryTab(),
MutationTab(),
],
),
),
);
}
}
packages/fl_query_devtools/lib/src/widgets/explorers/explorer_view.dart
+42
View File
@@ -0,0 +1,42 @@
import 'package:flutter/material.dart';
import 'package:json_view/json_view.dart' hide JsonConfig;
class ExplorerView extends StatefulWidget {
final String title;
final Object data;
final VoidCallback? onClose;
const ExplorerView({
super.key,
required this.title,
required this.data,
this.onClose,
});
@override
State<ExplorerView> createState() => _ExplorerViewState();
}
class _ExplorerViewState extends State<ExplorerView> {
@override
Widget build(BuildContext context) {
return Card(
color: Theme.of(context).colorScheme.surface,
child: Column(
children: [
Row(
children: [
IconButton(
icon: const Icon(Icons.close),
onPressed: widget.onClose,
),
Text(widget.title),
],
),
const Divider(),
Expanded(
child: JsonView(json: widget.data),
),
],
));
}
}
packages/fl_query_devtools/lib/src/widgets/query_tile.dart
+43
View File
@@ -0,0 +1,43 @@
import 'package:flutter/material.dart';
class QueryTile extends StatelessWidget {
final String title;
final bool isLoading;
final bool hasError;
final VoidCallback? onTap;
const QueryTile({
super.key,
required this.title,
required this.isLoading,
required this.hasError,
this.onTap,
});
@override
Widget build(BuildContext context) {
return ListTile(
onTap: onTap,
leading: AnimatedSwitcher(
duration: const Duration(milliseconds: 100),
child: isLoading
? const CircularProgressIndicator()
: hasError
? Tooltip(
message: "'$title' has Errors",
child: const Icon(
Icons.error,
color: Colors.red,
),
)
: Tooltip(
message: "'$title' has fetched/mutated data successfully",
child: const Icon(
Icons.check,
color: Colors.green,
),
),
),
title: Text(title),
);
}
}
packages/fl_query_devtools/lib/src/widgets/tabs/infinite_query_tab.dart
+103
View File
@@ -0,0 +1,103 @@
import 'package:fl_query/fl_query.dart';
import 'package:fl_query_devtools/src/helpers/jsonify_value.dart';
import 'package:fl_query_devtools/src/helpers/primitvify_value.dart';
import 'package:fl_query_devtools/src/widgets/explorers/explorer_view.dart';
import 'package:fl_query_devtools/src/widgets/query_tile.dart';
import 'package:flutter/material.dart';
class InfiniteQueryTab extends StatefulWidget {
const InfiniteQueryTab({super.key});
@override
State<InfiniteQueryTab> createState() => _InfiniteQueryTabState();
}
class _InfiniteQueryTabState extends State<InfiniteQueryTab> {
String? _selectedQueryKey;
@override
Widget build(BuildContext context) {
final client = QueryClient.of(context);
return LayoutBuilder(builder: (context, constrains) {
return Row(
children: [
Expanded(
child: ListView.builder(
itemCount: client.cache.infiniteQueries.length,
itemBuilder: (context, index) {
final infiniteQuery =
client.cache.infiniteQueries.elementAt(index);
return InfiniteQueryListenable(
infiniteQuery.key,
builder: (context, query) {
if (query == null) {
return const SizedBox.shrink();
}
return QueryTile(
title: query.key,
isLoading: query.isLoadingPage,
hasError: query.hasErrors,
onTap: () {
setState(() {
_selectedQueryKey = query.key;
});
},
);
},
);
},
),
),
AnimatedSize(
duration: const Duration(milliseconds: 200),
curve: Curves.bounceInOut,
child: Builder(builder: (context) {
return SizedBox(
width: _selectedQueryKey == null
? 0
: constrains.biggest.width * 0.5,
child: SizedBox.expand(
child: InfiniteQueryListenable(
_selectedQueryKey ?? '',
builder: (context, query) {
if (query == null) {
return SizedBox.shrink();
}
return ExplorerView(
title: query.key,
data: {
'pages': query.state.pages.map((page) {
return {
"pageParam": primitivifyValue(page.page),
"data": jsonifyValue(page.data, query.jsonConfig),
"errors": primitivifyValue(page.error),
"stale": page.isStale,
"updatedAt": page.updatedAt.toString(),
};
}).toList(),
'isLoadingPage': query.isLoadingPage,
'isRefreshingPage': query.isRefreshingPage,
'isInactive': query.isInactive,
'refreshConfig': query.refreshConfig.toJson(),
'retryConfig': query.retryConfig.toJson()
},
onClose: () {
setState(() {
_selectedQueryKey = null;
});
},
);
},
),
),
);
}),
),
],
);
});
}
}
packages/fl_query_devtools/lib/src/widgets/tabs/mutation_tab.dart
+29
View File
@@ -0,0 +1,29 @@
import 'package:fl_query/fl_query.dart';
import 'package:fl_query_devtools/src/widgets/query_tile.dart';
import 'package:flutter/material.dart';
class MutationTab extends StatefulWidget {
const MutationTab({super.key});
@override
State<MutationTab> createState() => _MutationTabState();
}
class _MutationTabState extends State<MutationTab> {
@override
Widget build(BuildContext context) {
final client = QueryClient.of(context);
return ListView.builder(
itemCount: client.cache.mutations.length,
itemBuilder: (context, index) {
final mutation = client.cache.mutations.elementAt(index);
return QueryTile(
title: mutation.key,
isLoading: mutation.isMutating,
hasError: mutation.hasError,
);
},
);
}
}
packages/fl_query_devtools/lib/src/widgets/tabs/query_tab.dart
+96
View File
@@ -0,0 +1,96 @@
import 'package:fl_query/fl_query.dart';
import 'package:fl_query_devtools/src/helpers/jsonify_value.dart';
import 'package:fl_query_devtools/src/helpers/primitvify_value.dart';
import 'package:fl_query_devtools/src/widgets/explorers/explorer_view.dart';
import 'package:fl_query_devtools/src/widgets/query_tile.dart';
import 'package:flutter/material.dart';
class QueryTab extends StatefulWidget {
const QueryTab({super.key});
@override
State<QueryTab> createState() => _QueryTabState();
}
class _QueryTabState extends State<QueryTab> {
String? _selectedQueryKey;
@override
Widget build(BuildContext context) {
final client = QueryClient.of(context);
return LayoutBuilder(builder: (context, constrains) {
return Row(
children: [
Expanded(
child: ListView.builder(
itemCount: client.cache.queries.length,
itemBuilder: (context, index) {
final query = client.cache.queries.elementAt(index);
return QueryListenable(
query.key,
builder: (context, query) {
if (query == null) {
return const SizedBox.shrink();
}
return QueryTile(
title: query.key,
isLoading: query.isLoading,
hasError: query.hasError,
onTap: () {
setState(() {
_selectedQueryKey = query.key;
});
},
);
},
);
},
),
),
AnimatedSize(
duration: const Duration(milliseconds: 200),
curve: Curves.bounceInOut,
child: Builder(builder: (context) {
return SizedBox(
width: _selectedQueryKey == null
? 0
: constrains.biggest.width * 0.5,
child: SizedBox.expand(
child: QueryListenable(_selectedQueryKey ?? '',
builder: (context, query) {
if (query == null) {
return const SizedBox.shrink();
}
return ExplorerView(
title: query.key,
data: {
'data': jsonifyValue(query.data, query.jsonConfig),
'errors': primitivifyValue(query.error),
'stale': query.state.isStale,
'updatedAt': query.state.updatedAt.toString(),
'isLoading': query.isLoading,
'isRefreshing': query.isRefreshing,
'isInactive': query.isInactive,
'isInitial': query.isInitial,
'refreshConfig': query.refreshConfig.toJson(),
'retryConfig': query.retryConfig.toJson()
},
onClose: () {
setState(() {
_selectedQueryKey = null;
});
},
);
}),
),
);
}),
),
],
);
});
}
}