Merge pull request #3 from docyx/worker-api

cf workers

.gitignore

@@ -24,3 +24,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.wrangler
+wrangler.toml
+.dev.vars

.prettierrc.json

@@ -1,4 +1,5 @@
 {
+  "editorconfig": true,
   "semi": false,
   "singleQuote": true,
   "svelteIndentScriptAndStyle": false

README.md

@@ -6,26 +6,6 @@ IMDb rating tables and watch times for TV shows.
 
 [![Example Rating Table (The Simpsons)](./table.png)](https://docyx.github.io/imdb-table/?id=456#/the-simpsons)
 
-## Development Notes
-
-For the development server to function properly, you must make the following change in [./server/vercel.json](./server/vercel.json):
-
-```diff
-"key": "Access-Control-Allow-Origin",
-- "value": "https://docyx.github.io"
-+ "value": "*"
-```
-
-Make sure you don't commit this change when submitting a PR. Thanks!
-
-Additionally, you need to install the [Vercel CLI](https://vercel.com/docs/cli) by running:
-
-```
-npm i -g vercel
-```
-
-To start the development server, run `vercel dev` inside the `./server` directory and you're good to go.
-
 ## License
 
 [MIT](./LICENSE)

client/src/App.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
+import type { Info } from '@api-types'
 import { isEqual } from 'lodash-es'
 import { onMount, tick } from 'svelte'
-import { getInfo, getWatchTime, search } from './api'
+import { getInfo, search } from './api'
 import Autocomplete from './components/Autocomplete.svelte'
 import Corner from './components/Corner.svelte'
 import Table from './components/Table.svelte'
 import { COLORBLIND_COLORS, DEFAULT_COLORS } from './constants'
 import { colors } from './stores'
-import type { AutocompleteItem, Info } from './types'
+import type { AutocompleteItem } from './types'
 
 let isColorblind = isEqual($colors, COLORBLIND_COLORS)
 
@@ -16,8 +17,8 @@ let loading = false
 let info: Info | null = null
 let watchTime: number | null = null
 
-$: watchTimeDays = watchTime ? Math.floor(watchTime / 60 / 24) : 0
-$: watchTimeHours = watchTime ? Math.round((watchTime / 60) % 24) : 0
+$: watchTimeDays = info?.watchTime ? Math.floor(info.watchTime / 60 / 24) : 0
+$: watchTimeHours = info?.watchTime ? Math.round((info.watchTime / 60) % 24) : 0
 
 onMount(async () => {
   const queryParams = new URLSearchParams(location.search)
@@ -53,7 +54,7 @@ const getAutocompletions = async (
 
   return searchResults.map((res) => ({
     id: res.id,
-    label: res.title,
+    label: res.name,
     secondaryLabel: res.year?.toString(),
   }))
 }
@@ -80,16 +81,9 @@ const load = async (tmdbID: string, replaceURL = false) => {
   try {
     loading = true
 
-    const [infoRes, watchTimeRes] = await Promise.allSettled([
-      getInfo(tmdbID),
-      getWatchTime(tmdbID),
-    ])
+    const infoRes = await getInfo(tmdbID)
 
-    if (infoRes.status !== 'fulfilled') throw new Error('Failed to get info')
-
-    info = infoRes.value
-
-    if (watchTimeRes.status === 'fulfilled') watchTime = watchTimeRes.value
+    info = infoRes
 
     loading = false
 

client/src/api.ts

@@ -1,19 +1,16 @@
-import type { SearchResult } from './types'
+import type { SimpleMedia } from '@api-types'
 
 const BASE_URL = import.meta.env.DEV
-  ? 'http://localhost:3000/api'
-  : 'https://imdb-table.vercel.app/api'
+  ? 'http://localhost:8787'
+  : 'https://imdb-table.taux.media'
 
-const getJSONResponse = async (endpoint: string) => {
+const getJsonResponse = async (endpoint: string) => {
   const res = await fetch(`${BASE_URL}/${endpoint}`)
   return await res.json()
 }
 
-export const search = async (query: string): Promise<SearchResult[]> =>
-  await getJSONResponse(`search?q=${query}`)
+export const search = async (query: string): Promise<SimpleMedia[]> =>
+  await getJsonResponse(`search?q=${query}`)
 
 export const getInfo = async (tmdbID: string) =>
-  await getJSONResponse(`info?id=${tmdbID}`)
-
-export const getWatchTime = async (tmdbID: string) =>
-  (await getJSONResponse(`watch-time?id=${tmdbID}`)).watchTime
+  await getJsonResponse(`info?id=${tmdbID}`)

client/src/components/Table.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+import type { Rating } from '@api-types'
 import { colors } from '../stores'
-import type { Ratings } from '../types'
 
-export let ratings: Ratings
+export let ratings: Rating[][]
 
 let activeSeason: number | null = null
 let activeEpisode: number | null = null

client/src/types.ts

@@ -4,18 +4,4 @@ export interface AutocompleteItem {
   secondaryLabel?: string
 }
 
-export interface SearchResult {
-  id: string
-  title: string
-  year?: number
-}
-
-export type Ratings = Array<Array<[string, number]>>
-
-export interface Info {
-  name: string
-  year?: number
-  ratings: Ratings
-}
-
 export type Colors = [string, string, string, string]

client/tsconfig.json

@@ -6,15 +6,11 @@
     "useDefineForClassFields": true,
     "module": "ESNext",
     "resolveJsonModule": true,
-    /**
-     * Typecheck JS in `.svelte` and `.js` files by default.
-     * Disable checkJs if you'd like to use dynamic types in JS.
-     * Note that setting allowJs false does not prevent the use
-     * of JS in `.svelte` files.
-     */
-    "allowJs": true,
     "checkJs": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "paths": {
+      "@api-types": ["../server/src/types"]
+    }
   },
   "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
   "references": [{ "path": "./tsconfig.node.json" }]

cspell.json

@@ -1,3 +1,3 @@
 {
-  "words": ["tmdb"]
+  "words": ["tmdb", "imdb", "tconst"]
 }

server/.dev.vars.example

@@ -0,0 +1,2 @@
+TMDB_API_KEY=xxx
+IS_DEV=1