[API] move code except for endpoints on FE to package (#430)

Closes DG-144

## What changed? Why?
feat release to capture end of most API changes!

Moves all the spotify/strava/contentful/github code to the API package!
Still referencing types in client + all the endpoints in a few more api
files in Next but most are pretty generic now

apps/web/package.json

@@ -24,6 +24,7 @@
     "@mui/material": "5.15.2",
     "@next/bundle-analyzer": "14.0.4",
     "animate-css-grid": "1.5.1",
+    "api": "workspace:*",
     "api-clients": "workspace:*",
     "db": "workspace:*",
     "dotenv-mono": "1.3.13",

apps/web/src/api/endpoints.ts

@@ -1,11 +1,11 @@
-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';
+import { fetchFooterLinks } from 'api/contentful/fetchFooterLinks';
+import { fetchIntroContent } from 'api/contentful/fetchIntroContent';
+import { fetchCurrentLocation } from 'api/contentful/fetchCurrentLocation';
+import { fetchPrivacyContent } from 'api/contentful/fetchPrivacyContent';
+import { fetchProjects } from 'api/contentful/fetchProjects';
+import { fetchRepoVersion } from 'api/github/fetchRepoVersion';
+import { fetchRecentlyPlayed } from 'api/spotify/fetchRecentlyPlayed';
+import { fetchLatestStravaActivityFromDb } from 'api/strava/fetchLatestStravaActivityFromDb';
 
 /**
  * All possible types of endpoints we could request

apps/web/src/components/ContentCard.tsx

@@ -4,7 +4,7 @@ import { Card, Typography } from '@mui/material';
 import { mixinSx } from 'ui/helpers/mixinSx';
 import type { SxProps } from 'ui/theme';
 import { truncated } from 'ui/helpers/truncated';
-import type { Link } from 'api/server/contentful/api.generated';
+import type { Link } from 'api/contentful/api.generated';
 import { ContentWrappingLink } from './ContentWrappingLink';
 
 export type ContentCardProps = Pick<

apps/web/src/components/ContentWrappingLink.tsx

@@ -1,5 +1,5 @@
 import type { SxProps } from 'ui/theme';
-import type { Link as LinkType } from 'api/server/contentful/api.generated';
+import type { Link as LinkType } from 'api/contentful/api.generated';
 import { Link } from 'components/Link';
 
 type ContentWrappingLinkProps = Pick<React.ComponentProps<'div'>, 'children'> & {

apps/web/src/components/Footer.tsx

@@ -2,7 +2,7 @@ import { Container } from '@mui/material';
 import { Section } from 'ui/core/Section';
 import { Nav, NavGroup, NavItem } from 'ui/core/Nav';
 import { HorizontalStack } from 'ui/core/HorizontalStack';
-import type { Link as LinkType } from 'api/server/contentful/api.generated';
+import type { Link as LinkType } from 'api/contentful/api.generated';
 import { useData } from 'api/useData';
 import { Link } from './Link';
 

apps/web/src/components/Image.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@mui/material';
 import NextImage from 'next/image';
 import { BREAKPOINT_MAX_SIZES } from 'ui/helpers/imageSizes';
-import type { Asset } from 'api/server/contentful/api.generated';
+import type { Asset } from 'api/contentful/api.generated';
 
 type ImageProps = Partial<Asset> & {
   url: Asset['url'];

apps/web/src/components/RichText.tsx

@@ -6,8 +6,8 @@ import { Divider, Stack, Typography } from '@mui/material';
 import { isNotNullish } from 'shared-core/helpers/typeguards';
 import type { SxProps } from 'ui/theme';
 import { PROJECT_MAX_IMAGE_DIMENSION } from 'ui/helpers/imageSizes';
-import { isLink, isProject } from 'api/server/contentful/parsers';
-import type { Asset, Entry, TextBlockContent } from 'api/server/contentful/api.generated';
+import { isLink, isProject } from 'api/contentful/parsers';
+import type { Asset, Entry, TextBlockContent } from 'api/contentful/api.generated';
 import { ProjectCard } from 'components/homepage/ProjectCard';
 import { Image } from './Image';
 import { Link } from './Link';

apps/web/src/components/homepage/ProjectCard.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useCurrentImageSizes } from 'ui/helpers/useCurrentImageSizes';
-import type { Project } from 'api/server/contentful/api.generated';
+import type { Project } from 'api/contentful/api.generated';
 import type { ContentCardProps } from 'components/ContentCard';
 import { ContentCard } from 'components/ContentCard';
 import { HoverableContainer } from 'components/HoverableContainer';

apps/web/src/components/maps/FullMapCard.tsx

@@ -1,11 +1,11 @@
 import { Maximize2, Minimize2 } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { useTheme } from '@mui/material';
+import type { MapLocation } from 'api/contentful/MapLocation';
 import type { ContentCardProps } from 'components/ContentCard';
 import { Map } from 'components/maps/Map';
 import { Marker } from 'components/maps/Marker';
 import { Control } from 'components/maps/Control';
-import type { MapLocation } from 'api/server/contentful/MapLocation';
 import { MapContentCard } from './MapContentCard';
 
 type FullMapCardProps = Pick<ContentCardProps, 'turnOnAnimation'> & {

apps/web/src/components/maps/Map.tsx

@@ -3,7 +3,7 @@ import type { MapRef } from 'react-map-gl';
 import { AttributionControl, Map as MapGL } from 'react-map-gl';
 import { Box, useTheme } from '@mui/material';
 import { useColorScheme } from 'ui/theme/useColorScheme';
-import type { MapLocation } from 'api/server/contentful/MapLocation';
+import type { MapLocation } from 'api/contentful/MapLocation';
 import { StandardControls } from './StandardControls';
 
 export type MapProps = {

apps/web/src/components/maps/Marker.tsx

@@ -1,7 +1,7 @@
 import { Marker as MapMarker } from 'react-map-gl';
 import { Box } from '@mui/material';
 import { MAP_MARKER_IMAGE_SIZE } from 'ui/helpers/imageSizes';
-import type { MapLocation } from 'api/server/contentful/MapLocation';
+import type { MapLocation } from 'api/contentful/MapLocation';
 import { Image } from 'components/Image';
 
 const DIMENSION = 100;

apps/web/src/components/spotify/AlbumImage.tsx

@@ -1,5 +1,5 @@
 import { Card } from '@mui/material';
-import type { Track } from 'api/server/spotify/Track';
+import type { Track } from 'api/spotify/Track';
 import { Image } from 'components/Image';
 import { Link } from 'components/Link';
 import { useLinkWithName } from 'hooks/useLinkWithName';

apps/web/src/components/spotify/ArtistList.tsx

@@ -4,7 +4,7 @@
 import { Fragment } from 'react';
 import { Typography } from '@mui/material';
 import { truncated } from 'ui/helpers/truncated';
-import type { Artist } from 'api/server/spotify/Track';
+import type { Artist } from 'api/spotify/Track';
 import { Link } from 'components/Link';
 import { useLinkWithName } from 'hooks/useLinkWithName';
 

apps/web/src/components/spotify/PlaybackStatus.tsx

@@ -1,7 +1,7 @@
 import { Music } from 'lucide-react';
 import { Typography } from '@mui/material';
 import { HorizontalStack } from 'ui/core/HorizontalStack';
-import type { Track } from 'api/server/spotify/Track';
+import type { Track } from 'api/spotify/Track';
 import { useRelativeTimeFormat } from 'hooks/useRelativeTimeFormat';
 
 type PlaybackStatusProps = {

apps/web/src/components/spotify/TrackListing.tsx

@@ -1,6 +1,6 @@
 import { Stack } from '@mui/material';
 import { HorizontalStack } from 'ui/core/HorizontalStack';
-import type { Track } from 'api/server/spotify/Track';
+import type { Track } from 'api/spotify/Track';
 import { AlbumImage } from './AlbumImage';
 import { ArtistList } from './ArtistList';
 import { SpotifyLogo } from './SpotifyLogo';

apps/web/src/hooks/useLinkWithName.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { findLinkWithName } from 'api/server/contentful/parsers';
-import type { Link as LinkProps } from 'api/server/contentful/api.generated';
+import { findLinkWithName } from 'api/contentful/parsers';
+import type { Link as LinkProps } from 'api/contentful/api.generated';
 import { useData } from 'api/useData';
 
 /**

apps/web/src/pages/api/webhooks.ts

@@ -1,9 +1,9 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 import { isRecord } from 'shared-core/helpers/typeguards';
+import { echoStravaChallengeIfValid } from 'api/strava/echoStravaChallengeIfValid';
+import { syncStravaWebhookUpdateWithDb } from 'api/strava/syncStravaWebhookUpdateWithDb';
+import type { StravaWebhookEvent } from 'api/strava/StravaWebhookEvent';
 import { handleApiError, methodNotAllowedError } from 'api/handleApiError';
-import { echoStravaChallengeIfValid } from 'api/server/strava/echoStravaChallengeIfValid';
-import { syncStravaWebhookUpdateWithDb } from 'api/server/strava/syncStravaWebhookUpdateWithDb';
-import type { StravaWebhookEvent } from 'api/server/strava/StravaWebhookEvent';
 
 // Just a shorthand for this function type
 type Processor = (request: NextApiRequest, response: NextApiResponse) => void;

apps/web/src/api/server/contentful/parsers.ts → packages/api/contentful/parsers.ts

@@ -1,4 +1,4 @@
-import type { Link, Project, TextBlock } from 'api/server/contentful/api.generated';
+import type { Link, Project, TextBlock } from './api.generated';
 
 /**
  * Type guard to get a link out

packages/api/package.json

@@ -7,6 +7,9 @@
     "lint:types": "tsc"
   },
   "dependencies": {
+    "api-clients": "workspace:*",
+    "db": "workspace:*",
+    "graphql-request": "6.1.0",
     "shared-core": "workspace:*"
   },
   "devDependencies": {

apps/web/src/api/server/strava/echoStravaChallengeIfValid.ts → packages/api/strava/echoStravaChallengeIfValid.ts

@@ -1,4 +1,4 @@
-import type { NextApiRequest, NextApiResponse } from 'next';
+type Query = Partial<Record<string, string | Array<string>>>;
 
 const MODE_KEY = 'hub.mode';
 const CHALLENGE_KEY = 'hub.challenge';
@@ -21,9 +21,7 @@ type StravaSubscription = {
  * verifies that the STRAVA_VERIFY_TOKEN is actually the verify key that
  * Strava called us with.
  */
-const isSubscription = (
-  query: Partial<Record<string, string | Array<string>>>,
-): query is StravaSubscription =>
+const isSubscription = (query: Query): query is StravaSubscription =>
   query[MODE_KEY] === VALID_MODE && query[VERIFY_KEY] === process.env.STRAVA_VERIFY_TOKEN;
 
 /**
@@ -32,13 +30,16 @@ const isSubscription = (
  * returns true if the request's query has a validated Strava subscription
  * within it.
  */
-export const echoStravaChallengeIfValid = (request: NextApiRequest, response: NextApiResponse) => {
+export const echoStravaChallengeIfValid = (
+  request: { query: Query },
+  response: { status: (value: number) => { json: (value: Record<string, string>) => void } },
+) => {
   const { query } = request;
-  if (isSubscription(query)) {
-    response.status(200).json({
-      [CHALLENGE_KEY]: query[CHALLENGE_KEY],
-    });
-    return true;
+  if (!isSubscription(query)) {
+    return false;
   }
-  return false;
+  response.status(200).json({
+    [CHALLENGE_KEY]: query[CHALLENGE_KEY],
+  });
+  return true;
 };

apps/web/src/api/server/strava/fetchStravaActivityFromApi.ts → packages/api/strava/fetchStravaActivityFromApi.ts

@@ -1,5 +1,5 @@
 import type { StravaDetailedActivity } from 'db/models/StravaDetailedActivity';
-import { stravaClient } from 'api/server/strava/stravaClient';
+import { stravaClient } from './stravaClient';
 import { paredStravaActivity } from './paredStravaActivity';
 
 /**

packages/codegen/createApiGenerator.ts

@@ -47,7 +47,7 @@ export function createApiGenerator(
   },
 ): CodegenConfig['generates'] {
   // Absolute path for the API folder root
-  const apiFolder = path.join(ROOT, `apps/web/src/api/server/${name}`);
+  const apiFolder = path.join(ROOT, `packages/api/${name}`);
 
   // A glob for all the source operation documents, relative to project root
   const sourceDocumentsGlob = `${apiFolder}/!(*.generated).ts`;

packages/eslint-config-dg/library-react.js

@@ -16,9 +16,11 @@ const project = resolve(process.cwd(), 'tsconfig.json');
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
   extends: [
+    '@vercel/style-guide/eslint/node',
     '@vercel/style-guide/eslint/browser',
     '@vercel/style-guide/eslint/typescript',
     '@vercel/style-guide/eslint/react',
+    'eslint-config-turbo',
   ].map((importPath) => require.resolve(importPath)),
   parser: '@typescript-eslint/parser',
   parserOptions: {

packages/eslint-config-dg/library.js

@@ -14,9 +14,12 @@ const project = resolve(process.cwd(), 'tsconfig.json');
 
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ['@vercel/style-guide/eslint/browser', '@vercel/style-guide/eslint/typescript'].map(
-    (importPath) => require.resolve(importPath),
-  ),
+  extends: [
+    '@vercel/style-guide/eslint/node',
+    '@vercel/style-guide/eslint/browser',
+    '@vercel/style-guide/eslint/typescript',
+    'eslint-config-turbo',
+  ].map((importPath) => require.resolve(importPath)),
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project,

turbo.json

@@ -21,22 +21,23 @@
   ],
   "globalEnv": [
     "ANALYZE",
-    "NEXT_PUBLIC_MAPBOX_TOKEN",
-    "CONTENTFUL_SPACE_ID",
     "CONTENTFUL_ACCESS_TOKEN",
-    "GITHUB_AUTHENTICATION_TOKEN",
+    "CONTENTFUL_SPACE_ID",
     "CONTENTFUL_SPACE_ID",
     "DATABASE_URL",
-    "WEBHOOK_CALLBACK_URL",
+    "GITHUB_AUTHENTICATION_TOKEN",
+    "NEXT_PUBLIC_APP_VERSION",
+    "NEXT_PUBLIC_MAPBOX_TOKEN",
+    "NEXT_PUBLIC_SENTRY_DSN",
+    "NODE_ENV",
+    "SENTRY_AUTH_TOKEN",
+    "SPOTIFY_CLIENT_ID",
+    "SPOTIFY_CLIENT_SECRET",
     "STRAVA_CLIENT_ID",
     "STRAVA_CLIENT_SECRET",
     "STRAVA_TOKEN_NAME",
     "STRAVA_VERIFY_TOKEN",
-    "SPOTIFY_CLIENT_ID",
-    "SPOTIFY_CLIENT_SECRET",
-    "SENTRY_AUTH_TOKEN",
-    "NEXT_PUBLIC_SENTRY_DSN",
-    "NEXT_PUBLIC_APP_VERSION"
+    "WEBHOOK_CALLBACK_URL"
   ],
   "pipeline": {
     "topo": {