-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
refactor: solid presets (@miodec) #7825
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from all commits
749191a
8951422
4535c37
e30aa34
85df5c0
35cf466
ede76d3
f65071e
b6cd68a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,208 @@ | ||
| import { Preset } from "@monkeytype/schemas/presets"; | ||
| import { queryCollectionOptions } from "@tanstack/query-db-collection"; | ||
| import { | ||
| createCollection, | ||
| createOptimisticAction, | ||
| useLiveQuery, | ||
| } from "@tanstack/solid-db"; | ||
| import Ape from "../ape"; | ||
| import { queryClient } from "../queries"; | ||
| import { baseKey } from "../queries/utils/keys"; | ||
| import { ConfigGroupName } from "@monkeytype/schemas/configs"; | ||
|
|
||
| export type PresetItem = Preset & { display: string }; | ||
|
|
||
| const queryKeys = { | ||
| root: () => [...baseKey("presets", { isUserSpecific: true })], | ||
| }; | ||
|
|
||
| function toPresetItem(preset: Preset): PresetItem { | ||
| return { | ||
| ...preset, | ||
| display: preset.name.replaceAll("_", " "), | ||
| }; | ||
| } | ||
|
|
||
| // oxlint-disable-next-line typescript/explicit-function-return-type | ||
| export function usePresetsLiveQuery() { | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. should we rename to ConfigPresets for more clarity? We have FilterPresets as well |
||
| return useLiveQuery((q) => { | ||
| return q | ||
| .from({ preset: presetsCollection }) | ||
| .orderBy(({ preset }) => preset.name, "asc"); | ||
| }); | ||
| } | ||
|
|
||
| const presetsCollection = createCollection( | ||
| queryCollectionOptions({ | ||
| staleTime: Infinity, | ||
| startSync: true, | ||
| queryKey: queryKeys.root(), | ||
|
|
||
| queryClient, | ||
| getKey: (it) => it._id, | ||
| queryFn: async () => { | ||
| return [] as PresetItem[]; | ||
| }, | ||
| }), | ||
| ); | ||
|
|
||
| type ActionType = { | ||
| addPreset: { | ||
| name: string; | ||
| config: Preset["config"]; | ||
| settingGroups: ConfigGroupName[] | undefined; | ||
| }; | ||
| editPreset: { | ||
| presetId: string; | ||
| name: string; | ||
| config?: Preset["config"]; | ||
| settingGroups?: ConfigGroupName[] | null; | ||
| }; | ||
| deletePreset: { | ||
| presetId: string; | ||
| }; | ||
| }; | ||
|
|
||
| const actions = { | ||
| addPreset: createOptimisticAction<ActionType["addPreset"]>({ | ||
| onMutate: ({ name, config, settingGroups }) => { | ||
| presetsCollection.insert({ | ||
| _id: "temp-" + Date.now(), | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. use tempId helper |
||
| name, | ||
| display: name.replaceAll("_", " "), | ||
| config, | ||
| settingGroups, | ||
| }); | ||
| }, | ||
| mutationFn: async ({ name, config, settingGroups }) => { | ||
| const response = await Ape.presets.add({ | ||
| body: { | ||
| name, | ||
| config, | ||
| ...(settingGroups !== undefined && { settingGroups }), | ||
| }, | ||
| }); | ||
| if (response.status !== 200) { | ||
| throw new Error(`Failed to add preset: ${response.body.message}`); | ||
| } | ||
| presetsCollection.utils.writeInsert( | ||
| toPresetItem({ | ||
| _id: response.body.data.presetId, | ||
| name: name, | ||
| settingGroups: settingGroups, | ||
| config: config, | ||
| }), | ||
| ); | ||
| }, | ||
| }), | ||
| editPreset: createOptimisticAction<ActionType["editPreset"]>({ | ||
| onMutate: ({ presetId, name, config, settingGroups }) => { | ||
| presetsCollection.update(presetId, (preset) => { | ||
| preset.name = name; | ||
| preset.display = name.replaceAll("_", " "); | ||
|
|
||
| if (config !== undefined) { | ||
| preset.config = config; | ||
| } | ||
| if (settingGroups !== undefined) { | ||
| preset.settingGroups = settingGroups; | ||
| } | ||
| }); | ||
| }, | ||
| mutationFn: async ({ presetId, name, config, settingGroups }) => { | ||
| const existing = presetsCollection.get(presetId); | ||
|
|
||
| if (existing === undefined) { | ||
| throw new Error("Preset not found"); | ||
| } | ||
|
|
||
| const response = await Ape.presets.save({ | ||
| body: { | ||
| _id: presetId, | ||
| name: name, | ||
| ...(config !== undefined && { | ||
| config: config, | ||
| settingGroups: settingGroups, | ||
| }), | ||
| }, | ||
| }); | ||
| if (response.status !== 200) { | ||
| throw new Error(`Failed to edit preset: ${response.body.message}`); | ||
| } | ||
|
|
||
| // if this is missing getPreset is out of sync | ||
| presetsCollection.utils.writeUpdate({ | ||
| _id: presetId, | ||
| name, | ||
| display: name.replaceAll("_", " "), | ||
| ...(config !== undefined && { config }), | ||
| ...(settingGroups !== undefined && { settingGroups }), | ||
| }); | ||
| }, | ||
| }), | ||
| deletePreset: createOptimisticAction<ActionType["deletePreset"]>({ | ||
| onMutate: ({ presetId }) => { | ||
| presetsCollection.delete(presetId); | ||
| }, | ||
| mutationFn: async ({ presetId }) => { | ||
| const response = await Ape.presets.delete({ | ||
| params: { presetId }, | ||
| }); | ||
| if (response.status !== 200) { | ||
| throw new Error(`Failed to delete preset: ${response.body.message}`); | ||
| } | ||
| presetsCollection.utils.writeDelete(presetId); | ||
| }, | ||
| }), | ||
| }; | ||
|
|
||
| // --- Public API --- | ||
|
|
||
| function getPresets(): PresetItem[] { | ||
| return [...presetsCollection.values()].sort((a, b) => | ||
| a.name.localeCompare(b.name), | ||
| ); | ||
| } | ||
|
|
||
| function getPreset(id: string): PresetItem | undefined { | ||
| return presetsCollection.get(id); | ||
| } | ||
|
|
||
| export function fillPresetsCollection(presets: Preset[]): void { | ||
| const presetItems = presets.map(toPresetItem); | ||
|
|
||
| presetsCollection.utils.writeBatch(() => { | ||
|
Comment on lines
+172
to
+174
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. logout clears the presetsCollection |
||
| presetItems.forEach((item) => { | ||
| presetsCollection.utils.writeInsert(item); | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| export async function addPreset( | ||
| params: ActionType["addPreset"], | ||
| ): Promise<void> { | ||
| const transaction = actions.addPreset(params); | ||
| await transaction.isPersisted.promise; | ||
| } | ||
|
|
||
| export async function editPreset( | ||
| params: ActionType["editPreset"], | ||
| ): Promise<void> { | ||
| const transaction = actions.editPreset(params); | ||
| await transaction.isPersisted.promise; | ||
| } | ||
|
|
||
| export async function deletePreset( | ||
| params: ActionType["deletePreset"], | ||
| ): Promise<void> { | ||
| const transaction = actions.deletePreset(params); | ||
| await transaction.isPersisted.promise; | ||
| } | ||
|
|
||
| /** | ||
| * Used for non reactive access. Do not use in Solid components. | ||
| */ | ||
| export const __nonReactive = { | ||
| getPresets, | ||
| getPreset, | ||
| }; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we do the same as with tags? update the name to be without underscores, only convert when talking to the api?