From 1655c7cae825fc7e35c7d22683b66e89eae06e3d Mon Sep 17 00:00:00 2001 From: Aady Date: Thu, 12 Oct 2023 00:39:27 +0530 Subject: [PATCH 1/2] Added margin between buttons in Add new step modal --- .../Tutorials/subComps/AddNewStep.jsx | 269 +++++++++--------- 1 file changed, 136 insertions(+), 133 deletions(-) diff --git a/src/components/Tutorials/subComps/AddNewStep.jsx b/src/components/Tutorials/subComps/AddNewStep.jsx index aa4356c6..14f8f1af 100644 --- a/src/components/Tutorials/subComps/AddNewStep.jsx +++ b/src/components/Tutorials/subComps/AddNewStep.jsx @@ -9,153 +9,156 @@ import { useFirebase, useFirestore } from "react-redux-firebase"; import { useDispatch, useSelector } from "react-redux"; import { AppstoreAddOutlined } from "@ant-design/icons"; import { - addNewTutorialStep, - clearCreateTutorials, + addNewTutorialStep, + clearCreateTutorials } from "../../../store/actions"; const AddNewStepModal = ({ - viewModal, - viewCallback, - tutorial_id, - steps_length, - owner, + viewModal, + viewCallback, + tutorial_id, + steps_length, + owner }) => { - const firebase = useFirebase(); - const firestore = useFirestore(); - const dispatch = useDispatch(); - const [visible, setVisible] = useState(false); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(false); - const [title, setTitle] = useState(""); - const [time, setTime] = useState(0); + const firebase = useFirebase(); + const firestore = useFirestore(); + const dispatch = useDispatch(); + const [visible, setVisible] = useState(false); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(false); + const [title, setTitle] = useState(""); + const [time, setTime] = useState(0); - useEffect(() => { - clearCreateTutorials()(dispatch); - return () => { - clearCreateTutorials()(dispatch); - }; - }, [dispatch]); + useEffect(() => { + clearCreateTutorials()(dispatch); + return () => { + clearCreateTutorials()(dispatch); + }; + }, [dispatch]); - const loadingProp = useSelector( - ({ - tutorials: { - create: { loading }, - }, - }) => loading - ); - const errorProp = useSelector( - ({ - tutorials: { - create: { error }, - }, - }) => error - ); + const loadingProp = useSelector( + ({ + tutorials: { + create: { loading } + } + }) => loading + ); + const errorProp = useSelector( + ({ + tutorials: { + create: { error } + } + }) => error + ); - useEffect(() => { - setLoading(loadingProp); - }, [loadingProp]); + useEffect(() => { + setLoading(loadingProp); + }, [loadingProp]); - useEffect(() => { - setError(errorProp); - }, [errorProp]); + useEffect(() => { + setError(errorProp); + }, [errorProp]); - useEffect(() => { - setVisible(viewModal); - }, [viewModal]); + useEffect(() => { + setVisible(viewModal); + }, [viewModal]); - useEffect(() => { - if (loading === false && error === false) { - setVisible(false); - clearCreateTutorials()(dispatch); - } - }, [loading, error, dispatch]); + useEffect(() => { + if (loading === false && error === false) { + setVisible(false); + clearCreateTutorials()(dispatch); + } + }, [loading, error, dispatch]); - const onSubmit = (e) => { - e.preventDefault(); + const onSubmit = e => { + e.preventDefault(); - const formData = { - title, - time, - }; - const set_data = { - ...formData, - id: `${tutorial_id}_${new Date().getTime()}`, - tutorial_id, - owner, - }; - addNewTutorialStep(set_data)(firebase, firestore, dispatch); - }; + const formData = { + title, + time + }; + const set_data = { + ...formData, + id: `${tutorial_id}_${new Date().getTime()}`, + tutorial_id, + owner + }; + addNewTutorialStep(set_data)(firebase, firestore, dispatch); + }; - const handleCancel = () => { - setVisible(false); - }; + const handleCancel = () => { + setVisible(false); + }; - return ( - viewCallback()} - onOk={() => viewCallback()} - footer={false} - destroyOnClose={true} - maskClosable={false} - style={{ - display: "flex", - alignItems: "center", - justifyContent: "center", - }}> - - {error && ( - - )} -
- - } - onChange={(e) => setTitle(e.target.value)} - placeholder="Title of the Step" - autoComplete="title" - style={{ marginBottom: "2rem" }} - data-testid={"newStepTitleInput"} - /> - setTime(e.target.value)} - placeholder="Time (minutes)" - style={{ width: "100%" }} - data-testid={"newStepTimeInput"} - /> - - - -
-
- ); + return ( + viewCallback()} + onOk={() => viewCallback()} + footer={false} + destroyOnClose={true} + maskClosable={false} + style={{ + display: "flex", + alignItems: "center", + justifyContent: "center" + }} + > + + {error && ( + + )} +
+ + } + onChange={e => setTitle(e.target.value)} + placeholder="Title of the Step" + autoComplete="title" + style={{ marginBottom: "2rem" }} + data-testid={"newStepTitleInput"} + /> + setTime(e.target.value)} + placeholder="Time (minutes)" + style={{ width: "100%" }} + data-testid={"newStepTimeInput"} + /> + + + +
+
+ ); }; export default AddNewStepModal; From d0cbea6b996b30127379757a1ee1cc09da40836c Mon Sep 17 00:00:00 2001 From: Aady Date: Fri, 13 Oct 2023 12:50:20 +0530 Subject: [PATCH 2/2] Negative values for time field fix --- src/components/Tutorials/subComps/AddNewStep.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/Tutorials/subComps/AddNewStep.jsx b/src/components/Tutorials/subComps/AddNewStep.jsx index 14f8f1af..808f7687 100644 --- a/src/components/Tutorials/subComps/AddNewStep.jsx +++ b/src/components/Tutorials/subComps/AddNewStep.jsx @@ -12,6 +12,7 @@ import { addNewTutorialStep, clearCreateTutorials } from "../../../store/actions"; +import { min } from "lodash"; const AddNewStepModal = ({ viewModal, @@ -126,6 +127,8 @@ const AddNewStepModal = ({ autoComplete="title" style={{ marginBottom: "2rem" }} data-testid={"newStepTitleInput"} + required="true" + />