Map panning fix, virtual ride fix, simplify API file naming (#386)

Closes DG-63, DG-65

## What changed? Why?
Bug fixes for two bugs, one for virtual rides showing as runs, and one
for the map not being interactive. Also moves around some files for API
naming happiness and gets codegen working again for files that had
interpolated variables oops.

codegen.js → codegen.ts

@@ -1,3 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { CodegenConfig } from '@graphql-codegen/cli';
+
 require('dotenv').config();
 
 // Where all our documents to parse live by default
@@ -35,15 +38,22 @@ const API_CONFIG = {
  *
  * You'll notice that every API has the same configuration except for the name,
  * scalars, and endpoint/authorization. That's intentional!
- *
- * @param {String} name The API name (lowercase)
- * @param {{ schemaEndpoint: string, token: string, scalars: Record<string, boolean|string|number>, onlyOperationTypes: boolean }} options all API options
- *
- * @returns {Record<string, Record<string, unknown>>} The generators to spread
  */
-const createApiGenerator = (name, { schemaEndpoint, token, scalars, onlyOperationTypes }) => {
-  const firstLetter = name[0] ?? '';
-  const documents = `${BASE_FOLDER}/fetch${firstLetter.toUpperCase() + name.slice(1)}*.ts`;
+const createApiGenerator = (
+  name: string,
+  {
+    schemaEndpoint,
+    token,
+    scalars,
+    onlyOperationTypes,
+  }: {
+    schemaEndpoint: string;
+    token: string;
+    scalars: Record<string, unknown>;
+    onlyOperationTypes: boolean;
+  },
+): CodegenConfig['generates'] => {
+  const documents = `${BASE_FOLDER}/${name}/*.ts`;
   const baseTypesPath = `${GENERATED_FOLDER}/${name}Api.generated.ts`;
   const schemas = [
     {
@@ -76,7 +86,7 @@ const createApiGenerator = (name, { schemaEndpoint, token, scalars, onlyOperatio
       preset: 'near-operation-file',
       presetConfig: {
         baseTypesPath: `../${baseTypesPath}`,
-        folder: GENERATED_FOLDER,
+        folder: `../${GENERATED_FOLDER}`,
       },
       config: {
         ...SHARED_CONFIG,
@@ -124,7 +134,7 @@ const githubGenerators = createApiGenerator('github', {
  * prettier after running generation for Contentful and Github,
  * and overwrite existing files.
  */
-module.exports = {
+const config: CodegenConfig = {
   overwrite: true,
   hooks: {
     afterAllFileWrite: ['prettier --write'],
@@ -134,3 +144,5 @@ module.exports = {
     ...githubGenerators,
   },
 };
+
+export default config;

package.json

@@ -16,7 +16,7 @@
     "format": "prettier --loglevel warn --write \"**/*.{js,ts,tsx,mjs,cjs,css,md,json,yml,yaml}\"",
     "lint": "eslint . --cache --fix --ext .js,.ts,.tsx,.mjs,.cjs --no-eslintrc -c config/eslint.config.js",
     "lint:types": "tsc --noEmit",
-    "codegen": "DOTENV_CONFIG_PATH='.env.development.local' graphql-codegen --require dotenv/config --config codegen.js",
+    "codegen": "DOTENV_CONFIG_PATH='.env.development.local' graphql-codegen --require dotenv/config --config codegen.ts",
     "db": "sequelize",
     "db:migrate": "sequelize db:migrate",
     "db:migrate:status": "sequelize db:migrate:status",

src/api/endpoints.ts

@@ -1,10 +1,10 @@
-import { fetchContentfulFooterLinks } from './server/fetchContentfulFooterLinks';
-import { fetchContentfulIntroBlock } from './server/fetchContentfulIntroBlock';
-import { fetchContentfulLocation } from './server/fetchContentfulLocation';
-import { fetchContentfulPrivacyBlock } from './server/fetchContentfulPrivacyBlock';
-import { fetchContentfulProjects } from './server/fetchContentfulProjects';
-import { fetchGithubRepoVersion } from './server/fetchGithubRepoVersion';
-import { fetchSpotifyCurrentlyPlaying } from './server/fetchSpotifyCurrentlyOrRecentlyPlayed';
+import { fetchFooterLinks } from './server/contentful/fetchFooterLinks';
+import { fetchIntroContent } from './server/contentful/fetchIntroContent';
+import { fetchCurrentLocation } from './server/contentful/fetchCurrentLocation';
+import { fetchPrivacyContent } from './server/contentful/fetchPrivacyContent';
+import { fetchProjects } from './server/contentful/fetchProjects';
+import { fetchRepoVersion } from './server/github/fetchRepoVersion';
+import { fetchRecentlyPlayed } from './server/spotify/fetchRecentlyPlayed';
 import { fetchLatestStravaActivityFromDb } from './server/strava/fetchLatestStravaActivityFromDb';
 
 /**
@@ -30,25 +30,25 @@ export type AwaitedType<Key extends EndpointKey> = Awaited<EndpointType<Key>>;
  */
 export const endpoints = {
   // Intro block of content via Contentful
-  intro: fetchContentfulIntroBlock,
+  intro: fetchIntroContent,
 
   // Privacy block of content via Contentful
-  privacy: fetchContentfulPrivacyBlock,
+  privacy: fetchPrivacyContent,
 
   // My current location via Contentful
-  location: fetchContentfulLocation,
+  location: fetchCurrentLocation,
 
   // All projects via Contentful
-  projects: fetchContentfulProjects,
+  projects: fetchProjects,
 
   // Footer links via Contentful
-  footer: fetchContentfulFooterLinks,
+  footer: fetchFooterLinks,
 
   // App version via Github
-  version: fetchGithubRepoVersion,
+  version: fetchRepoVersion,
 
   // Last played song via Spotify
-  'latest/track': fetchSpotifyCurrentlyPlaying,
+  'latest/track': fetchRecentlyPlayed,
 
   // Fetches the latest Strava activity I've done
   'latest/activity': fetchLatestStravaActivityFromDb,

src/api/server/fetchContentfulLocation.ts → src/api/server/contentful/fetchCurrentLocation.ts

@@ -1,15 +1,8 @@
 import { isDefinedItem } from 'api/parsers';
-import type { MyLocationQuery } from 'api/types/generated/fetchContentfulLocation.generated';
+import type { MyLocationQuery } from 'api/types/generated/fetchCurrentLocation.generated';
 import type { MapLocation } from 'api/types/MapLocation';
-import { MAP_MARKER_IMAGE_SIZE, PROJECT_MAX_IMAGE_DIMENSION } from 'constants/imageSizes';
 import { gql } from 'graphql-request';
-import { contentfulClient } from './networkClients/contentfulClient';
-
-// To account for pixel density, we need double the size!
-const IMAGE_SIZE = MAP_MARKER_IMAGE_SIZE * 2;
-
-// The preview image is a standard project size
-const PREVIEW_IMAGE_SIZE = PROJECT_MAX_IMAGE_DIMENSION * 2;
+import { contentfulClient } from '../networkClients/contentfulClient';
 
 /**
  * Grabs the home location using a known id for it
@@ -24,38 +17,44 @@ const QUERY = gql`
       initialZoom
       zoomLevels
       image {
-        url(transform: { 
-          width: ${IMAGE_SIZE}, 
-          height: ${IMAGE_SIZE},
-          format: WEBP
-        })
+        url(
+          transform: {
+            width: 170 # MAP_MARKER_IMAGE_SIZE * 2
+            height: 170 # MAP_MARKER_IMAGE_SIZE * 2
+            format: WEBP
+          }
+        )
         width
         height
       }
     }
     lightImage: asset(id: "5PrFVu1gJBLhgJGixRL4Wc") {
-      url(transform: { 
-          width: ${PREVIEW_IMAGE_SIZE}, 
-          height: ${PREVIEW_IMAGE_SIZE},
-          quality: 80,
+      url(
+        transform: {
+          width: 660 # PROJECT_MAX_IMAGE_DIMENSION * 2
+          height: 660 # PROJECT_MAX_IMAGE_DIMENSION * 2
+          quality: 80
           format: WEBP
-        })
+        }
+      )
     }
     darkImage: asset(id: "6bRgM9lkcceJQOE0jSOEfu") {
-      url(transform: { 
-          width: ${PREVIEW_IMAGE_SIZE}, 
-          height: ${PREVIEW_IMAGE_SIZE},
-          quality: 80,
+      url(
+        transform: {
+          width: 660 # PROJECT_MAX_IMAGE_DIMENSION * 2
+          height: 660 # PROJECT_MAX_IMAGE_DIMENSION * 2
+          quality: 80
           format: WEBP
-        })
+        }
+      )
     }
   }
 `;
 
 /**
  * Fetches my current location from Contentful.
  */
-export const fetchContentfulLocation = async (): Promise<MapLocation | null> => {
+export async function fetchCurrentLocation(): Promise<MapLocation | null> {
   const data = await contentfulClient.request<MyLocationQuery>(QUERY);
   const location = data?.contentTypeLocation;
   if (!location || !data?.lightImage?.url || !data?.darkImage?.url) {
@@ -75,4 +74,4 @@ export const fetchContentfulLocation = async (): Promise<MapLocation | null> =>
     zoomLevels,
     backupImageUrls: { light: data.lightImage.url, dark: data.darkImage.url },
   };
-};
+}

src/api/server/fetchContentfulFooterLinks.ts → src/api/server/contentful/fetchFooterLinks.ts

@@ -1,7 +1,8 @@
 import { isDefinedItem, isLink } from 'api/parsers';
-import type { FooterQuery } from 'api/types/generated/fetchContentfulFooterLinks.generated';
+import type { Link } from 'api/types/generated/contentfulApi.generated';
+import type { FooterQuery } from 'api/types/generated/fetchFooterLinks.generated';
 import { gql } from 'graphql-request';
-import { contentfulClient } from './networkClients/contentfulClient';
+import { contentfulClient } from '../networkClients/contentfulClient';
 
 /**
  * Grabs the contentful sections with the title of footer. Should
@@ -26,13 +27,12 @@ const QUERY = gql`
 `;
 
 /**
- * Fetches all our site footer blocks from the Contentful API. Parses
- * out the text and icon links separately
+ * Fetches all our site footer blocks from the Contentful API.
  */
-export const fetchContentfulFooterLinks = async () => {
+export async function fetchFooterLinks(): Promise<Array<Link>> {
   const data = await contentfulClient.request<FooterQuery>(QUERY);
   const items =
     data?.sectionCollection?.items.flatMap((item) => item?.blocksCollection?.items ?? []) ?? [];
   const links = items.filter(isLink).filter(isDefinedItem);
   return links;
-};
+}

src/api/server/fetchContentfulIntroBlock.ts → src/api/server/contentful/fetchIntroContent.ts

@@ -1,11 +1,8 @@
 import { isTextBlock } from 'api/parsers';
-import type { IntroBlockQuery } from 'api/types/generated/fetchContentfulIntroBlock.generated';
-import { PROJECT_MAX_IMAGE_DIMENSION } from 'constants/imageSizes';
+import type { TextBlock } from 'api/types/generated/contentfulApi.generated';
+import type { IntroBlockQuery } from 'api/types/generated/fetchIntroContent.generated';
 import { gql } from 'graphql-request';
-import { contentfulClient } from './networkClients/contentfulClient';
-
-// Account for pixel density
-const IMAGE_SIZE = PROJECT_MAX_IMAGE_DIMENSION * 2;
+import { contentfulClient } from '../networkClients/contentfulClient';
 
 /**
  * Grabs the contentful sections with the title of header. Should
@@ -14,11 +11,13 @@ const IMAGE_SIZE = PROJECT_MAX_IMAGE_DIMENSION * 2;
 const QUERY = gql`
   query IntroBlock {
     asset(id: "1P5peDFKfzDHjWd6mcytc8") {
-      url(transform: {
-        width: ${IMAGE_SIZE}
-        height: ${IMAGE_SIZE}
-        format: WEBP
-      })
+      url(
+        transform: {
+          width: 660 # PROJECT_MAX_IMAGE_DIMENSION * 2
+          height: 660 # PROJECT_MAX_IMAGE_DIMENSION * 2
+          format: WEBP
+        }
+      )
       width
       height
       title
@@ -67,12 +66,20 @@ const QUERY = gql`
  * Fetches the text block corresponding to the introduction rich text
  * for the home page.
  */
-export const fetchContentfulIntroBlock = async () => {
+export async function fetchIntroContent(): Promise<null | {
+  textBlock: TextBlock;
+  image: {
+    url: string | undefined;
+    width: number | undefined;
+    height: number | undefined;
+    title: string | undefined;
+  };
+}> {
   const data = await contentfulClient.request<IntroBlockQuery>(QUERY);
   const textBlock = data?.textBlockCollection?.items?.filter(isTextBlock)?.[0];
   const image = data?.asset;
   if (textBlock && image) {
     return { textBlock, image };
   }
   return null;
-};
+}

src/api/server/fetchContentfulPrivacyBlock.ts → src/api/server/contentful/fetchPrivacyContent.ts

@@ -1,7 +1,8 @@
 import { isTextBlock } from 'api/parsers';
-import type { PrivacyBlockQuery } from 'api/types/generated/fetchContentfulPrivacyBlock.generated';
 import { gql } from 'graphql-request';
-import { contentfulClient } from './networkClients/contentfulClient';
+import type { PrivacyBlockQuery } from 'api/types/generated/fetchPrivacyContent.generated';
+import { contentfulClient } from '../networkClients/contentfulClient';
+import { TextBlock } from '../../types/generated/contentfulApi.generated';
 
 /**
  * Grabs the Contentful text block for the privacy page - should be
@@ -53,7 +54,7 @@ const QUERY = gql`
  * Fetches the text block corresponding to the privacy rich text
  * for the privacy page.
  */
-export const fetchContentfulPrivacyBlock = async () => {
+export async function fetchPrivacyContent(): Promise<TextBlock | null> {
   const data = await contentfulClient.request<PrivacyBlockQuery>(QUERY);
-  return data?.textBlockCollection?.items?.filter(isTextBlock)?.[0];
-};
+  return data?.textBlockCollection?.items?.filter(isTextBlock)?.[0] ?? null;
+}

src/api/server/fetchContentfulProjects.ts → src/api/server/contentful/fetchProjects.ts

@@ -1,7 +1,8 @@
 import { isProject } from 'api/parsers';
-import type { ProjectsQuery } from 'api/types/generated/fetchContentfulProjects.generated';
+import { Project } from 'api/types/generated/contentfulApi.generated';
+import type { ProjectsQuery } from 'api/types/generated/fetchProjects.generated';
 import { gql } from 'graphql-request';
-import { contentfulClient } from './networkClients/contentfulClient';
+import { contentfulClient } from '../networkClients/contentfulClient';
 
 /**
  * Grabs all projects to display
@@ -33,7 +34,7 @@ const QUERY = gql`
 /**
  * Fetches all projects sorted by newest first.
  */
-export const fetchContentfulProjects = async () => {
+export async function fetchProjects(): Promise<Array<Project>> {
   const data = await contentfulClient.request<ProjectsQuery>(QUERY);
   return data?.projectCollection?.items.filter(isProject) ?? [];
-};
+}

src/api/server/fetchGithubRepoVersion.ts → src/api/server/github/fetchRepoVersion.ts

@@ -1,6 +1,6 @@
-import type { GithubRepoVersionQuery } from 'api/types/generated/fetchGithubRepoVersion.generated';
+import type { GithubRepoVersionQuery } from 'api/types/generated/fetchRepoVersion.generated';
 import { gql } from 'graphql-request';
-import { githubClient } from './networkClients/githubClient';
+import { githubClient } from '../networkClients/githubClient';
 
 /**
  * This, strictly speaking, is usually overkill. We fetch the 100 most recently
@@ -35,7 +35,7 @@ const QUERY = gql`
  * help us find the release when running locally. A production build locally won't
  * have either of these defined, so we'll just return `null`.
  */
-export const fetchGithubRepoVersion = async () => {
+export async function fetchRepoVersion(): Promise<string | null> {
   const version = process.env.NEXT_PUBLIC_APP_VERSION;
   if (version?.length) {
     return version;
@@ -48,4 +48,4 @@ export const fetchGithubRepoVersion = async () => {
   const filteredReleases =
     releases?.filter((release) => release?.tagCommit?.oid === commitSha?.trim()) ?? [];
   return filteredReleases[0]?.name ?? commitSha?.slice(-12) ?? null;
-};
+}