Backend: Add reserved theme codes to validation

backend/src/data/models/theme.ts

@@ -12,7 +12,14 @@ export interface ThemeDocument extends Document, Entity.Theme {
 
 export const Theme = model<ThemeDocument>('theme', new Schema({
   _id: { type: String, default: generateSnowflake },
-  code: { type: String, default: generateInvite, unique: true },
+  code: {
+    type: String,
+    default: generateInvite,
+    unique: [true, 'Code should be unique'],
+    dropDups: true,
+    validate: [/(?<!discord|accord|default)$/, 'This code is reserved'],
+    maxlength: [32, 'Code is too long'],
+  },
   createdAt: { type: Date, default: new Date() },
   creatorId: {
     type: String,

backend/test/unit/models/theme.test.ts

@@ -2,6 +2,7 @@ import { test, given } from '@accord/ion';
 import { generateSnowflake } from '../../../src/data/snowflake-entity';
 import { longString, mongooseError } from '../../test-utils';
 import { Theme } from '../../../src/data/models/theme';
+import generateInvite from '../../../src/data/utils/generate-invite';
 
 test(createTheme, () => {
   given().expect(true);
@@ -11,6 +12,10 @@ test(createTheme, () => {
   given({ name: '' }).expect('Name is required');
   given({ name: longString(33) }).expect('Name is too long');
   given({ name: 'Cool Theme' }).expect(true);
+  given({ code: 'accord' }).expect('This code is reserved');
+  given({ code: 'default' }).expect('This code is reserved');
+  given({ code: 'discord' }).expect('This code is reserved');
+  given({ code: generateInvite() }).expect(true);
   given({ styles: longString(10001) })
     .message('Max length styles reached, rejected')
     .expect('Max supported style length reached: 10k characters');

frontend/src/components/modals/user-settings/user-settings-themes.tsx

@@ -29,14 +29,11 @@ const UserSettingsThemes: React.FunctionComponent = () => {
         <div
           key={t.id}
           className="w-12"
-          onClick={() => {
-            setTab(t.id);
-            applyTheme(t.id);
-          }}
+          onClick={() => setTab(t.id)}
           title={t.name}>
           <SidebarIcon
             childClasses={classNames('bg-bg-secondary', {
-              'border-2 border-primary h-[3.1rem]': t.id === user.activeThemeId,
+              'border-2 border-primary h-[3.1rem]': t.id === tab,
             })}
             imageURL={t.iconURL}
             name={t.name}

frontend/src/store/themes.ts

@@ -13,6 +13,7 @@ const slice = createSlice({
   name: 'themes',
   initialState: [{
     id: 'default',
+    code: 'default',
     createdAt: new Date('05/02/2021'),
     creatorId: '177127942839676928',
     name: 'Horizon (default)',
@@ -20,6 +21,7 @@ const slice = createSlice({
     styles: accordTheme,
   }, {
     id: 'discord',
+    code: 'discord',
     createdAt: new Date('05/02/2021'),
     creatorId: '177127942839676928',
     name: 'Discord (experimental)',

frontend/types/dotenv.d.ts

@@ -9,9 +9,4 @@ declare global {
     }
   }
 }
-export {};
-
-declare module '*.css' {
-  const content: Record<string, string>;
-  export default content;
-}
+export {};