From 0331719a9106ed92c30549963df86d524a734890 Mon Sep 17 00:00:00 2001 From: rohitPandey469 Date: Fri, 2 Feb 2024 14:42:27 +0530 Subject: [PATCH 1/4] Add Images Button Fixed --- .../Tutorials/subComps/ImageDrawer.jsx | 282 ++++++++++-------- src/store/actions/authActions.js | 11 +- src/store/actions/tutorialsActions.js | 10 +- 3 files changed, 169 insertions(+), 134 deletions(-) diff --git a/src/components/Tutorials/subComps/ImageDrawer.jsx b/src/components/Tutorials/subComps/ImageDrawer.jsx index 6de8e472..1e3f2056 100644 --- a/src/components/Tutorials/subComps/ImageDrawer.jsx +++ b/src/components/Tutorials/subComps/ImageDrawer.jsx @@ -50,54 +50,44 @@ const ImageDrawer = ({ onClose, visible, owner, tutorial_id, imageURLs }) => { }) => deleting_error ); + const [uploadSnackbarOpen, setUploadSnackbarOpen] = React.useState(false); + const [uploadErrorSnackbarOpen, setUploadErrorSnackbarOpen] = + React.useState(false); + const [deleteSnackbarOpen, setDeleteSnackbarOpen] = React.useState(false); + const [deleteErrorSnackbarOpen, setDeleteErrorSnackbarOpen] = + React.useState(false); + useEffect(() => { if (uploading === false && uploading_error === false) { - ; + setUploadSnackbarOpen(true); } else if (uploading === false && uploading_error) { - ; + setUploadErrorSnackbarOpen(true); } }, [uploading, uploading_error]); useEffect(() => { if (deleting === false && deleting_error === false) { - ; + setDeleteSnackbarOpen(true); } else if (deleting === false && deleting_error) { - ; + setDeleteErrorSnackbarOpen(true); } }, [deleting, deleting_error]); + const handleSnackbarClose = type => { + switch (type) { + case "upload": + setUploadSnackbarOpen(false); + setUploadErrorSnackbarOpen(false); + break; + case "delete": + setDeleteSnackbarOpen(false); + setDeleteErrorSnackbarOpen(false); + break; + default: + break; + } + }; + useEffect(() => { clearTutorialImagesReducer()(dispatch); return () => { @@ -105,17 +95,15 @@ const ImageDrawer = ({ onClose, visible, owner, tutorial_id, imageURLs }) => { }; }, [dispatch]); - const props = { - name: "file", - multiple: true, - beforeUpload(file, files) { - uploadTutorialImages(owner, tutorial_id, files)( - firebase, - firestore, - dispatch - ); - return false; - } + const beforeUpload = async files => { + console.log("Image Upload Started!!!") + await uploadTutorialImages(owner, tutorial_id, files)( + firebase, + firestore, + dispatch + ); + console.log("Uploaded the Images"); + return false; }; const deleteFile = (name, url) => @@ -127,85 +115,129 @@ const ImageDrawer = ({ onClose, visible, owner, tutorial_id, imageURLs }) => { )(firebase, firestore, dispatch); return ( - -
- - - {uploading ? ( - <> - Please wait... -

Uploading image(s)...

- - ) : ( - <> -

- -

-

- Click or drag images to here to upload -

- - )} - - {imageURLs && - imageURLs.length > 0 && - imageURLs.map((image, i) => ( - - - - - -

{image.name}

- - ( - - )} - > - - - - + <> + +
+ + beforeUpload(event.target.files)} + /> + {uploading ? ( + <> + Please wait... +

Uploading image(s)...

+ + ) : ( + <> +

+ +

+

+ Click or drag images to here to upload +

+ + )} + + {imageURLs && + imageURLs.length > 0 && + imageURLs.map((image, i) => ( + + + + + +

{image.name}

+ + ( + + )} + > + + + + + - - ))} -
- + ))} +
+ + handleSnackbarClose("upload")} + message="Image Uploaded successfully...." + /> + handleSnackbarClose("upload")} + message={uploading_error} + /> + handleSnackbarClose("delete")} + message="Deleted Successfully...." + /> + handleSnackbarClose("delete")} + message={deleting_error} + /> + ); }; diff --git a/src/store/actions/authActions.js b/src/store/actions/authActions.js index 5b748dee..668be900 100644 --- a/src/store/actions/authActions.js +++ b/src/store/actions/authActions.js @@ -179,9 +179,12 @@ export const resendVerifyEmail = email => async dispatch => { export const checkUserHandleExists = userHandle => async firebase => { try { const handle = await firebase - .ref(`/cl_user_handle/${userHandle}`) - .once("value"); - return handle.exists(); + .firestore() + .collection("cl_user") + .doc(userHandle) + .get(); + console.log("User Handle",handle) + return handle.exists; } catch (e) { throw e.message; } @@ -195,7 +198,7 @@ export const checkOrgHandleExists = orgHandle => async firebase => { .doc(orgHandle) .get(); - console.log(organizationHandle); + console.log("Organization Handle",organizationHandle); return organizationHandle.exists; } catch (e) { throw e.message; diff --git a/src/store/actions/tutorialsActions.js b/src/store/actions/tutorialsActions.js index 7d273c1d..1689a816 100644 --- a/src/store/actions/tutorialsActions.js +++ b/src/store/actions/tutorialsActions.js @@ -173,9 +173,9 @@ export const createTutorial = } }; -const checkUserOrOrgHandle = handle => async firestore => { - const userHandleExists = await checkUserHandleExists(handle)(firestore); - const orgHandleExists = await checkOrgHandleExists(handle)(firestore); +const checkUserOrOrgHandle = handle => async firebase => { + const userHandleExists = await checkUserHandleExists(handle)(firebase); + const orgHandleExists = await checkOrgHandleExists(handle)(firebase); if (userHandleExists && !orgHandleExists) { return "user"; @@ -388,8 +388,8 @@ export const uploadTutorialImages = (owner, tutorial_id, files) => async (firebase, firestore, dispatch) => { try { dispatch({ type: actions.TUTORIAL_IMAGE_UPLOAD_START }); - const type = await checkUserOrOrgHandle(owner)(firestore); - + const type = await checkUserOrOrgHandle(owner)(firebase); + const storagePath = `tutorials/${type}/${owner}/${tutorial_id}`; const dbPath = `tutorials`; await firebase.uploadFiles(storagePath, files, dbPath, { From 593593674deedf75a800fdd5e2e74a8a02df60d1 Mon Sep 17 00:00:00 2001 From: rohitPandey469 Date: Mon, 5 Feb 2024 18:16:13 +0530 Subject: [PATCH 2/4] Fixed Delete Button In Image Drawer --- src/store/actions/tutorialsActions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/actions/tutorialsActions.js b/src/store/actions/tutorialsActions.js index 1689a816..75630d08 100644 --- a/src/store/actions/tutorialsActions.js +++ b/src/store/actions/tutorialsActions.js @@ -430,7 +430,7 @@ export const remoteTutorialImages = dispatch({ type: actions.TUTORIAL_IMAGE_DELETE_START }); - const type = await checkUserOrOrgHandle(owner)(firestore); + const type = await checkUserOrOrgHandle(owner)(firebase); const storagePath = `tutorials/${type}/${owner}/${tutorial_id}/${name}`; const dbPath = `tutorials`; From b30ea33d3beff95f127b7c16ade3785391342dcb Mon Sep 17 00:00:00 2001 From: rohitPandey469 Date: Mon, 5 Feb 2024 18:17:53 +0530 Subject: [PATCH 3/4] Fixed Add Image button in Image Drawer --- src/store/actions/tutorialsActions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/actions/tutorialsActions.js b/src/store/actions/tutorialsActions.js index 75630d08..7a9e7040 100644 --- a/src/store/actions/tutorialsActions.js +++ b/src/store/actions/tutorialsActions.js @@ -430,7 +430,7 @@ export const remoteTutorialImages = dispatch({ type: actions.TUTORIAL_IMAGE_DELETE_START }); - const type = await checkUserOrOrgHandle(owner)(firebase); + const type = await checkUserOrOrgHandle(owner)( firebase); const storagePath = `tutorials/${type}/${owner}/${tutorial_id}/${name}`; const dbPath = `tutorials`; From d0813ca381eef90665c751784fbd7b89a3c9ddaf Mon Sep 17 00:00:00 2001 From: rohitPandey469 Date: Mon, 5 Feb 2024 18:18:52 +0530 Subject: [PATCH 4/4] Fixed Delete Button In Image Drawer --- src/store/actions/tutorialsActions.js | 298 +++++++++++++------------- 1 file changed, 149 insertions(+), 149 deletions(-) diff --git a/src/store/actions/tutorialsActions.js b/src/store/actions/tutorialsActions.js index 7a9e7040..6bd0b5c2 100644 --- a/src/store/actions/tutorialsActions.js +++ b/src/store/actions/tutorialsActions.js @@ -230,36 +230,36 @@ export const getCurrentTutorialData = export const addNewTutorialStep = ({ owner, tutorial_id, title, time, id }) => - async (firebase, firestore, dispatch) => { - try { - dispatch({ type: actions.CREATE_TUTORIAL_STEP_START }); + async (firebase, firestore, dispatch) => { + try { + dispatch({ type: actions.CREATE_TUTORIAL_STEP_START }); - await firestore - .collection("tutorials") - .doc(tutorial_id) - .collection("steps") - .doc(id) - .set({ - content: `Switch to editor mode to begin ${title} step`, - id, - time, - title, - visibility: true, - deleted: false - }); + await firestore + .collection("tutorials") + .doc(tutorial_id) + .collection("steps") + .doc(id) + .set({ + content: `Switch to editor mode to begin ${title} step`, + id, + time, + title, + visibility: true, + deleted: false + }); - await getCurrentTutorialData(owner, tutorial_id)( - firebase, - firestore, - dispatch - ); + await getCurrentTutorialData(owner, tutorial_id)( + firebase, + firestore, + dispatch + ); - dispatch({ type: actions.CREATE_TUTORIAL_STEP_SUCCESS }); - } catch (e) { - console.log("CREATE_TUTORIAL_STEP_FAIL", e.message); - dispatch({ type: actions.CREATE_TUTORIAL_STEP_FAIL, payload: e.message }); - } - }; + dispatch({ type: actions.CREATE_TUTORIAL_STEP_SUCCESS }); + } catch (e) { + console.log("CREATE_TUTORIAL_STEP_FAIL", e.message); + dispatch({ type: actions.CREATE_TUTORIAL_STEP_FAIL, payload: e.message }); + } + }; export const clearCreateTutorials = () => dispatch => dispatch({ type: actions.CLEAR_CREATE_TUTORIALS_STATE }); @@ -305,78 +305,78 @@ export const setCurrentStepContent = export const hideUnHideStep = (owner, tutorial_id, step_id, visibility) => - async (firebase, firestore, dispatch) => { - try { - /* not being used */ - // const type = await checkUserOrOrgHandle(owner)(firebase); - await firestore - .collection("tutorials") - .doc(tutorial_id) - .collection("steps") - .doc(step_id) - .update({ - [`visibility`]: !visibility, - updatedAt: firestore.FieldValue.serverTimestamp() - }); + async (firebase, firestore, dispatch) => { + try { + /* not being used */ + // const type = await checkUserOrOrgHandle(owner)(firebase); + await firestore + .collection("tutorials") + .doc(tutorial_id) + .collection("steps") + .doc(step_id) + .update({ + [`visibility`]: !visibility, + updatedAt: firestore.FieldValue.serverTimestamp() + }); - await getCurrentTutorialData(owner, tutorial_id)( - firebase, - firestore, - dispatch - ); - } catch (e) { - console.log(e.message); - } - }; + await getCurrentTutorialData(owner, tutorial_id)( + firebase, + firestore, + dispatch + ); + } catch (e) { + console.log(e.message); + } + }; export const publishUnpublishTutorial = (owner, tutorial_id, isPublished) => - async (firebase, firestore, dispatch) => { - try { - await firestore - .collection("tutorials") - .doc(tutorial_id) - .update({ - ["isPublished"]: !isPublished - }); + async (firebase, firestore, dispatch) => { + try { + await firestore + .collection("tutorials") + .doc(tutorial_id) + .update({ + ["isPublished"]: !isPublished + }); - getCurrentTutorialData(owner, tutorial_id)(firebase, firestore, dispatch); - } catch (e) { - console.log(e.message); - } - }; + getCurrentTutorialData(owner, tutorial_id)(firebase, firestore, dispatch); + } catch (e) { + console.log(e.message); + } + }; export const removeStep = (owner, tutorial_id, step_id, current_step_no) => - async (firebase, firestore, dispatch) => { - try { - await firestore - .collection("tutorials") - .doc(tutorial_id) - .collection("steps") - .doc(step_id) - .delete() - - // const data = await firestore - // .collection("tutorials") - // .doc(tutorial_id) - // .collection("steps") - // .doc(step_id) - // .get(); - - await setCurrentStepNo( - current_step_no > 0 ? current_step_no - 1 : current_step_no - )(dispatch); - - await getCurrentTutorialData(owner, tutorial_id)( - firebase, - firestore, - dispatch - ); - } catch (e) { - console.log(e.message); - } - }; + async (firebase, firestore, dispatch) => { + try { + await firestore + .collection("tutorials") + .doc(tutorial_id) + .collection("steps") + .doc(step_id) + .delete(); + + // const data = await firestore + // .collection("tutorials") + // .doc(tutorial_id) + // .collection("steps") + // .doc(step_id) + // .get(); + + await setCurrentStepNo( + current_step_no > 0 ? current_step_no - 1 : current_step_no + )(dispatch); + + await getCurrentTutorialData(owner, tutorial_id)( + firebase, + firestore, + dispatch + ); + } catch (e) { + console.log(e.message); + } + }; export const setCurrentStep = data => async dispatch => dispatch({ type: actions.SET_EDITOR_DATA, payload: data }); @@ -389,7 +389,7 @@ export const uploadTutorialImages = try { dispatch({ type: actions.TUTORIAL_IMAGE_UPLOAD_START }); const type = await checkUserOrOrgHandle(owner)(firebase); - + const storagePath = `tutorials/${type}/${owner}/${tutorial_id}`; const dbPath = `tutorials`; await firebase.uploadFiles(storagePath, files, dbPath, { @@ -430,7 +430,7 @@ export const remoteTutorialImages = dispatch({ type: actions.TUTORIAL_IMAGE_DELETE_START }); - const type = await checkUserOrOrgHandle(owner)( firebase); + const type = await checkUserOrOrgHandle(owner)(firebase); const storagePath = `tutorials/${type}/${owner}/${tutorial_id}/${name}`; const dbPath = `tutorials`; @@ -465,69 +465,69 @@ export const remoteTutorialImages = export const updateStepTitle = (owner, tutorial_id, step_id, step_title) => - async (firebase, firestore, dispatch) => { - try { - const dbPath = `tutorials/${tutorial_id}/steps`; - await firestore - .collection(dbPath) - .doc(step_id) - .update({ - [`title`]: step_title, - updatedAt: firestore.FieldValue.serverTimestamp() - }); + async (firebase, firestore, dispatch) => { + try { + const dbPath = `tutorials/${tutorial_id}/steps`; + await firestore + .collection(dbPath) + .doc(step_id) + .update({ + [`title`]: step_title, + updatedAt: firestore.FieldValue.serverTimestamp() + }); - await getCurrentTutorialData(owner, tutorial_id)( - firebase, - firestore, - dispatch - ); - } catch (e) { - console.log(e); - } - }; + await getCurrentTutorialData(owner, tutorial_id)( + firebase, + firestore, + dispatch + ); + } catch (e) { + console.log(e); + } + }; export const updateStepTime = (owner, tutorial_id, step_id, step_time) => - async (firebase, firestore, dispatch) => { - try { - const dbPath = `tutorials/${tutorial_id}/steps`; - - await firestore - .collection(dbPath) - .doc(step_id) - .update({ - [`time`]: step_time, - updatedAt: firestore.FieldValue.serverTimestamp() - }); + async (firebase, firestore, dispatch) => { + try { + const dbPath = `tutorials/${tutorial_id}/steps`; - await getCurrentTutorialData(owner, tutorial_id)( - firebase, - firestore, - dispatch - ); - } catch (e) { - console.log(e.message); - } - }; + await firestore + .collection(dbPath) + .doc(step_id) + .update({ + [`time`]: step_time, + updatedAt: firestore.FieldValue.serverTimestamp() + }); + + await getCurrentTutorialData(owner, tutorial_id)( + firebase, + firestore, + dispatch + ); + } catch (e) { + console.log(e.message); + } + }; export const setTutorialTheme = ({ tutorial_id, owner, bgColor, textColor }) => - async (firebase, firestore, dispatch) => { - try { - const dbPath = `tutorials`; + async (firebase, firestore, dispatch) => { + try { + const dbPath = `tutorials`; - await firestore.collection(dbPath).doc(tutorial_id).update({ - text_color: textColor, - background_color: bgColor, - updatedAt: firestore.FieldValue.serverTimestamp() - }); + await firestore.collection(dbPath).doc(tutorial_id).update({ + text_color: textColor, + background_color: bgColor, + updatedAt: firestore.FieldValue.serverTimestamp() + }); - await getCurrentTutorialData(owner, tutorial_id)( - firebase, - firestore, - dispatch - ); - } catch (e) { - console.log(e.message); - } - }; + await getCurrentTutorialData(owner, tutorial_id)( + firebase, + firestore, + dispatch + ); + } catch (e) { + console.log(e.message); + } + };