[ Fix : Oversized Image In Image Drawer Fixed ]

src/components/Card/CardWithVideo.jsx

@@ -0,0 +1,235 @@
+import React, { useState, useEffect } from "react";
+import { makeStyles } from "@mui/styles";
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardMedia from "@mui/material/CardMedia";
+import CardContent from "@mui/material/CardContent";
+import CardActions from "@mui/material/CardActions";
+import Avatar from "@mui/material/Avatar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import { red } from "@mui/material/colors";
+import cardImage from "./card.png";
+import Chip from "@mui/material/Chip";
+import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
+import ChatOutlinedIcon from "@mui/icons-material/ChatOutlined";
+import TurnedInNotOutlinedIcon from "@mui/icons-material/TurnedInNotOutlined";
+import MoreVertOutlinedIcon from "@mui/icons-material/MoreVertOutlined";
+import { ToggleButton, ToggleButtonGroup } from "@mui/material";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { Link } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { useFirebase, useFirestore } from "react-redux-firebase";
+import { getUserProfileData } from "../../store/actions";
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    margin: "0.5rem",
+    borderRadius: "10px",
+    boxSizing: "border-box",
+    [theme.breakpoints.down("md")]: {
+      width: "auto"
+    },
+    [theme.breakpoints.down("xs")]: {
+      width: "auto"
+    }
+  },
+  grow: {
+    flexGrow: 1
+  },
+  media: {
+    height: 0,
+    paddingTop: "56.25%" // 16:9
+  },
+  margin: {
+    marginRight: "5px"
+  },
+  expandOpen: {
+    transform: "rotate(180deg)"
+  },
+  avatar: {
+    backgroundColor: red[500]
+  },
+  inline: {
+    fontWeight: 600
+  },
+  contentPadding: {
+    padding: "0 16px"
+  },
+  icon: {
+    padding: "5px"
+  },
+  time: {
+    lineHeight: "1"
+  },
+  small: {
+    padding: "4px"
+  },
+  settings: {
+    flexWrap: "wrap"
+  }
+}));
+
+export default function CardWithVideo({ tutorial }) {
+  const classes = useStyles();
+  const [alignment, setAlignment] = React.useState("left");
+  const [count, setCount] = useState(1);
+  const dispatch = useDispatch();
+  const firebase = useFirebase();
+  const firestore = useFirestore();
+  console.log("Tutorial Card with video",tutorial)
+  const handleIncrement = () => {
+    setCount(count + 1);
+  };
+
+  const handleDecrement = () => {
+    setCount(count - 1);
+  };
+
+  const handleAlignment = (event, newAlignment) => {
+    setAlignment(newAlignment);
+  };
+
+  useEffect(() => {
+    getUserProfileData(tutorial?.created_by)(firebase, firestore, dispatch);
+  }, [tutorial]);
+
+  const user = useSelector(
+    ({
+      profile: {
+        user: { data }
+      }
+    }) => data
+  );
+
+  const getTime = timestamp => {
+    return timestamp.toDate().toDateString();
+  };
+
+  return (
+    <Card className={classes.root}>
+      <Link to={`/tutorial/${tutorial?.tutorial_id}`}>
+        <CardMedia
+          component="video"
+          controls
+          src={tutorial?.featured_video}
+          title="code"
+          data-testId="Video"
+        />
+      </Link>
+      <CardHeader
+        avatar={
+          <Avatar className={classes.avatar}>
+            {user?.photoURL && user?.photoURL.length > 0 ? (
+              <img src={user?.photoURL} />
+            ) : (
+              user?.displayName[0]
+            )}
+          </Avatar>
+        }
+        title={
+          <React.Fragment>
+            <Typography
+              component="span"
+              variant="h7"
+              className={classes.inline}
+              color="textPrimary"
+              data-testId="UserName"
+            >
+              {user?.displayName}
+            </Typography>
+            {tutorial?.owner && (
+              <>
+                {" for "}
+                <Typography
+                  component="span"
+                  variant="h7"
+                  className={classes.inline}
+                  color="textPrimary"
+                  data-testId="UserOrgName"
+                >
+                  {tutorial?.owner}
+                </Typography>
+              </>
+            )}
+          </React.Fragment>
+        }
+        subheader={tutorial?.createdAt ? getTime(tutorial?.createdAt) : ""}
+      />
+      <Link to={`/tutorial/${tutorial?.tutorial_id}`}>
+        <CardContent className={classes.contentPadding}>
+          <Typography variant="h5" color="text.primary" data-testId="Title">
+            {tutorial?.title}
+          </Typography>
+          <Typography
+            variant="body2"
+            color="textSecondary"
+            component="p"
+            paragraph
+            data-testId="Description"
+          >
+            {tutorial?.summary}
+          </Typography>
+        </CardContent>
+      </Link>
+      <CardActions className={classes.settings} disableSpacing>
+        <Chip
+          label="HTML"
+          component="a"
+          href="#chip"
+          clickable
+          variant="outlined"
+          className={classes.margin}
+        />
+        <Typography
+          variant="overline"
+          display="block"
+          className={classes.time}
+          data-testId="Time"
+        >
+          {"10 min"}
+        </Typography>
+        <div className={classes.grow} />
+        <ToggleButtonGroup
+          size="small"
+          className={classes.small}
+          value={alignment}
+          exclusive
+          onChange={handleAlignment}
+          aria-label="text alignment"
+        >
+          <ToggleButton
+            className={classes.small}
+            onClick={handleIncrement}
+            value="left"
+            aria-label="left aligned"
+          >
+            <KeyboardArrowUpIcon />
+            <span>{count}</span>
+          </ToggleButton>
+          <ToggleButton
+            className={classes.small}
+            onClick={handleDecrement}
+            value="center"
+            aria-label="centered"
+          >
+            <KeyboardArrowDownIcon />
+          </ToggleButton>
+        </ToggleButtonGroup>
+        <IconButton aria-label="share" data-testId="CommentIcon">
+          <ChatOutlinedIcon />
+        </IconButton>
+        <IconButton aria-label="add to favorites" data-testId="ShareIcon">
+          <ShareOutlinedIcon />
+        </IconButton>
+        <IconButton aria-label="share" data-testId="NotifIcon">
+          <TurnedInNotOutlinedIcon />
+        </IconButton>
+        <IconButton aria-label="share" data-testId="MoreIcon">
+          <MoreVertOutlinedIcon />
+        </IconButton>
+      </CardActions>
+    </Card>
+  );
+}

src/components/HomePage/index.jsx

@@ -38,6 +38,7 @@ import {
   getTutorialFeedIdArray
 } from "../../store/actions/tutorialPageActions";
 import { getTutorialsByTopTags } from "../../store/actions";
+import CardWithVideo from "../Card/CardWithVideo";
 
 function HomePage({ background = "white", textColor = "black" }) {
   const classes = useStyles();
@@ -182,6 +183,8 @@ function HomePage({ background = "white", textColor = "black" }) {
   const closeModal = () => {
     setVisibleModal(prev => !prev);
   };
+
+  console.log(tutorials)
   return (
     <Card
       className={classes.wrapper}
@@ -232,7 +235,7 @@ function HomePage({ background = "white", textColor = "black" }) {
             <TagCard tags={tags} />
           </Box>
           {tutorials.map(tutorial => {
-            return !tutorial?.featured_image ? (
+            return tutorial?.featured_video ? (<CardWithVideo tutorial={tutorial}/>):!tutorial?.featured_image ? (
               <CardWithoutPicture tutorial={tutorial} />
             ) : (
               <CardWithPicture tutorial={tutorial} />

src/components/Tutorials/NewTutorial/index.jsx

@@ -63,7 +63,8 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
     title: "",
     summary: "",
     owner: "",
-    tags: []
+    tags: [],
+    featured_video : null,
   });
 
   const loadingProp = useSelector(
@@ -202,6 +203,14 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
     }
   };
 
+  const handleVideoChange = e => {
+    const videoFile = e.target.files[0]
+    setformValue(prev => ({
+      ...prev,
+      featured_video : videoFile
+    }))
+  }
+
   const classes = useStyles();
   return (
     <Modal
@@ -315,7 +324,11 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
           <IconButton>
             <ImageIcon />
           </IconButton>
-          <IconButton>
+          <IconButton
+            component="label"
+            htmlFor="fileInput"
+          >
+            <input id="fileInput" type="file" accept="video/*" onChange={e=>handleVideoChange(e)} disableUnderline style={{display : "none"}}/>
             <MovieIcon />
           </IconButton>
           <IconButton>

src/components/Tutorials/subComps/ImageDrawer.jsx

@@ -105,18 +105,12 @@ 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) =>
     remoteTutorialImages(
@@ -148,7 +142,9 @@ const ImageDrawer = ({ onClose, visible, owner, tutorial_id, imageURLs }) => {
             fullWidth
             accept="image/*"
             type="file"
-            {...props}
+            name="file"
+            multiple
+            onChange={e => beforeUpload(e.target.files)}
           />
           {uploading ? (
             <>
@@ -161,7 +157,7 @@ const ImageDrawer = ({ onClose, visible, owner, tutorial_id, imageURLs }) => {
                 <InboxOutlined />
               </p>
               <p className="ant-upload-text">
-                Click or drag images to here to upload
+                Click or drag images here to upload
               </p>
             </>
           )}
@@ -170,7 +166,7 @@ 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={{}}>

src/store/actions/authActions.js

@@ -195,22 +195,26 @@ 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;
   }
 };
 
-export const checkOrgHandleExists = orgHandle => async firestore => {
+export const checkOrgHandleExists = orgHandle => async firebase => {
   try {
-    const organizationHandle = await firestore
+    const organizationHandle = await firebase
+      .firestore()
       .collection("cl_org_general")
       .doc(orgHandle)
       .get();
 
-    console.log(organizationHandle);
+    console.log("Organization Handle",organizationHandle);
     return organizationHandle.exists;
   } catch (e) {
     throw e.message;

src/store/actions/tutorialPageActions.js

@@ -101,6 +101,7 @@ export const getTutorialFeedData =
             created_by: tutorial?.created_by,
             createdAt: tutorial?.createdAt,
             featured_image: tutorial?.featured_image,
+            featured_video: tutorial?.featured_video,
             tut_tags: tutorial?.tut_tags,
             upVotes: tutorial?.upVotes || 0,
             downVotes: tutorial?.downVotes || 0,