lifted toast* into Container

Author: AlexErrant

app/src/components/cardsPreview.tsx

@@ -1,8 +1,8 @@
 import { For, Show, type VoidComponent } from 'solid-js'
 import ResizingIframe from './resizingIframe'
 import { type NoteCard } from 'shared'
-import { toastImpossible } from '../components/toasts'
 import { toNoteCards, type NoteCardView } from '../uiLogic/cards'
+import { C } from '../topLevelAwait'
 
 function toMainNoteCards(noteCardView: NoteCardView): NoteCard {
 	return {
@@ -12,7 +12,7 @@ function toMainNoteCards(noteCardView: NoteCardView): NoteCard {
 			fieldValues: new Map(noteCardView.note.fieldValues),
 		},
 		card:
-			noteCardView.mainCard ?? toastImpossible('No main card.', noteCardView),
+			noteCardView.mainCard ?? C.toastImpossible('No main card.', noteCardView),
 	}
 }
 

app/src/components/cardsTable.tsx

@@ -24,7 +24,6 @@ import { assertNever } from 'shared'
 import { agGridTheme } from '../globalState'
 import { Upload } from 'shared-dom'
 import { C } from '../topLevelAwait'
-import { toastError, toastImpossible, toastWarn } from './toasts'
 import FiltersTable from './filtersTable'
 import './cardsTable.css'
 import { type SearchParams } from '../sqlite/card'
@@ -304,12 +303,12 @@ const dataSource = {
 				if (countishWrong && x.searchCache == null) {
 					// asynchronously/nonblockingly build the cache
 					db.buildCache(x.baseQuery, search).catch((e) => {
-						toastWarn('Error building cache', e)
+						C.toastWarn('Error building cache', e)
 					})
 				}
 			})
 			.catch((e) => {
-				toastError('Error getting cards.', e)
+				C.toastError('Error getting cards.', e)
 				p.failCallback()
 			})
 	},
@@ -351,7 +350,7 @@ function setColumnDefs(ftsSearchActual: string, regex: RegExp) {
 							<mark>
 								{/* use the match's casing - not the search's (firstWord) */}
 								{match()?.groups?.searchWord ??
-									toastImpossible('searchWord is missing')}
+									C.toastImpossible('searchWord is missing')}
 							</mark>
 							<span>{match()?.groups?.right ?? ''}</span>
 						</Show>

app/src/components/editCardSetting.tsx

@@ -46,8 +46,8 @@ import {
 	jsonCompletion,
 } from 'codemirror-json-schema'
 import Ajv from 'ajv'
-import { toastError } from './toasts'
 import { db } from '../db'
+import { C } from '../topLevelAwait'
 
 const EditCardSetting: VoidComponent<{
 	cardSetting: CardSetting
@@ -95,14 +95,14 @@ const EditCardSetting: VoidComponent<{
 					try {
 						cardSetting = JSON.parse(view.state.doc.toString()) as CardSetting
 					} catch (error) {
-						toastError('Invalid JSON.')
+						C.toastError('Invalid JSON.')
 						return
 					}
 					if (validate(cardSetting)) {
 						props.setCardSetting(cardSetting)
 						await db.bulkUploadCardSettings([cardSetting])
 					} else {
-						toastError(
+						C.toastError(
 							<>
 								<div>Error in JSON</div>
 								<pre>{JSON.stringify(validate.errors, null, 4)}</pre>

app/src/components/fieldHtmlEditor.tsx

@@ -41,7 +41,7 @@ import { theme } from '../globalState'
 import ResizingIframe from './resizingIframe'
 import { format } from 'prettier'
 import * as prettierPluginHtml from 'prettier/plugins/html'
-import { toastError } from './toasts'
+import { C } from '../topLevelAwait'
 
 let view: EditorView
 const FieldHtmlEditor: VoidComponent<{
@@ -147,7 +147,7 @@ function createEditorState(doc: string, theme: 'light' | 'dark') {
 								view.setState(createEditorState(v, theme))
 							})
 							.catch((e) => {
-								toastError('Error while formatting.', e)
+								C.toastError('Error while formatting.', e)
 							})
 						return true
 					},

app/src/components/fieldsEditor.tsx

@@ -4,7 +4,6 @@ import { type SetStoreFunction } from 'solid-js/store'
 import { db } from '../db'
 import { type MediaId } from 'shared'
 import { ulidAsBase64Url } from '../domain/utility'
-import { toastFatal } from './toasts'
 import FieldHtmlEditor from './fieldHtmlEditor'
 import { ToggleButton } from '@kobalte/core'
 import { ChevronDown, Code, Quote } from 'shared-dom'
@@ -34,7 +33,7 @@ export const FieldsEditor: VoidComponent<{
 					class='text-white bg-green-600 rounded p-2 px-4 font-bold hover:bg-green-700'
 					onClick={async () => {
 						if (props.noteCard.cards.length === 0)
-							toastFatal('There must be at least 1 card')
+							C.toastFatal('There must be at least 1 card')
 						const dp = new DOMParser()
 						// eslint-disable-next-line solid/reactivity -- the fn isn't reactive
 						await tx(async () => {

app/src/components/pluginsTable.tsx

@@ -12,7 +12,7 @@ import { type Plugin } from 'shared-dom'
 import { db } from '../db'
 import 'ag-grid-community/styles/ag-grid.css'
 import 'ag-grid-community/styles/ag-theme-alpine.css'
-import { toastError } from './toasts'
+import { C } from '../topLevelAwait'
 
 LicenseManager.setLicenseKey(import.meta.env.VITE_AG_GRID_LICENSE)
 
@@ -51,7 +51,7 @@ const columnDefs: Array<ColDef<Plugin>> = [
 					if (props.data?.name != null) {
 						await db.deletePlugin(props.data.name)
 					} else {
-						toastError(
+						C.toastError(
 							'props.data is null, how did this occur?',
 							'props.data is null, how did this occur?',
 							props,

app/src/components/resizingIframe.tsx

@@ -11,7 +11,6 @@ import {
 import { unwrap } from 'solid-js/store'
 import { db } from '../db'
 import { C } from '../topLevelAwait'
-import { toastError } from './toasts'
 import { debounce, leadingAndTrailing } from '@solid-primitives/scheduled'
 
 const targetOrigin = '*' // highTODO make more limiting. Also implement https://stackoverflow.com/q/8169582
@@ -68,7 +67,7 @@ const ResizingIframe: VoidComponent<{
 					targetOrigin,
 				)
 			} catch (error) {
-				toastError('Error communicating with iframe.', error)
+				C.toastError('Error communicating with iframe.', error)
 			}
 		},
 		200,

app/src/globalState.ts

@@ -1,15 +1,15 @@
 import { createResource, createSignal, untrack } from 'solid-js'
 import { cwaClient } from './trpcClient'
-import { toastError, toastInfo } from './components/toasts'
 import { initThreadPool } from 'fsrs-browser'
+import { C } from './topLevelAwait'
 
 // lowTODO have hub send app a message when a successful login occurs
 export const [whoAmI] = createResource(async () => {
 	const r = await cwaClient.whoAmI.query().catch((e) => {
 		if (window.navigator.onLine) {
-			toastError('Error occurred while verifying identity.', e)
+			C.toastError('Error occurred while verifying identity.', e)
 		} else {
-			toastInfo('Cannot validate identity while offline.')
+			C.toastInfo('Cannot validate identity while offline.')
 		}
 		return undefined
 	})

app/src/hubMessenger.ts

@@ -15,7 +15,6 @@ import {
 import { ulidAsBase64Url } from './domain/utility'
 import { noteOrds } from 'shared-dom'
 import { C, tx } from './topLevelAwait'
-import { toastFatal } from './components/toasts'
 
 export const appExpose = {
 	addTemplate: async (rt: RemoteTemplate) => {
@@ -62,7 +61,7 @@ export const appExpose = {
 		await tx(async () => {
 			const template =
 				(await db.getTemplateIdByRemoteId(rn.templateId)) ??
-				toastFatal(`You don't have the remote template ${rn.templateId}`)
+				C.toastFatal(`You don't have the remote template ${rn.templateId}`)
 			const n: Note = {
 				id: rn.id,
 				templateId: template.id,
@@ -151,7 +150,7 @@ async function downloadImages(imgSrcs: Map<MediaId, string>) {
 					data: await response.arrayBuffer(),
 				})
 			} else {
-				return toastFatal(
+				return C.toastFatal(
 					`Error occured while downloading ${imgSrc}.`,
 					`Fetching ${imgSrc} got a status code of ${response.status}`,
 					response,

app/src/pages/home.tsx

@@ -12,7 +12,6 @@ import { db } from '../db'
 import { importAnki } from './importer/importer'
 import { augcClient } from '../trpcClient'
 import { C, rd } from '../topLevelAwait'
-import { toastImpossible } from '../components/toasts'
 import EditSql from '../components/editSql'
 import init, { Fsrs } from 'fsrs-browser'
 import { initFsrsTrainThreadPool } from '../globalState'
@@ -188,7 +187,7 @@ async function uploadMedia(
 	const file =
 		// My mental static analysis says to use `currentTarget`, but it seems to randomly be null, hence `target`. I'm confused but whatever.
 		event.target.files?.item(0) ??
-		toastImpossible('There should be a file selected')
+		C.toastImpossible('There should be a file selected')
 	const now = C.getDate()
 	await db.bulkInsertMedia([
 		{

app/src/pages/importer/importer.ts

@@ -43,7 +43,6 @@ import {
 import { db } from './../../db'
 import _ from 'lodash'
 import sqliteUrl from '../../assets/sql-wasm.wasm?url'
-import { toastFatal, toastImpossible, toastInfo } from '../../components/toasts'
 import { C } from '../../topLevelAwait'
 
 export async function importAnki(
@@ -55,14 +54,14 @@ export async function importAnki(
 	const ankiExport =
 		// My mental static analysis says to use `currentTarget`, but it seems to randomly be null, hence `target`. I'm confused but whatever.
 		(event.target as HTMLInputElement).files?.item(0) ??
-		toastImpossible('There should be a file selected')
+		C.toastImpossible('There should be a file selected')
 	const ankiEntries = await new ZipReader(
 		new BlobReader(ankiExport),
 	).getEntries()
 	const sqlite =
 		ankiEntries.find((e) => e.filename === 'collection.anki21') ??
 		ankiEntries.find((e) => e.filename === 'collection.anki2') ??
-		toastFatal(
+		C.toastFatal(
 			'`collection.anki21` or `collection.anki2` not found. When exporting from Anki, ensure that `Support older Anki versions` in the `Export` window is checked.',
 		)
 	await importAnkiDb(sqlite)
@@ -72,21 +71,21 @@ export async function importAnki(
 async function importAnkiMedia(ankiEntries: Entry[]): Promise<void> {
 	const media =
 		ankiEntries.find((e) => e.filename === 'media') ??
-		toastImpossible(
+		C.toastImpossible(
 			`'media' not found in the provided file. Did Anki change their export format?`,
 		)
 	const mediaText =
 		(await media.getData?.(new TextWriter())) ??
-		toastImpossible(
+		C.toastImpossible(
 			"Impossible since we're using `getEntries` https://github.com/gildas-lormeau/zip.js/issues/371",
 		)
 	const parsed = checkMedia(JSON.parse(mediaText))
 	const entryChunks = _.chunk(ankiEntries, 1000)
 	for (let i = 0; i < entryChunks.length; i++) {
-		toastInfo(`Media ${i}/${entryChunks.length}`)
+		C.toastInfo(`Media ${i}/${entryChunks.length}`)
 		await addMediaBatch(entryChunks[i]!, parsed)
 	}
-	toastInfo('Anki media import done!')
+	C.toastInfo('Anki media import done!')
 }
 
 async function addMediaBatch(
@@ -97,7 +96,7 @@ async function addMediaBatch(
 		entries.map(async (entry) => {
 			const array =
 				(await entry.getData?.(new Uint8ArrayWriter())) ??
-				toastImpossible(
+				C.toastImpossible(
 					"Impossible since we're using `getEntries` https://github.com/gildas-lormeau/zip.js/issues/371",
 				)
 			const name = nameByI[entry.filename]
@@ -164,7 +163,7 @@ async function importAnkiDb(sqlite: Entry): Promise<void> {
 	} finally {
 		ankiDb.close()
 	}
-	toastInfo('AnkiDB import done!')
+	C.toastInfo('AnkiDB import done!')
 }
 
 async function getAnkiDb(sqlite: Entry): Promise<Database> {
@@ -180,7 +179,7 @@ async function getAnkiDb(sqlite: Entry): Promise<Database> {
 async function getSqliteBuffer(sqlite: Entry): Promise<Uint8Array> {
 	const blob =
 		(await sqlite.getData?.(new BlobWriter())) ??
-		toastImpossible(
+		C.toastImpossible(
 			"Impossible since we're using `getEntries` https://github.com/gildas-lormeau/zip.js/issues/371",
 		)
 	const arrayBuffer = await blob.arrayBuffer()

app/src/pages/importer/parser.ts

@@ -26,8 +26,8 @@ import {
 	dconfSingle,
 } from './typeChecker'
 import _ from 'lodash'
-import { toastFatal, toastImpossible } from '../../components/toasts'
 import { z } from 'zod'
+import { C } from '../../topLevelAwait'
 
 function parseField(fld: Fld): Field {
 	return {
@@ -57,7 +57,7 @@ function parseTemplateType(model: Model): TemplateType {
 			}
 		case 1: {
 			if (model.tmpls.length !== 1)
-				toastImpossible(
+				C.toastImpossible(
 					`Cloze template have only 1 template, but got ${model.tmpls.length}`,
 				)
 			const tmpl = model.tmpls[0]!
@@ -67,7 +67,7 @@ function parseTemplateType(model: Model): TemplateType {
 			}
 		}
 		default:
-			toastImpossible(
+			return C.toastImpossible(
 				`Only 0 or 1 are possible model types, but got ${model.type}`,
 			)
 	}
@@ -98,11 +98,11 @@ export function parseNote(
 ): PNote {
 	const templateId = note.mid.toString() as TemplateId // medTODO
 	const template = templates.get(templateId)
-	if (template == null) toastFatal(`Template ${templateId} not found`)
+	if (template == null) return C.toastFatal(`Template ${templateId} not found`)
 	const fields = template.fields.map((f) => f.name)
 	const values = note.flds.split('\x1f')
 	if (fields.length !== values.length)
-		toastFatal(
+		C.toastFatal(
 			`The length of fields (${fields.length}) and values (${values.length}) for noteId=${note.id} don't match.`,
 		)
 	return {
@@ -129,10 +129,11 @@ export function parseCard(
 	decks: Decks,
 ): PCard {
 	const note = notes.get(card.nid)
-	if (note == null) toastFatal(`Note ${card.nid} not found`)
+	if (note == null) return C.toastFatal(`Note ${card.nid} not found`)
 	const template = templates.get(note.templateId)
-	if (template == null) toastFatal(`Template ${note.templateId} not found`)
-	const deck = decks[card.did] ?? toastFatal(`Deck ${card.did} not found`)
+	if (template == null)
+		return C.toastFatal(`Template ${note.templateId} not found`)
+	const deck = decks[card.did] ?? C.toastFatal(`Deck ${card.did} not found`)
 	return {
 		id: card.id.toString() as CardId, // medTODO
 		noteId: card.nid.toString() as NoteId, // medTODO

app/src/pages/importer/typeChecker.tsx

@@ -1,6 +1,6 @@
 import { type Ord } from 'shared'
 import { z, type SafeParseReturnType } from 'zod'
-import { toastFatal } from '../../components/toasts'
+import { C } from '../../topLevelAwait'
 
 const tmpl = z.object({
 	name: z.string(),
@@ -157,7 +157,7 @@ function parse<Input, Output>(
 	if (result.success) {
 		return result.data
 	} else {
-		return toastFatal({
+		return C.toastFatal({
 			jsx: (
 				<>
 					<div>Error parsing the following:</div>

app/src/pages/plugins.tsx

@@ -2,7 +2,6 @@ import { type JSX } from 'solid-js'
 import PluginsTable from '../components/pluginsTable'
 import { db } from '../db'
 import { parsePluginNpmPackage } from 'shared-dom'
-import { toastImpossible, toastInfo } from '../components/toasts'
 import { C } from '../topLevelAwait'
 
 export default function Plugins(): JSX.Element {
@@ -29,13 +28,13 @@ async function importPlugin(
 	const pluginTgz =
 		// My mental static analysis says to use `currentTarget`, but it seems to randomly be null, hence `target`. I'm confused but whatever.
 		event.target.files?.item(0) ??
-		toastImpossible('There should be a file selected')
+		C.toastImpossible('There should be a file selected')
 	const plugin = await parsePluginNpmPackage(pluginTgz)
 	const now = C.getDate()
 	await db.upsertPlugin({
 		...plugin,
 		created: now,
 		updated: now,
 	})
-	toastInfo('Plugin upserted!')
+	C.toastInfo('Plugin upserted!')
 }