Move modal states to respective components

This commit is contained in:
Keannu Christian Bernasol 2023-12-14 18:00:58 +08:00
parent 96c8f9a150
commit d220078e69
2 changed files with 48 additions and 58 deletions

View file

@ -10,13 +10,13 @@ import NoteIcon from "@mui/icons-material/Note";
import { colors } from "../../styles";
import ScienceIcon from "@mui/icons-material/Science";
import ColorizeIcon from "@mui/icons-material/Colorize";
import { Dispatch, SetStateAction } from "react";
type props = {
SetAddSKUModalOpen: Dispatch<SetStateAction<boolean>>;
SetAddItemModalOpen: Dispatch<SetStateAction<boolean>>;
};
export default function TechnicianButtons(props: props) {
import Popup from "reactjs-popup";
import AddItemModal from "../AddItemModal/AddItemModal";
import AddSKUModal from "../AddSKUModal/AddSKUModal";
import { useState } from "react";
export default function TechnicianButtons() {
const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
const [additemmodalOpen, SetAddItemModalOpen] = useState(false);
const navigate = useNavigate();
const queries = useQueries({
queries: [
@ -99,7 +99,7 @@ export default function TechnicianButtons(props: props) {
},
}}
onClick={() => {
props.SetAddItemModalOpen(true);
SetAddItemModalOpen(true);
}}
>
<AddToQueueIcon
@ -130,7 +130,7 @@ export default function TechnicianButtons(props: props) {
},
}}
onClick={() => {
props.SetAddSKUModalOpen(true);
SetAddSKUModalOpen(true);
}}
>
<NoteAddIcon
@ -256,6 +256,44 @@ export default function TechnicianButtons(props: props) {
</p>
</Button>
</div>
<Popup
open={addSKUmodalOpen}
onClose={() => SetAddSKUModalOpen(false)}
modal
position={"top center"}
contentStyle={{
width: "32rem",
borderRadius: 16,
borderColor: "grey",
borderStyle: "solid",
borderWidth: 1,
padding: 16,
alignContent: "center",
justifyContent: "center",
textAlign: "center",
}}
>
<AddSKUModal />
</Popup>
<Popup
open={additemmodalOpen}
onClose={() => SetAddItemModalOpen(false)}
modal
position={"top center"}
contentStyle={{
width: "32rem",
borderRadius: 16,
borderColor: "grey",
borderStyle: "solid",
borderWidth: 1,
padding: 16,
alignContent: "center",
justifyContent: "center",
textAlign: "center",
}}
>
<AddItemModal />
</Popup>
</>
);
}