From 8988837248b7a3c569172e10e621da0b0244f5fc Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Fri, 18 Jul 2025 12:48:22 -0600 Subject: [PATCH] stablize dictionary IDS --- .../config.ts | 26 ++++++++----------- .../{color-themes => color-palettes}/index.ts | 4 +-- apps/server/src/api/v2/dictionaries/index.ts | 4 +-- .../buster_rest/dictionaries/queryRequests.ts | 10 +++---- .../api/buster_rest/dictionaries/requests.ts | 6 ++--- apps/web/src/api/query_keys/dictionaries.ts | 10 +++---- apps/web/src/context-hooks/usePalettes.ts | 2 -- .../src/context-hooks/useThemeOperations.ts | 4 ++- .../BusterReactQuery/createPersister.ts | 2 +- .../src/dictionary/color-themes.ts | 2 +- 10 files changed, 33 insertions(+), 37 deletions(-) rename apps/server/src/api/v2/dictionaries/{color-themes => color-palettes}/config.ts (94%) rename apps/server/src/api/v2/dictionaries/{color-themes => color-palettes}/index.ts (52%) diff --git a/apps/server/src/api/v2/dictionaries/color-themes/config.ts b/apps/server/src/api/v2/dictionaries/color-palettes/config.ts similarity index 94% rename from apps/server/src/api/v2/dictionaries/color-themes/config.ts rename to apps/server/src/api/v2/dictionaries/color-palettes/config.ts index c31abd5bf..56e230c2d 100644 --- a/apps/server/src/api/v2/dictionaries/color-themes/config.ts +++ b/apps/server/src/api/v2/dictionaries/color-palettes/config.ts @@ -309,6 +309,12 @@ const PINK_THEME = [ '#ad1457', ]; +export const DEFAULT_COLOR_PALETTE_ID = '__DEFAULT__'; + +const createDefaultId = (name: string, index: number) => { + return `${DEFAULT_COLOR_PALETTE_ID}${name.toLowerCase().replace(/ /g, '-')}-${index}`; +}; + export const COLORFUL_THEMES = [ { name: 'Buster', @@ -367,9 +373,9 @@ export const COLORFUL_THEMES = [ name: 'Vibrant Rainbow', colors: VIBRANT_RAINBOW, }, -].map((theme) => ({ +].map((theme, index) => ({ ...theme, - id: theme.name, + id: createDefaultId(theme.name, index), })); export const MONOCHROME_THEMES = [ @@ -418,19 +424,9 @@ export const MONOCHROME_THEMES = [ name: 'Blue', colors: BLUE_THEME, }, -].map((theme) => ({ +].map((theme, index) => ({ ...theme, - id: theme.name, + id: createDefaultId(theme.name, index), })); -const simplifyId = (name: string, index: number) => { - return `${name.toLowerCase().replace(/ /g, '-')}-${index}`; -}; - -export const ALL_THEMES: ColorPalette[] = [...COLORFUL_THEMES, ...MONOCHROME_THEMES].map( - (theme, index) => ({ - colors: theme.colors, - name: theme.name, - id: simplifyId(theme.name, index), - }) -); +export const ALL_THEMES: ColorPalette[] = [...COLORFUL_THEMES, ...MONOCHROME_THEMES]; diff --git a/apps/server/src/api/v2/dictionaries/color-themes/index.ts b/apps/server/src/api/v2/dictionaries/color-palettes/index.ts similarity index 52% rename from apps/server/src/api/v2/dictionaries/color-themes/index.ts rename to apps/server/src/api/v2/dictionaries/color-palettes/index.ts index a58d36955..5676849e9 100644 --- a/apps/server/src/api/v2/dictionaries/color-themes/index.ts +++ b/apps/server/src/api/v2/dictionaries/color-palettes/index.ts @@ -1,11 +1,11 @@ -import type { ColorThemeDictionariesResponse } from '@buster/server-shared/dictionary'; +import type { ColorPaletteDictionariesResponse } from '@buster/server-shared/dictionary'; import { Hono } from 'hono'; import { ALL_THEMES } from './config'; const app = new Hono(); app.get('/', async (c) => { - const response: ColorThemeDictionariesResponse = ALL_THEMES; + const response: ColorPaletteDictionariesResponse = ALL_THEMES; return c.json(response); }); diff --git a/apps/server/src/api/v2/dictionaries/index.ts b/apps/server/src/api/v2/dictionaries/index.ts index 61918be12..6c2feb319 100644 --- a/apps/server/src/api/v2/dictionaries/index.ts +++ b/apps/server/src/api/v2/dictionaries/index.ts @@ -1,11 +1,11 @@ import { Hono } from 'hono'; import { requireAuth } from '../../../middleware/auth'; -import colorThemesRoutes from './color-themes'; +import colorPalettesRoutes from './color-palettes'; import currencyRoutes from './currency'; const app = new Hono(); export default app .use('*', requireAuth) - .route('/color-themes', colorThemesRoutes) + .route('/color-palettes', colorPalettesRoutes) .route('/currency', currencyRoutes); diff --git a/apps/web/src/api/buster_rest/dictionaries/queryRequests.ts b/apps/web/src/api/buster_rest/dictionaries/queryRequests.ts index 6bfb415f5..4357d8215 100644 --- a/apps/web/src/api/buster_rest/dictionaries/queryRequests.ts +++ b/apps/web/src/api/buster_rest/dictionaries/queryRequests.ts @@ -1,11 +1,11 @@ import { useQuery, QueryClient } from '@tanstack/react-query'; -import { getColorThemes, getCurrencies } from './requests'; +import { getColorPalettes, getCurrencies } from './requests'; import { dictionariesQueryKeys } from '@/api/query_keys/dictionaries'; export const useColorDictionaryThemes = () => { return useQuery({ - ...dictionariesQueryKeys.colorThemes, - queryFn: getColorThemes + ...dictionariesQueryKeys.colorPalettes, + queryFn: getColorPalettes }); }; @@ -13,8 +13,8 @@ export const prefetchColorThemes = async (queryClientProp?: QueryClient) => { const queryClient = queryClientProp || new QueryClient(); await queryClient.prefetchQuery({ - ...dictionariesQueryKeys.colorThemes, - queryFn: getColorThemes + ...dictionariesQueryKeys.colorPalettes, + queryFn: getColorPalettes }); return queryClient; diff --git a/apps/web/src/api/buster_rest/dictionaries/requests.ts b/apps/web/src/api/buster_rest/dictionaries/requests.ts index 6fd1254e7..5eb2e1e2c 100644 --- a/apps/web/src/api/buster_rest/dictionaries/requests.ts +++ b/apps/web/src/api/buster_rest/dictionaries/requests.ts @@ -1,10 +1,10 @@ -import type { ColorThemeDictionariesResponse } from '@buster/server-shared/dictionary'; +import type { ColorPaletteDictionariesResponse } from '@buster/server-shared/dictionary'; import { mainApiV2 } from '../instances'; import type { CurrencyResponse } from '@buster/server-shared/dictionary'; -export const getColorThemes = async () => { +export const getColorPalettes = async () => { return await mainApiV2 - .get('/dictionaries/color-themes') + .get('/dictionaries/color-palettes') .then((res) => res.data); }; diff --git a/apps/web/src/api/query_keys/dictionaries.ts b/apps/web/src/api/query_keys/dictionaries.ts index 5abb790fd..c060a6532 100644 --- a/apps/web/src/api/query_keys/dictionaries.ts +++ b/apps/web/src/api/query_keys/dictionaries.ts @@ -1,12 +1,12 @@ import type { CurrencyResponse } from '@buster/server-shared/dictionary'; -import type { ColorThemeDictionariesResponse } from '@buster/server-shared/dictionary'; +import type { ColorPaletteDictionariesResponse } from '@buster/server-shared/dictionary'; import { queryOptions } from '@tanstack/react-query'; -export const colorThemes = queryOptions({ - queryKey: ['dictionaries', 'color-themes', 'list'] as const, +export const colorPalettes = queryOptions({ + queryKey: ['dictionaries', 'color-palettes', 'list'] as const, initialData: [], initialDataUpdatedAt: 0, - staleTime: 1000 * 60 * 60 * 24 * 7 // 7 days + staleTime: 1000 // 7 days }); export const getCurrencies = queryOptions({ @@ -17,6 +17,6 @@ export const getCurrencies = queryOptions({ }); export const dictionariesQueryKeys = { - colorThemes, + colorPalettes, getCurrencies }; diff --git a/apps/web/src/context-hooks/usePalettes.ts b/apps/web/src/context-hooks/usePalettes.ts index 3e4e77765..acfe07c08 100644 --- a/apps/web/src/context-hooks/usePalettes.ts +++ b/apps/web/src/context-hooks/usePalettes.ts @@ -32,8 +32,6 @@ export const useGetPalettes = () => { useColorDictionaryThemes(); const { data: currencies } = useGetCurrencies(); - console.log(currencies, dictionaryPalettes); - return useMemo(() => { const allPalettes = [...dictionaryPalettes, ...organizationPalettes]; const defaultPalette = allPalettes.find((palette) => palette.id === selectedPaletteId); diff --git a/apps/web/src/context-hooks/useThemeOperations.ts b/apps/web/src/context-hooks/useThemeOperations.ts index d9fd025a0..2e71c07c5 100644 --- a/apps/web/src/context-hooks/useThemeOperations.ts +++ b/apps/web/src/context-hooks/useThemeOperations.ts @@ -50,9 +50,11 @@ export const useThemeOperations = () => { const onSelectTheme = useMemoizedFn(async (theme: IColorPalette) => { if (!organization) return; + const isSelectedTheme = organization.organizationColorPalettes.selectedId === theme.id; + await updateOrganization({ organizationColorPalettes: { - selectedId: theme.id, + selectedId: isSelectedTheme ? null : theme.id, palettes: organization.organizationColorPalettes.palettes } }); diff --git a/apps/web/src/context/BusterReactQuery/createPersister.ts b/apps/web/src/context/BusterReactQuery/createPersister.ts index 64d53d039..14afe9064 100644 --- a/apps/web/src/context/BusterReactQuery/createPersister.ts +++ b/apps/web/src/context/BusterReactQuery/createPersister.ts @@ -12,7 +12,7 @@ export const PERSISTED_QUERIES = [queryKeys.slackGetChannels.queryKey].map(hashK export const PERMANENT_QUERIES = [ queryKeys.getCurrencies.queryKey, - queryKeys.colorThemes.queryKey + queryKeys.colorPalettes.queryKey ].map(hashKey); const ALL_PERSISTED_QUERIES = [...PERSISTED_QUERIES, ...PERMANENT_QUERIES]; diff --git a/packages/server-shared/src/dictionary/color-themes.ts b/packages/server-shared/src/dictionary/color-themes.ts index dd1c07af4..2dfbf0084 100644 --- a/packages/server-shared/src/dictionary/color-themes.ts +++ b/packages/server-shared/src/dictionary/color-themes.ts @@ -1,3 +1,3 @@ import type { ColorPalette } from '../organization/organization.types'; -export type ColorThemeDictionariesResponse = ColorPalette[]; +export type ColorPaletteDictionariesResponse = ColorPalette[];