From 559b260480ae3e2675280a7c7f79ecf4b471a7c5 Mon Sep 17 00:00:00 2001 From: Eli Gundry Date: Tue, 9 Jul 2024 22:27:24 -0400 Subject: [PATCH] feat: upgrade to Remix v2 (#80) This upgrade has been a long time in the making and I'm so happy it's done so I can move on to something else feat: switch to pnpm fix: upgrade remix-utils fix: upgrade partytown feat: upgrade growthbook packages and disable them temporarily fix: upgrade vite + vitest fix: upgrade some various core packages feat: replace react-select with a Tailwind based combobox fix: block bots from routes that consume Spotify fix: update sqlite timestamp triggers fix: load request values in loaders/actions instead of custom server --- .eslintrc.js => .eslintrc.cjs | 0 .github/workflows/pull-request-ci.yml | 23 +- .gitignore | 1 + .nvmrc | 2 +- app/components/Album/ErrorBoundary.tsx | 51 +- app/components/Base/Document.tsx | 26 + app/components/Base/Layout.tsx | 2 +- app/components/Base/index.tsx | 1 + app/components/ErrorBoundary.tsx | 42 +- app/components/Forms/FunSelect.tsx | 185 +- app/components/Forms/GenreSearch.tsx | 2 +- app/components/Forms/RelatedArtistSearch.tsx | 160 +- app/components/Loading/Desktop.tsx | 4 +- app/components/ProtectedRoute.tsx | 3 +- app/components/Tracking.tsx | 6 +- app/context/GrowthBook.tsx | 122 +- app/context/SyncedLocalStorage.tsx | 4 +- app/entry.client.tsx | 17 +- app/entry.server.tsx | 8 +- app/hooks/useGTM.ts | 2 +- app/jobs/album-of-the-year.ts | 4 +- app/jobs/pitchfork.ts | 2 +- app/lib/context.server.ts | 42 + app/lib/database/index.server.ts | 2 +- app/lib/database/schema.server.ts | 8 +- app/lib/remix.ts | 6 +- app/lib/responses.server.ts | 59 +- app/lib/spotify.server.ts | 9 +- app/lib/userSettings.server.ts | 2 +- app/root.tsx | 89 +- app/routes/_index.tsx | 12 +- app/routes/api.genre.ts | 8 +- app/routes/api.library.$id.ts | 17 +- app/routes/api.library.ts | 19 +- app/routes/api.og.artist.ts | 6 +- app/routes/api.saved-search.$id.ts | 10 +- app/routes/api.saved-search.ts | 17 +- app/routes/api.settings.ts | 10 +- app/routes/api.user-artists.ts | 3 +- app/routes/genre.$genre.tsx | 7 +- app/routes/genre._index.tsx | 6 +- app/routes/genre.random.tsx | 7 +- app/routes/genres.tsx | 7 +- app/routes/label.$slug.tsx | 7 +- app/routes/label.tsx | 7 +- app/routes/labs.tsx | 6 +- app/routes/publication.$slug.tsx | 10 +- app/routes/random.tsx | 7 +- app/routes/related-artist.tsx | 6 +- app/routes/spotify.artist-id.$artistID.tsx | 30 +- app/routes/spotify.artist.$artist.tsx | 29 +- app/routes/spotify.callback.tsx | 4 +- app/routes/spotify.categories.tsx | 7 +- app/routes/spotify.category.$id.tsx | 9 +- app/routes/spotify.currently-playing.tsx | 7 +- app/routes/spotify.featured-playlist.tsx | 7 +- app/routes/spotify.for-you.tsx | 7 +- app/routes/spotify.library.tsx | 7 +- app/routes/spotify.login.tsx | 4 +- app/routes/spotify.new-releases.tsx | 7 +- app/routes/spotify.top-artists-relations.tsx | 7 +- app/routes/spotify.top-artists.tsx | 7 +- app/routes/twitter.$username.tsx | 10 +- migrations/0000_rainy_logan.sql | 18 +- netlify.toml | 25 +- package-lock.json | 32897 ----------------- package.json | 69 +- pnpm-lock.yaml | 24477 ++++++++++++ postcss.config.js | 2 +- remix.config.mjs | 27 - remix.env.d.ts | 2 - server.ts | 44 - tsconfig.json | 20 +- types/remix.context.d.ts | 16 +- vite.config.ts | 18 + 75 files changed, 25218 insertions(+), 33595 deletions(-) rename .eslintrc.js => .eslintrc.cjs (100%) create mode 100644 app/components/Base/Document.tsx create mode 100644 app/lib/context.server.ts delete mode 100644 package-lock.json create mode 100644 pnpm-lock.yaml delete mode 100644 remix.config.mjs delete mode 100644 remix.env.d.ts delete mode 100644 server.ts create mode 100644 vite.config.ts diff --git a/.eslintrc.js b/.eslintrc.cjs similarity index 100% rename from .eslintrc.js rename to .eslintrc.cjs diff --git a/.github/workflows/pull-request-ci.yml b/.github/workflows/pull-request-ci.yml index b038dda..8d89845 100644 --- a/.github/workflows/pull-request-ci.yml +++ b/.github/workflows/pull-request-ci.yml @@ -4,29 +4,30 @@ on: branches: - main -env: - NODE_VERSION: 16 - jobs: ci: name: Run runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 + - uses: actions/checkout@v4 + - uses: pnpm/action-setup@v3 + - uses: actions/setup-node@v4 with: - node-version: ${{ env.NODE_VERSION }} - cache: 'npm' - - run: npm ci + node-version-file: '.nvmrc' + cache: 'pnpm' + - name: Install packages + run: | + pnpm --version + pnpm install - name: Run linters if: always() - run: npm run lint + run: pnpm run lint - name: Check types if: always() - run: npm run typecheck + run: pnpm run typecheck - name: Run tests if: always() - run: npm test + run: pnpm test diff --git a/.gitignore b/.gitignore index 7800a2f..92b73e1 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ node_modules .env coverage data.db +build diff --git a/.nvmrc b/.nvmrc index 6f7f377..53d1c14 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v16 +v22 diff --git a/app/components/Album/ErrorBoundary.tsx b/app/components/Album/ErrorBoundary.tsx index 626504d..86bc9c2 100644 --- a/app/components/Album/ErrorBoundary.tsx +++ b/app/components/Album/ErrorBoundary.tsx @@ -9,6 +9,7 @@ import { Layout, Typography, } from '~/components/Base' +import Document from '~/components/Base/Document' import useCurrentPath from '~/hooks/useCurrentPath' import useLoading from '~/hooks/useLoading' @@ -35,30 +36,32 @@ const AlbumErrorBoundary: React.FC = () => { } return ( - - -
- ⛔️ Whoops! - - We seemed to have run into an error. We are working on fixing it - now. You should refresh the page to fix this issue. - -
- Detailed error message - 
{body}
-
- - - Retry - - -
- - + + + +
+ ⛔️ Whoops! + + We seemed to have run into an error. We are working on fixing it + now. You should refresh the page to fix this issue. + +
+ Detailed error message + 
{body}
+
+ + + Retry + + +
+ + + ) } diff --git a/app/components/Base/Document.tsx b/app/components/Base/Document.tsx new file mode 100644 index 0000000..dd57c0b --- /dev/null +++ b/app/components/Base/Document.tsx @@ -0,0 +1,26 @@ +import { Links, Meta, Scripts, ScrollRestoration } from '@remix-run/react' + +import Tracking from '~/components/Tracking' +import useTailwindTheme from '~/hooks/useTailwindTheme' + +const Document: React.FC> = ({ children }) => { + const { isDarkMode, pallete } = useTailwindTheme() + + return ( + + + + + + + + + {children} + + + + + ) +} + +export default Document diff --git a/app/components/Base/Layout.tsx b/app/components/Base/Layout.tsx index f175945..c3afbed 100644 --- a/app/components/Base/Layout.tsx +++ b/app/components/Base/Layout.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx' import React from 'react' -import { ClientOnly } from 'remix-utils' +import { ClientOnly } from 'remix-utils/client-only' import AutoAlert from '~/components/AutoAlert' import { DesktopLoader, MobileLoader } from '~/components/Loading' diff --git a/app/components/Base/index.tsx b/app/components/Base/index.tsx index b4ae014..08a0b7c 100644 --- a/app/components/Base/index.tsx +++ b/app/components/Base/index.tsx @@ -262,6 +262,7 @@ export interface InputProps extends React.HTMLAttributes { name?: string required?: boolean type?: string + placeholder?: string } export const Input = React.forwardRef( diff --git a/app/components/ErrorBoundary.tsx b/app/components/ErrorBoundary.tsx index 4f36e21..0106c28 100644 --- a/app/components/ErrorBoundary.tsx +++ b/app/components/ErrorBoundary.tsx @@ -9,6 +9,7 @@ import { Layout, Typography, } from '~/components/Base' +import Document from '~/components/Base/Document' export const PageErrorBoundary: React.FC = () => { const error = useRouteError() @@ -31,24 +32,27 @@ export const PageErrorBoundary: React.FC = () => { } return ( - - -
- ⛔️ Whoops! - - We seem to have run into an error. We are working on fixing it now. - -
- Detailed error message - 
{body}
-
- - - Head Home - - -
- - + + + +
+ ⛔️ Whoops! + + We seem to have run into an error. We are working on fixing it + now. + +
+ Detailed error message + 
{body}
+
+ + + Head Home + + +
+ + + ) } diff --git a/app/components/Forms/FunSelect.tsx b/app/components/Forms/FunSelect.tsx index f95561d..619b448 100644 --- a/app/components/Forms/FunSelect.tsx +++ b/app/components/Forms/FunSelect.tsx @@ -1,95 +1,116 @@ -import clsx from 'clsx' -import type { ControlProps } from 'react-select' -import AsyncSelect from 'react-select/async' +import { + Combobox, + ComboboxInput, + ComboboxOption, + ComboboxOptions, +} from '@headlessui/react' +import { useMountEffect } from '@react-hookz/web' +import { useCallback, useState } from 'react' -import { useDarkMode } from '~/hooks/useMediaQuery' -import useTailwindTheme from '~/hooks/useTailwindTheme' +import { cn } from '~/lib/util' -const FunSelect: React.FC< - Omit, 'styles'> -> = ({ components, ...props }) => { - const { theme, pallete } = useTailwindTheme() - const isDarkMode = useDarkMode() +export interface Option { + label?: string + labelElement?: React.ReactNode + value: string +} - return ( - ({ - ...styles, - color: 'inherit', - cursor: 'pointer', - }), - placeholder: (styles) => ({ - ...styles, - color: theme.colors.gray[400], - }), - valueContainer: (styles) => ({ - ...styles, - paddingLeft: 0, - paddingRight: 0, - }), - singleValue: (styles) => ({ - ...styles, - color: isDarkMode ? theme.colors.white : styles.color, - }), - menu: (styles) => ({ - ...styles, - backgroundColor: pallete['base-100'], - }), - option: (styles, options) => { - let backgroundColor = theme.colors.white - let color = theme.colors.black +interface FunSelectProps { + name: string + label?: string + value?: Option + className?: string + placeholder?: string + loadOptions: (query?: string) => Promise + onChange: (value?: Option) => void +} - if (isDarkMode) { - backgroundColor = pallete['base-100'] - color = theme.colors.white - } +const FunSelect: React.FC = ({ + name, + label, + value, + className, + placeholder, + loadOptions, + onChange, +}) => { + const [options, setOptions] = useState([]) + const [selectedOption, setSelectedOption] = useState