lint

added linting

.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+    "prefer-const": "error"
+  }
+}

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[];
@@ -19,10 +18,10 @@ type Group = {
   jobs: number[];
 };
 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: [] }))
+  const locationContext = useContext(LocationContext);
+  const [usedJobs, setUsedJobs] = useState<number[]>([]);
+  const [groups, setGroup] = useState<Group[]>(
+    [...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

@@ -14,10 +14,10 @@ export default function Grouping({
   removeJob,
   updateGroup,
 }: Props) {
-  let [selectedJob, setSelectedJob] = useState<JobCategory[]>([]);
+  const [selectedJob, setSelectedJob] = useState<JobCategory[]>([]);
   function addJob(id: string) {
-    let _id = parseInt(id);
-    let job = availableJobs.find((j) => j.id == _id);
+    const _id = parseInt(id);
+    const job = availableJobs.find((j) => j.id == _id);
     if (job == undefined) return;
     setSelectedJob((old) => [...old, job]);
     selectJob(_id);
@@ -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,13 +1,13 @@
 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() {
-  let provinces = await db.query.province
+  const provinces = await db.query.province
     .findMany({ with: { zones: true } })
     .execute();
-  let jobList = await db.query.group.findMany().execute();
+  const jobList = await db.query.group.findMany().execute();
   return (
     <LocationContextProvider>
       <LocationSelector provinces={provinces} />

app/inside/IdComponent.tsx

@@ -5,16 +5,16 @@ type Props = {
 };
 
 export default function IdComponent({ updateIdList }: Props) {
-  let [idSet, setIdSet] = useState<Set<string>>(new Set());
-  let onValidId = (id: string) => {
+  const [idSet, setIdSet] = useState<Set<string>>(new Set());
+  const onValidId = (id: string) => {
     setIdSet((prev) => new Set(prev.add(id)));
   };
-  let removeCid = (id: string) => {
+  const removeCid = (id: string) => {
     setIdSet((prev) => new Set([...prev].filter((x) => x !== id)));
   };
   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)}
       >
         ลบ
@@ -51,17 +51,17 @@ type SingleIdProps = {
 };
 
 function SingleIdComponent({ onValidId }: SingleIdProps) {
-  let [isValid, setIsValid] = useState(false);
-  let [cid, setCid] = useState("");
+  const [isValid, setIsValid] = useState(false);
+  const [cid, setCid] = useState("");
   useEffect(() => {
-    let isValidId = isValidThaiID(cid);
+    const isValidId = isValidThaiID(cid);
     setIsValid(isValidId);
     if (isValidId) {
       onValidId(cid);
 
       setCid("");
     }
-  }, [cid]);
+  }, [cid, onValidId]);
   return (
     <div className="flex gap-2">
       <input

app/inside/page.tsx

@@ -3,16 +3,14 @@ import { useState } from "react";
 import IdComponent from "./IdComponent";
 
 export default function Page() {
-  let [idList, setIdList] = useState<string[]>([]);
-  function submit() {
-    console.log(idList);
-  }
+  const [idList, setIdList] = useState<string[]>([]);
+  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[];
@@ -17,20 +17,20 @@ type Zone = {
   province: number;
 };
 export default function LocationSelector({ provinces }: Props) {
-  let [provinceId, setProvinceId] = useState<number | undefined>(undefined);
-  let [amphurList, setAmphurList] = useState<Zone[] | undefined>(undefined);
-  let [amphurId, setAmphurId] = useState<number | undefined>(undefined);
+  const [provinceId, setProvinceId] = useState<number | undefined>(undefined);
+  const [amphurList, setAmphurList] = useState<Zone[] | undefined>(undefined);
+  const [amphurId, setAmphurId] = useState<number | undefined>(undefined);
   const locationContext = useContext(LocationContext);
   function setProvince(_id: string) {
-    let id = parseInt(_id);
+    const id = parseInt(_id);
     setProvinceId(id);
-    let province = provinces.find((p) => p.id == id);
+    const province = provinces.find((p) => p.id == id);
     if (province == undefined) return;
     setAmphurList(province.zones);
     setAmphurId(undefined);
   }
   function setAmphur(_id: string) {
-    let id = parseInt(_id);
+    const id = parseInt(_id);
     setAmphurId(id);
   }
   useEffect(() => {
@@ -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({
@@ -21,8 +21,8 @@ export default function LocationContextProvider({
 }: {
   children?: ReactNode;
 }) {
-  let zone = useState<number | undefined>(undefined);
-  let province = useState<number | undefined>(undefined);
+  const zone = useState<number | undefined>(undefined);
+  const province = useState<number | undefined>(undefined);
 
   return (
     <LocationContext.Provider value={{ zone, province }}>

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": [],
@@ -32,6 +33,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@eslint/js": "^9.2.0",
     "@swc-node/register": "^1.9.0",
     "@swc/cli": "^0.3.12",
     "@swc/core": "^1.4.16",
@@ -41,10 +43,17 @@
     "@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"
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.9.0"
   }
 }

prettier.config.mjs

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

src/minio.ts

@@ -16,18 +16,18 @@ export function createClient() {
 export async function createUploadImageUrl(
   mc: minio.Client,
   objectName: string,
-  contentType: string
+  contentType: string,
 ) {
-  let policy = mc.newPostPolicy();
+  const policy = mc.newPostPolicy();
   policy.setKey(objectName);
   policy.setBucket(Config.bucketName);
-  let expires = new Date();
+  const expires = new Date();
   expires.setSeconds(30 * 60);
   policy.setExpires(expires);
   policy.setContentType(contentType);
   policy.setContentDisposition(`attachment; filename="${objectName}"`);
   policy.setContentLengthRange(1, 3 * 1024 * 1024);
-  let rs = await mc.presignedPostPolicy(policy);
+  const rs = await mc.presignedPostPolicy(policy);
   return rs;
 }
 

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/trpc.ts

@@ -42,7 +42,7 @@ export const createContext = async (opts: CreateHTTPContextOptions) => {
   const bearerToken = authorizationHeader.split(" ")[1];
   const phone = await verifyToken(bearerToken);
   if (phone !== null) {
-    let user = await db.query.user.findFirst({
+    const user = await db.query.user.findFirst({
       where: (user, { eq }) => eq(user.phone, phone),
     });
     return {
@@ -59,7 +59,7 @@ export const createContext = async (opts: CreateHTTPContextOptions) => {
 
 async function verifyToken(token: string): Promise<string | null> {
   try {
-    let rs = await new Promise((resolve, reject) => {
+    const rs = await new Promise((resolve, reject) => {
       jwt.verify(token, Config.jwt_secret, (err, decoded) => {
         if (err) {
           reject(err);
@@ -68,7 +68,7 @@ async function verifyToken(token: string): Promise<string | null> {
         }
       });
     });
-    let data = z
+    const data = z
       .object({
         phone: z.string(),
       })

src/userRoute.ts

@@ -1,13 +1,6 @@
 import { router, publicProcedure, protectedProcedure } from "./trpc";
 import { db } from "./db";
-import {
-  imageToUser,
-  opinion,
-  province,
-  user,
-  userOpinion,
-  zone,
-} from "./schema";
+import { imageToUser, opinion, user, userOpinion, zone } from "./schema";
 import { createInsertSchema } from "drizzle-zod";
 import { z } from "zod";
 import { SQL, and, count, eq, inArray, sql } from "drizzle-orm";
@@ -47,10 +40,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 +53,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 +62,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 +71,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 +86,7 @@ export const userRoute = router({
         zone: z.number().optional(),
         opinionCount: z.number().default(3),
         province: z.number().optional(),
-      })
+      }),
     )
     .query(
       async ({ input }) =>
@@ -103,8 +96,8 @@ export const userRoute = router({
           input.opinionCount,
           input.group,
           input.zone,
-          input.province
-        )
+          input.province,
+        ),
     ),
   getAllUserCount: protectedProcedure
     .input(
@@ -112,24 +105,24 @@ 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);
+  const zoneIds: number[] = await getZone(provinceId);
   if (provinceId && zoneIds.length === 0) {
     return [];
   }
-  let conditions: SQL[] = [];
+  const conditions: SQL[] = [];
   if (group !== undefined) {
     conditions.push(eq(user.group, group));
   }
@@ -152,13 +145,13 @@ async function getAllUser(
   opinionLimit: number,
   group?: number,
   zoneId?: number,
-  provinceId?: number
+  provinceId?: number,
 ) {
-  let zoneIds: number[] = await getZone(provinceId);
+  const zoneIds: number[] = await getZone(provinceId);
   if (provinceId && zoneIds.length === 0) {
     return [];
   }
-  let users = await db.query.user.findMany({
+  const users = await db.query.user.findMany({
     with: {
       group: true,
       opinions: {
@@ -172,7 +165,7 @@ async function getAllUser(
     offset,
     orderBy: sql`random()`,
     where: (user, { eq, and }) => {
-      let conditions: SQL[] = [];
+      const conditions: SQL[] = [];
       if (group !== undefined) {
         conditions.push(eq(user.group, group));
       }
@@ -195,7 +188,7 @@ async function getAllUser(
 }
 
 async function getUser(userId: number, showPhone: boolean) {
-  let user = await db.query.user.findFirst({
+  const user = await db.query.user.findFirst({
     where: (user, { eq }) => eq(user.id, userId),
     with: {
       group: true,
@@ -221,13 +214,13 @@ async function getUser(userId: number, showPhone: boolean) {
 
 async function createUser(
   newUser: UserInsertSchema,
-  opinions: OpinionInsertSchema
+  opinions: OpinionInsertSchema,
 ) {
   try {
-    let result = (
+    const result = (
       await db.insert(user).values(newUser).returning({ id: user.id })
     )[0];
-    for (let op of opinions) {
+    for (const op of opinions) {
       await db.insert(userOpinion).values({ ...op, userId: result.id });
     }
     return { token: createJWT(newUser.phone) };
@@ -248,7 +241,7 @@ async function updateUser(userId: number, update: UserUpdateSchema) {
 }
 
 async function login(cid: string, phone: string) {
-  let user = await db.query.user.findFirst({
+  const user = await db.query.user.findFirst({
     where: (user, { and, eq }) => and(eq(user.cid, cid), eq(user.phone, phone)),
   });
   if (user === undefined) {
@@ -264,10 +257,10 @@ 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
+    const thisOpinion = await db
       .select()
       .from(opinion)
       .where(eq(opinion.id, opinionId))
@@ -308,7 +301,7 @@ async function changeOpinion(
 async function requestChangeImage(
   userId: number,
   imageName: string,
-  contentType: string
+  contentType: string,
 ) {
   const mc = createClient();
   // Check if the image is valid
@@ -328,11 +321,11 @@ async function requestChangeImage(
     });
   }
   // Create a unique image name
-  let tryCount = 0;
+  const tryCount = 0;
   let objectName: string | null = null;
   while (tryCount < 3) {
-    let imageName = `${generateRandomString()}.${extension}`;
-    let ok = await db
+    const imageName = `${generateRandomString()}.${extension}`;
+    const ok = await db
       .select({ value: count(user.image) })
       .from(user)
       .where(eq(user.image, imageName))
@@ -356,14 +349,14 @@ async function requestChangeImage(
       target: [imageToUser.userId],
       set: { imageName: objectName },
     });
-  let request = await createUploadImageUrl(mc, objectName, contentType);
+  const request = await createUploadImageUrl(mc, objectName, contentType);
   request.postURL = Config.minioPublicBucketEndpoint;
   return request;
 }
 
 async function confirmChangeImage(userId: number, oldImage: string | null) {
   const mc = createClient();
-  let rs = await db
+  const rs = await db
     .select({ imageName: imageToUser.imageName })
     .from(imageToUser)
     .where(eq(imageToUser.userId, userId));
@@ -373,7 +366,7 @@ async function confirmChangeImage(userId: number, oldImage: string | null) {
       code: "BAD_REQUEST",
     });
   }
-  let imageName = rs[0].imageName;
+  const imageName = rs[0].imageName;
   const isImageExist = await mc
     .statObject(Config.bucketName, imageName)
     .then(() => true)
@@ -384,7 +377,7 @@ async function confirmChangeImage(userId: number, oldImage: string | null) {
       code: "BAD_REQUEST",
     });
   }
-  const promises: Promise<any>[] = [];
+  const promises: Promise<void>[] = [];
   if (oldImage) {
     promises.push(mc.removeObject(Config.bucketName, oldImage).catch(() => {}));
   }