Meta Data For User Add dropdown hooked

This commit is contained in:
Mitchell Magro 2025-11-10 12:30:08 +01:00
parent 6a68d93308
commit 568f56bf00
2 changed files with 30 additions and 24 deletions

View File

@ -1,7 +1,6 @@
"use client"; "use client";
import React, { useState } from "react"; import React, { useState } from "react";
import { useRouter } from "next/navigation";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { AppDispatch } from "@/app/redux/store"; import { AppDispatch } from "@/app/redux/store";
import "./AddUser.scss"; import "./AddUser.scss";
@ -13,6 +12,7 @@ import Spinner from "../../../components/Spinner/Spinner";
import { RootState } from "@/app/redux/store"; import { RootState } from "@/app/redux/store";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import Modal from "@/app/components/Modal/Modal"; import Modal from "@/app/components/Modal/Modal";
import { selectAppMetadata } from "@/app/redux/metadata/selectors";
interface AddUserProps { interface AddUserProps {
open: boolean; open: boolean;
@ -20,7 +20,6 @@ interface AddUserProps {
} }
const AddUser: React.FC<AddUserProps> = ({ open, onClose }) => { const AddUser: React.FC<AddUserProps> = ({ open, onClose }) => {
// const router = useRouter();
const dispatch = useDispatch<AppDispatch>(); const dispatch = useDispatch<AppDispatch>();
const { status, error: authError } = useSelector( const { status, error: authError } = useSelector(
(state: RootState) => state.auth (state: RootState) => state.auth
@ -39,6 +38,8 @@ const AddUser: React.FC<AddUserProps> = ({ open, onClose }) => {
const [phoneError, setPhoneError] = useState(""); const [phoneError, setPhoneError] = useState("");
const [countryCode, setCountryCode] = useState("+1"); const [countryCode, setCountryCode] = useState("+1");
const data = useSelector(selectAppMetadata);
const { merchants = [], groups = [], job_titles = [] } = data || {};
const loading = status === "loading"; const loading = status === "loading";
@ -165,8 +166,11 @@ const AddUser: React.FC<AddUserProps> = ({ open, onClose }) => {
className="add-user__select" className="add-user__select"
> >
<option value="">Select Merchant</option> <option value="">Select Merchant</option>
<option value="Win Bot">Win Bot</option> {merchants.map((merchant: string) => (
<option value="Data Spin">Data Spin</option> <option key={merchant} value={merchant}>
{merchant}
</option>
))}
</select> </select>
{form.merchants.length > 0 && ( {form.merchants.length > 0 && (
<div className="selected-items"> <div className="selected-items">
@ -200,10 +204,11 @@ const AddUser: React.FC<AddUserProps> = ({ open, onClose }) => {
className="add-user__select" className="add-user__select"
> >
<option value="">Select Group</option> <option value="">Select Group</option>
<option value="Admin">Admin</option> {groups.map((group: string) => (
<option value="Reader">Reader</option> <option key={group} value={group}>
<option value="Manager">Manager</option> {group}
<option value="User">User</option> </option>
))}
</select> </select>
{form.groups.length > 0 && ( {form.groups.length > 0 && (
<div className="selected-items"> <div className="selected-items">
@ -227,21 +232,23 @@ const AddUser: React.FC<AddUserProps> = ({ open, onClose }) => {
</div> </div>
)} )}
</div> </div>
<select <div className="array-field-container">
name="jobTitle" <label>Job Title:</label>
value={form.jobTitle} <select
onChange={handleChange} name="jobTitle"
required value={form.jobTitle}
className="add-user__select" onChange={handleChange}
> required
<option value="">Select Job Title</option> className="add-user__select"
<option value="Admin">Admin</option> >
<option value="Reader">Reader</option> <option value="">Select Job Title</option>
<option value="User">User</option> {job_titles?.map((job_title: string) => (
<option value="Manager">Manager</option> <option key={job_title} value={job_title}>
<option value="Supervisor">Supervisor</option> {job_title}
<option value="Director">Director</option> </option>
</select> ))}
</select>
</div>
<div className="phone-input-container"> <div className="phone-input-container">
<select <select
name="countryCode" name="countryCode"

View File

@ -1,5 +1,4 @@
import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit"; import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
import { RootState } from "../store";
export interface SidebarItem { export interface SidebarItem {
id?: string; id?: string;