EditorContentTab is a zod type.

Part of #673.
jkomoros · Nov 12, 2023 · 87c37d5 · 87c37d5
1 parent 5e0316d
commit 87c37d5
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 30 deletions.
diff --git a/src/components/card-editor.ts b/src/components/card-editor.ts
@@ -119,9 +119,6 @@ import {
 	REFERENCE_TYPE_CONCEPT,
 	TAB_CONTENT,
 	TAB_CONFIG,
-	EDITOR_TAB_CONTENT,
-	EDITOR_TAB_NOTES,
-	EDITOR_TAB_TODO,
 	TEXT_FIELD_TYPES_EDITABLE
 } from '../type_constants.js';
 
@@ -150,7 +147,8 @@ import {
 	CardID,
 	State,
 	ReferenceType,
-	CardFieldTypeEditable
+	CardFieldTypeEditable,
+	editorContentTab
 } from '../types.js';
 
 import {
@@ -453,25 +451,25 @@ class CardEditor extends connect(store)(LitElement) {
         <div class='inputs'>
 		  <div ?hidden=${this._selectedTab !== TAB_CONTENT} class='flex body'>
 			<div class='tabs' @click=${this._handleEditorTabClicked}>
-				<label data-name='${EDITOR_TAB_CONTENT}' ?data-selected=${this._selectedEditorTab == EDITOR_TAB_CONTENT} ?data-empty=${!hasContent} ?data-modified=${contentModified}>Content</label>
-				<label data-name='${EDITOR_TAB_NOTES}' ?data-selected=${this._selectedEditorTab == EDITOR_TAB_NOTES} ?data-empty=${!hasNotes} ?data-modified=${notesModified}>Notes</label>
-				<label data-name='${EDITOR_TAB_TODO}' ?data-selected=${this._selectedEditorTab == EDITOR_TAB_TODO} ?data-empty=${!hasTodo} ?data-modified=${todoModified}>Freeform TODO</label>
+				<label data-name='${editorContentTab('content')}' ?data-selected=${this._selectedEditorTab == 'content'} ?data-empty=${!hasContent} ?data-modified=${contentModified}>Content</label>
+				<label data-name='${editorContentTab('notes')}' ?data-selected=${this._selectedEditorTab == 'notes'} ?data-empty=${!hasNotes} ?data-modified=${notesModified}>Notes</label>
+				<label data-name='${editorContentTab('todo')}' ?data-selected=${this._selectedEditorTab == 'todo'} ?data-empty=${!hasTodo} ?data-modified=${todoModified}>Freeform TODO</label>
 				<span class='flex'></span>
-				<label class='help' ?hidden=${this._selectedEditorTab !== EDITOR_TAB_CONTENT}>Content is what shows up on the main body of the card</label>
-				<label class='help' ?hidden=${this._selectedEditorTab !== EDITOR_TAB_NOTES}>Notes are visible in the info panel to all readers and are for permanent asides</label>
-				<label class='help' ?hidden=${this._selectedEditorTab !== EDITOR_TAB_TODO}>Freeform TODOs are only visible to editors and mark a temporary thing to do so it shows up in the has-freeform-todo filter</label>
+				<label class='help' ?hidden=${this._selectedEditorTab !== 'content'}>Content is what shows up on the main body of the card</label>
+				<label class='help' ?hidden=${this._selectedEditorTab !== 'notes'}>Notes are visible in the info panel to all readers and are for permanent asides</label>
+				<label class='help' ?hidden=${this._selectedEditorTab !== 'todo'}>Freeform TODOs are only visible to editors and mark a temporary thing to do so it shows up in the has-freeform-todo filter</label>
 
 			</div>
-			<div ?hidden=${this._selectedEditorTab !== EDITOR_TAB_CONTENT} class='body flex'>
+			<div ?hidden=${this._selectedEditorTab !== 'content'} class='body flex'>
 				${TypedObject.entries(editableFieldsForCardType(this._card.card_type)).map(entry => html`<label>${toTitleCase(entry[0])}${entry[1].description ? help(entry[1].description) : ''}</label>
 					${entry[1].html
 		? html`<textarea @input='${this._handleTextFieldUpdated}' data-field=${entry[0]} .value=${this._card[entry[0]]}></textarea>`
 		: html`<div class='row'><input type='text' @input='${this._handleTextFieldUpdated}' data-field=${entry[0]} .value=${this._card[entry[0]] || ''}></input>${this._userMayUseAI && entry[0] == TEXT_FIELD_TITLE ? html`<button class='small' @click=${this._handleAITitleClicked} title='Suggest title with AI'>${AUTO_AWESOME_ICON}</button>` : ''}</div>`}
 				`)}
 				<label>Images</label><card-images-editor></card-images-editor>
 			</div>
-			<textarea ?hidden=${this._selectedEditorTab !== EDITOR_TAB_NOTES} @input='${this._handleNotesUpdated}' .value=${this._card.notes}></textarea>
-			<textarea ?hidden=${this._selectedEditorTab !== EDITOR_TAB_TODO} @input='${this._handleTodoUpdated}' .value=${this._card.todo}></textarea>
+			<textarea ?hidden=${this._selectedEditorTab !== 'notes'} @input='${this._handleNotesUpdated}' .value=${this._card.notes}></textarea>
+			<textarea ?hidden=${this._selectedEditorTab !== 'todo'} @input='${this._handleTodoUpdated}' .value=${this._card.todo}></textarea>
 		  </div>
 		  <div ?hidden=${this._selectedTab !== TAB_CONFIG}>
 			<div class='row'>

diff --git a/src/reducers/editor.ts b/src/reducers/editor.ts
@@ -42,8 +42,7 @@ import {
 } from '../actions.js';
 
 import {
-	TAB_CONFIG,
-	EDITOR_TAB_CONTENT,
+	TAB_CONFIG
 } from '../type_constants.js';
 
 import {
@@ -82,11 +81,13 @@ import {
 } from '../images.js';
 
 import {
-	EditorState, ImageInfoStringProperty
+	EditorContentTab,
+	EditorState,
+	ImageInfoStringProperty
 } from '../types.js';
 
 const DEFAULT_TAB = TAB_CONFIG;
-const DEFAULT_EDITOR_TAB = EDITOR_TAB_CONTENT;
+const DEFAULT_EDITOR_TAB : EditorContentTab = 'content';
 
 const INITIAL_STATE : EditorState = {
 	editing: false,

diff --git a/src/type_constants.ts b/src/type_constants.ts
@@ -106,17 +106,6 @@ export const EDITOR_TAB_TYPES = {
 	[TAB_CONFIG]: true
 };
 
-export const EDITOR_TAB_CONTENT = 'content';
-export const EDITOR_TAB_NOTES = 'notes';
-export const EDITOR_TAB_TODO = 'todo';
-
-//Drives EditorContentTab type
-export const EDITOR_CONTENT_TAB_TYPES = {
-	[EDITOR_TAB_CONTENT]: true,
-	[EDITOR_TAB_NOTES]: true,
-	[EDITOR_TAB_TODO]: true,
-};
-
 export const CARDS_COLLECTION = 'cards';
 export const CARD_UPDATES_COLLECTION = 'updates';
 export const SECTION_UPDATES_COLLECTION = 'updates';

diff --git a/src/types.ts b/src/types.ts
@@ -12,7 +12,6 @@ import {
 	REFERENCE_TYPE_TYPES,
 	TEXT_FIELD_TYPES_EDITABLE,
 	EDITOR_TAB_TYPES,
-	EDITOR_CONTENT_TAB_TYPES,
 	FIND_CARD_TO_LINK,
 	FIND_CARD_TO_PERMISSION,
 	FIND_CARD_TO_REFERENCE,
@@ -397,8 +396,17 @@ export type ConfigurableFilterConfigurationMap = {
 
 //TODO: this name is confusing, in the state this is just called tab
 export type EditorTab = keyof(typeof EDITOR_TAB_TYPES);
+
+const editorContentTabSchema = z.enum([
+	'content',
+	'notes',
+	'todo'
+]);
+
 //TODO: this name is confusing, in the state this is called editorTab
-export type EditorContentTab = keyof(typeof EDITOR_CONTENT_TAB_TYPES);
+export type EditorContentTab = z.infer<typeof editorContentTabSchema>;
+
+export const editorContentTab = (input : EditorContentTab) => input;
 
 export type UserInfo = {
 	uid: Uid,