feat: update ESLint and TypeScript configurations across frontend and backend; enhance component structure and improve data handling in various modules

packages/backend/convex/README.md

@@ -7,29 +7,29 @@ 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(),
-  },
+	// 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();
+	// 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);
+		// 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;
-  },
+		// Write arbitrary JavaScript here: filter, aggregate, build derived data,
+		// remove non-public properties, or create new objects.
+		return documents;
+	}
 });
 ```
 
@@ -37,8 +37,8 @@ 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'
 });
 ```
 
@@ -46,27 +46,27 @@ 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(),
-  },
+	// 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);
+	// 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);
-  },
+		// 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));
 }
 ```