make Modal reusable by passing props

the-collab-lab · Sep 8, 2024 · 09d1f89 · 09d1f89
1 parent b7193bd
commit 09d1f89
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/views/List.jsx b/src/views/List.jsx
@@ -8,6 +8,11 @@ export function List({ data, userId }) {
 	const [showModal, setShowModal] = useState(false);
 
 	const dataEmpty = userId && !data.length;
+	const message = {
+		header: 'Tip:',
+		promptMSG: 'Your shopping list is empty. Go to Manage List to start!',
+		btnText: 'Go to Manage List',
+	};
 
 	useEffect(() => {
 		if (dataEmpty) {
@@ -35,7 +40,9 @@ export function List({ data, userId }) {
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
-			{showModal && dataEmpty && <BasicModal dataEmpty={dataEmpty} />}
+			{showModal && dataEmpty && (
+				<BasicModal dataEmpty={dataEmpty} message={message} />
+			)}
 
 			<form onSubmit={clearInput}>
 				<label htmlFor="item-name"> Item name:</label>

diff --git a/src/views/Modal.jsx b/src/views/Modal.jsx
@@ -19,7 +19,7 @@ const style = (theme) => ({
 	fontSize: 20,
 });
 
-export default function BasicModal({ dataEmpty }) {
+export default function BasicModal({ dataEmpty, message }) {
 	const [open, setOpen] = React.useState(dataEmpty);
 	const handleClose = () => setOpen(false);
 	const navigate = useNavigate();
@@ -34,10 +34,10 @@ export default function BasicModal({ dataEmpty }) {
 		>
 			<Box sx={style(theme)}>
 				<Typography id="modal-modal-title" variant="h4" component="h2">
-					Tip:
+					{message.header}
 				</Typography>
 				<Typography id="modal-modal-description" sx={{ mt: 2 }} variant="h5">
-					Your shopping list is empty. Go to Manage List to start!
+					{message.promptMSG}
 				</Typography>
 				<Button
 					sx={{
@@ -48,7 +48,7 @@ export default function BasicModal({ dataEmpty }) {
 					size="large"
 					onClick={() => navigate('/manage-list')}
 				>
-					Go to Manage List
+					{message.btnText}
 				</Button>
 			</Box>
 		</Modal>