chore: remove staticzap, remove tracker, & fix cache

README.md

@@ -62,7 +62,6 @@ This project has a github actions scripts to run `yarn test` & lighthouse assert
 - [Apollo](https://www.apollographql.com/docs/react/get-started/) graphql client.
 - [mazipan/graphql-pokeapi](https://github.com/mazipan/graphql-pokeapi) for graphql api.
 - [Workbox ⚙️](https://developers.google.com/web/tools/workbox/modules/workbox-strategies) for creating service worker.
-- [Statically.io ⚡⚡⚡](https://statically.io/) assets CDN.
 - [Jest](https://jestjs.io/) & [react testing-library](https://testing-library.com/) for testing.
 - Written in [typescript](https://typescriptlang.org).
 - [Hosted on Vercel 🚀](https://vercel.com/).

package.json

@@ -5,7 +5,6 @@
   "dependencies": {
     "@apollo/client": "^3.5.5",
     "@emotion/react": "^11.7.0",
-    "convert-staticzap": "^1.0.1",
     "graphql": "^16.0.1",
     "polished": "^4.1.3",
     "react": "^17.0.2",

public/index.html

@@ -25,15 +25,6 @@
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
 
-  <script async src="https://cdn.panelbear.com/analytics.js?site=CYq76cIJ8qk"></script>
-  <script>
-    window.panelbear = window.panelbear || function () { (window.panelbear.q = window.panelbear.q || []).push(arguments); };
-    panelbear('config', {
-      site: 'CYq76cIJ8qk',
-      spaMode: 'history',
-      debug: false,
-    });
-  </script>
 </body>
 
 </html>

src/components/my-pokemon-list/pokemon-card.tsx

@@ -5,7 +5,6 @@ import Button from "components/button";
 import { lighten } from "polished";
 import { FaTrashAlt } from "react-icons/fa";
 import { Link } from "react-router-dom";
-import convert from "convert-staticzap";
 import { formatNumber } from "utils/format-number";
 import { PokemonLocal, useMyPokemon } from "utils/my-pokemon-context";
 import { useSound } from "utils/sound-context";
@@ -117,7 +116,7 @@ const PokemonCard = ({
       <Link to={"/pokemon/" + pokemonData.name} css={card}>
         <img
           crossOrigin="anonymous"
-          src={convert(pokemonData.sprites) || pokemonData.sprites}
+          src={pokemonData.sprites}
           alt={pokemonData.name}
           css={image}
         />

src/components/pokemon-detail/index.tsx

@@ -4,7 +4,6 @@ import { css, useTheme } from "@emotion/react";
 import { darken } from "polished";
 import { useEffect, useState } from "react";
 import ContentLoader from "react-content-loader";
-import convert from "convert-staticzap";
 import DetailInfo from "./detail-info";
 import HeaderInfo from "./header-info";
 
@@ -80,7 +79,7 @@ const PokemonDetail = ({ data, isLoading }: PokemonDetailProps) => {
         <img
           crossOrigin="anonymous"
           css={sprites}
-          src={convert(sprite) || sprite}
+          src={sprite}
           onError={() => setSprite(data?.sprites?.front_default)}
           alt={data?.name}
         />

src/components/pokemon-list/pokemon-card.tsx

@@ -3,10 +3,9 @@
 import { useLazyQuery } from "@apollo/client";
 import { css, useTheme } from "@emotion/react";
 import { lighten } from "polished";
-import { GET_POKEMON_TYPE } from "queries/pokemon";
+import { GET_POKEMON_BY_NAME } from "queries/pokemon";
 import { useEffect } from "react";
 import { Link } from "react-router-dom";
-import convert from "convert-staticzap";
 import { formatNumber } from "utils/format-number";
 import { useSound } from "utils/sound-context";
 import TypeLabel from "../type-label";
@@ -21,9 +20,9 @@ const PokemonCard = ({ data: pokemonData, types }: PokemonCardProps) => {
   const { click } = useSound();
   const [getTypes, { data: responseTypes }] = useLazyQuery<{
     pokemon: Pokemon.Pokemon;
-  }>(GET_POKEMON_TYPE, {
+  }>(GET_POKEMON_BY_NAME, {
     variables: { name: pokemonData.name },
-    fetchPolicy: "no-cache",
+    fetchPolicy: "cache-first",
   });
 
   const typelist = types || responseTypes?.pokemon.types;
@@ -89,7 +88,7 @@ const PokemonCard = ({ data: pokemonData, types }: PokemonCardProps) => {
     <Link to={"/pokemon/" + pokemonData.name} css={card} onClick={click}>
       <img
         crossOrigin="anonymous"
-        src={convert(pokemonData.image) || pokemonData.image}
+        src={pokemonData.image}
         alt={pokemonData.name}
         css={image}
       />

src/pages/home.tsx

@@ -12,6 +12,7 @@ const Home = () => {
     GET_POKEMON_LIST,
     {
       variables: { offset: 0, limit },
+      fetchPolicy: "cache-first",
     }
   );
   const loadMore = () => {

src/pages/pokemon-detail.tsx

@@ -12,7 +12,11 @@ const PokemonDetailPage = () => {
   const { name } = useParams<"name">();
   const { loading, data, error } = useQuery<{
     pokemon: Pokemon.Pokemon;
-  }>(GET_POKEMON_BY_NAME, { variables: { name }, errorPolicy: "all" });
+  }>(GET_POKEMON_BY_NAME, {
+    variables: { name },
+    fetchPolicy: "cache-first",
+    errorPolicy: "all",
+  });
   const capitalizeFirstLetter = (text: string) => {
     return text.charAt(0).toUpperCase() + text.slice(1);
   };

src/queries/pokemon.ts

@@ -50,17 +50,4 @@ const GET_POKEMON_BY_NAME = gql`
   }
 `;
 
-const GET_POKEMON_TYPE = gql`
-  query getType($name: String!) {
-    pokemon(name: $name) {
-      types {
-        type {
-          id
-          name
-        }
-      }
-    }
-  }
-`;
-
-export { GET_POKEMON_LIST, GET_POKEMON_BY_NAME, GET_POKEMON_TYPE };
+export { GET_POKEMON_LIST, GET_POKEMON_BY_NAME };

src/service-worker.ts

@@ -64,10 +64,10 @@ self.addEventListener("message", (event) => {
 // Any other custom service worker logic can go here.
 registerRoute(
   ({ url }) =>
-    url.origin === "https://cdn.statically.io" &&
-    url.pathname.startsWith("/gh/PokeAPI/sprites"),
+    url.origin === "https://raw.githubusercontent.com" &&
+    url.pathname.startsWith("/PokeAPI/sprites"),
   new CacheFirst({
-    cacheName: "external-static-assets",
+    cacheName: "sprites",
     plugins: [
       new ExpirationPlugin({
         maxEntries: 1000,

yarn.lock

@@ -3834,11 +3834,6 @@ convert-source-map@^0.3.3:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190"
   integrity sha1-8dgClQr33SYxof6+BZZVDIarMZA=
 
-convert-staticzap@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/convert-staticzap/-/convert-staticzap-1.0.1.tgz#47abc2f7a015913165f64ded64305ebee3b6fe96"
-  integrity sha512-f7lUUiegc49fa0rCzhxtXp+BD6FC0ZUbDid9rRCvaDo1MI4S9zInlZaqflfo9SJ92EG2DjPSBue0UR2ozGGTkw==
-
 [email protected]:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"