siuangie91 / svelte-pokedex Goto Github PK

Cache for 24 hours.

Options:

• using axios adapter https://www.npmjs.com/package/axios-cache-adapter
• Use local storage https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
  • https://stackoverflow.com/questions/64092593/svelte-is-there-a-way-to-cache-the-api-result-in-a-way-that-it-wont-trigger-th
  • Setting expiry time on local storage https://www.sohamkamani.com/blog/javascript-localstorage-with-ttl-expiry/#getting-items-from-storage
• Or maybe session storage is better? https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Use pokemon ID API endpoint and render data. Render in separate route: /pokemon/{id}.

Click should open in new tab.

Endpoint

https://pokeapi.co/api/v2/pokemon/{id|name}/

See https://pokeapi.co/docs/v2#pokemon.

Acceptance Criteria

• ID
• Name: data.name
• picture: data.sprites.other.dream_world.front_default
• types: data.types
• description: fetch from https://pokeapi.co/docs/v2#pokemon-species --> render all data.flavor_text_entries

use context? https://svelte.dev/docs#run-time-svelte-setcontext

Using writable stores gives us access to "context" app wide:

• https://svelte.dev/tutorial/writable-stores
• https://svelte.dev/docs#run-time-svelte-store

🛑 Blocked by #95, which should be done first.

Matcher should allow capitalized letters as well. Call toLowerCase in component instead.

https://docs.lacework.com/iac/enforce-merge-checks

Then we can get rid of opening pokemon in new tab.

Also link to home page from name route.

Make sure dropdown handles seen list.

No need to open in new tab

SvelteKit 1.0 was just released. This app is still on the beta version.

Before migrating to 1.0, need to update to the last one before 1.0. Probably should do an npm install --save-exact for all of these.

1. Lock in current version so that main uses the exact version.

Update package.json so that npm install installs the exact version it's on right now, and not next.

From package-lock.json, the exact versions are:

2. Upgrade to 1.0.0-next.588.

1. Upgrade to @sveltejs/[email protected].
2. Make sure errors are resolved and app works.
3. Repeat with @sveltejs/[email protected].

Full details in sveltejs/kit#5774.

Migration to 1.0 will be done in #96

https://stylelint.io/

• learning goals
  • Github actions for CI/CD
  • svelte
  • sveltekit
  • svelte testing library
  • e2e testing with playwright
  • TypeScript
  • tailwind css
  • setting up conventional commits
• demo link

Setting up GraphQL on Svelte

https://hasura.io/learn/graphql/svelte-apollo/apollo-client/

PokeAPI:

Docs: https://pokeapi.co/docs/graphql
GraphiQL playground: https://beta.pokeapi.co/graphql/console/

/index

query First20Gen1($id: Int!) {
  gen1: pokemon_v2_generation_by_pk(id: $id) {
    name
    species: pokemon_v2_pokemonspecies(
      limit: 20, 
      order_by: {id: asc}
    ) {
      pokemons: pokemon_v2_pokemons {
        id
        name
        forms: pokemon_v2_pokemonforms {
          sprites: pokemon_v2_pokemonformsprites {
            sprites
          }
        }
      }
    }
  }
}

/pokemon/:name

query Pokemon($id: Int!) {
  pokemon: pokemon_v2_pokemon_by_pk(id: $id) {
    id
    name
    types: pokemon_v2_pokemontypes {
      type: pokemon_v2_type {
        name
      }
    }
    species: pokemon_v2_pokemonspecy {
      name
      description: pokemon_v2_pokemonspeciesflavortexts(
        where: {
          language_id: {_eq: 9} # en-us
        },
        order_by: { id: desc }
        limit: 3
      ) {
        id
        flavor_text
      }
      evolution_chain:pokemon_v2_evolutionchain {
        chain:pokemon_v2_pokemonspecies {
          id
          name
        }
      }
    }
    pokemon_type: pokemon_v2_pokemontypes {
      type: pokemon_v2_type {
        name
      }
    }
    images: pokemon_v2_pokemonsprites {
      sprites
    }
  }
}

16.16.0

In package.json:

"engines": {
    "node": "16.16.0"
},

https://tailwindcss.com/docs/guides/sveltekit

Should not have to npm ci for each one

https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#workflow_run

https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#onworkflow_call

https://stackoverflow.com/questions/58457140/dependencies-between-workflows-on-github-actions

This would go in the __layout file

Style /pokemon/:name as pokemon card.

Also make Seen List items look more clickable.

• hover effect?
• link icon?
• underline?

https://timdeschryver.dev/blog/how-to-test-svelte-components

https://testing-library.com/docs/svelte-testing-library/intro

https://testing-library.com/docs/svelte-testing-library/setup#jest

Use server side fetching using the load function.

• https://kit.svelte.dev/docs/load
• https://stackoverflow.com/questions/67422216/sveltekit-load-not-called-from-component-but-works-as-a-page
• https://www.youtube.com/watch?v=2EQpQhz30yY&ab_channel=lihautan

https://hasura.io/learn/graphql/svelte-apollo/apollo-client/

https://medium.com/swlh/jest-and-github-actions-eaf3eaf2427d

https://futurestud.io/tutorials/github-actions-run-on-pull-request

/pokemon/eevee (and all its stages)

Bug:

Fix:

In .list-evolution, switch to:

• display: flex;
• flex-wrap: wrap;
• column-gap: 1.5rem;
• gap: 0.5rem;
• justify-content: space-evenly;

For .list-evolution::after,

• right: -50%;

For Seen Item, remove underline on :hover (flip the effect)

Might have to do with CSS-in-JS https://svelte.dev/blog/svelte-css-in-js

TypeError: gql is not a function

https://dashboard.heroku.com/apps/svelte-pokedex/activity/builds/7ed13aae-a1c6-431b-a46c-88375a1d655d