From 8aa2e01824515d1557c8826f4aa72e41c0656063 Mon Sep 17 00:00:00 2001
From: Ignace Maes <contact@ignacemaes.com>
Date: Sun, 18 Aug 2024 19:48:45 +0200
Subject: [PATCH] refactor nav to separate component

---
 app/components/pokemon-details.gts       | 110 +---------------------
 app/components/pokemon-evolution-nav.gts | 114 +++++++++++++++++++++++
 app/templates/pokemon/pokemon.gts        |   3 +-
 3 files changed, 118 insertions(+), 109 deletions(-)
 create mode 100644 app/components/pokemon-evolution-nav.gts

diff --git a/app/components/pokemon-details.gts b/app/components/pokemon-details.gts
index 821781d..a9d6e16 100644
--- a/app/components/pokemon-details.gts
+++ b/app/components/pokemon-details.gts
@@ -1,53 +1,11 @@
 import Component from '@glimmer/component';
-import { get } from '@ember/helper';
 import type PokemonModel from 'ember-polaris-pokedex/models/pokemon';
-import type RouterService from '@ember/routing/router-service';
-import { service } from '@ember/service';
-import { fn } from '@ember/helper';
-import { on } from '@ember/modifier';
-import { preloadImage } from 'ember-polaris-pokedex/components/pokemon-grid-item';
 import PokemonTypeBadge from 'ember-polaris-pokedex/components/pokemon-type-badge';
-import { type RouterScrollService } from 'ember-polaris-pokedex/utils/router-scroll-service';
-
-export function getPokemonById(pokemons: PokemonModel[], id: string) {
-  return pokemons.find((pokemon) => pokemon.id!.toString() === id);
-}
+import PokemonEvolutionNav from 'ember-polaris-pokedex/components/pokemon-evolution-nav';
 
 export default class PokemonDetails extends Component<{
   Args: { pokemon: PokemonModel; allPokemon: PokemonModel[] };
 }> {
-  @service declare router: RouterService;
-
-  @service declare routerScroll: RouterScrollService;
-
-  transitionToPokemonDetails = (
-    pokemonId: string,
-    direction: 'forwards' | 'backwards',
-  ) => {
-    this.routerScroll.preserveScrollPosition = true;
-    // Fallback for browsers that don't support this API:
-    if (!document.startViewTransition) {
-      this.router.transitionTo('pokemon.pokemon', pokemonId.toString());
-      return;
-    }
-
-    // With a transition:
-    document.startViewTransition({
-      // @ts-expect-error: No types for these options yet
-      update: () => {
-        this.router.transitionTo('pokemon.pokemon', pokemonId.toString());
-      },
-      types: ['slide', direction],
-    });
-  };
-
-  preloadImageForPokemonId = (pokemonId: string) => {
-    const pokemon = getPokemonById(this.args.allPokemon, pokemonId);
-    if (pokemon) {
-      preloadImage(pokemon.image.hires);
-    }
-  };
-
   <template>
     <div
       class='pokemon-details flex flex-col justify-center gap-16 md:flex-row'
@@ -78,71 +36,7 @@ export default class PokemonDetails extends Component<{
       </div>
     </div>
 
-    {{#if @pokemon.evolution}}
-      <section class='m-auto max-w-3xl'>
-        <h3 class='mt-12 text-2xl'>Evolutions</h3>
-
-        <div class='grid grid-cols-2 gap-8'>
-          <div>
-            {{#if @pokemon.evolution.prev}}
-              <button
-                type='button'
-                class='flex w-full cursor-pointer flex-col items-center rounded-xl bg-gradient-to-br from-pink-100 to-yellow-100 p-4 shadow transition-shadow hover:shadow-md'
-                {{on
-                  'click'
-                  (fn
-                    this.transitionToPokemonDetails
-                    (get @pokemon.evolution.prev 0)
-                    'backwards'
-                  )
-                }}
-                {{on
-                  'pointerenter'
-                  (fn
-                    this.preloadImageForPokemonId
-                    (get @pokemon.evolution.prev 0)
-                  )
-                }}
-              >
-                ⏪ Previous
-              </button>
-            {{else}}
-              <button
-                type='button'
-                class='flex w-full cursor-not-allowed flex-col items-center rounded-xl bg-gradient-to-br from-gray-100 to-slate-100 p-4 opacity-50 shadow'
-              >
-                ⏪ Previous
-              </button>
-            {{/if}}
-          </div>
-          <div class='flex flex-col gap-2'>
-            {{#each @pokemon.evolution.next as |next|}}
-              <button
-                type='button'
-                class='flex w-full cursor-pointer flex-col items-center rounded-xl bg-gradient-to-br from-pink-100 to-yellow-100 p-4 shadow transition-shadow hover:shadow-md'
-                {{on
-                  'click'
-                  (fn this.transitionToPokemonDetails (get next 0) 'forwards')
-                }}
-                {{on
-                  'pointerenter'
-                  (fn this.preloadImageForPokemonId (get next 0))
-                }}
-              >
-                Next ⏩
-              </button>
-            {{else}}
-              <button
-                type='button'
-                class='flex w-full cursor-not-allowed flex-col items-center rounded-xl bg-gradient-to-br from-gray-100 to-slate-100 p-4 opacity-50 shadow'
-              >
-                Next ⏩
-              </button>
-            {{/each}}
-          </div>
-        </div>
-      </section>
-    {{/if}}
+    <PokemonEvolutionNav @pokemon={{@pokemon}} @allPokemon={{@allPokemon}} />
 
     {{! prettier-ignore }}
     <style>
diff --git a/app/components/pokemon-evolution-nav.gts b/app/components/pokemon-evolution-nav.gts
new file mode 100644
index 0000000..c01af86
--- /dev/null
+++ b/app/components/pokemon-evolution-nav.gts
@@ -0,0 +1,114 @@
+import Component from '@glimmer/component';
+import { get } from '@ember/helper';
+import type PokemonModel from 'ember-polaris-pokedex/models/pokemon';
+import type RouterService from '@ember/routing/router-service';
+import { service } from '@ember/service';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { preloadImage } from 'ember-polaris-pokedex/components/pokemon-grid-item';
+import { type RouterScrollService } from 'ember-polaris-pokedex/utils/router-scroll-service';
+
+export function getPokemonById(pokemons: PokemonModel[], id: string) {
+  return pokemons.find((pokemon) => pokemon.id!.toString() === id);
+}
+
+export default class PokemonEvolutionNav extends Component<{
+  Args: { pokemon: PokemonModel; allPokemon: PokemonModel[] };
+}> {
+  @service declare router: RouterService;
+
+  @service declare routerScroll: RouterScrollService;
+
+  transitionToPokemonDetails = (
+    pokemonId: string,
+    direction: 'forwards' | 'backwards',
+  ) => {
+    this.routerScroll.preserveScrollPosition = true;
+    // Fallback for browsers that don't support this API:
+    if (!document.startViewTransition) {
+      this.router.transitionTo('pokemon.pokemon', pokemonId.toString());
+      return;
+    }
+
+    // With a transition:
+    document.startViewTransition({
+      // @ts-expect-error: No types for these options yet
+      update: () => {
+        this.router.transitionTo('pokemon.pokemon', pokemonId.toString());
+      },
+      types: ['slide', direction],
+    });
+  };
+
+  preloadImageForPokemonId = (pokemonId: string) => {
+    const pokemon = getPokemonById(this.args.allPokemon, pokemonId);
+    if (pokemon) {
+      preloadImage(pokemon.image.hires);
+    }
+  };
+
+  <template>
+    <section class='m-auto max-w-3xl'>
+      <h3 class='mt-12 text-2xl'>Evolutions</h3>
+
+      <div class='grid grid-cols-2 gap-8'>
+        <div>
+          {{#if @pokemon.evolution.prev}}
+            <button
+              type='button'
+              class='flex w-full cursor-pointer flex-col items-center rounded-xl bg-gradient-to-br from-pink-100 to-yellow-100 p-4 shadow transition-shadow hover:shadow-md'
+              {{on
+                'click'
+                (fn
+                  this.transitionToPokemonDetails
+                  (get @pokemon.evolution.prev 0)
+                  'backwards'
+                )
+              }}
+              {{on
+                'pointerenter'
+                (fn
+                  this.preloadImageForPokemonId (get @pokemon.evolution.prev 0)
+                )
+              }}
+            >
+              ⏪ Previous
+            </button>
+          {{else}}
+            <button
+              type='button'
+              class='flex w-full cursor-not-allowed flex-col items-center rounded-xl bg-gradient-to-br from-gray-100 to-slate-100 p-4 opacity-50 shadow'
+            >
+              ⏪ Previous
+            </button>
+          {{/if}}
+        </div>
+        <div class='flex flex-col gap-2'>
+          {{#each @pokemon.evolution.next as |next|}}
+            <button
+              type='button'
+              class='flex w-full cursor-pointer flex-col items-center rounded-xl bg-gradient-to-br from-pink-100 to-yellow-100 p-4 shadow transition-shadow hover:shadow-md'
+              {{on
+                'click'
+                (fn this.transitionToPokemonDetails (get next 0) 'forwards')
+              }}
+              {{on
+                'pointerenter'
+                (fn this.preloadImageForPokemonId (get next 0))
+              }}
+            >
+              Next ⏩
+            </button>
+          {{else}}
+            <button
+              type='button'
+              class='flex w-full cursor-not-allowed flex-col items-center rounded-xl bg-gradient-to-br from-gray-100 to-slate-100 p-4 opacity-50 shadow'
+            >
+              Next ⏩
+            </button>
+          {{/each}}
+        </div>
+      </div>
+    </section>
+  </template>
+}
diff --git a/app/templates/pokemon/pokemon.gts b/app/templates/pokemon/pokemon.gts
index fc375e1..3395454 100644
--- a/app/templates/pokemon/pokemon.gts
+++ b/app/templates/pokemon/pokemon.gts
@@ -8,7 +8,8 @@ import Component from '@glimmer/component';
 import { Request } from '@warp-drive/ember';
 import LoadingBar from 'ember-polaris-pokedex/components/loading-bar';
 import HomeButton from 'ember-polaris-pokedex/components/home-button';
-import PokemonDetails, { getPokemonById } from 'ember-polaris-pokedex/components/pokemon-details';
+import PokemonDetails from 'ember-polaris-pokedex/components/pokemon-details';
+import { getPokemonById } from 'ember-polaris-pokedex/components/pokemon-evolution-nav';
 
 type PokemonTemplateSignature = RouteTemplateSignature<PokemonRoute>;