updated the dynamic provider at game addition

src/components/atom/SelectField.tsx

@@ -4,8 +4,9 @@ import { InputLabel } from "@mui/material";
 import React from "react";
 
 interface Option {
+    id?: number | string
     value: string;
-    label: string;
+    name: string;
 }
 
 interface SelectFieldProps {
@@ -47,7 +48,7 @@ export default function SelectField({
                 <option value="">Select the Type of Game</option>
                 {options.map((option) => (
                     <option key={option.value} value={option.value}>
-                        {option.label}
+                        {option.name}
                     </option>
                 ))}
             </select>

src/components/pages/dashboard/adminDashboard/games/AddGameForm/index.tsx

@@ -4,9 +4,10 @@ import SelectField from "@/components/atom/SelectField";
 import ReactQuillEditor from "@/components/molecules/ReactQuill";
 import { useAppDispatch } from "@/hooks/hook";
 import { useAddGameMutation } from "@/services/gameApi";
+import { useGetAllProviderQuery } from "@/services/providerApi";
 import { showToast, ToastVariant } from "@/slice/toastSlice";
 import { gameInitialValues, GameProps } from "@/types/game";
-import { Button, InputLabel, Input } from "@mui/material";
+import { Button, InputLabel, Input, OutlinedInput } from "@mui/material";
 import { useFormik } from "formik";
 import { useRouter } from "next/navigation";
 import * as Yup from "yup";
@@ -27,9 +28,8 @@ const validationSchema = Yup.object({
 export default function AddGameForm({ id }: AddGameFormProps) {
     const dispatch = useAppDispatch();
     const router = useRouter();
-
+    const { data: gameProviders, isLoading } = useGetAllProviderQuery();
     const [addGame, { isLoading: addingGame }] = useAddGameMutation();
-
     const formik = useFormik<GameProps>({
         initialValues: gameInitialValues,
         validationSchema,
@@ -100,7 +100,7 @@ export default function AddGameForm({ id }: AddGameFormProps) {
                     {/* Name */}
                     <div className="input__field">
                         <InputLabel htmlFor="name">Name of the Game<span className="text-red-500">*</span></InputLabel>
-                        <Input
+                        <OutlinedInput
                             fullWidth
                             id="name"
                             name="name"
@@ -138,9 +138,9 @@ export default function AddGameForm({ id }: AddGameFormProps) {
                             onBlur={() => formik.setFieldTouched("category", true)}
                             required
                             options={[
-                                { value: "action", label: "Action" },
-                                { value: "adventure", label: "Adventure" },
-                                { value: "puzzle", label: "Puzzle" },
+                                { value: "action", name: "Action" },
+                                { value: "adventure", name: "Adventure" },
+                                { value: "puzzle", name: "Puzzle" },
                             ]}
                         />
                         <span className="error">
@@ -215,7 +215,7 @@ export default function AddGameForm({ id }: AddGameFormProps) {
                     {/* API */}
                     <div className="input__field">
                         <InputLabel>API<span className="text-red-500">*</span></InputLabel>
-                        <Input
+                        <OutlinedInput
                             fullWidth
                             id="api"
                             name="api"
@@ -238,11 +238,15 @@ export default function AddGameForm({ id }: AddGameFormProps) {
                             onChange={(e) => formik.setFieldValue("provider", e.target.value)}
                             onBlur={() => formik.setFieldTouched("provider", true)}
                             required={true}
-                            options={[
-                                { value: "provider1", label: "Provider 1" },
-                                { value: "provider2", label: "Provider 2" },
-                                { value: "provider3", label: "Provider 3" },
-                            ]}
+                            options={
+                                !isLoading && gameProviders
+                                    ? gameProviders.data.map((provider: any) => ({
+                                        id: provider.id,
+                                        value: provider.slug || provider.value, // choose what your API gives
+                                        name: provider.name,
+                                    }))
+                                    : []
+                            }
                         />
                         <span className="error">
                             {formik.touched.provider && formik.errors.provider ? formik.errors.provider : ""}
@@ -252,7 +256,7 @@ export default function AddGameForm({ id }: AddGameFormProps) {
                     {/* Extra Thumbnail */}
                     <div className="input__field">
                         <InputLabel htmlFor="profit">Profit % for Superadmin (you)<span className="text-red-500">*</span></InputLabel>
-                        <Input
+                        <OutlinedInput
                             fullWidth
                             id="profit"
                             name="profit"

src/hooks/store.ts

@@ -4,6 +4,7 @@ import auth from "@/slice/authSlice";
 import toastSlice from "@/slice/toastSlice";
 import { gameApi } from "@/services/gameApi";
 import { playerApi } from "@/services/playerApi";
+import { providerApi } from "@/services/providerApi";
 
 export const store = configureStore({
     reducer: {
@@ -11,6 +12,7 @@ export const store = configureStore({
         toastSlice,
         [authApi.reducerPath]: authApi.reducer,
         [gameApi.reducerPath]: gameApi.reducer,
+        [providerApi.reducerPath]: providerApi.reducer,
         [playerApi.reducerPath]: playerApi.reducer,
     },
     middleware: (getDefaultMiddleware) =>
@@ -18,6 +20,7 @@ export const store = configureStore({
             .concat(authApi.middleware)
             .concat(gameApi.middleware)
             .concat(playerApi.middleware)
+            .concat(providerApi.middleware)
 
 })
 

src/services/providerApi.ts

+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQuery } from "./baseQuery";
+
+export const providerApi = createApi({
+    reducerPath: "providerApi",
+    baseQuery: baseQuery,
+    tagTypes: ["providers"],
+    endpoints: (builder) => ({
+        getAllProvider: builder.query<GameProviderResponseProps, void>({
+            query: () => ({
+                url: "/api/admin/game/providers",
+                method: "GET"
+            })
+        })
+    })
+})
+
+
+export const { useGetAllProviderQuery } = providerApi;
\ No newline at end of file

src/types/gameProvider.ts

+interface GameProviderResponseProps {
+    success: true,
+    data: {
+        id: 1,
+        name: string,
+        value: string
+    }[],
+    message: String
+}
+