feat(examples/starwars): top level nav

chaalpritam · May 20, 2019 · 02b7c8c · 02b7c8c
1 parent 68cec25
commit 02b7c8c
Show file tree

Hide file tree

Showing 11 changed files with 406 additions and 130 deletions.
diff --git a/examples/starwars/lib/episode.dart b/examples/starwars/lib/episode.dart
@@ -2,42 +2,42 @@ import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:graphql_flutter/graphql_flutter.dart';
 
-/// The episodes in the Star Wars trilogy
-enum Episode {
-  NEWHOPE,
-  EMPIRE,
-  JEDI,
+class EpisodePage extends StatefulWidget {
+  @override
+  _EpisodePageState createState() => _EpisodePageState();
 }
 
-String episodeToJson(Episode e) {
-  switch (e) {
-    case Episode.NEWHOPE:
-      return 'NEWHOPE';
-    case Episode.EMPIRE:
-      return 'EMPIRE';
-    case Episode.JEDI:
-      return 'JEDI';
-    default:
-      return null;
+class _EpisodePageState extends State<EpisodePage> {
+  Episode currentEpisode = Episode.EMPIRE;
+
+  void _selectEpisode(Episode ep) {
+    setState(() {
+      currentEpisode = ep;
+    });
   }
-}
 
-Episode episodeFromJson(String e) {
-  switch (e) {
-    case 'NEWHOPE':
-      return Episode.NEWHOPE;
-    case 'EMPIRE':
-      return Episode.EMPIRE;
-    case 'JEDI':
-      return Episode.JEDI;
-    default:
-      return null;
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: <Widget>[
+          EpisodeSelect(
+            selected: currentEpisode,
+            onSelect: _selectEpisode,
+          ),
+          const Text(
+            'Hero for this episode:',
+          ),
+          HeroForEpisode(
+            episode: currentEpisode,
+          )
+        ],
+      ),
+    );
   }
 }
 
-String format(DateTime date) =>
-    '${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}';
-
 // TODO this uses inline fragments and those are broken
 class HeroForEpisode extends StatelessWidget {
   const HeroForEpisode({@required this.episode});
@@ -64,7 +64,7 @@ class HeroForEpisode extends StatelessWidget {
           }
         ''',
         variables: <String, String>{
-          'ep': episodeToJson(episode),
+          'ep': _episodeToJson(episode),
         },
       ),
       builder: (QueryResult result, {BoolCallback refetch}) {
@@ -120,3 +120,36 @@ class EpisodeSelect extends StatelessWidget {
 String getPrettyJSONString(Object jsonObject) {
   return const JsonEncoder.withIndent('  ').convert(jsonObject);
 }
+
+/// The episodes in the Star Wars trilogy
+enum Episode {
+  NEWHOPE,
+  EMPIRE,
+  JEDI,
+}
+
+String _episodeToJson(Episode e) {
+  switch (e) {
+    case Episode.NEWHOPE:
+      return 'NEWHOPE';
+    case Episode.EMPIRE:
+      return 'EMPIRE';
+    case Episode.JEDI:
+      return 'JEDI';
+    default:
+      return null;
+  }
+}
+
+Episode _episodeFromJson(String e) {
+  switch (e) {
+    case 'NEWHOPE':
+      return Episode.NEWHOPE;
+    case 'EMPIRE':
+      return Episode.EMPIRE;
+    case 'JEDI':
+      return Episode.JEDI;
+    default:
+      return null;
+  }
+}
diff --git a/examples/starwars/lib/episode/episode.dart b/examples/starwars/lib/episode/episode.dart
@@ -0,0 +1,38 @@
+import 'dart:convert';
+
+/// The episodes in the Star Wars trilogy
+enum Episode {
+  NEWHOPE,
+  EMPIRE,
+  JEDI,
+}
+
+String episodeToJson(Episode e) {
+  switch (e) {
+    case Episode.NEWHOPE:
+      return 'NEWHOPE';
+    case Episode.EMPIRE:
+      return 'EMPIRE';
+    case Episode.JEDI:
+      return 'JEDI';
+    default:
+      return null;
+  }
+}
+
+Episode episodeFromJson(String e) {
+  switch (e) {
+    case 'NEWHOPE':
+      return Episode.NEWHOPE;
+    case 'EMPIRE':
+      return Episode.EMPIRE;
+    case 'JEDI':
+      return Episode.JEDI;
+    default:
+      return null;
+  }
+}
+
+String getPrettyJSONString(Object jsonObject) {
+  return const JsonEncoder.withIndent('  ').convert(jsonObject);
+}
diff --git a/examples/starwars/lib/episode/episode_page.dart b/examples/starwars/lib/episode/episode_page.dart
@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+
+import './episode.dart';
+import './hero_query.dart';
+
+class EpisodePage extends StatefulWidget {
+  static const BottomNavigationBarItem navItem = BottomNavigationBarItem(
+    icon: Icon(Icons.movie_filter),
+    title: Text('Episodes'),
+  );
+
+  @override
+  _EpisodePageState createState() => _EpisodePageState();
+}
+
+class _EpisodePageState extends State<EpisodePage> {
+  Episode currentEpisode = Episode.EMPIRE;
+
+  void _selectEpisode(Episode ep) {
+    setState(() {
+      currentEpisode = ep;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: <Widget>[
+          EpisodeSelect(
+            selected: currentEpisode,
+            onSelect: _selectEpisode,
+          ),
+          const Text(
+            'Hero for this episode:',
+          ),
+          HeroForEpisode(
+            episode: currentEpisode,
+          )
+        ],
+      ),
+    );
+  }
+}
+
+typedef OnSelect = void Function(Episode episode);
+
+class EpisodeSelect extends StatelessWidget {
+  const EpisodeSelect({
+    @required this.onSelect,
+    @required this.selected,
+  });
+
+  final OnSelect onSelect;
+  final Episode selected;
+
+  @override
+  Widget build(BuildContext context) {
+    return DropdownButton<Episode>(
+      value: selected,
+      onChanged: onSelect,
+      items: Episode.values.map<DropdownMenuItem<Episode>>((Episode value) {
+        return DropdownMenuItem<Episode>(
+          value: value,
+          child: Text(value.toString()),
+        );
+      }).toList(),
+    );
+  }
+}
diff --git a/examples/starwars/lib/episode/hero_query.dart b/examples/starwars/lib/episode/hero_query.dart
@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:graphql_flutter/graphql_flutter.dart';
+
+import './episode.dart';
+
+class HeroForEpisode extends StatelessWidget {
+  const HeroForEpisode({@required this.episode});
+
+  final Episode episode;
+
+  @override
+  Widget build(BuildContext context) {
+    return Query(
+      options: QueryOptions(
+        document: r'''
+          query HeroForEpisode($ep: Episode!) {
+            hero(episode: $ep) {
+              __typename
+              name
+              ... on Droid {
+                primaryFunction
+              }
+              ... on Human {
+                height
+                homePlanet
+              }
+            }
+          }
+        ''',
+        variables: <String, String>{
+          'ep': episodeToJson(episode),
+        },
+      ),
+      builder: (QueryResult result, {BoolCallback refetch}) {
+        if (result.errors != null) {
+          return Text(result.errors.toString());
+        }
+
+        if (result.loading) {
+          return Center(
+            child: const CircularProgressIndicator(),
+          );
+        }
+        return Column(
+          children: <Widget>[
+            Text(getPrettyJSONString(result.data)),
+            RaisedButton(
+              onPressed: () => print(refetch()),
+              child: const Text('REFETCH'),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}
diff --git a/examples/starwars/lib/gql/HeroForEpisode.gql b/examples/starwars/lib/gql/HeroForEpisode.gql
diff --git a/examples/starwars/lib/main.dart b/examples/starwars/lib/main.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import './client_provider.dart';
-import './episode.dart';
+import './episode/episode_page.dart';
 
 const String GRAPHQL_ENDPOINT = 'http://127.0.0.1:3000/graphql';
 
@@ -31,11 +31,11 @@ class MyHomePage extends StatefulWidget {
 }
 
 class _MyHomePageState extends State<MyHomePage> {
-  Episode currentEpisode = Episode.EMPIRE;
+  int _selectedIndex = 0;
 
-  void _selectEpisode(Episode ep) {
+  void _navigateTo(int index) {
     setState(() {
-      currentEpisode = ep;
+      _selectedIndex = index;
     });
   }
 
@@ -45,22 +45,15 @@ class _MyHomePageState extends State<MyHomePage> {
       appBar: AppBar(
         title: Text(widget.title),
       ),
-      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            EpisodeSelect(
-              selected: currentEpisode,
-              onSelect: _selectEpisode,
-            ),
-            Text(
-              'Hero for this episode:',
-            ),
-            HeroForEpisode(
-              episode: currentEpisode,
-            )
-          ],
-        ),
+      body: _selectedIndex == 1 ? Text('') : EpisodePage(),
+      bottomNavigationBar: BottomNavigationBar(
+        items: const <BottomNavigationBarItem>[
+          EpisodePage.navItem,
+          EpisodePage.navItem,
+        ],
+        currentIndex: _selectedIndex,
+        selectedItemColor: Colors.amber[800],
+        onTap: _navigateTo,
       ),
     );
   }

diff --git a/examples/starwars/lib/reviews/episode.dart b/examples/starwars/lib/reviews/episode.dart
@@ -0,0 +1,38 @@
+import 'dart:convert';
+
+/// The episodes in the Star Wars trilogy
+enum Episode {
+  NEWHOPE,
+  EMPIRE,
+  JEDI,
+}
+
+String episodeToJson(Episode e) {
+  switch (e) {
+    case Episode.NEWHOPE:
+      return 'NEWHOPE';
+    case Episode.EMPIRE:
+      return 'EMPIRE';
+    case Episode.JEDI:
+      return 'JEDI';
+    default:
+      return null;
+  }
+}
+
+Episode episodeFromJson(String e) {
+  switch (e) {
+    case 'NEWHOPE':
+      return Episode.NEWHOPE;
+    case 'EMPIRE':
+      return Episode.EMPIRE;
+    case 'JEDI':
+      return Episode.JEDI;
+    default:
+      return null;
+  }
+}
+
+String getPrettyJSONString(Object jsonObject) {
+  return const JsonEncoder.withIndent('  ').convert(jsonObject);
+}