From 0331719a9106ed92c30549963df86d524a734890 Mon Sep 17 00:00:00 2001
From: rohitPandey469 <rd8614196@gmail.com>
Date: Fri, 2 Feb 2024 14:42:27 +0530
Subject: [PATCH 1/2] 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) {
-      <Snackbar
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left"
-        }}
-        open={true}
-        autoHideDuration={6000}
-        message="Image Uploaded successfully...."
-      />;
+      setUploadSnackbarOpen(true);
     } else if (uploading === false && uploading_error) {
-      <Snackbar
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left"
-        }}
-        open={true}
-        autoHideDuration={6000}
-        message={uploading_error}
-      />;
+      setUploadErrorSnackbarOpen(true);
     }
   }, [uploading, uploading_error]);
 
   useEffect(() => {
     if (deleting === false && deleting_error === false) {
-      <Snackbar
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left"
-        }}
-        open={true}
-        autoHideDuration={6000}
-        message="Deleted Succefully...."
-      />;
+      setDeleteSnackbarOpen(true);
     } else if (deleting === false && deleting_error) {
-      <Snackbar
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left"
-        }}
-        open={true}
-        autoHideDuration={6000}
-        message={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 (
-    <Drawer
-      title="Images"
-      data-testid="imageDrawer"
-      anchor="right"
-      closable={true}
-      onClose={onClose}
-      open={visible}
-      getContainer={true}
-      style={{ position: "absolute" }}
-      width="400px"
-      className="image-drawer"
-      destroyOnClose={true}
-      maskClosable={false}
-    >
-      <div className="col-pad-24" data-testId="tutorialImgUpload">
-        <Grid>
-          <input
-            id="file-upload"
-            fullWidth
-            accept="image/*"
-            type="file"
-            {...props}
-          />
-          {uploading ? (
-            <>
-              <LoadingOutlined /> Please wait...
-              <p className="ant-upload-hint mt-8">Uploading image(s)...</p>
-            </>
-          ) : (
-            <>
-              <p className="ant-upload-drag-icon">
-                <InboxOutlined />
-              </p>
-              <p className="ant-upload-text">
-                Click or drag images to here to upload
-              </p>
-            </>
-          )}
-        </Grid>
-        {imageURLs &&
-          imageURLs.length > 0 &&
-          imageURLs.map((image, i) => (
-            <Grid className="mb-24" key={i}>
-              <Grid xs={24} md={8}>
-                <img src={image.url} alt="" />
-              </Grid>
-              <Grid xs={24} md={16} className="pl-8" style={{}}>
-                <h4 className="pb-8">{image.name}</h4>
-
-                <CopyToClipboard
-                  text={`![alt=image; scale=1.0](${image.url})`}
-                  onCopy={() => (
-                    <Snackbar
-                      anchorOrigin={{
-                        vertical: "bottom",
-                        horizontal: "left"
-                      }}
-                      open={true}
-                      autoHideDuration={6000}
-                      message="Copied...."
-                    />
-                  )}
-                >
-                  <Button type="primary">Copy URL</Button>
-                </CopyToClipboard>
-
-                <Button
-                  loading={deleting}
-                  onClick={() => deleteFile(image.name, image.url)}
-                  type="ghost"
-                  danger
-                >
-                  Delete
-                </Button>
+    <>
+      <Drawer
+        title="Images"
+        data-testid="imageDrawer"
+        anchor="right"
+        closable={true}
+        onClose={onClose}
+        open={visible}
+        getContainer={true}
+        style={{ position: "absolute" }}
+        width="400px"
+        className="image-drawer"
+        destroyOnClose={true}
+        maskClosable={false}
+      >
+        <div className="col-pad-24" data-testId="tutorialImgUpload">
+          <Grid>
+            <input
+              id="file-upload"
+              fullWidth
+              accept="image/*"
+              type="file"
+              name="file"
+              multiple
+              onChange={event => beforeUpload(event.target.files)}
+            />
+            {uploading ? (
+              <>
+                <LoadingOutlined /> Please wait...
+                <p className="ant-upload-hint mt-8">Uploading image(s)...</p>
+              </>
+            ) : (
+              <>
+                <p className="ant-upload-drag-icon">
+                  <InboxOutlined />
+                </p>
+                <p className="ant-upload-text">
+                  Click or drag images to here to upload
+                </p>
+              </>
+            )}
+          </Grid>
+          {imageURLs &&
+            imageURLs.length > 0 &&
+            imageURLs.map((image, i) => (
+              <Grid className="mb-24" key={i}>
+                <Grid xs={24} md={8}>
+                  <img src={image.url} alt="" />
+                </Grid>
+                <Grid xs={24} md={16} className="pl-8" style={{}}>
+                  <h4 className="pb-8">{image.name}</h4>
+
+                  <CopyToClipboard
+                    text={`![alt=image; scale=1.0](${image.url})`}
+                    onCopy={() => (
+                      <Snackbar
+                        anchorOrigin={{
+                          vertical: "bottom",
+                          horizontal: "left"
+                        }}
+                        open={true}
+                        autoHideDuration={6000}
+                        message="Copied...."
+                      />
+                    )}
+                  >
+                    <Button type="primary">Copy URL</Button>
+                  </CopyToClipboard>
+
+                  <Button
+                    loading={deleting}
+                    onClick={() => deleteFile(image.name, image.url)}
+                    type="ghost"
+                    danger
+                  >
+                    Delete
+                  </Button>
+                </Grid>
               </Grid>
-            </Grid>
-          ))}
-      </div>
-    </Drawer>
+            ))}
+        </div>
+      </Drawer>
+      <Snackbar
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left"
+        }}
+        open={uploadSnackbarOpen}
+        autoHideDuration={6000}
+        onClose={() => handleSnackbarClose("upload")}
+        message="Image Uploaded successfully...."
+      />
+      <Snackbar
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left"
+        }}
+        open={uploadErrorSnackbarOpen}
+        autoHideDuration={6000}
+        onClose={() => handleSnackbarClose("upload")}
+        message={uploading_error}
+      />
+      <Snackbar
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left"
+        }}
+        open={deleteSnackbarOpen}
+        autoHideDuration={6000}
+        onClose={() => handleSnackbarClose("delete")}
+        message="Deleted Successfully...."
+      />
+      <Snackbar
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left"
+        }}
+        open={deleteErrorSnackbarOpen}
+        autoHideDuration={6000}
+        onClose={() => 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 76b8e724234c03ad8a94f3968ee57c4323c41c33 Mon Sep 17 00:00:00 2001
From: rohitPandey469 <rd8614196@gmail.com>
Date: Mon, 5 Feb 2024 18:49:00 +0530
Subject: [PATCH 2/2] Fixed Oversized Image In Image Drawer

---
 src/components/Tutorials/subComps/ImageDrawer.jsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Tutorials/subComps/ImageDrawer.jsx b/src/components/Tutorials/subComps/ImageDrawer.jsx
index 1e3f2056..ee1d9dd6 100644
--- a/src/components/Tutorials/subComps/ImageDrawer.jsx
+++ b/src/components/Tutorials/subComps/ImageDrawer.jsx
@@ -161,7 +161,12 @@ const ImageDrawer = ({ onClose, visible, owner, tutorial_id, imageURLs }) => {
             imageURLs.length > 0 &&
             imageURLs.map((image, i) => (
               <Grid className="mb-24" key={i}>
-                <Grid xs={24} md={8}>
+                <Grid 
+                style={{
+                  maxWidth: "240px",
+                  objectFit: "cover"
+                }}
+                xs={24} md={8}>
                   <img src={image.url} alt="" />
                 </Grid>
                 <Grid xs={24} md={16} className="pl-8" style={{}}>