fixup readonly, fixup query types

microsoft/TypeScript#34777

Author: tantaman

app/src/components/editor/layout/LayoutEditor.tsx

@@ -18,10 +18,8 @@ export default function LayoutEditor({ appState }: { appState: AppState }) {
 }
 
 function LayoutSurface({ ctx, deckId }: { ctx: Ctx; deckId: ID_of<Deck> }) {
-  const slides = useQuery<Slide>(...queries.slides(ctx, deckId)).data;
-  const selectedSlideIds = useQuery<ID_of<Slide>>(
-    ...queries.selectedSlides(ctx, deckId)
-  ).data;
+  const slides = useQuery(queries.slides(ctx, deckId)).data;
+  const selectedSlideIds = useQuery(queries.selectedSlides(ctx, deckId)).data;
   const set = useMemo<Set<ID_of<Slide>>>(
     () => new Set(selectedSlideIds),
     [selectedSlideIds]

app/src/components/editor/markdown/styling_menu/FontColorButton.tsx

@@ -15,8 +15,8 @@ type Props = {
 };
 
 export default function FontColorButton({ ctx, state, theme }: Props) {
-  const recentColors = useQueryA<[string], string>(
-    ...queries.recentColors(ctx, theme?.id || config.defaultThemeId)
+  const recentColors = useQueryA(
+    queries.recentColors(ctx, theme?.id || config.defaultThemeId)
   ).data;
   // useBind(["transaction"], state);
   // useQuery(["recentColors"], theme);

app/src/components/editor/markdown/styling_menu/StylingMenu.tsx

@@ -22,9 +22,7 @@ export default function StylingMenu({ appState }: Props) {
   const ctx = appState.ctx;
 
   const theme = first(
-    useQuery<Theme>(
-      ...queries.themeFromDeck(appState.ctx, appState.current_deck_id)
-    ).data
+    useQuery(queries.themeFromDeck(appState.ctx, appState.current_deck_id)).data
   );
 
   const addImage = () => {

app/src/components/editor/well/SlideWell.tsx

@@ -22,8 +22,8 @@ function SlideWell({
   appState: AppState;
 }) {
   // TODO: paginated fetch
-  const slideIds = useQueryA<[ID_of<SlideType>], ID_of<SlideType>>(
-    ...queries.slideIds(appState.ctx, appState.current_deck_id)
+  const slideIds = useQueryA(
+    queries.slideIds(appState.ctx, appState.current_deck_id)
   ).data;
   const orientHorizontally = useMatchMedia(
     "(max-width: " + mediaCuts.horizontal + "px)"

app/src/components/editor/well/WellContextMenu.tsx

@@ -21,7 +21,7 @@ export default function WellContextMenu({
       }
       onClick={(e) => {
         // TODO: index based or... slide id base?
-        mutations.addSlideAfter(appState.ctx, index);
+        mutations.addSlideAfter(appState.ctx, index, appState.current_deck_id);
         e.stopPropagation();
       }}
     >

app/src/components/editor/well/WellSlide.tsx

@@ -37,13 +37,15 @@ function WellSlide(props: {
   // TODO: these types should be part of `queries.` so the caller doesn't
   // need to provide them
   const markdown = first(
-    useQuery<Markdown>(...queries.markdown(props.appState.ctx, props.id)).data
+    useQuery(queries.markdown(props.appState.ctx, props.id)).data
   );
-  const theme = useQuery<Theme>(
-    ...queries.themeFromDeck(props.appState.ctx, props.appState.current_deck_id)
-  ).data;
-  const selectedSlides = useQueryA<[ID_of<Slide>], ID_of<Slide>>(
-    ...queries.selectedSlides(props.appState.ctx, props.id)
+  const theme = first(
+    useQuery(
+      queries.themeFromDeck(props.appState.ctx, props.appState.current_deck_id)
+    ).data
+  );
+  const selectedSlides = useQueryA(
+    queries.selectedSlides(props.appState.ctx, props.id)
   ).data;
 
   const previewTheme = props.appState.previewTheme;
@@ -184,15 +186,15 @@ function WellSlide(props: {
         selected: props.deck.mostRecentlySelectedSlide === props.index,
         [styles.root]: true,
         [styles.in]: dropClass === styles.in,
-        [previewTheme.getFontClass(theme)]: true,
+        [fns.getFontClass(previewTheme, theme)]: true,
       })}
       onClick={() => {
         commit(props.deck.setSelectedSlide(props.index, true), [
           persistLog,
           undoLog,
         ]);
       }}
-      style={{ backgroundColor: previewTheme.getSlideColorStyle(theme) }}
+      style={{ backgroundColor: fns.getSlideColorStyle(previewTheme, theme) }}
     >
       <div className={styles.markdownContainer} ref={setRef}></div>
       <WellSlideDrawingPreview

app/src/domain/fns.ts

@@ -17,6 +17,17 @@ const fns = {
     return undefined;
   },
 
+  getSlideColorStyle(
+    previewTheme: Theme,
+    pickedTheme?: Theme
+  ): string | undefined {
+    return undefined;
+  },
+
+  getFontClass(previewTheme: Theme, pickedTheme?: Theme): string | undefined {
+    return undefined;
+  },
+
   mdStringAsDom(content: string) {
     return toDOM(content);
   },

app/src/domain/queries.ts

@@ -1,6 +1,6 @@
-import { Ctx, first, pick0 } from "../hooks";
+import { Ctx, first, pick0, Query } from "../hooks";
 import { ID_of } from "../id";
-import { Deck, Slide, Theme } from "./schema";
+import { Deck, Markdown, Presenter, Slide, TableName, Theme } from "./schema";
 
 const queries = {
   // TODO: we can collapse all "same calls" in the same tick. to just do 1 query
@@ -16,22 +16,22 @@ const queries = {
       ["undo_stack"],
       "SELECT 1 FROM undo_stack WHERE deck_id = ? LIMIT 1",
       [id],
-    ] as const,
+    ] as Query<boolean, TableName>,
   canRedo: (ctx: Ctx, id: ID_of<Deck>) =>
     [
       ctx,
       ["redo_stack"],
       "SELECT 1 FROM undo_stack WHERE deck_id = ? LIMIT 1",
       [id],
-    ] as const,
+    ] as Query<boolean, TableName>,
 
   slides: (ctx: Ctx, id: ID_of<Deck>) =>
     [
       ctx,
       ["slide"],
       'SELECT * FROM slide WHERE deck_id = ? ORDER BY "order" ASC',
       [id],
-    ] as const,
+    ] as Query<Slide, TableName>,
 
   slideIds: (ctx: Ctx, id: ID_of<Deck>) =>
     [
@@ -40,23 +40,24 @@ const queries = {
       'SELECT id FROM slide WHERE deck_id = ? ORDER BY "order" ASC',
       [id],
       (x: [ID_of<Slide>]) => x[0],
-    ] as const,
+    ] as Query<[ID_of<Slide>], TableName, ID_of<Slide>>,
 
   chosenPresenter: (ctx: Ctx, id: ID_of<Deck>) =>
     [
       ctx,
       ["deck", "presenter"],
       "SELECT presenter.* FROM presenter, deck WHERE deck.id = ? AND presenter.name = deck.chosen_presenter",
       [id],
-    ] as const,
+    ] as Query<Presenter, TableName>,
 
   selectedSlides: (ctx: Ctx, id: ID_of<Deck>) =>
     [
       ctx,
-      ["selected_slide"],
+      ["slide"],
       "SELECT slide_id FROM selected_slide WHERE deck_id = ?",
       [id],
-    ] as const,
+      (x: [ID_of<Slide>]) => x[0],
+    ] as Query<[ID_of<Slide>], TableName, ID_of<Slide>>,
 
   recentColors: (ctx: Ctx, id: ID_of<Theme>) =>
     [
@@ -65,26 +66,29 @@ const queries = {
       "SELECT color FROM recent_color WHERE theme_id = ?",
       [id],
       (x: [string]) => x[0],
-    ] as const,
+    ] as Query<[string], TableName, string>,
 
   theme: (ctx: Ctx, id: ID_of<Theme>) =>
-    [ctx, ["theme"], "SELECT * FROM theme WHERE id = ?", [id]] as const,
+    [ctx, ["theme"], "SELECT * FROM theme WHERE id = ?", [id]] as Query<
+      Theme,
+      TableName
+    >,
 
   themeFromDeck: (ctx: Ctx, id: ID_of<Deck>) =>
     [
       ctx,
       ["theme", "deck"],
       "SELECT theme.* FROM theme JOIN deck ON theme.id = deck.theme_id WHERE deck.id = ?",
       [id],
-    ] as const,
+    ] as Query<Theme, TableName>,
 
   markdown: (ctx: Ctx, id: ID_of<Slide>) =>
     [
       ctx,
       ["markdown"],
       "SELECT * FROM markdown WHERE slide_id = ?",
       [id],
-    ] as const,
-};
+    ] as Query<Markdown, TableName>,
+} as const;
 
 export default queries;