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

2022-08-04 09:20:20 +06:00
parent 6d2952ae6a
commit 4d6d1a1648
267 changed files with 4690 additions and 160 deletions
@@ -0,0 +1,122 @@
+import 'dart:convert';
+import 'dart:math';
+
+import 'package:fl_query_example/components/basic_query.dart';
+import 'package:http/http.dart' as http;
+
+import 'package:fl_query/fl_query.dart';
+import 'package:flutter/material.dart';
+
+final basicMutationJob = MutationJob<Map, Map<String, dynamic>>(
+  mutationKey: "basic-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 BasicMutationExample extends StatefulWidget {
+  const BasicMutationExample({Key? key}) : super(key: key);
+
+  @override
+  State<BasicMutationExample> createState() => _BasicMutationExampleState();
+}
+
+class _BasicMutationExampleState extends State<BasicMutationExample> {
+  late TextEditingController titleController;
+  late TextEditingController bodyController;
+  late int id;
+  @override
+  void initState() {
+    super.initState();
+    id = Random().nextInt(2000000);
+    titleController = TextEditingController();
+    bodyController = TextEditingController();
+  }
+
+  @override
+  void dispose() {
+    titleController.dispose();
+    bodyController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          "# Basic Mutation Example (with Failure & Retry simulation)",
+          style: Theme.of(context).textTheme.headline5,
+        ),
+        MutationBuilder<Map, Map<String, dynamic>>(
+            job: basicMutationJob,
+            onMutate: (v) {
+              final data =
+                  QueryBowl.of(context).getQuery(successJob.queryKey)?.data;
+              QueryBowl.of(context)
+                  .setQueryData<String, void>(successJob.queryKey, (oldData) {
+                if (oldData?.contains("After Mutate (OPTIMISTIC UPDATE)") ==
+                    true) {
+                  return "$oldData";
+                }
+                return "$oldData - After Mutate (OPTIMISTIC UPDATE)";
+              });
+              return data;
+            },
+            onData: (data, variables, context) {
+              print("Passed Variable: $variables");
+              print("Safe Previous Value: $context");
+            },
+            builder: (context, mutation) {
+              return 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, variables, 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,86 @@
+import 'dart:math';
+
+import 'package:fl_query/fl_query.dart';
+import 'package:flutter/material.dart';
+
+final successJob = QueryJob<String, void>(
+  queryKey: "greetings-example",
+  task: (queryKey, _) => Future.delayed(
+    const Duration(seconds: 2),
+    () =>
+        "The work successfully executed. Data: key=($queryKey) value=${Random.secure().nextInt(100)}",
+  ),
+);
+
+final canFailJob = QueryJob<String, void>(
+  queryKey: "failure-example",
+  task: (queryKey, _) => Random().nextBool()
+      ? Future.error("$queryKey operation failed for unknown reason")
+      : Future.value(
+          "Successful execution. Result: $queryKey=${Random().nextInt(100)}",
+        ),
+);
+
+class BasicQueryExample extends StatelessWidget {
+  const BasicQueryExample({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          "# Basic Query Example",
+          style: Theme.of(context).textTheme.headline5,
+        ),
+        QueryBuilder<String, void>(
+          job: successJob,
+          externalData: null,
+          builder: (context, query) {
+            if (!query.hasData || query.isLoading || query.isRefetching) {
+              return const CircularProgressIndicator();
+            }
+            return Row(
+              children: [
+                Text(query.data!),
+                ElevatedButton(
+                  child: const Text("Refetch"),
+                  onPressed: () async {
+                    await query.refetch();
+                  },
+                ),
+              ],
+            );
+          },
+        ),
+        QueryBuilder<String, void>(
+          job: canFailJob,
+          externalData: null,
+          builder: (context, query) {
+            if (!query.hasData || query.isLoading || query.isRefetching) {
+              return const CircularProgressIndicator();
+            }
+            return Row(
+              children: [
+                if (query.hasError)
+                  Text(
+                    "${query.error}. Retrying: ${query.retryAttempts}",
+                  ),
+                if (query.hasData)
+                  Text(
+                    "Success after ${query.retryAttempts}\nData: ${query.data}",
+                  ),
+                ElevatedButton(
+                  child: const Text("Refetch"),
+                  onPressed: () async {
+                    await query.refetch();
+                  },
+                ),
+              ],
+            );
+          },
+        ),
+      ],
+    );
+  }
+}
@@ -0,0 +1,46 @@
+import 'package:fl_query/fl_query.dart';
+import 'package:flutter/material.dart';
+
+final lazyQueryJob = QueryJob<String, String>(
+  queryKey: "lazy-query",
+  enabled: false,
+  task: (
+    queryKey,
+    data,
+  ) {
+    return Future.delayed(const Duration(milliseconds: 500),
+        () => "Result: key=$queryKey value=$data");
+  },
+);
+
+class LazyQueryExample extends StatelessWidget {
+  const LazyQueryExample({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          "# Lazy Query Example",
+          style: Theme.of(context).textTheme.headline5,
+        ),
+        QueryBuilder<String, String>(
+          job: lazyQueryJob,
+          externalData: "Love",
+          builder: (context, query) {
+            return Row(
+              children: [
+                Text("Current Data: ${query.data ?? "Loading"}"),
+                ElevatedButton(
+                  child: const Text("Refetch Query"),
+                  onPressed: () => query.refetch(),
+                ),
+              ],
+            );
+          },
+        ),
+      ],
+    );
+  }
+}
@@ -0,0 +1,66 @@
+import 'dart:math';
+
+import 'package:fl_query/fl_query.dart';
+import 'package:flutter/material.dart';
+
+final mutationVariableKeyJob = MutationJob.withVariableKey<String, double>(
+  task: (queryKey, variables) {
+    return Future.value("$variables");
+  },
+);
+
+class MutationVariableKeyExample extends StatefulWidget {
+  const MutationVariableKeyExample({Key? key}) : super(key: key);
+
+  @override
+  State<MutationVariableKeyExample> createState() =>
+      _MutationVariableKeyExampleState();
+}
+
+class _MutationVariableKeyExampleState
+    extends State<MutationVariableKeyExample> {
+  late double id;
+
+  @override
+  void initState() {
+    super.initState();
+    id = Random().nextDouble();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          "# Mutation Variable Key Example",
+          style: Theme.of(context).textTheme.headline5,
+        ),
+        MutationBuilder<String, double>(
+          job: mutationVariableKeyJob("mutation-variable-key#$id"),
+          builder: (context, mutation) {
+            return 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: () {
+                    setState(() {
+                      id = Random().nextDouble();
+                    });
+                  },
+                ),
+              ],
+            );
+          },
+        )
+      ],
+    );
+  }
+}
@@ -0,0 +1,75 @@
+import 'dart:math';
+
+import 'package:fl_query/fl_query.dart';
+import 'package:flutter/material.dart';
+
+final jobWithExternalData = QueryJob<String, double>(
+  queryKey: "query-external-data",
+  cacheTime: const Duration(seconds: 10),
+  refetchOnExternalDataChange: false,
+  task: (queryKey, data) {
+    return Future.delayed(const Duration(milliseconds: 500),
+        () => "Hello from $queryKey with $data");
+  },
+);
+
+class QueryExternalDataExample extends StatefulWidget {
+  const QueryExternalDataExample({Key? key}) : super(key: key);
+
+  @override
+  State<QueryExternalDataExample> createState() =>
+      _QueryExternalDataExampleState();
+}
+
+class _QueryExternalDataExampleState extends State<QueryExternalDataExample> {
+  late double externalData;
+
+  @override
+  void initState() {
+    super.initState();
+    externalData = Random().nextDouble() * 200;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          "# Query With External Data Example",
+          style: Theme.of(context).textTheme.headline5,
+        ),
+        QueryBuilder<String, double>(
+          job: jobWithExternalData,
+          externalData: externalData,
+          builder: (context, query) {
+            if (query.isLoading || query.isRefetching || !query.hasData) {
+              return const CircularProgressIndicator();
+            }
+            return 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: () {
+                    setState(() {
+                      externalData = Random().nextDouble() * 200;
+                    });
+                  },
+                )
+              ],
+            );
+          },
+        ),
+      ],
+    );
+  }
+}
@@ -0,0 +1,64 @@
+import 'dart:math';
+
+import 'package:fl_query/fl_query.dart';
+import 'package:flutter/material.dart';
+
+final queryVariableKeyJob =
+    QueryJob.withVariableKey<String, void>(task: (queryKey, externalData) {
+  return Future.delayed(
+    const Duration(milliseconds: 500),
+    () => "QueryKey:${queryKey.split("#").last}",
+  );
+});
+
+class QueryVariableKeyExample extends StatefulWidget {
+  const QueryVariableKeyExample({Key? key}) : super(key: key);
+
+  @override
+  State<QueryVariableKeyExample> createState() =>
+      _QueryVariableKeyExampleState();
+}
+
+class _QueryVariableKeyExampleState extends State<QueryVariableKeyExample> {
+  late double id;
+  @override
+  void initState() {
+    super.initState();
+    id = Random().nextDouble() * 200;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          "# Query Variable Example",
+          style: Theme.of(context).textTheme.headline5,
+        ),
+        QueryBuilder<String, void>(
+          job: queryVariableKeyJob("variable-query#$id"),
+          externalData: null,
+          builder: (context, query) {
+            if (query.isLoading || query.isRefetching || !query.hasData) {
+              return const CircularProgressIndicator();
+            }
+            return Row(
+              children: [
+                Text("Query Result: ${query.data}"),
+                ElevatedButton(
+                  child: const Text("New Id"),
+                  onPressed: () {
+                    setState(() {
+                      id = Random().nextDouble() * 200;
+                    });
+                  },
+                ),
+              ],
+            );
+          },
+        ),
+      ],
+    );
+  }
+}