added linting

added linting

.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "next",
+    "prettier",
+    "plugin:prettier/recommended"
+  ]
+}

app/grouping/GroupCreator.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { LocationContext } from "@/components/locationContenxt";
-import { useContext, useEffect, useState } from "react";
+import { LocationContext } from "@/components/locationContext";
+import { useContext, useState } from "react";
 import Grouping from "./Grouping";
-import { unique } from "drizzle-orm/mysql-core";
 
 type Props = {
   allJobs: JobCategory[];
@@ -22,7 +21,7 @@ export default function GroupCreator({ allJobs }: Props) {
   let locationContext = useContext(LocationContext);
   let [usedJobs, setUsedJobs] = useState<number[]>([]);
   let [groups, setGroup] = useState<Group[]>(
-    [...Array(4).keys()].map((i) => ({ id: i + 1, jobs: [] }))
+    [...Array(4).keys()].map((i) => ({ id: i + 1, jobs: [] })),
   );
   function useJob(id: number) {
     setUsedJobs((u) => [...u, id]);
@@ -37,13 +36,11 @@ export default function GroupCreator({ allJobs }: Props) {
       groups.map((g) => {
         if (g.id != id) return g;
         else return { id, jobs };
-      })
+      }),
     );
   }
 
-  useEffect(() => {
-    console.log(groups);
-  }, [groups]);
+  function submit() {} //TODO! submit group
 
   if (
     locationContext?.zone[0] == undefined ||
@@ -66,7 +63,9 @@ export default function GroupCreator({ allJobs }: Props) {
       ))}
 
       <div className="flex justify-center">
-        <button className="bg-green-300 rounded-md p-2">ยืนยัน</button>
+        <button className="rounded-md bg-green-300 p-2" onClick={submit}>
+          ยืนยัน
+        </button>
       </div>
     </div>
   );

app/grouping/Grouping.tsx

@@ -28,9 +28,9 @@ export default function Grouping({
   }
   useEffect(() => {
     updateGroup(selectedJob.map((j) => j.id));
-  }, [selectedJob]);
+  }, [selectedJob, updateGroup]);
   return (
-    <div className="flex flex-col gap-2 m-2 p-2 border-black rounded-md shadow-md border w-full">
+    <div className="m-2 flex w-full flex-col gap-2 rounded-md border border-black p-2 shadow-md">
       {selectedJob.map((j) => (
         <div className="flex justify-between gap-2 p-2" key={j.id}>
           <p>{j.name}</p>

app/grouping/page.tsx

@@ -1,6 +1,6 @@
 import { db } from "@/src/db";
 import LocationSelector from "../../components/LocationSelector";
-import LocationContextProvider from "@/components/locationContenxt";
+import LocationContextProvider from "@/components/locationContext";
 import GroupCreator from "./GroupCreator";
 
 export default async function Page() {

app/inside/IdComponent.tsx

@@ -14,7 +14,7 @@ export default function IdComponent({ updateIdList }: Props) {
   };
   useEffect(() => {
     updateIdList([...idSet]);
-  }, [idSet]);
+  }, [idSet, updateIdList]);
   return (
     <div className="flex justify-center">
       <div className="flex flex-col gap-2">
@@ -37,7 +37,7 @@ function FixedId({ cid, removeCid }: FixedIdProps) {
     <div className="flex gap-2">
       <input type="text" className="border-2" disabled value={cid} />
       <button
-        className="bg-red-300 p-2 rounded-md"
+        className="rounded-md bg-red-300 p-2"
         onClick={() => removeCid(cid)}
       >
         ลบ
@@ -61,7 +61,7 @@ function SingleIdComponent({ onValidId }: SingleIdProps) {
 
       setCid("");
     }
-  }, [cid]);
+  }, [cid, onValidId]);
   return (
     <div className="flex gap-2">
       <input

app/inside/page.tsx

@@ -4,15 +4,13 @@ import IdComponent from "./IdComponent";
 
 export default function Page() {
   let [idList, setIdList] = useState<string[]>([]);
-  function submit() {
-    console.log(idList);
-  }
+  function submit() {} //TODO! submit inside user
   return (
     <div>
       <IdComponent updateIdList={(cids) => setIdList(cids)} />
-      <p className="flex justify-center gap-4 mt-2 items-center">
+      <p className="mt-2 flex items-center justify-center gap-4">
         Total: {idList.length}{" "}
-        <button className="bg-green-200 p-2 rounded-md" onClick={submit}>
+        <button className="rounded-md bg-green-200 p-2" onClick={submit}>
           Submit
         </button>
       </p>

components/LocationSelector/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useContext, useEffect, useState } from "react";
-import { LocationContext } from "../locationContenxt";
+import { LocationContext } from "../locationContext";
 
 type Props = {
   provinces: Province[];
@@ -43,7 +43,7 @@ export default function LocationSelector({ provinces }: Props) {
 
     locationContext.zone[1](amphurId);
     locationContext.province[1](provinceId);
-  }, [amphurId]);
+  }, [amphurId, locationContext, provinceId]);
   return (
     <div className="flex flex-col gap-2">
       <div className="flex gap-2">

components/locationContext.tsx

@@ -13,7 +13,7 @@ type LocationContextType = {
 };
 
 export const LocationContext = createContext<LocationContextType | undefined>(
-  undefined
+  undefined,
 );
 
 export default function LocationContextProvider({

package.json

@@ -9,6 +9,7 @@
     "next-dev": "next dev",
     "start": "node dist/src/app.js",
     "build": "swc src -d dist",
+    "lint": "next lint",
     "initialize_data": "node -r @swc-node/register addMetadata.ts"
   },
   "keywords": [],
@@ -41,8 +42,14 @@
     "@types/jsonwebtoken": "^9.0.6",
     "autoprefixer": "^10.4.19",
     "drizzle-kit": "^0.20.14",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "nodemon": "^3.1.0",
     "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5"

prettier.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import("prettier").Config} */
+const config = {
+  plugins: ["prettier-plugin-tailwindcss"],
+};
+
+export default config;

src/minio.ts

@@ -16,7 +16,7 @@ export function createClient() {
 export async function createUploadImageUrl(
   mc: minio.Client,
   objectName: string,
-  contentType: string
+  contentType: string,
 ) {
   let policy = mc.newPostPolicy();
   policy.setKey(objectName);

src/playgroud.ts

@@ -15,7 +15,7 @@ export const runPlayground = async (appRouter: AppRouter) => {
       trpcApiEndpoint,
       playgroundEndpoint,
       router: appRouter,
-    })
+    }),
   );
 
   app.listen(3001, () => {

src/schema.ts

@@ -41,7 +41,7 @@ export const user = sqliteTable(
   (t) => ({
     phone_idx: index("phone_idx").on(t.phone),
     image_idx: index("image_idx").on(t.image),
-  })
+  }),
 );
 
 export const userRelation = relations(user, ({ many, one }) => ({
@@ -98,7 +98,7 @@ export const userOpinion = sqliteTable(
   },
   (t) => ({
     pk: primaryKey({ columns: [t.userId, t.opinionId] }),
-  })
+  }),
 );
 
 export const userOpinionRelation = relations(userOpinion, ({ one }) => ({
@@ -118,7 +118,7 @@ export const zone = sqliteTable(
       .notNull()
       .references(() => province.id),
   },
-  (t) => ({ unique_name_province: unique().on(t.name, t.province) })
+  (t) => ({ unique_name_province: unique().on(t.name, t.province) }),
 );
 export const zoneRelation = relations(zone, ({ one }) => ({
   province: one(province, {
@@ -144,6 +144,6 @@ export const imageToUser = sqliteTable("image_to_user", {
     .references(() => user.id),
   imageName: text("image_name").notNull(),
   createdOn: integer("created_on", { mode: "timestamp" }).default(
-    sql`CURRENT_TIMESTAMP`
+    sql`CURRENT_TIMESTAMP`,
   ),
 });

src/userRoute.ts

@@ -47,10 +47,10 @@ export const userRoute = router({
     .input(
       userInsertSchema.omit({ id: true }).extend({
         opinions: opinionInsertSchema,
-      })
+      }),
     )
     .mutation(
-      async ({ input }) => await createUser({ ...input }, input.opinions)
+      async ({ input }) => await createUser({ ...input }, input.opinions),
     ),
   // changeImage: protectedProcedure
   updateUser: protectedProcedure
@@ -60,7 +60,7 @@ export const userRoute = router({
     .input(z.object({ userId: z.number() }))
     .mutation(async ({ input }) => await getUser(input.userId, false)),
   getSelf: protectedProcedure.mutation(
-    async ({ ctx }) => await getUser(ctx.user.id, true)
+    async ({ ctx }) => await getUser(ctx.user.id, true),
   ),
   login: publicProcedure
     .input(z.object({ cid: z.string(), phone: z.string() }))
@@ -69,7 +69,7 @@ export const userRoute = router({
     .input(opinionUpdateSchema)
     .mutation(
       async ({ input, ctx }) =>
-        await changeOpinion(input.opinionId, ctx.user.id, input.choice)
+        await changeOpinion(input.opinionId, ctx.user.id, input.choice),
     ),
   requestChangeImage: protectedProcedure
     .input(z.object({ imageName: z.string(), contentType: z.string() }))
@@ -78,11 +78,11 @@ export const userRoute = router({
         await requestChangeImage(
           ctx.user.id,
           input.imageName,
-          input.contentType
-        )
+          input.contentType,
+        ),
     ),
   confirmChangeImage: protectedProcedure.mutation(
-    async ({ ctx }) => await confirmChangeImage(ctx.user.id, ctx.user.image)
+    async ({ ctx }) => await confirmChangeImage(ctx.user.id, ctx.user.image),
   ),
   getAllUser: protectedProcedure
     .input(
@@ -93,7 +93,7 @@ export const userRoute = router({
         zone: z.number().optional(),
         opinionCount: z.number().default(3),
         province: z.number().optional(),
-      })
+      }),
     )
     .query(
       async ({ input }) =>
@@ -103,8 +103,8 @@ export const userRoute = router({
           input.opinionCount,
           input.group,
           input.zone,
-          input.province
-        )
+          input.province,
+        ),
     ),
   getAllUserCount: protectedProcedure
     .input(
@@ -112,18 +112,18 @@ export const userRoute = router({
         group: z.number().optional(),
         zone: z.number().optional(),
         province: z.number().optional(),
-      })
+      }),
     )
     .query(
       async ({ input }) =>
-        await getAllUserCount(input.group, input.zone, input.province)
+        await getAllUserCount(input.group, input.zone, input.province),
     ),
 });
 
 async function getAllUserCount(
   group?: number,
   zoneId?: number,
-  provinceId?: number
+  provinceId?: number,
 ) {
   let zoneIds: number[] = await getZone(provinceId);
   if (provinceId && zoneIds.length === 0) {
@@ -152,7 +152,7 @@ async function getAllUser(
   opinionLimit: number,
   group?: number,
   zoneId?: number,
-  provinceId?: number
+  provinceId?: number,
 ) {
   let zoneIds: number[] = await getZone(provinceId);
   if (provinceId && zoneIds.length === 0) {
@@ -221,7 +221,7 @@ async function getUser(userId: number, showPhone: boolean) {
 
 async function createUser(
   newUser: UserInsertSchema,
-  opinions: OpinionInsertSchema
+  opinions: OpinionInsertSchema,
 ) {
   try {
     let result = (
@@ -264,7 +264,7 @@ async function login(cid: string, phone: string) {
 async function changeOpinion(
   opinionId: number,
   userId: number,
-  opinionChoice: OpinionInsertSchema[0]["choice"]
+  opinionChoice: OpinionInsertSchema[0]["choice"],
 ) {
   try {
     let thisOpinion = await db
@@ -308,7 +308,7 @@ async function changeOpinion(
 async function requestChangeImage(
   userId: number,
   imageName: string,
-  contentType: string
+  contentType: string,
 ) {
   const mc = createClient();
   // Check if the image is valid