Take two on inputs (#19)

* works fine locally, breaks in prod

* better approach

* Better

Author: thomasballinger

.prettierignore

@@ -2,3 +2,4 @@
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+src/convex/_generated/

convex.json

@@ -1,3 +1,3 @@
 {
-  "functions": "src/convex/"
+	"functions": "src/convex/"
 }

src/convex/README.md

@@ -7,66 +7,66 @@ A query function that takes two arguments looks like:
 
 ```ts
 // functions.js
-import { query } from "./_generated/server";
-import { v } from "convex/values";
+import { query } from './_generated/server';
+import { v } from 'convex/values';
 
 export const myQueryFunction = query({
-  // Validators for arguments.
-  args: {
-    first: v.number(),
-    second: v.string(),
-  },
-
-  // Function implementation.
-  handler: async (ctx, args) => {
-    // Read the database as many times as you need here.
-    // See https://docs.convex.dev/database/reading-data.
-    const documents = await ctx.db.query("tablename").collect();
-
-    // Arguments passed from the client are properties of the args object.
-    console.log(args.first, args.second);
-
-    // Write arbitrary JavaScript here: filter, aggregate, build derived data,
-    // remove non-public properties, or create new objects.
-    return documents;
-  },
+	// Validators for arguments.
+	args: {
+		first: v.number(),
+		second: v.string()
+	},
+
+	// Function implementation.
+	handler: async (ctx, args) => {
+		// Read the database as many times as you need here.
+		// See https://docs.convex.dev/database/reading-data.
+		const documents = await ctx.db.query('tablename').collect();
+
+		// Arguments passed from the client are properties of the args object.
+		console.log(args.first, args.second);
+
+		// Write arbitrary JavaScript here: filter, aggregate, build derived data,
+		// remove non-public properties, or create new objects.
+		return documents;
+	}
 });
 ```
 
 Using this query function in a React component looks like:
 
 ```ts
 const data = useQuery(api.functions.myQueryFunction, {
-  first: 10,
-  second: "hello",
+	first: 10,
+	second: 'hello'
 });
 ```
 
 A mutation function looks like:
 
 ```ts
 // functions.js
-import { mutation } from "./_generated/server";
-import { v } from "convex/values";
+import { mutation } from './_generated/server';
+import { v } from 'convex/values';
 
 export const myMutationFunction = mutation({
-  // Validators for arguments.
-  args: {
-    first: v.string(),
-    second: v.string(),
-  },
-
-  // Function implementation.
-  handler: async (ctx, args) => {
-    // Insert or modify documents in the database here.
-    // Mutations can also read from the database like queries.
-    // See https://docs.convex.dev/database/writing-data.
-    const message = { body: args.first, author: args.second };
-    const id = await ctx.db.insert("messages", message);
-
-    // Optionally, return a value from your mutation.
-    return await ctx.db.get(id);
-  },
+	// Validators for arguments.
+	args: {
+		first: v.string(),
+		second: v.string()
+	},
+
+	// Function implementation.
+	handler: async (ctx, args) => {
+		// Insert or modify documents in the database here.
+		// Mutations can also read from the database like queries.
+		// See https://docs.convex.dev/database/writing-data.
+		const message = { body: args.first, author: args.second };
+		const id = await ctx.db.insert('messages', message);
+
+		// Optionally, return a value from your mutation.
+		return await ctx.db.get(id);
+	}
 });
 ```
 
@@ -75,13 +75,11 @@ Using this mutation function in a React component looks like:
 ```ts
 const mutation = useMutation(api.functions.myMutationFunction);
 function handleButtonPress() {
-  // fire and forget, the most common way to use mutations
-  mutation({ first: "Hello!", second: "me" });
-  // OR
-  // use the result once the mutation has completed
-  mutation({ first: "Hello!", second: "me" }).then((result) =>
-    console.log(result)
-  );
+	// fire and forget, the most common way to use mutations
+	mutation({ first: 'Hello!', second: 'me' });
+	// OR
+	// use the result once the mutation has completed
+	mutation({ first: 'Hello!', second: 'me' }).then((result) => console.log(result));
 }
 ```
 

src/convex/seed_messages.ts

@@ -1,33 +1,33 @@
 export default [
-  {
-    _creationTime: 1691013604325.0217,
-    _id: "2w1tjesf0ng55yvwzv5gkehv9hsy20r",
-    author: "Tom",
-    body: "Let's talk about vim vs VS Code!",
-  },
-  {
-    _creationTime: 1691013604325.0137,
-    _id: "2w4w1wx9f0bpgm1adt0w6j689hspwq8",
-    author: "Sujay",
-    body: "What about emacs?",
-  },
+	{
+		_creationTime: 1691013604325.0217,
+		_id: '2w1tjesf0ng55yvwzv5gkehv9hsy20r',
+		author: 'Tom',
+		body: "Let's talk about vim vs VS Code!"
+	},
+	{
+		_creationTime: 1691013604325.0137,
+		_id: '2w4w1wx9f0bpgm1adt0w6j689hspwq8',
+		author: 'Sujay',
+		body: 'What about emacs?'
+	},
 
-  {
-    _creationTime: 1691013604325.0095,
-    _id: "2w6q24ygyjhsb0mxq619y8v09hsxyeg",
-    author: "Tom",
-    body: "I spend so much time customizing my vim config, and now I need to learn Lua to configure neovim!",
-  },
-  {
-    _creationTime: 1691013604325.0125,
-    _id: "2w7c8t54p3be7gd212vhnabw9hsqwdr",
-    author: "James",
-    body: "I use the defaults settings for everything.",
-  },
-  {
-    _creationTime: 1691013604325.0205,
-    _id: "2w7d7p8ysmtr6njf4yejj0jy9hsjar0",
-    author: "Arnold",
-    body: "While you were talking I added a feature to the product",
-  },
+	{
+		_creationTime: 1691013604325.0095,
+		_id: '2w6q24ygyjhsb0mxq619y8v09hsxyeg',
+		author: 'Tom',
+		body: 'I spend so much time customizing my vim config, and now I need to learn Lua to configure neovim!'
+	},
+	{
+		_creationTime: 1691013604325.0125,
+		_id: '2w7c8t54p3be7gd212vhnabw9hsqwdr',
+		author: 'James',
+		body: 'I use the defaults settings for everything.'
+	},
+	{
+		_creationTime: 1691013604325.0205,
+		_id: '2w7d7p8ysmtr6njf4yejj0jy9hsjar0',
+		author: 'Arnold',
+		body: 'While you were talking I added a feature to the product'
+	}
 ];

src/convex/tsconfig.json

@@ -1,24 +1,24 @@
 {
-  /* This TypeScript project config describes the environment that
-   * Convex functions run in and is used to typecheck them.
-   * You can modify it, but some settings required to use Convex.
-   */
-  "compilerOptions": {
-    /* These settings are not required by Convex and can be modified. */
-    "allowJs": true,
-    "strict": true,
+	/* This TypeScript project config describes the environment that
+	 * Convex functions run in and is used to typecheck them.
+	 * You can modify it, but some settings required to use Convex.
+	 */
+	"compilerOptions": {
+		/* These settings are not required by Convex and can be modified. */
+		"allowJs": true,
+		"strict": true,
 
-    /* These compiler options are required by Convex */
-    "target": "ESNext",
-    "lib": ["ES2021", "dom"],
-    "forceConsistentCasingInFileNames": true,
-    "allowSyntheticDefaultImports": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "isolatedModules": true,
-    "skipLibCheck": true,
-    "noEmit": true
-  },
-  "include": ["./**/*"],
-  "exclude": ["./_generated"]
+		/* These compiler options are required by Convex */
+		"target": "ESNext",
+		"lib": ["ES2021", "dom"],
+		"forceConsistentCasingInFileNames": true,
+		"allowSyntheticDefaultImports": true,
+		"module": "ESNext",
+		"moduleResolution": "Node",
+		"isolatedModules": true,
+		"skipLibCheck": true,
+		"noEmit": true
+	},
+	"include": ["./**/*"],
+	"exclude": ["./_generated"]
 }

src/routes/inputs/+page.svelte

@@ -11,7 +11,7 @@
 	<h1>Modifying several inputs</h1>
 	<p>Any user have complete control over these inputs but might change them quickly.</p>
 
-	<Inputs/>
+	<Inputs />
 </section>
 
 <style>