fix: mall not loaded after district and state change

.env.example

@@ -20,10 +20,6 @@ DATABASE_URL="postgresql://postgres:<DB_PASSWORD>@<LOCALHOST?>/<DB_NAME>?schema=
 NEXTAUTH_SECRET=""
 NEXTAUTH_URL="http://localhost:3000"
 
-# Next Auth Discord Provider
-DISCORD_CLIENT_ID=""
-DISCORD_CLIENT_SECRET=""
-
 # AWS S3 
 # I'm using https://next-s3-upload.codingvalue.com/ to upload images to S3, please follow tutorial to setup your own bucket, or you can reach out to me for bucket credentials
 S3_UPLOAD_KEY=

kysely/kyselyschema.ts

@@ -0,0 +1,121 @@
+import type { ColumnType } from "kysely";
+export type Generated<T> = T extends ColumnType<infer S, infer I, infer U>
+  ? ColumnType<S, I | undefined, U>
+  : ColumnType<T, T | undefined, T>;
+export type Timestamp = ColumnType<Date, Date | string, Date | string>;
+
+export type Account = {
+  id: string;
+  userId: string;
+  type: string;
+  provider: string;
+  providerAccountId: string;
+  refresh_token: string | null;
+  access_token: string | null;
+  expires_at: number | null;
+  token_type: string | null;
+  scope: string | null;
+  id_token: string | null;
+  session_state: string | null;
+};
+export type Application = {
+  id: string;
+  name: string;
+  appKey: string;
+  appSecret: string;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+  userId: string;
+};
+export type District = {
+  id: string;
+  name: string;
+  unique_name: string;
+  state_id: string;
+};
+export type Mall = {
+  id: string;
+  name: string;
+  label: Generated<string>;
+  value: Generated<string>;
+  district_id: string;
+  state_id: string;
+};
+export type Qiblat = {
+  id: string;
+  surau_id: string;
+  latitude: number;
+  longitude: number;
+  degree: number;
+};
+export type Rating = {
+  id: string;
+  rating: number;
+  review: string | null;
+  created_at: Generated<Timestamp>;
+  surau_id: string;
+  user_id: string | null;
+};
+export type Session = {
+  id: string;
+  sessionToken: string;
+  userId: string;
+  expires: Timestamp;
+};
+export type State = {
+  id: string;
+  name: string;
+  unique_name: string;
+};
+export type Surau = {
+  id: string;
+  name: string;
+  unique_name: string;
+  brief_direction: string | null;
+  is_approved: Generated<boolean>;
+  is_approved_at: Timestamp | null;
+  created_at: Generated<Timestamp>;
+  updated_at: Timestamp;
+  state_id: string;
+  district_id: string;
+  mall_id: string | null;
+  is_qiblat_certified: Generated<boolean>;
+  is_solat_jumaat: Generated<boolean>;
+  user_id: string | null;
+  application_id: string | null;
+};
+export type SurauPhoto = {
+  id: string;
+  file_path: string;
+  caption: string | null;
+  created_at: Generated<Timestamp>;
+  surau_id: string;
+  rating_id: string | null;
+};
+export type User = {
+  id: string;
+  name: string | null;
+  email: string | null;
+  emailVerified: Timestamp | null;
+  image: string | null;
+  createdAt: Generated<Timestamp>;
+};
+export type VerificationToken = {
+  identifier: string;
+  token: string;
+  expires: Timestamp;
+};
+export type DB = {
+  Account: Account;
+  Application: Application;
+  District: District;
+  Mall: Mall;
+  Qiblat: Qiblat;
+  Rating: Rating;
+  Session: Session;
+  State: State;
+  Surau: Surau;
+  SurauPhoto: SurauPhoto;
+  User: User;
+  VerificationToken: VerificationToken;
+};

package.json

@@ -4,11 +4,12 @@
   "private": true,
   "scripts": {
     "build": "next build",
-    "dev": "sst bind next dev",
+    "dev": "next dev",
     "postinstall": "prisma generate",
     "lint": "next lint",
     "start": "next start",
     "db-seed": "cross-env NODE_ENV=development prisma db seed",
+    "db-seed:local": "NODE_ENV=development dotenv -e .env.local -- prisma db seed",
     "update-district": "NODE_ENV=development tsx scripts/updateDistrict.ts",
     "update-district:staging": "NODE_ENV=development dotenv -e .env.local -- tsx scripts/updateDistrict.ts",
     "push:local": "dotenv -e .env.local -- prisma db push",
@@ -42,6 +43,7 @@
     "next-auth": "^4.19.0",
     "next-s3-upload": "^0.3.0",
     "nodemailer": "^6.9.3",
+    "prisma-kysely": "^1.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",

prisma/schema.prisma

@@ -6,6 +6,12 @@ generator client {
     binaryTargets = ["native", "linux-arm64-openssl-1.0.x", "linux-musl-openssl-3.0.x"]
 }
 
+generator kysely {
+    provider = "prisma-kysely"
+    output   = "../kysely"
+    fileName = "kyselyschema.ts"
+}
+
 datasource db {
     provider = "postgresql"
     // NOTE: When using postgresql, mysql or sqlserver, uncomment the @db.Text annotations in model Account below
@@ -15,12 +21,6 @@ datasource db {
     url      = env("DATABASE_URL")
 }
 
-model Example {
-    id        String   @id @default(cuid())
-    createdAt DateTime @default(now())
-    updatedAt DateTime @updatedAt
-}
-
 model Surau {
     id                  String       @id @default(cuid())
     name                String
@@ -43,6 +43,8 @@ model Surau {
     is_solat_jumaat     Boolean      @default(false)
     user_id             String?
     user                User?        @relation(fields: [user_id], references: [id])
+    application_id      String?
+    application         Application? @relation(fields: [application_id], references: [id])
 }
 
 model Qiblat {
@@ -127,6 +129,18 @@ model Account {
     @@unique([provider, providerAccountId])
 }
 
+model Application {
+    id        String   @id @default(cuid())
+    name      String
+    appKey    String   @unique
+    appSecret String   @unique
+    createdAt DateTime @default(now())
+    updatedAt DateTime @updatedAt
+    user      User     @relation(fields: [userId], references: [id])
+    userId    String
+    Surau     Surau[]
+}
+
 model Session {
     id           String   @id @default(cuid())
     sessionToken String   @unique
@@ -136,16 +150,17 @@ model Session {
 }
 
 model User {
-    id            String    @id @default(cuid())
+    id            String        @id @default(cuid())
     name          String?
-    email         String?   @unique
+    email         String?       @unique
     emailVerified DateTime?
     image         String?
     accounts      Account[]
     sessions      Session[]
     Surau         Surau[]
     Rating        Rating[]
-    createdAt     DateTime  @default(now())
+    Application   Application[]
+    createdAt     DateTime      @default(now())
 }
 
 model VerificationToken {

src/components/AddSurauForm.tsx

@@ -6,23 +6,17 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import dynamic from "next/dynamic";
 import type { FC } from "react";
-import { useEffect } from "react";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { api } from "../utils/api";
 import AlertModal from "./shared/AlertModal";
-import type { District } from "@prisma/client";
 import { UploadButton } from "../utils/uploadthing";
 // You need to import our styles for the button to look right. Best to import in the root /_app.tsx but this is fine
 import "@uploadthing/react/styles.css";
 import StateSelect from "./shared/StateSelect";
 import { generateCombination } from "../utils";
 import DistrictSelect from "./shared/DistrictSelect";
 
-const Select = dynamic(() => import("react-select"), {
-  ssr: true,
-});
-
 const AsyncCreatableSelect = dynamic(
   () => import("react-select/async-creatable"),
   {
@@ -74,10 +68,15 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
   const [qiblatDegree, setQiblatDegree] = useState(0);
   const [qiblatInfoError, setQiblatInfoError] = useState("");
 
+  const Select = dynamic(() => import("react-select"), {
+    ssr: true,
+  });  
+
   const mall = api.surau.getMallOnDistrict.useQuery({
     district_id: choosenDistrict,
     state_id: choosenState,
   });
+
   const addSurau = api.surau.addSurau.useMutation();
 
   const handleNegeriChange = (e: any) => {
@@ -117,20 +116,6 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
     setImagePreviews(images);
   };
 
-  const filterMall = (inputValue: string) => {
-    if (!mall.data) return [];
-    return mall.data?.filter((i) =>
-      i.value.toLowerCase().includes(inputValue.toLowerCase())
-    );
-  };
-
-  const promiseOptions = (inputValue: string) =>
-    new Promise<MallOptions[]>((resolve) => {
-      setTimeout(() => {
-        resolve(filterMall(inputValue));
-      }, 1000);
-    });
-
   const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
     const qiblat = {
       latitude: latitude,
@@ -189,6 +174,7 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
       });
   };
 
+
   return (
     <>
       <AlertModal
@@ -238,11 +224,12 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
                     </div>
                   </div>
                 </div>
-                <StateSelect handleNegeriChange={handleNegeriChange} label={true} />
+                <StateSelect handleNegeriChange={handleNegeriChange} label={true} setChoosenDistrict={setChoosenDistrict} />
                 {choosenState ? (
                   <DistrictSelect
                     handleDaerahChange={handleDaerahChange}
                     choosenState={choosenState}
+
                     label={true}
                   />
                 ) : null}
@@ -275,12 +262,13 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
                           <label className="block text-sm font-medium text-gray-700">
                             Mall
                           </label>
-                          <AsyncCreatableSelect
+                          <Select
                             isClearable
                             onChange={(e) => handleMallChange(e)}
-                            loadOptions={promiseOptions}
-                            cacheOptions
-                            defaultOptions
+                            options={mall.data}
+                            getOptionLabel={(option: any) => option.name}
+                            getOptionValue={(option: any) => option.id}
+                            placeholder="Mall"
                           />
                         </div>
                       </div>

src/components/shared/DistrictSelect.tsx

@@ -3,6 +3,7 @@
 import dynamic from "next/dynamic";
 import { api } from "../../utils/api";
 import LoadingSpinner from "./LoadingSpinner";
+import { useEffect } from "react";
 
 const Select = dynamic(() => import("react-select"), {
   ssr: true,
@@ -19,10 +20,15 @@ const DistrictSelect: React.FC<DistrictSelectProps> = ({
   choosenState,
   label,
 }) => {
-  const { data, isLoading } = api.surau.getDistrict.useQuery({
+  const { data, isLoading, refetch } = api.surau.getDistrict.useQuery({
     id: choosenState,
   });
 
+  useEffect(() => {
+    void refetch();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [choosenState])
+
   if (isLoading) return <LoadingSpinner />;
   return (
     <div>

src/components/shared/ImageUpload.tsx

@@ -0,0 +1,12 @@
+const ImageUpload = () => {
+    return (
+        <div>
+            image upload here
+            <div>
+                test
+            </div>
+        </div>
+    )
+}
+
+export default ImageUpload;

src/components/shared/StateSelect.tsx

@@ -10,13 +10,15 @@ const Select = dynamic(() => import("react-select"), {
 
 type StateSelectProps = {
   handleNegeriChange: (e: any) => void;
+  setChoosenDistrict: (e: any) => void;
   label: boolean;
 };
 
 const StateSelect: React.FC<StateSelectProps> = ({
   handleNegeriChange,
   label,
 }) => {
+
   const { data, isLoading } = api.surau.getState.useQuery();
   if (isLoading) return <LoadingSpinner />;
   return (