stablize dictionary IDS

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) => {
+export const ALL_THEMES: ColorPalette[] = [...COLORFUL_THEMES, ...MONOCHROME_THEMES];
-  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),
-  })
-);

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);
 });
 

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);

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,
+    ...dictionariesQueryKeys.colorPalettes,
-    queryFn: getColorThemes
+    queryFn: getColorPalettes
   });
 };
 
@@ -13,8 +13,8 @@ export const prefetchColorThemes = async (queryClientProp?: QueryClient) => {
   const queryClient = queryClientProp || new QueryClient();
 
   await queryClient.prefetchQuery({
-    ...dictionariesQueryKeys.colorThemes,
+    ...dictionariesQueryKeys.colorPalettes,
-    queryFn: getColorThemes
+    queryFn: getColorPalettes
   });
 
   return queryClient;

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<ColorThemeDictionariesResponse>('/dictionaries/color-themes')
+    .get<ColorPaletteDictionariesResponse>('/dictionaries/color-palettes')
     .then((res) => res.data);
 };
 

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<ColorThemeDictionariesResponse>({
+export const colorPalettes = queryOptions<ColorPaletteDictionariesResponse>({
-  queryKey: ['dictionaries', 'color-themes', 'list'] as const,
+  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<CurrencyResponse>({
@@ -17,6 +17,6 @@ export const getCurrencies = queryOptions<CurrencyResponse>({
 });
 
 export const dictionariesQueryKeys = {
-  colorThemes,
+  colorPalettes,
   getCurrencies
 };

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);

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
       }
     });

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];

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[];