refactor(example): package specific examples instead of a single example

This commit is contained in:
Kingkor Roy Tirtho
2022-08-04 09:20:20 +06:00
parent 6d2952ae6a
commit 4d6d1a1648
267 changed files with 4690 additions and 160 deletions
@@ -0,0 +1,94 @@
import 'dart:convert';
import 'dart:math';
import 'package:fl_query_hooks_example/components/basic_hook_query.dart';
import 'package:fl_query_hooks/fl_query_hooks.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:http/http.dart' as http;
import 'package:fl_query/fl_query.dart';
import 'package:flutter/material.dart';
final basicMutationHookJob = MutationJob<Map, Map<String, dynamic>>(
mutationKey: "basic-hook-mutation-example",
task: (key, data) async {
final response = await http.post(
Uri.parse(
// to simulate a failing response environment
Random().nextBool()
? "https://jsonplaceholder.typicode.com/posts"
: "https://google.com",
),
headers: {'Content-type': 'application/json; charset=UTF-8'},
body: jsonEncode(data),
);
return jsonDecode(response.body);
},
);
class BasicHookMutationExample extends HookWidget {
const BasicHookMutationExample({super.key});
@override
Widget build(BuildContext context) {
final id = useMemoized(() => Random().nextInt(2000000), []);
final titleController = useTextEditingController();
final bodyController = useTextEditingController();
final mutation = useMutation(
job: basicMutationHookJob,
onMutate: (v) {
QueryBowl.of(context)
.setQueryData<String, void>(successHookJob.queryKey, (oldData) {
if (oldData?.contains("After Mutate (OPTIMISTIC UPDATE)") == true) {
return "$oldData";
}
return "$oldData - After Mutate (OPTIMISTIC UPDATE)";
});
},
);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"# Basic Mutation Hook Example (with failure & retry simulation)",
style: Theme.of(context).textTheme.headline5,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
TextField(
controller: titleController,
decoration: const InputDecoration(labelText: "Title"),
),
TextField(
controller: bodyController,
decoration: const InputDecoration(labelText: "Body"),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
final title = titleController.value.text;
final body = bodyController.value.text;
if (body.isEmpty || title.isEmpty) return;
mutation.mutate({
"title": title,
"body": body,
"id": id,
}, onData: (data, variable, context) {
// resetting the form
titleController.text = "";
bodyController.text = "";
});
},
child: const Text("Post"),
),
const SizedBox(height: 20),
if (mutation.hasData) Text("Response\n${mutation.data}"),
if (mutation.hasError) Text(mutation.error.toString()),
],
),
)
],
);
}
}
@@ -0,0 +1,80 @@
import 'dart:math';
import 'package:fl_query/fl_query.dart';
import 'package:fl_query_hooks/fl_query_hooks.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
final successHookJob = QueryJob<String, void>(
queryKey: "greetings-hook-example",
task: (queryKey, _) => Future.delayed(
const Duration(seconds: 2),
() =>
"The work successfully executed. Data: key=($queryKey) value=${Random.secure().nextInt(100)}",
),
);
final canFailHookJob = QueryJob<String, void>(
queryKey: "failure-hook-example",
task: (queryKey, _) => Random().nextBool()
? Future.error("$queryKey operation failed for unknown reason")
: Future.value(
"Successful execution. Result: $queryKey=${Random().nextInt(100)}",
),
);
class BasicHookQueryExample extends HookWidget {
const BasicHookQueryExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final successQuery = useQuery(job: successHookJob, externalData: null);
final canFailQuery = useQuery(job: canFailHookJob, externalData: null);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"# Basic Query Hook Example",
style: Theme.of(context).textTheme.headline5,
),
!successQuery.hasData ||
successQuery.isLoading ||
successQuery.isRefetching
? const CircularProgressIndicator()
: Row(
children: [
Text(successQuery.data!),
ElevatedButton(
child: const Text("Refetch"),
onPressed: () async {
await successQuery.refetch();
},
),
],
),
!canFailQuery.hasData ||
canFailQuery.isLoading ||
canFailQuery.isRefetching
? const CircularProgressIndicator()
: Row(
children: [
if (canFailQuery.hasError)
Text(
"${canFailQuery.error}. Retrying: ${canFailQuery.retryAttempts}",
),
if (canFailQuery.hasData)
Text(
"Success after ${canFailQuery.retryAttempts}\nData: ${canFailQuery.data}",
),
ElevatedButton(
child: const Text("Refetch"),
onPressed: () async {
await canFailQuery.refetch();
},
),
],
)
],
);
}
}
@@ -0,0 +1,43 @@
import 'package:fl_query/fl_query.dart';
import 'package:fl_query_hooks/fl_query_hooks.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
final lazyHookQueryJob = QueryJob<String, String>(
queryKey: "lazy-hook-query",
enabled: false,
task: (queryKey, data) {
return Future.delayed(const Duration(milliseconds: 500),
() => "Result: key=$queryKey value=$data");
},
);
class LazyHookQueryExample extends HookWidget {
const LazyHookQueryExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final query = useQuery(
job: lazyHookQueryJob,
externalData: "Love",
);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"# Lazy Hook Query Example",
style: Theme.of(context).textTheme.headline5,
),
Row(
children: [
Text("Current Data: ${query.data ?? "Loading"}"),
ElevatedButton(
child: const Text("Refetch Query"),
onPressed: () => query.refetch(),
),
],
),
],
);
}
}
@@ -0,0 +1,49 @@
import 'dart:math';
import 'package:fl_query/fl_query.dart';
import 'package:fl_query_hooks/fl_query_hooks.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
final mutationHookVariableKeyJob = MutationJob.withVariableKey<String, double>(
task: (queryKey, variables) {
return Future.value("$variables");
},
);
class MutationHookVariableKeyExample extends HookWidget {
const MutationHookVariableKeyExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final id = useState(Random().nextDouble());
final mutation = useMutation(
job: mutationHookVariableKeyJob("mutation-hook-variable-key#${id.value}"),
);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"# Mutation Hook Variable Key Example",
style: Theme.of(context).textTheme.headline5,
),
Row(
children: [
Text("${mutation.mutationKey} Result: ${mutation.data}"),
ElevatedButton(
child: const Text("Generate Random Data"),
onPressed: () {
mutation.mutate(Random().nextDouble());
},
),
ElevatedButton(
child: const Text("New Mutation"),
onPressed: () {
id.value = Random().nextDouble();
},
),
],
),
],
);
}
}
@@ -0,0 +1,58 @@
import 'dart:math';
import 'package:fl_query/fl_query.dart';
import 'package:fl_query_hooks/fl_query_hooks.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
final queryHookExternalDataJob = QueryJob<String, double>(
queryKey: "query-hook-external-data",
cacheTime: const Duration(seconds: 10),
task: (queryKey, data) {
return Future.delayed(const Duration(milliseconds: 500),
() => "Hello from $queryKey with $data");
},
);
class QueryHookExternalDataExample extends HookWidget {
const QueryHookExternalDataExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final externalData = useState(Random().nextDouble() * 200);
final query = useQuery(
job: queryHookExternalDataJob,
externalData: externalData.value,
);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"# Query Hook With External Data Example",
style: Theme.of(context).textTheme.headline5,
),
query.isLoading || query.isRefetching || !query.hasData
? const CircularProgressIndicator()
: Row(
children: [
Container(
width: query.externalData,
height: query.externalData,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue,
),
child: Center(child: Text(query.externalData.toString())),
),
ElevatedButton(
child: const Text("New Id"),
onPressed: () {
externalData.value = Random().nextDouble() * 200;
},
)
],
)
],
);
}
}
@@ -0,0 +1,49 @@
import 'dart:math';
import 'package:fl_query/fl_query.dart';
import 'package:fl_query_hooks/fl_query_hooks.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
final queryHookVariableKeyJob =
QueryJob.withVariableKey<String, void>(task: (queryKey, externalData) {
return Future.delayed(
const Duration(milliseconds: 500),
() => "QueryKey:${queryKey.split("#").last}",
);
});
class QueryHookVariableKeyExample extends HookWidget {
const QueryHookVariableKeyExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final id = useState(Random().nextDouble() * 200);
final query = useQuery<String, void>(
job: queryHookVariableKeyJob("hook-variable-query#${id.value}"),
externalData: null,
);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"# Query Hook Variable Example",
style: Theme.of(context).textTheme.headline5,
),
query.isLoading || query.isRefetching || !query.hasData
? const CircularProgressIndicator()
: Row(
children: [
Text("Query Result: ${query.data}"),
ElevatedButton(
child: const Text("New Id"),
onPressed: () {
id.value = Random().nextDouble() * 200;
},
),
],
)
],
);
}
}