ActiveLearningStudio · muhammadqamar · Mar 15, 2023 · Mar 15, 2023
diff --git a/src/components/FileInputDnd/index.js b/src/components/FileInputDnd/index.js
@@ -1,10 +1,10 @@
 /* eslint-disable */
-import React, { useRef } from 'react';
+import React, { useRef } from "react";
 import UploadImg from "assets/images/upload1.png";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import './style.scss';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "./style.scss";
 
-const FileInputDnd = ({ handleChange, acceptFormats }) => {
+const FileInputDnd = ({ handleChange, acceptFormats, fileError }) => {
   const inputRef = useRef(null);
 
   const areaClick = (e) => {
@@ -23,27 +23,43 @@ const FileInputDnd = ({ handleChange, acceptFormats }) => {
   const handleFileChange = (e) => {
     handleChange(e.target.files[0]);
   };
-  
+
   const handleDrag = (e) => {
     e.preventDefault();
   };
 
   return (
     <>
-      <div className="file-upload-dnd-area" onClick={areaClick} onDrop={handleDrop} onDragOver={handleDrag}>
+      <div
+        className="file-upload-dnd-area"
+        onClick={areaClick}
+        onDrop={handleDrop}
+        onDragOver={handleDrag}
+      >
         <label>
-          <FontAwesomeIcon icon="upload" className="mx-2"/>
+          <FontAwesomeIcon icon="upload" className="mx-2" />
           Select File
         </label>
 
         <div className="file-upload-dnd-are-content">
-          <img src={UploadImg} alt="Cloud upload image"/>
+          <img src={UploadImg} alt="Cloud upload image" />
           <p>Drag & drop file or browse to upload</p>
         </div>
       </div>
-      <input className="file-upload-dnd-input" type="file" accept={acceptFormats} onChange={handleFileChange} ref={inputRef}/>
+      <input
+        className="file-upload-dnd-input"
+        type="file"
+        accept={acceptFormats}
+        onChange={handleFileChange}
+        ref={inputRef}
+      />
+      {fileError && (
+        <div style={{ color: "red" }} className="mt-2">
+          {fileError}
+        </div>
+      )}
     </>
   );
 };
 
-export default FileInputDnd;
+export default FileInputDnd;
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -1,39 +1,43 @@
 /* eslint-disable */
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { connect, useSelector, useDispatch } from 'react-redux';
-import { Link } from 'react-router-dom';
-import { Dropdown } from 'react-bootstrap';
-
-import { SHOW_HELP } from 'store/actionTypes';
-import { logoutAction } from 'store/actions/auth';
-import { toggleSideBar } from 'store/actions/msTeams';
-import { Event } from 'trackers/ga';
-
-import HeaderNotification from './notification';
-import MultitenancyDropdown from './multitenancyDropdown';
-
-import './style.scss';
-import { getGlobalColor } from 'containers/App/DynamicBrandingApply';
-import HelpSvg from 'iconLibrary/header/HelpSvg';
-import EditMdSvg from 'iconLibrary/mainContainer/EditMdSvg';
-import ChangePasswordMdSvg from 'iconLibrary/header/ChangePasswordMdSvg';
-import LogoutMdSvg from 'iconLibrary/header/LogoutMdSvg';
-import HeaderHambergSvg from 'iconLibrary/header/HeaderHambergSvg';
-import Forum from 'iconLibrary/header/Forum';
-import Community from 'iconLibrary/header/Community';
-import Group from 'iconLibrary/header/Group';
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { connect, useSelector, useDispatch } from "react-redux";
+import { Link } from "react-router-dom";
+import { Dropdown } from "react-bootstrap";
+import Swal from "sweetalert2";
+import { SHOW_HELP } from "store/actionTypes";
+import { logoutAction } from "store/actions/auth";
+import { toggleSideBar } from "store/actions/msTeams";
+import { Event } from "trackers/ga";
+
+import HeaderNotification from "./notification";
+import MultitenancyDropdown from "./multitenancyDropdown";
+
+import "./style.scss";
+import { getGlobalColor } from "containers/App/DynamicBrandingApply";
+import HelpSvg from "iconLibrary/header/HelpSvg";
+import EditMdSvg from "iconLibrary/mainContainer/EditMdSvg";
+import ChangePasswordMdSvg from "iconLibrary/header/ChangePasswordMdSvg";
+import LogoutMdSvg from "iconLibrary/header/LogoutMdSvg";
+import HeaderHambergSvg from "iconLibrary/header/HeaderHambergSvg";
+import Forum from "iconLibrary/header/Forum";
+import Community from "iconLibrary/header/Community";
+import Group from "iconLibrary/header/Group";
 function Header(props) {
   const { logout, toggleMenuSideBar } = props;
   const dispatch = useDispatch();
   const stateHeader = useSelector((state) => state.organization);
   const { user } = useSelector((state) => state.auth);
   const { currentOrganization } = stateHeader;
   const [primaryColor, setPrimaryColor] = useState();
-  const hideShowSideBar = useSelector((state) => state.msTeams.toggle_sidebar);
+  const hideShowSideBar = useSelector(
+    (state) => state.msTeams.toggle_sidebar
+  );
   const isMsTeam = useSelector((state) => state.msTeams.is_msteam);
   useEffect(() => {
-    const primaryColorFunction = getGlobalColor('--main-primary-color');
+    const primaryColorFunction = getGlobalColor(
+      "--main-primary-color"
+    );
     setPrimaryColor(primaryColorFunction);
   }, [currentOrganization]);
 
@@ -46,21 +50,36 @@ function Header(props) {
     <header>
       <div className="top-header flex-div align-items-center">
         <div className="group-search-logo">
-          {isMsTeam == true &&
-            <a href='#' style={{marginRight:"12px"}} onClick={()=>toggleMenuSideBar(!hideShowSideBar)} className={`${hideShowSideBar == false ? 'expand-hamberg' : ''}`}><HeaderHambergSvg primaryColor={primaryColor} /></a>
-          }
+          {isMsTeam == true && (
+            <a
+              href="#"
+              style={{ marginRight: "12px" }}
+              onClick={() => toggleMenuSideBar(!hideShowSideBar)}
+              className={`${
+                hideShowSideBar == false ? "expand-hamberg" : ""
+              }`}
+            >
+              <HeaderHambergSvg primaryColor={primaryColor} />
+            </a>
+          )}
           <div className="tophd_left">
-            <Link to={`/org/${stateHeader?.currentOrganization?.domain}`} className="top_logo">
+            <Link
+              to={`/org/${stateHeader?.currentOrganization?.domain}`}
+              className="top_logo"
+            >
               <div
                 className="nav-logo"
                 style={{
                   backgroundImage:
-                    !!currentOrganization?.image && currentOrganization?.image.includes('dev.currikistudio')
+                    !!currentOrganization?.image &&
+                    currentOrganization?.image.includes(
+                      "dev.currikistudio"
+                    )
                       ? `url(${currentOrganization?.image})`
                       : `url(${global.config.resourceUrl}${currentOrganization?.image})`,
-                  backgroundPosition: 'left',
-                  backgroundSize: 'contain',
-                  backgroundRepeat: 'no-repeat',
+                  backgroundPosition: "left",
+                  backgroundSize: "contain",
+                  backgroundRepeat: "no-repeat",
                 }}
               />
             </Link>
@@ -72,41 +91,58 @@ function Header(props) {
               <li>
                 <MultitenancyDropdown />
               </li>
-              <li className="menu-user-settings d-flex align-items-center">
+              {/* <li className="menu-user-settings d-flex align-items-center">
                 <Dropdown>
                   <Dropdown.Toggle className="align-items-center">
                     <Community primaryColor={primaryColor} />
                     <p className="header-icon-text">Community</p>
                   </Dropdown.Toggle>
 
                   <Dropdown.Menu className="user-dropdown">
-                    <Dropdown.Item target="_blank" href={`https://www.currikistudio.org/groups/`}>
+                    <Dropdown.Item
+                      target="_blank"
+                      href={`https://www.currikistudio.org/groups/`}
+                    >
                       <div className="user-dropdown-item">
                         <Group primaryColor={primaryColor} />
                         Groups
                       </div>
                     </Dropdown.Item>
 
-                    <Dropdown.Item target="_blank" href={`https://www.currikistudio.org/forums/`}>
+                    <Dropdown.Item
+                      target="_blank"
+                      href={`https://www.currikistudio.org/forums/`}
+                    >
                       <div className="user-dropdown-item">
                         <Forum primaryColor={primaryColor} />
                         Forums
                       </div>
                     </Dropdown.Item>
                   </Dropdown.Menu>
                 </Dropdown>
-              </li>
+              </li> */}
               <li>
                 <a
-                  style={{ cursor: 'pointer', textAlign: 'center' }}
-                  // onClick={() => {
-                  //   dispatch({
-                  //     type: SHOW_HELP,
-                  //     payload: true,
-                  //   });
-                  // }}
-                  href="https://www.currikistudio.org/help/"
-                  target="_blank"
+                  style={{ cursor: "pointer", textAlign: "center" }}
+                  onClick={() => {
+                    Swal.fire({
+                      title: "Are you Sure?",
+                      text: "You will be redirect out of the tab!",
+                      showCancelButton: true,
+                      confirmButtonText: "OK",
+                    }).then((result) => {
+                      if (result.isConfirmed) {
+                        window.open(
+                          "https://www.currikistudio.org/help/",
+                          "_blank"
+                        );
+                      } else if (result.isDenied) {
+                        Swal.close();
+                      }
+                    });
+                  }}
+                  // href="https://www.currikistudio.org/help/"
+                  // target="_blank"
                 >
                   <HelpSvg primaryColor={primaryColor} />
 
@@ -119,15 +155,21 @@ function Header(props) {
               <li className="menu-user-settings d-flex align-items-center">
                 <Dropdown>
                   <Dropdown.Toggle className="align-items-center">
-                    <div className="profile-avatar" style={{ backgroundColor: primaryColor }}>
+                    <div
+                      className="profile-avatar"
+                      style={{ backgroundColor: primaryColor }}
+                    >
                       {user?.first_name[0]}
                     </div>
                     <p className="header-icon-text">Profile</p>
                   </Dropdown.Toggle>
 
                   <Dropdown.Menu className="user-dropdown">
                     <div className="user-dropdown-item-name">
-                      <div className="profile-avatar" style={{ backgroundColor: primaryColor }}>
+                      <div
+                        className="profile-avatar"
+                        style={{ backgroundColor: primaryColor }}
+                      >
                         {user?.first_name[0]}
                       </div>
                       <div className="basic-info">
@@ -142,29 +184,41 @@ function Header(props) {
                       </div>
                     </div>
                     <hr />
-                    <Dropdown.Item as={Link} to={`/org/${stateHeader.currentOrganization?.domain}/account`}>
+                    <Dropdown.Item
+                      as={Link}
+                      to={`/org/${stateHeader.currentOrganization?.domain}/account`}
+                    >
                       <div className="user-dropdown-item">
                         <EditMdSvg primaryColor={primaryColor} />
                         My Account
                       </div>
                     </Dropdown.Item>
 
-                    <Dropdown.Item as={Link} to={`/org/${stateHeader.currentOrganization?.domain}/change-password`}>
+                    <Dropdown.Item
+                      as={Link}
+                      to={`/org/${stateHeader.currentOrganization?.domain}/change-password`}
+                    >
                       <div className="user-dropdown-item">
                         {/* <img
                           className="img-change-password"
                           src={changePassword}
                           alt="changePassword"
                         /> */}
-                        <ChangePasswordMdSvg primaryColor={primaryColor} />
+                        <ChangePasswordMdSvg
+                          primaryColor={primaryColor}
+                        />
                         Change Password
                       </div>
                     </Dropdown.Item>
 
                     <Dropdown.Item
                       href="#"
                       onClick={() => {
-                        Event('button click', 'User press Logout button', 'Login Page');
+                        Event(
+                          "button click",
+                          "User press Logout button",
+                          "Login Page"
+                        );
                         logout();
                       }}
                     >

diff --git a/src/containers/MyActivity/AddCoursePresentation/UploadCoursePresentation/index.js b/src/containers/MyActivity/AddCoursePresentation/UploadCoursePresentation/index.js
@@ -1,27 +1,44 @@
 /* eslint-disable */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 import FileUploadDnd from "components/FileInputDnd";
-import FilePreviewAndStore from '../FilePreviewAndStore';
+import FilePreviewAndStore from "../FilePreviewAndStore";
 
-const UploadCoursePresentation = ({ setEnableDescribeBtn, setLoading }) => {
+const UploadCoursePresentation = ({
+  setEnableDescribeBtn,
+  setLoading,
+}) => {
   const [selectedFile, setSelectedFile] = useState(null);
-
+  const [fileError, setfileError] = useState("");
   const handleFileChange = (file) => {
-    setSelectedFile(file);
+    if (file?.type === "application/pdf") {
+      setSelectedFile(file);
+      setfileError("");
+    } else {
+      setfileError("File Format not Supported");
+      setSelectedFile(null);
+    }
   };
 
   return (
     <div>
-      <div className='row'>
-        <div className='col'>
-          <FileUploadDnd handleChange={handleFileChange} acceptFormats=".pdf"/>
+      <div className="row">
+        <div className="col">
+          <FileUploadDnd
+            handleChange={handleFileChange}
+            acceptFormats=".pdf"
+            fileError={fileError}
+          />
         </div>
         <div className="col">
-          <FilePreviewAndStore file={selectedFile} setEnableDescribeBtn={setEnableDescribeBtn} setLoading={setLoading}/>
+          <FilePreviewAndStore
+            file={selectedFile}
+            setEnableDescribeBtn={setEnableDescribeBtn}
+            setLoading={setLoading}
+          />
         </div>
       </div>
     </div>
   );
 };
 
-export default UploadCoursePresentation;
+export default UploadCoursePresentation;