remove warnings

src/App.css

@@ -5,6 +5,7 @@
 }
 #root {
   height: 100vh;
+  max-width: 100vw !important;
 }
 @font-face {
   font-family: numeralMedium;

src/AppRouter.js

@@ -27,7 +27,6 @@ import MyBooks from "./views/MyBooks/index";
 import AR from "./views/AR/index";
 import Download from "./views/Download/index";
 import Support from "./views/Support/index";
-import Callback from "./views/Callback/index";
 import NewProfile from "./views/NewProfile/index";
 import Blogs from "./views/Blogs/index";
 import Blog from "./views/Blog/index";
@@ -71,7 +70,7 @@ class AppRouter extends Component {
     console.log({ status, s: this.props.profile });
     let home = (
       <Route exact path={"/"}>
-        {status && status.status == 0 ? (
+        {status && status.status === 0 ? (
           <Auth page={"profile"} />
         ) : (
           <Home status={status} />

src/Redux/actions/comment.js

@@ -10,18 +10,10 @@ const comment = {
       await proxy.get("comment/info", data, { dispatch });
     },
   add:
-    (
+    (data = {}, data2) =>
-      data = {},
-      data2 = {
-        id: window.location.pathname.slice(
-          window.location.pathname.lastIndexOf("/") + 1,
-          window.location.pathname.length
-        ),
-      }
-    ) =>
     async (dispatch) => {
-      await proxy.post("comment/add", data);
+      await proxy.post("comment/add", data, { dispatch });
-      await proxy.get("book/info", data2, { dispatch });
+      if (data2) await proxy.get("book/info", data2, { dispatch });
     },
   del:
     (data = {}, data2 = {}) =>

src/Redux/proxy.js

@@ -2,7 +2,6 @@ import { ApiConfig } from "./../constants/defaultValues";
 import axios from "axios";
 
 let { baseUrl } = ApiConfig;
-let access = window.localStorage.getItem("access");
 window.baseURL = baseUrl;
 baseUrl = baseUrl + "/";
 
@@ -45,7 +44,7 @@ class Proxy {
 
   check = async (url, { dispatch }, fetch, params) => {
     dispatch = dispatch || (() => {});
-    dispatch({ type: url.split("/")[0] + "/" + "loading" });
+    dispatch({ type: `${url.split("/")[0]}/loading` });
     let response = await fetch();
     switch (response.status) {
       case 200:
@@ -60,7 +59,7 @@ class Proxy {
         break;
       default:
         dispatch({
-          type: url.split("/")[0] + "/" + "error",
+          type: `${url.split("/")[0]}/error`,
           data: response.data,
           params,
         });
@@ -106,7 +105,7 @@ class Proxy {
     let refresh = localStorage.getItem("refresh");
     let userData = localStorage.getItem("userData");
     if (!refresh) return false;
-    if (refresh == "undefined") {
+    if (refresh === "undefined") {
       localStorage.removeItem("refresh");
       localStorage.removeItem("access");
       localStorage.removeItem("userData");

src/Redux/reducers/book.js

@@ -75,7 +75,7 @@ export default function book(state = initialState, action) {
       let finalSort;
       let byLevelFilter = [];
       if (level.length > 0) {
-        level.map((item1) => {
+        level.forEach((item1) => {
           for (let i = 0; i < realList.length; i++) {
             if (grades[realList[i].gradeId] === item1) {
               byLevelFilter.push(realList[i]);
@@ -88,7 +88,7 @@ export default function book(state = initialState, action) {
 
       let bySubjectFilter = [];
       if (subject.length > 0) {
-        subject.map((item1) => {
+        subject.forEach((item1) => {
           for (let i = 0; i < byLevelFilter.length; i++) {
             if (byLevelFilter[i].name === item1) {
               bySubjectFilter.push(byLevelFilter[i]);

src/Redux/reducers/comment.js

@@ -14,6 +14,7 @@ export default function comment(state = initialState, action) {
     case "comment/update":
       return { ...state, loading: false, error: null };
     case "comment/add":
+      toast.success("ثبت درخواست با موفقیت انجام شد");
       return { ...state, loading: false, error: null };
     case "comment/delete":
       return { ...state, loading: false, error: null };

src/Redux/reducers/public.js

@@ -92,7 +92,7 @@ export default function publicApi(state = initialState, action) {
       }
       let byLevelFilter = [];
       if (level.length > 0) {
-        level.map((item1) => {
+        level.forEach((item1) => {
           for (let i = 0; i < realList.length; i++) {
             if (grades[realList[i].book.gradeId] === item1) {
               byLevelFilter.push(realList[i]);

src/Redux/reducers/userFactor.js

@@ -10,7 +10,7 @@ const initialState = {
   isVerified: null,
 };
 export default function userFactor(state = initialState, action) {
-  let { type, data, message } = action;
+  let { type, data } = action;
   switch (type) {
     case "userFactor/list":
       const checkEmpty = data.filter(

src/Redux/reducers/userProduct.js

@@ -11,7 +11,7 @@ const initialState = {
   myList: [],
 };
 export default function userProduct(state = initialState, action) {
-  let { type, data, message } = action;
+  let { type, data } = action;
   switch (type) {
     case "userProduct/list":
       const checkEmpty = data.filter(

src/util/onInput.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-useless-escape */
 import { toast } from "react-toastify";
 
 class onInput {

src/views/AR/BreadCrumb/index.js

@@ -4,13 +4,7 @@ import { Link } from "react-router-dom";
 
 import "./index.scss";
 
-function handleClick(event) {
-  event.preventDefault();
-  console.info("You clicked a breadcrumb.");
-}
-
 const maxDesktopSize = 1250;
-const maxMobileSize = 650;
 
 const fontSize = {
   desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
@@ -18,7 +12,6 @@ const fontSize = {
 };
 
 export default function ActiveLastBreadcrumb(props) {
-  const { name } = props;
   return (
     <Breadcrumbs aria-label="breadcrumb">
       <Link

src/views/AR/index.js

@@ -96,7 +96,7 @@ class AR extends Component {
 export default connect(
   (state) => ({
     arList: (state.userProduct.myList || []).filter(
-      (product) => product.productType == 3
+      (product) => product.productType === 3
     ),
     loading: state.loading,
   }),

src/views/Activation/index.js

@@ -6,8 +6,7 @@ import Footer from "../Home/Footer/index";
 import { Link } from "react-router-dom";
 
 import analytics from "../../assets/icons/analytics.svg";
-import ReplayIcon from "@material-ui/icons/Replay";
+
-import Scanner from "../QRScan/Scanner/index";
 import qrcode from "~/assets/icons/drawer-qr.png";
 import "./index.scss";
 
@@ -38,7 +37,6 @@ class Activation extends Component {
   submitAdd() {}
 
   render() {
-    const { data } = this.props;
     return (
       <>
         {window.innerWidth > 1000 ? (

src/views/Auth/Login/Code/index.js

@@ -1,9 +1,7 @@
 import React, { Component } from "react";
-import { Link } from "react-router-dom";
 import Timer from "../Timer/index";
 
 import logo from "../../../../assets/icons/logo.png";
-import pic from "../../../../assets/images/pic.png";
 
 import "./index.scss";
 

src/views/Auth/Profile/Document/index.js

@@ -1,6 +1,4 @@
 import React from "react";
-import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
-
 import "./index.scss";
 
 const maxDesktopSize = 1250;

src/views/Auth/Profile/Input/index.js

@@ -19,8 +19,7 @@ export default function FormPropsTextFields(props) {
   }));
 
   const classes = useStyles();
-  const { parent, defaultValue, maxLength, inputMode, onInput, variant } =
+  const { parent, defaultValue, maxLength, onInput, variant } = props;
-    props;
   return (
     <form className={classes.root} noValidate autoComplete="off">
       <div>

src/views/Auth/Profile/MultipleSelector/index.js

@@ -24,7 +24,7 @@ export default function MultipleSelector(props) {
   }));
 
   const classes = useStyles();
-  const { parent, defaultValue, name, label, options, selectedOptions } = props;
+  const { parent, name, label, options, selectedOptions } = props;
   return (
     <>
       {window.innerWidth < 1000 ? (

src/views/Auth/Profile/Select/index.js

@@ -1,13 +1,10 @@
 import React from "react";
-import { makeStyles, withStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import FormControl from "@material-ui/core/FormControl";
 import Select from "@material-ui/core/Select";
-import InputBase from "@material-ui/core/InputBase";
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import InputLabel from "@material-ui/core/InputLabel";
 
-const BootstrapInput = withStyles((theme) => ({}))(InputBase);
-
 const useStyles = makeStyles((theme) => ({
   marginLeft: {
     // margin: theme.spacing(1),

src/views/Auth/Profile/TextArea/index.js

@@ -13,7 +13,6 @@ const useStyles = makeStyles((theme) => ({
 
 export default function MultilineTextFields(props) {
   const classes = useStyles();
-  const [value, setValue] = React.useState("Controlled");
   const { parent, defaultValue } = props;
   return (
     <form className={classes.root} noValidate autoComplete="off">

src/views/Auth/Profile/Upload/index.js

@@ -1,17 +1,8 @@
 import React from "react";
 import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
 
-const maxDesktopSize = 1250;
-const maxMobileSize = 550;
-
-const fontSize = {
-  desktop: {
-    span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
-  },
-};
-
 export default function Upload(props) {
-  let { parent, name } = props;
+  let { parent } = props;
   return (
     <>
       {window.innerWidth < 1000 ? (

src/views/Auth/Profile/index.js

@@ -12,7 +12,6 @@ import Birthdate from "./Birthdate/index";
 import MultipleSelector from "./MultipleSelector/index";
 import Loader from "~/components/Loader/index";
 import Document from "./Document/index";
-import logo from "../../../assets/icons/logo.png";
 import pic from "../../../assets/images/pic.png";
 import "./index.scss";
 import { useHistory } from "react-router-dom";
@@ -36,12 +35,6 @@ const fontSize = {
   },
 };
 
-const toastMessages = {
-  firstName: "نام وارد شده صحیح نیست!",
-  lastName: "نام خانوادگی وارد شده صحیح نیست!",
-  username: "نام کاربری صحیح نیست.",
-};
-
 class Profile extends Component {
   state = {
     render: false,
@@ -341,7 +334,7 @@ class Profile extends Component {
                         label={"شهر/روستا"}
                       />
                     </div> */}
-                    {this.state.status == 1 ? (
+                    {this.state.status === 1 ? (
                       <div className="mb-2">
                         <Input
                           parent={this}
@@ -352,7 +345,7 @@ class Profile extends Component {
                         />
                       </div>
                     ) : null}
-                    {this.state.status == 2 ? (
+                    {this.state.status === 2 ? (
                       <div className="mb-2">
                         <Input
                           parent={this}
@@ -363,7 +356,7 @@ class Profile extends Component {
                         />
                       </div>
                     ) : null}
-                    {this.state.status == 2 ? (
+                    {this.state.status === 2 ? (
                       <Document parent={this} name="docFileIds" />
                     ) : null}
                     <div className="mb-2">
@@ -489,7 +482,7 @@ class Profile extends Component {
                     selectedOptions={this.state.gradeIds}
                   />
                 ) : null}
-                {this.state.status == 1 && Number(this.state.gradeIds) > 9 ? (
+                {this.state.status === 1 && Number(this.state.gradeIds) > 9 ? (
                   <Select
                     parent={this}
                     options={[
@@ -526,7 +519,7 @@ class Profile extends Component {
                 name="zoneId"
                 label={"شهر/روستا"}
               /> */}
-                {this.state.status == 1 ? (
+                {this.state.status === 1 ? (
                   <Input
                     parent={this}
                     name="schools"
@@ -535,7 +528,7 @@ class Profile extends Component {
                     onInput={onInput.persianOnly}
                   />
                 ) : null}
-                {this.state.status == 2 ? (
+                {this.state.status === 2 ? (
                   <Input
                     parent={this}
                     name="schools"
@@ -544,7 +537,7 @@ class Profile extends Component {
                     onInput={onInput.persianOnly}
                   />
                 ) : null}
-                {this.state.status == 2 ? (
+                {this.state.status === 2 ? (
                   <Document parent={this} name="docFileIds" />
                 ) : null}
                 <Input

src/views/Auth/Splash/ProgressBar/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 
 import "./index.scss";
 export default class ProgressBar extends React.Component {
@@ -26,20 +26,22 @@ export default class ProgressBar extends React.Component {
         {window.innerWidth > 1000 ? (
           <div className="progresss d-flex">
             <div style={{ width: this.state.percent + "%" }}>
-              {
+              {this.state.percent ? (
-                this.state.percent ?
+                <span className="d-flex align-items-center justify-content-center">
-                <span className="d-flex align-items-center justify-content-center">{this.state.percent}%</span> : null
+                  {this.state.percent}%
-              }
+                </span>
+              ) : null}
             </div>
           </div>
         ) : null}
         {window.innerWidth < 1000 ? (
           <div className="mobile-progress d-flex">
             <div style={{ width: this.state.percent + "%" }}>
-              {
+              {this.state.percent ? (
-                this.state.percent ?
+                <span className="d-flex align-items-center justify-content-center">
-                <span className="d-flex align-items-center justify-content-center">{this.state.percent}%</span> : null
+                  {this.state.percent}%
-              }
+                </span>
+              ) : null}
             </div>
           </div>
         ) : null}

src/views/Blog/BreadCrumb/index.js

@@ -4,13 +4,7 @@ import { Link } from "react-router-dom";
 
 import "./index.scss";
 
-function handleClick(event) {
-  event.preventDefault();
-  console.info("You clicked a breadcrumb.");
-}
-
 const maxDesktopSize = 1250;
-const maxMobileSize = 650;
 
 const fontSize = {
   desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,

src/views/Blog/index.js

@@ -3,7 +3,6 @@ import Loader from "~/components/Loader/index";
 import Footer from "../Home/Footer/index";
 import Navbar from "../Home/Navbar/index";
 import BreadCrumb from "./BreadCrumb/index";
-import Image from "../QR/Image/index";
 import VideoBox from "../QR/VideoBox/index";
 import VoiceBox from "../QR/VoiceBox/index";
 
@@ -55,7 +54,6 @@ class Blog extends Component {
                     <h1>{blog.title}</h1>
                   </div>
                   <div className="landscape-blog__header--bottom d-flex">
-                    <h2></h2>
                     <div>{blog.date}</div>
                   </div>
                 </div>
@@ -64,7 +62,7 @@ class Blog extends Component {
                     <Identifier data={blog} fontSize={fontSize} />
                   </div>
                   <p className="landscape-blog__body--text d-flex">
-                    {blog.text}
+                    <div dangerouslySetInnerHTML={{ __html: blog.text }}></div>
                   </p>
                 </div>
               </div>
@@ -98,7 +96,12 @@ class Blog extends Component {
                 <div className="portrait-blog__body--image d-flex">
                   <Identifier data={blog} />
                 </div>
-                <p className="portrait-blog__body--text d-flex">{blog.text}</p>
+                <p
+                  className="portrait-blog__body--text "
+                  style={{ padding: 10, maxWidth: "95% !important" }}
+                >
+                  <div dangerouslySetInnerHTML={{ __html: blog.text }}></div>
+                </p>
               </div>
             </div>
           ) : (
@@ -134,6 +137,7 @@ const Identifier = (props) => {
       ) : null}
       {data.type === "image" ? (
         <img
+          style={{ margin: "auto" }}
           src={"https://dnvn.ir/api/v1/file/" + data.fileIds}
           alt={data.fileIds}
         />

src/views/Blog/index.scss

@@ -1,5 +1,6 @@
 .portrait-blog {
-  width: 100vw;
+  max-width: 95vw !important;
+
   // height: 100vh;
   padding: 0px 10px;
   position: relative;
@@ -45,6 +46,7 @@
     &--image {
       width: 100%;
       & img {
+        max-width: 80vw !important;
         width: 100%;
         height: 100%;
         border-radius: 10px;
@@ -60,6 +62,12 @@
       font-size: 14px;
       letter-spacing: -1px;
       font-family: numeralLight;
+      & img {
+        max-width: 80vw !important;
+        height: 100%;
+        border-radius: 10px;
+        margin: 0 auto;
+      }
     }
   }
 }
@@ -113,8 +121,9 @@
   &__body {
     width: 100%;
     &--image {
+      margin: auto;
       width: 100%;
-      max-height: 300px;
+      //  max-height: 300px;
     }
     &--text {
       margin-top: 40px;

src/views/Blogs/BreadCrumb/index.js

@@ -4,13 +4,7 @@ import { Link } from "react-router-dom";
 
 import "./index.scss";
 
-function handleClick(event) {
-  event.preventDefault();
-  console.info("You clicked a breadcrumb.");
-}
-
 const maxDesktopSize = 1250;
-const maxMobileSize = 650;
 
 const fontSize = {
   desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,

src/views/Cart/DeliveryMethod/index.js

@@ -27,8 +27,7 @@ const fontSize = {
 };
 class DeliveryMethod extends Component {
   render() {
-    const { data, setTransport, factorInfo, parent, transportId, list } =
+    const { data, setTransport, factorInfo, transportId } = this.props;
-      this.props;
     return (
       <>
         {window.innerWidth > 1000 ? (

src/views/Cart/Factor/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 import { connect } from "react-redux";
 import "./index.scss";
 
@@ -26,14 +26,6 @@ const fontSize = {
 };
 
 const Factor = (props) => {
-  const { list, parent } = props;
-  const totalPrice = () => {
-    let total = 0;
-    for (let i = 0; i < list.length; i++) {
-      total += list[i].product.price * list[i].count;
-    }
-    return total;
-  };
   const { factorInfo } = props;
   return (
     <>

src/views/Cart/Table/index.js

@@ -75,7 +75,7 @@ const fontSize = {
 
 function BasicTable(props) {
   const classes = useStyles();
-  const { list, handleCounter, handleDelete, route, factorInfo } = props;
+  const { list, handleDelete, route, factorInfo } = props;
   const sum = () => {
     let total = 0;
     for (let i = 0; i < list.length; i++) {
@@ -181,7 +181,7 @@ function BasicTable(props) {
 }
 
 const Item = (props) => {
-  const { data, pushToCart, id, route, factorInfo } = props;
+  const { data, pushToCart, id, route } = props;
   return (
     <>
       {window.innerWidth < 1000 ? (

src/views/Cart/index.js

@@ -11,8 +11,6 @@ import Factor from "./Factor/index";
 import Loader from "~/components/Loader/index";
 import { Link } from "react-router-dom";
 
-import sciense_6 from "../../assets/images/sciense-6.png";
-
 import "./index.scss";
 
 const maxDesktopSize = 1250;
@@ -65,7 +63,7 @@ class Cart extends Component {
     // if (this.props.list.length > 0) {
     //   let wantedId; //should be zero
     //   for (let item of this.props.list) {
-    //     if (item.condition == 2) {
+    //     if (item.condition === 2) {
     //       wantedId = item.id;
     //       break;
     //     }
@@ -116,9 +114,8 @@ class Cart extends Component {
   };
 
   render() {
-    const { list, payPrice, payMethods, factorInfo, userId, hasPhysical } =
+    const { list, payPrice, payMethods, factorInfo, userId } = this.props;
-      this.props;
+    if (!factorInfo || list.length === 0)
-    if (!factorInfo || list.length == 0)
       return (
         <div
           align="center"
@@ -154,7 +151,7 @@ class Cart extends Component {
               <div className="cart d-flex flex-column">
                 <Navbar />
                 {window.location.search.includes("NOK") ||
-                this.props.isVerified == false ? (
+                this.props.isVerified === false ? (
                   <div>پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید</div>
                 ) : null}
                 <div

src/views/ChatList/Search/index.js

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
+import React from "react";
 import navbarSearch from "../../../assets/icons/navbarSearch.png";
 
-import './index.scss';
+import "./index.scss";
 
 const maxDesktopSize = 1250;
 
@@ -11,10 +11,14 @@ const fontSize = {
   },
 };
 
-export default function Search(props){
+export default function Search(props) {
-  return(
+  return (
     <div className="desktop-chat-search d-flex">
-      <input type="search" style={{ fontSize: fontSize.desktop.input }} placeholder="جستجو" />
+      <input
+        type="search"
+        style={{ fontSize: fontSize.desktop.input }}
+        placeholder="جستجو"
+      />
       <img src={navbarSearch} alt="جستجو" />
     </div>
   );

src/views/ChatList/index.js

@@ -1,21 +1,19 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import {Link} from 'react-router-dom';
+import { Link } from "react-router-dom";
-import { chat } from '../../Redux/actions';
+import { chat } from "../../Redux/actions";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import ChatIcon from '@material-ui/icons/Chat';
+import ChatIcon from "@material-ui/icons/Chat";
-import Chat from './Chat/index';
+import Chat from "./Chat/index";
-import Navbar from '../Home/Navbar/index';
+import Navbar from "../Home/Navbar/index";
-import Search from './Search/index';
+import Search from "./Search/index";
-import Chatroom from '../ChatRoom/index';
+import Chatroom from "../ChatRoom/index";
 
-import './index.scss';
+import "./index.scss";
-import { DesktopWindowsRounded } from '@material-ui/icons';
 
 class ChatList extends Component {
   state = {
     selectedUser: null,
-  }
+  };
-
 
   componentDidMount() {
     this.props.list();
@@ -23,8 +21,7 @@ class ChatList extends Component {
   render() {
     return (
       <>
-       {
+        {window.innerWidth < 1000 ? (
-          window.innerWidth < 1000 ? 
           <div className="chat-list d-flex flex-column">
             <Navbar />
             {this.props.chat_list.map((item, i) => (
@@ -33,35 +30,38 @@ class ChatList extends Component {
             <Link to="/characters" className="chat-list__float d-flex">
               <ChatIcon fontSize="small" />
             </Link>
-          </div> : null
-        }
-        {
-          window.innerWidth > 1000 ?
-          <div className="desktop-chat d-flex">
-            <div className="desktop-chat__banner">
-
           </div>
+        ) : null}
+        {window.innerWidth > 1000 ? (
+          <div className="desktop-chat d-flex">
+            <div className="desktop-chat__banner"></div>
             <div className="desktop-chat__list d-flex flex-column">
               <Search />
               {this.props.chat_list.map((item, i) => (
-                <Chat selectedUser={this.state.selectedUser} key={i} data={item} parent={this} />
+                <Chat
+                  selectedUser={this.state.selectedUser}
+                  key={i}
+                  data={item}
+                  parent={this}
+                />
               ))}
-              <Link to="/characters" className="desktop-chat__list--float d-flex">
+              <Link
+                to="/characters"
+                className="desktop-chat__list--float d-flex"
+              >
                 <ChatIcon fontSize="small" />
               </Link>
             </div>
-            {
+            {this.state.selectedUser ? (
-              this.state.selectedUser ? 
+              <Chatroom id={this.state.selectedUser} />
-              <Chatroom id={this.state.selectedUser} /> : 
+            ) : (
               <div className="desktop-chat__before d-flex">
                 <h1>برای شروع روی یک چت کلیک کن</h1>
               </div>
-            }
+            )}
-            
+          </div>
-          </div> : null
+        ) : null}
-        }
       </>
-      
     );
   }
 }
@@ -70,6 +70,5 @@ export default connect(
   (state) => ({
     chat_list: state.chat.list || [],
   }),
-  { list : chat.list }
+  { list: chat.list }
 )(ChatList);
-

src/views/ChatRoom/Body/Input/index.js

@@ -1,16 +1,16 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import AudioReactRecorder from 'audio-react-recorder';
+import AudioReactRecorder from "audio-react-recorder";
-import MicIcon from '@material-ui/icons/Mic';
+import MicIcon from "@material-ui/icons/Mic";
-import CheckIcon from '@material-ui/icons/Check';
+import CheckIcon from "@material-ui/icons/Check";
-import CloseIcon from '@material-ui/icons/Close';
+import CloseIcon from "@material-ui/icons/Close";
-import AttachmentIcon from '@material-ui/icons/Attachment';
+import AttachmentIcon from "@material-ui/icons/Attachment";
-import TextField from '@material-ui/core/TextField';
+import TextField from "@material-ui/core/TextField";
-import SendIcon from '@material-ui/icons/Send';
+import SendIcon from "@material-ui/icons/Send";
-import EmojiEmotions from '@material-ui/icons/EmojiEmotions';
+import EmojiEmotions from "@material-ui/icons/EmojiEmotions";
-import KeyboardIcon from '@material-ui/icons/Keyboard';
+import KeyboardIcon from "@material-ui/icons/Keyboard";
-import PhotoCamera from '@material-ui/icons/PhotoCamera';
+import PhotoCamera from "@material-ui/icons/PhotoCamera";
 
-import './index.scss';
+import "./index.scss";
 export default class ChatInputs extends Component {
   state = {
     emoji: false,
@@ -24,7 +24,7 @@ export default class ChatInputs extends Component {
       cancel,
       typeText,
       message,
-      sendMessage,
+
       addFile,
       file,
       addcounter,
@@ -45,13 +45,16 @@ export default class ChatInputs extends Component {
 
         <div className="chat-inputs__voice d-flex flex-row-reverse">
           <div className="chat-inputs__voice d-flex">
-            {(recordState === null && message === '' && file === null) ||
+            {(recordState === null && message === "" && file === null) ||
-            (recordState && recordState.url && message === '' && file === null) ? (
+            (recordState &&
+              recordState.url &&
+              message === "" &&
+              file === null) ? (
               <div className="chat-inputs__voice--icon d-flex" onClick={start}>
                 <MicIcon
                   style={{
-                    color: 'white',
+                    color: "white",
-                    backgroundColor: '#128c7e',
+                    backgroundColor: "#128c7e",
                     width: 50,
                     height: 50,
                     borderRadius: 30,
@@ -60,47 +63,63 @@ export default class ChatInputs extends Component {
                 />
               </div>
             ) : null}
-            {message !== '' || file !== null ? (
+            {message !== "" || file !== null ? (
-              <div className="chat-inputs__voice--icon d-flex" onClick={() => addcounter()}>
+              <div
+                className="chat-inputs__voice--icon d-flex"
+                onClick={() => addcounter()}
+              >
                 <SendIcon
                   style={{
-                    padding: '12px 10px 12px 13px',
+                    padding: "12px 10px 12px 13px",
-                    color: 'white',
+                    color: "white",
-                    backgroundColor: '#128c7e',
+                    backgroundColor: "#128c7e",
                     width: 50,
                     height: 50,
                     borderRadius: 30,
-                    transform: 'rotate(180deg)',
+                    transform: "rotate(180deg)",
                   }}
                 />
               </div>
             ) : null}
-            {recordState === 'start' ? (
+            {recordState === "start" ? (
               <>
-                <div className="chat-inputs__voice--icon d-flex mr-2" onClick={cancel}>
+                <div
+                  className="chat-inputs__voice--icon d-flex mr-2"
+                  onClick={cancel}
+                >
                   <CloseIcon
-                    style={{ color: 'red', backgroundColor: 'white', width: 30, height: 30 }}
+                    style={{
+                      color: "red",
+                      backgroundColor: "white",
+                      width: 30,
+                      height: 30,
+                    }}
                   />
                 </div>
                 <div className="chat-inputs__voice--icon d-flex" onClick={stop}>
                   <CheckIcon
-                    style={{ color: 'green', backgroundColor: 'white', width: 30, height: 30 }}
+                    style={{
+                      color: "green",
+                      backgroundColor: "white",
+                      width: 30,
+                      height: 30,
+                    }}
                   />
                 </div>
               </>
             ) : null}
           </div>
         </div>
-        {recordState !== 'start' ? (
+        {recordState !== "start" ? (
           <div className="chat-inputs__box d-flex flex-row-reverse">
-            {message === '' ? (
+            {message === "" ? (
               <PhotoCamera
                 style={{
-                  color: '#aaa',
+                  color: "#aaa",
                   marginRight: 0,
                   width: 25,
                   height: 25,
-                  margin: '0 3px',
+                  margin: "0 3px",
                 }}
               />
             ) : null}
@@ -109,15 +128,15 @@ export default class ChatInputs extends Component {
 
               <AttachmentIcon
                 style={{
-                  color: '#aaa',
+                  color: "#aaa",
                   marginRight: 10,
                   width: 25,
                   height: 25,
                   zIndex: 10,
-                  position: 'absolute',
+                  position: "absolute",
                   top: 0,
                   left: 0,
-                  transform: 'rotate(45deg)',
+                  transform: "rotate(45deg)",
                 }}
               />
             </div>
@@ -128,7 +147,7 @@ export default class ChatInputs extends Component {
               value={message}
               placeholder="یک پیام بنویسید..."
               rowsMax={4}
-              onChange={(e) => typeText('text',e.target.value)}
+              onChange={(e) => typeText("text", e.target.value)}
               multiline
               style={{
                 marginRight: 5,
@@ -137,28 +156,28 @@ export default class ChatInputs extends Component {
             {this.props.parent.state.emoji ? (
               <KeyboardIcon
                 style={{
-                  color: '#aaa',
+                  color: "#aaa",
                   marginRight: -5,
                   width: 25,
                   height: 25,
                   zIndex: 10,
-                  position: 'relative',
+                  position: "relative",
                   bottom: 5,
-                  alignSelf: 'flex-end',
+                  alignSelf: "flex-end",
                 }}
                 onClick={() => this.props.parent.setState({ emoji: false })}
               />
             ) : (
               <EmojiEmotions
                 style={{
-                  color: '#aaa',
+                  color: "#aaa",
                   marginRight: -5,
                   width: 25,
                   height: 25,
                   zIndex: 10,
-                  position: 'relative',
+                  position: "relative",
                   bottom: 5,
-                  alignSelf: 'flex-end',
+                  alignSelf: "flex-end",
                 }}
                 onClick={() => this.props.parent.setState({ emoji: true })}
               />

src/views/ChatRoom/Body/Keyboard/index.js

@@ -1,10 +1,15 @@
-import React, { Component } from 'react';
+import React from "react";
-import Carousel from 'react-elastic-carousel';
+import Carousel from "react-elastic-carousel";
-import './index.scss';
+import "./index.scss";
 export default function Keyboard({ options, action }) {
   return (
     <div className="chat-suggest portrait-slider d-flex flex-column">
-      <Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}>
+      <Carousel
+        itemsToShow={1}
+        isRTL={true}
+        enableTilt={true}
+        showArrows={false}
+      >
         {options.map((row, i) => (
           <Row row={row} key={i} action={action} />
         ))}
@@ -25,7 +30,10 @@ const Row = ({ row, action }) => {
 
 const KeyboardItem = ({ item, action }) => {
   return (
-    <div className="chat-suggest__row--item d-flex" onclick={() => action(item)}>
+    <div
+      className="chat-suggest__row--item d-flex"
+      onclick={() => action(item)}
+    >
       {item.text}
     </div>
   );

src/views/ChatRoom/Body/Message/Inline/index.js

@@ -1,36 +1,36 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import Avatar from '@material-ui/core/Avatar';
 
-import './index.scss';
+import "./index.scss";
-import { toast } from 'react-toastify';
+import { toast } from "react-toastify";
 
 export default class Message2D extends Component {
   state = { value: this.props.message.value };
   click(id) {
     if (this.props.isActive) {
       this.setState({ value: id });
-      toast.success('ثبت شد');
+      toast.success("ثبت شد");
       this.props.action();
     }
   }
   render() {
-    const { message, user, isSelf, isActive, action } = this.props;
+    const { message } = this.props;
     return (
       <div className="message-2d d-flex flex-column d-flex">
         <div className="message-2d__options d-flex flex-column">
           {message.options.map((option, i) => (
             <div
-              key={message.id + '_' + option.id + '_' + i}
+              key={message.id + "_" + option.id + "_" + i}
               className="message-2d__options--row d-flex"
             >
               {option.map((item, i) => (
                 <div
-                  key={message.id + '_' + item.id + '_' + i}
+                  key={message.id + "_" + item.id + "_" + i}
                   className="d-flex"
                   style={{
                     width: `calc(100% / ${option.length} )`,
 
-                    backgroundColor: item.id == this.state.value ? '#64cd82' : '',
+                    backgroundColor:
+                      item.id === this.state.value ? "#64cd82" : "",
                   }}
                   onClick={() => this.click(item.id)}
                 >

src/views/ChatRoom/Body/Message/MultiSelect/index.js

@@ -1,7 +1,6 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
+import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt";
-import Avatar from '@material-ui/core/Avatar';
+import { toast } from "react-toastify";
-import { toast } from 'react-toastify';
 
 export default class RadioMessage extends Component {
   constructor(props) {
@@ -19,18 +18,27 @@ export default class RadioMessage extends Component {
   };
 
   render() {
-    const { message, user, isSelf, isActive } = this.props;
+    const { message, isActive } = this.props;
     return (
       <div className="message-2d d-flex flex-column d-flex">
         <div className="message-2d__options d-flex flex-wrap justify-content-center">
           {message.options.map((row) => (
-            <Row list={row} handleRadioChange={this.handleRadioChange} value={this.state.value} />
+            <Row
+              list={row}
+              handleRadioChange={this.handleRadioChange}
+              value={this.state.value}
+            />
           ))}
         </div>
         {isActive && (
-          <button className="message-2d__submit" onClick={() => toast.success('ثبت شد')}>
+          <button
+            className="message-2d__submit"
+            onClick={() => toast.success("ثبت شد")}
+          >
             ثبت
-            <ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
+            <ArrowRightAltIcon
+              style={{ color: "white", width: 32, height: 32, marginLeft: 10 }}
+            />
           </button>
         )}
       </div>
@@ -53,8 +61,11 @@ const Item = (props) => {
     <div
       onClick={() => props.handleRadioChange(props.item.name)}
       style={{
-        backgroundColor: props.item.name === props.value ? '#6f42c1' : 'rgb(181 224 252 / 47%)',
+        backgroundColor:
-        color: props.item.name === props.value ? 'white' : 'black',
+          props.item.name === props.value
+            ? "#6f42c1"
+            : "rgb(181 224 252 / 47%)",
+        color: props.item.name === props.value ? "white" : "black",
       }}
     >
       {props.item.name}

src/views/ChatRoom/Body/Message/Normal/index.js

@@ -52,7 +52,7 @@ export default class NormalMessage extends Component {
       addcounter,
     } = this.props;
     const { messageMenu } = this.state;
-    const hasavatar = prevUserId != message.userId;
+    const hasavatar = prevUserId !== message.userId;
 
     return (
       <div
@@ -88,7 +88,7 @@ export default class NormalMessage extends Component {
         >
           <div
             className={
-              message.type == "text"
+              message.type === "text"
                 ? `normal-message__box `
                 : `normal-message__box  normal-message__box--file`
             }
@@ -142,15 +142,15 @@ export default class NormalMessage extends Component {
               )}
             </div>
 
-            {message.type == "text" ? (
+            {message.type === "text" ? (
               <p style={{ color: isSelf ? "black" : "black" }}>
                 {message.text}
               </p>
             ) : null}
-            {message.type == "voice" ? (
+            {message.type === "voice" ? (
               <ReactAudioPlayer src={file(message.fileId)} controls />
             ) : null}
-            {message.type == "image" ? (
+            {message.type === "image" ? (
               <div className="normal-message__box--caption">
                 <a href={file(message.fileId)} download>
                   <img src={file(message.fileId)} download alt="" />
@@ -160,7 +160,7 @@ export default class NormalMessage extends Component {
                 </p>
               </div>
             ) : null}
-            {message.type == "video" ? (
+            {message.type === "video" ? (
               <div className="normal-message__box--caption">
                 <a href={file(message.fileId)} download>
                   <ReactPlayer
@@ -175,7 +175,7 @@ export default class NormalMessage extends Component {
                 </p>
               </div>
             ) : null}
-            {message.type == "audio" ? (
+            {message.type === "audio" ? (
               <div className="normal-message__box--caption">
                 <ReactAudioPlayer src={file(message.fileId)} controls />
                 <p style={{ color: isSelf ? "black" : "black" }}>
@@ -183,7 +183,7 @@ export default class NormalMessage extends Component {
                 </p>
               </div>
             ) : null}
-            {message.type == "document" ? (
+            {message.type === "document" ? (
               <a
                 href={file(message.fileId)}
                 download
@@ -211,7 +211,7 @@ export default class NormalMessage extends Component {
               }
             >
               <span style={{ color: isSelf ? "#aaa" : "gray" }}>
-                {message.updatedAt != message.createdAt ? (
+                {message.updatedAt !== message.createdAt ? (
                   <>
                     <span> ویرایش در</span>
 
@@ -227,11 +227,13 @@ export default class NormalMessage extends Component {
                   padding: "0 2px",
                 }}
               >
-                {isSelf && message.status == 0 && (
+                {isSelf && message.status === 0 && (
                   <ScheduleIcon fontSize="small" />
                 )}
-                {isSelf && message.status == 2 && <DoneIcon fontSize="small" />}
+                {isSelf && message.status === 2 && (
-                {isSelf && message.status == 1 && (
+                  <DoneIcon fontSize="small" />
+                )}
+                {isSelf && message.status === 1 && (
                   <DoneAllIcon
                     fontSize="small"
                     style={{ color: "#00afea", fontSize: "17px" }}

src/views/ChatRoom/Body/Message/Select/index.js

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
+import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt";
 
 export default class RadioMessage extends Component {
   state = {
@@ -10,17 +10,24 @@ export default class RadioMessage extends Component {
   };
 
   render() {
-    const { message, user, isSelf, isActive, action } = this.props;
+    const { message, isActive, action } = this.props;
     const { value } = this.state;
     return (
       <div className="message-2d d-flex flex-column d-flex">
         <div className="message-2d__options d-flex flex-wrap justify-content-center">
           {message.options.map((row) => (
-            <Row list={row} handleRadioChange={this.handleRadioChange} value={value} />
+            <Row
+              list={row}
+              handleRadioChange={this.handleRadioChange}
+              value={value}
+            />
           ))}
         </div>
         {isActive && (
-          <button className="message-2d__submit" onClick={() => action({ value })}>
+          <button
+            className="message-2d__submit"
+            onClick={() => action({ value })}
+          >
             ثبت
             <ArrowRightAltIcon />
           </button>
@@ -46,8 +53,10 @@ const Item = (props) => {
       onClick={() => props.handleRadioChange(props.item.name)}
       style={{
         backgroundColor:
-          props.item.name === props.value ? 'rgb(100, 205, 130)' : 'rgba(255, 255, 255, 0.4)',
+          props.item.name === props.value
-        color: props.item.name === props.value ? 'white' : 'black',
+            ? "rgb(100, 205, 130)"
+            : "rgba(255, 255, 255, 0.4)",
+        color: props.item.name === props.value ? "white" : "black",
       }}
     >
       {props.item.name}

src/views/ChatRoom/Body/Message/Slider/index.js

@@ -1,17 +1,16 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import Grid from '@material-ui/core/Grid';
+import Grid from "@material-ui/core/Grid";
-import Slider from '@material-ui/core/Slider';
+import Slider from "@material-ui/core/Slider";
-import Input from '@material-ui/core/Input';
+import Input from "@material-ui/core/Input";
-import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
+import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt";
-import Avatar from '@material-ui/core/Avatar';
+
-import { toast } from 'react-toastify';
 export default class SliderMessage extends Component {
   state = {
     value: this.props.message.value || 0,
   };
   onChange = (value) => {
     if (!this.props.isActive || !value) return;
-    const [min, max, step] = this.props.message.options[0] || [0, 100, 1];
+    const [min, max] = this.props.message.options[0] || [0, 100, 1];
     this.setState({ value: Math.min(max, Math.max(min, parseFloat(value))) });
   };
 
@@ -44,8 +43,8 @@ export default class SliderMessage extends Component {
                 step: step,
                 min: min,
                 max: max,
-                type: 'number',
+                type: "number",
-                'aria-labelledby': 'input-slider',
+                "aria-labelledby": "input-slider",
               }}
             />
           </Grid>

src/views/ChatRoom/Body/Message/Sort/index.js

@@ -1,9 +1,7 @@
-import React, { Component, useEffect } from 'react';
+import React, { Component } from "react";
-import { SortableContainer, SortableElement } from 'react-sortable-hoc';
+import { SortableContainer, SortableElement } from "react-sortable-hoc";
-import arrayMove from 'array-move';
+import arrayMove from "array-move";
-import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
+import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt";
-import Avatar from '@material-ui/core/Avatar';
-import { toast } from 'react-toastify';
 
 export default class DraggableMessage extends Component {
   constructor(props) {
@@ -18,11 +16,15 @@ export default class DraggableMessage extends Component {
   };
 
   render() {
-    const { message, user, isSelf, isActive, action } = this.props;
+    const { isActive, action } = this.props;
 
     return (
       <div className="message-2d d-flex flex-column d-flex">
-        <SortableList items={this.state.options} onSortEnd={this.onSortEnd} disabled={!isActive} />
+        <SortableList
+          items={this.state.options}
+          onSortEnd={this.onSortEnd}
+          disabled={!isActive}
+        />
         {isActive && (
           <button className="message-2d__submit" onClick={() => action()}>
             ثبت
@@ -38,7 +40,12 @@ const SortableList = SortableContainer(({ items, disabled }) => {
   return (
     <div className="message-2d__options d-flex flex-column">
       {items.map((row, index) => (
-        <SortableItem key={`item-${index}`} index={index} value={row} disabled={disabled} />
+        <SortableItem
+          key={`item-${index}`}
+          index={index}
+          value={row}
+          disabled={disabled}
+        />
       ))}
     </div>
   );

src/views/ChatRoom/Body/Message/Tap/index.js

@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import arrayMove from 'array-move';
+import arrayMove from "array-move";
-import './index.scss';
+import "./index.scss";
 
 export default class DraggableMessage extends Component {
   constructor(props) {
@@ -15,12 +15,15 @@ export default class DraggableMessage extends Component {
   };
 
   render() {
-    const { message, user, isSelf, isActive } = this.props;
+    const { isActive } = this.props;
     if (!isActive) return null;
     return <div className="ptapbox"></div>;
   }
   a = (
-    <button className="message-2d__submit" onClick={(e) => this.props.action({ value : e.target.value })}>
+    <button
+      className="message-2d__submit"
+      onClick={(e) => this.props.action({ value: e.target.value })}
+    >
       ثبت
     </button>
   );

src/views/ChatRoom/Body/Message/index.js

@@ -1,14 +1,13 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import Normal from './Normal';
+import Normal from "./Normal";
-import Inline from './Inline';
+import Inline from "./Inline";
-import Sort from './Sort';
+import Sort from "./Sort";
-import Slider from './Slider';
+import Slider from "./Slider";
-import Select from './Select';
+import Select from "./Select";
-import MultiSelect from './MultiSelect';
+import MultiSelect from "./MultiSelect";
-import Tap from './Tap';
+import Tap from "./Tap";
-import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
 
-import './index.scss';
+import "./index.scss";
 const types = {
   sort: Sort,
   inline: Inline,
@@ -19,7 +18,16 @@ const types = {
 };
 export default class Message extends Component {
   render() {
-    const { message, user, isSelf, file, document, prevUserId, isActive, addcounter } = this.props;
+    const {
+      message,
+      user,
+      isSelf,
+      file,
+      document,
+      prevUserId,
+      isActive,
+      addcounter,
+    } = this.props;
     const Action = types[message.action];
     return (
       <div className="Message">
@@ -33,7 +41,12 @@ export default class Message extends Component {
           document={document}
         >
           {Action ? (
-            <Action message={message} isSelf={isSelf} isActive={isActive} action={addcounter} />
+            <Action
+              message={message}
+              isSelf={isSelf}
+              isActive={isActive}
+              action={addcounter}
+            />
           ) : null}
           {/* {isActive && (
             <button className="message-2d__submit" onClick={() => action({ value })}>

src/views/ChatRoom/Body/index.js

@@ -382,11 +382,11 @@ class List extends Component {
     return color;
   }
   render() {
-    const { setPage, chatInfo, messageList: msaster, userId } = this.props; //last
+    const { chatInfo, messageList: msaster } = this.props; //last
     const messageList = msaster.slice(0, this.state.counter);
     const last = messageList.slice(-1)[0] || {};
     const userIdx = this.userIdx || {};
-    if (Object.keys(userIdx).length == 0) {
+    if (Object.keys(userIdx).length === 0) {
       chatInfo.users.map(
         (e) => (userIdx[e.id] = { ...e, color: this.randomColor() })
       );
@@ -417,7 +417,7 @@ class List extends Component {
                   this.state.video === null ? (
                     <Message
                       addcounter={() => this.addcounter()}
-                      isActive={message.id == last.id}
+                      isActive={message.id === last.id}
                       prevUserId={i > 0 ? messageList[i - 1].userId : 0}
                       isSelf={new Set([101, 103, 106, 108, 110]).has(
                         message.userId * 1
@@ -477,7 +477,7 @@ class List extends Component {
               className="chat-body__footer d-flex nobar d-flex flex-column"
               onClick={() => this.addcounter("nothing")}
             >
-              {last.action == "text" ? (
+              {last.action === "text" ? (
                 <ChatInputs
                   addcounter={() => this.addcounter()}
                   onStop={this.onStop}
@@ -529,7 +529,7 @@ class List extends Component {
                   this.state.video === null ? (
                     <Message
                       addcounter={() => this.addcounter()}
-                      isActive={message.id == last.id}
+                      isActive={message.id === last.id}
                       prevUserId={i > 0 ? messageList[i - 1].userId : 0}
                       isSelf={new Set([101, 103, 106, 108, 110]).has(
                         message.userId * 1
@@ -589,7 +589,7 @@ class List extends Component {
               className="desktop-chat-body__footer d-flex nobar d-flex flex-column"
               onClick={() => this.addcounter("nothing")}
             >
-              {last.action == "text" ? (
+              {last.action === "text" ? (
                 <ChatInputs
                   addcounter={() => this.addcounter()}
                   onStop={this.onStop}

src/views/ChatRoom/Header/index.js

@@ -3,9 +3,7 @@ import MoreVertIcon from "@material-ui/icons/MoreVert";
 import ArrowForwardIcon from "@material-ui/icons/ArrowForward";
 import Menu from "@material-ui/core/Menu";
 import MenuItem from "@material-ui/core/MenuItem";
-import VideocamIcon from "@material-ui/icons/Videocam";
 import StatusAvatar from "./Avatar/index.js";
-import CallIcon from "@material-ui/icons/Call";
 import { connect } from "react-redux";
 
 import "./index.scss";

src/views/ChatRoom/Info/index.js

@@ -1,16 +1,15 @@
 import React, { Component } from "react";
-import ChatIcon from "@material-ui/icons/Chat";
 import FileTabs from "./FileTabs";
-import Gallery from "./Gallery";
+
 import VideocamOutlinedIcon from "@material-ui/icons/VideocamOutlined";
 import CallOutlinedIcon from "@material-ui/icons/CallOutlined";
 import MoreHorizOutlinedIcon from "@material-ui/icons/MoreHorizOutlined";
 import Switch from "@material-ui/core/Switch";
 import { withStyles } from "@material-ui/core/styles";
-import BlockIcon from '@material-ui/icons/Block';
+import BlockIcon from "@material-ui/icons/Block";
-import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
+import KeyboardArrowLeftIcon from "@material-ui/icons/KeyboardArrowLeft";
-import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace';
+import KeyboardBackspaceIcon from "@material-ui/icons/KeyboardBackspace";
-import CloseIcon from '@material-ui/icons/Close';
+import CloseIcon from "@material-ui/icons/Close";
 
 import user2 from "../../../assets/images/user2.png";
 
@@ -39,7 +38,7 @@ export default class ChatInfo extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      gallery : false,
+      gallery: false,
       alarms: false,
       buttons: [
         {
@@ -99,21 +98,40 @@ export default class ChatInfo extends Component {
   };
 
   render() {
-    const { user, gallery, buttons, alarms } = this.state;
+    const { user, buttons, alarms } = this.state;
     return (
       <>
         {window.innerWidth > 1000 ? (
           <section className="desktop-contact-info d-flex flex-column">
             <header className="desktop-contact-info__header d-flex align-items-center justify-content-center">
-              {
+              {this.state.gallery ? (
-                this.state.gallery ?
+                <KeyboardBackspaceIcon
-                <KeyboardBackspaceIcon onClick={() => this.setState({ gallery: false})} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} /> : 
+                  onClick={() => this.setState({ gallery: false })}
-                <CloseIcon onClick={ () => this.props.parent.handleDrawerClose()} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} />
+                  style={{
-              }
+                    cursor: "pointer",
+                    width: 35,
+                    height: 35,
+                    position: "absolute",
+                    left: 10,
+                    top: 10,
+                  }}
+                />
+              ) : (
+                <CloseIcon
+                  onClick={() => this.props.parent.handleDrawerClose()}
+                  style={{
+                    cursor: "pointer",
+                    width: 35,
+                    height: 35,
+                    position: "absolute",
+                    left: 10,
+                    top: 10,
+                  }}
+                />
+              )}
             </header>
 
-            {
+            {!this.state.gallery ? (
-              !this.state.gallery ? 
               <div className="desktop-contact-info__body d-flex flex-column align-items-center">
                 <img
                   className="desktop-contact-info__body--profileImage"
@@ -124,16 +142,23 @@ export default class ChatInfo extends Component {
                 <div className="desktop-contact-info__body--bio d-flex flex-column">
                   <h2 style={{ fontSize: fontSize.desktop.h2 }}>اطلاعات</h2>
                   <p style={{ fontSize: fontSize.desktop.p }}>{user.bio}</p>
-                <h2 style={{ fontSize: fontSize.desktop.h2 }}>مشخصات تحصیلی</h2>
+                  <h2 style={{ fontSize: fontSize.desktop.h2 }}>
+                    مشخصات تحصیلی
+                  </h2>
                   <ul>
                     {user.educationalInfo.map((item, i) => (
-                    <li key={i} style={{ fontSize: fontSize.desktop.p}}>{item}</li>
+                      <li key={i} style={{ fontSize: fontSize.desktop.p }}>
+                        {item}
+                      </li>
                     ))}
                   </ul>
                 </div>
                 <div className="desktop-contact-info__body--buttons d-flex justify-content-around mt-3">
                   {buttons.map((item, i) => (
-                  <li style={{ backgroundColor: item.backgroundColor }} key={i}>
+                    <li
+                      style={{ backgroundColor: item.backgroundColor }}
+                      key={i}
+                    >
                       {item.icon}
                     </li>
                   ))}
@@ -147,37 +172,73 @@ export default class ChatInfo extends Component {
                 <div className="desktop-contact-info__body--options d-flex justify-content-between align-items-center">
                   <div>
                     <h3 style={{ fontSize: fontSize.desktop.h3 }}>اعلانات</h3>
-                  <span style={{ fontSize: fontSize.desktop.span }}>{alarms ? 'روشن ': 'خاموش'}</span>
+                    <span style={{ fontSize: fontSize.desktop.span }}>
+                      {alarms ? "روشن " : "خاموش"}
+                    </span>
                   </div>
                   <AntSwitch
                     checked={alarms}
                     onChange={() => this.handleChange()}
                   />
                 </div>
-              <div className="desktop-contact-info__body--options desktop-contact-info__body--options__click  d-flex justify-content-between align-items-center" onClick={() => this.setState({ gallery: true })}>
+                <div
-                <h3 style={{ fontSize: fontSize.desktop.h3 }}>رسانه,فیلم,عکس</h3>
+                  className="desktop-contact-info__body--options desktop-contact-info__body--options__click  d-flex justify-content-between align-items-center"
-                <KeyboardArrowLeftIcon  style={{width : 30, height : 30, color : 'grey'}} />
+                  onClick={() => this.setState({ gallery: true })}
+                >
+                  <h3 style={{ fontSize: fontSize.desktop.h3 }}>
+                    رسانه,فیلم,عکس
+                  </h3>
+                  <KeyboardArrowLeftIcon
+                    style={{ width: 30, height: 30, color: "grey" }}
+                  />
                 </div>
                 <div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center">
-                <h3 style={{  color : 'red',fontSize: fontSize.desktop.h3 }}>مسدود سازی مخاطب</h3>
+                  <h3 style={{ color: "red", fontSize: fontSize.desktop.h3 }}>
-                <BlockIcon style={{width : 30, height : 30, color : 'red'}} />
+                    مسدود سازی مخاطب
+                  </h3>
+                  <BlockIcon style={{ width: 30, height: 30, color: "red" }} />
                 </div>
-            </div> : <FileTabs />
+              </div>
-            }
+            ) : (
+              <FileTabs />
+            )}
           </section>
         ) : null}
         {window.innerWidth < 1000 ? (
           <section className="desktop-contact-info d-flex flex-column">
             <header className="desktop-contact-info__header d-flex align-items-center justify-content-center">
-              {
+              {this.state.gallery ? (
-                this.state.gallery ?
+                <KeyboardBackspaceIcon
-                <KeyboardBackspaceIcon onClick={() => this.setState({ gallery: false})} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} /> : 
+                  onClick={() => this.setState({ gallery: false })}
-                <CloseIcon onClick={ () => window.innerWidth > 1000 ? this.props.parent.handleDrawerClose() : this.props.parent.setState({ page : 'chatroom' })} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} />
+                  style={{
+                    cursor: "pointer",
+                    width: 35,
+                    height: 35,
+                    position: "absolute",
+                    left: 10,
+                    top: 10,
+                  }}
+                />
+              ) : (
+                <CloseIcon
+                  onClick={() =>
+                    window.innerWidth > 1000
+                      ? this.props.parent.handleDrawerClose()
+                      : this.props.parent.setState({ page: "chatroom" })
                   }
+                  style={{
+                    cursor: "pointer",
+                    width: 35,
+                    height: 35,
+                    position: "absolute",
+                    left: 10,
+                    top: 10,
+                  }}
+                />
+              )}
             </header>
 
-            {
+            {!this.state.gallery ? (
-              !this.state.gallery ? 
               <div className="desktop-contact-info__body d-flex flex-column align-items-center">
                 <img
                   className="desktop-contact-info__body--profileImage"
@@ -188,16 +249,23 @@ export default class ChatInfo extends Component {
                 <div className="desktop-contact-info__body--bio d-flex flex-column">
                   <h2 style={{ fontSize: fontSize.mobile.h2 }}>اطلاعات</h2>
                   <p style={{ fontSize: fontSize.mobile.p }}>{user.bio}</p>
-                <h2 style={{ fontSize: fontSize.mobile.h2 }}>مشخصات تحصیلی</h2>
+                  <h2 style={{ fontSize: fontSize.mobile.h2 }}>
+                    مشخصات تحصیلی
+                  </h2>
                   <ul>
                     {user.educationalInfo.map((item, i) => (
-                    <li key={i} style={{ fontSize: fontSize.mobile.p}}>{item}</li>
+                      <li key={i} style={{ fontSize: fontSize.mobile.p }}>
+                        {item}
+                      </li>
                     ))}
                   </ul>
                 </div>
                 <div className="desktop-contact-info__body--buttons d-flex justify-content-around">
                   {buttons.map((item, i) => (
-                  <li style={{ backgroundColor: item.backgroundColor }} key={i}>
+                    <li
+                      style={{ backgroundColor: item.backgroundColor }}
+                      key={i}
+                    >
                       {item.icon}
                     </li>
                   ))}
@@ -211,23 +279,36 @@ export default class ChatInfo extends Component {
                 <div className="desktop-contact-info__body--options d-flex justify-content-between align-items-center">
                   <div>
                     <h3 style={{ fontSize: fontSize.mobile.h3 }}>اعلانات</h3>
-                  <span style={{ fontSize: fontSize.mobile.span }}>{alarms ? 'روشن ': 'خاموش'}</span>
+                    <span style={{ fontSize: fontSize.mobile.span }}>
+                      {alarms ? "روشن " : "خاموش"}
+                    </span>
                   </div>
                   <AntSwitch
                     checked={alarms}
                     onChange={() => this.handleChange()}
                   />
                 </div>
-              <div className="desktop-contact-info__body--options desktop-contact-info__body--options__click  d-flex justify-content-between align-items-center" onClick={() => this.setState({ gallery: true })}>
+                <div
-                <h3 style={{ fontSize: fontSize.mobile.h3 }}>رسانه,فیلم,عکس</h3>
+                  className="desktop-contact-info__body--options desktop-contact-info__body--options__click  d-flex justify-content-between align-items-center"
-                <KeyboardArrowLeftIcon  style={{width : 30, height : 30, color : 'grey'}} />
+                  onClick={() => this.setState({ gallery: true })}
+                >
+                  <h3 style={{ fontSize: fontSize.mobile.h3 }}>
+                    رسانه,فیلم,عکس
+                  </h3>
+                  <KeyboardArrowLeftIcon
+                    style={{ width: 30, height: 30, color: "grey" }}
+                  />
                 </div>
                 <div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center">
-                <h3 style={{  color : 'red',fontSize: fontSize.mobile.h3 }}>مسدود سازی مخاطب</h3>
+                  <h3 style={{ color: "red", fontSize: fontSize.mobile.h3 }}>
-                <BlockIcon style={{width : 30, height : 30, color : 'red'}} />
+                    مسدود سازی مخاطب
+                  </h3>
+                  <BlockIcon style={{ width: 30, height: 30, color: "red" }} />
                 </div>
-            </div> : <FileTabs />
+              </div>
-            }
+            ) : (
+              <FileTabs />
+            )}
           </section>
         ) : null}
       </>

src/views/Contact/Input/index.js

@@ -13,17 +13,24 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function FormPropsTextFields(props) {
+export default function FormPropsTextFields({
+  parent,
+  name,
+  label,
+  multiline,
+}) {
   const classes = useStyles();
 
   return (
     <form className={classes.root} noValidate autoComplete="off">
       <div>
         <TextField
+          multiline={multiline}
           id="outlined-basic"
-          name={props.name}
+          name={name}
-          label={props.label}
+          label={label}
           variant="outlined"
+          onChange={(e) => parent.onChange(name, e.target.value)}
         />
       </div>
     </form>

src/views/Contact/Select/index.js

@@ -35,7 +35,6 @@ const useStyles = makeStyles((theme) => ({
 
 export default function CustomizedSelects(props) {
   const classes = useStyles();
-  const [age, setAge] = React.useState("");
 
   return (
     <div className="home-search__select mr-2" style={{ width: "100%" }}>

src/views/Download/BreadCrumb/index.js

@@ -4,13 +4,7 @@ import { Link } from "react-router-dom";
 
 import "./index.scss";
 
-function handleClick(event) {
-  event.preventDefault();
-  console.info("You clicked a breadcrumb.");
-}
-
 const maxDesktopSize = 1250;
-const maxMobileSize = 650;
 
 const fontSize = {
   desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
@@ -18,7 +12,6 @@ const fontSize = {
 };
 
 export default function ActiveLastBreadcrumb(props) {
-  const { name } = props;
   return (
     <Breadcrumbs aria-label="breadcrumb">
       <Link

src/views/Download/index.js

@@ -1,11 +1,8 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { userProduct } from "~/Redux/actions";
-import { Link } from "react-router-dom";
 import Navbar from "../Home/Navbar/index";
-import Footer from "../Home/Footer/index";
+
-import Loader from "~/components/Loader/index";
-import Item from "./Item/index";
 import BreadCrumbs from "./BreadCrumb/index";
 
 import "./index.scss";
@@ -33,8 +30,6 @@ class AR extends Component {
   }
 
   render() {
-    const { arList, loading } = this.props;
-
     return (
       <div className="ar d-flex flex-column">
         <Navbar page="home" />

src/views/Faq/index.js

@@ -1,6 +1,5 @@
 import React, { Component } from "react";
-import proxy from "~/Redux/proxy";
+
-import { toast } from "react-toastify";
 import { connect } from "react-redux";
 import { publicApi } from "~/Redux/actions";
 

src/views/Home/HomeScroll/index.js

@@ -1,15 +1,13 @@
 import React, { Component } from "react";
-
+import Product from "./Product/index";
-import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import Subject from "./Subject/index";
-import Product from './Product/index';
+import MyProduct from "./MyProduct/index";
-import Subject from './Subject/index';
+import dropdown from "../../../assets/icons/dropdown.png";
-import MyProduct from './MyProduct/index';
-import dropdown from '../../../assets/icons/dropdown.png';
 
 import "./index.scss";
 export default class HomeScroll extends Component {
   render() {
-    const { data, height, title,designType, moreText, number } = this.props;
+    const { data, height, title, designType, moreText, number } = this.props;
     return (
       <div
         className="mobile-home-scroll d-flex flex-column"
@@ -19,11 +17,10 @@ export default class HomeScroll extends Component {
           <div className="mobile-home-scroll__header--right d-flex">
             <h1>{title}</h1>
             <span></span>
-
           </div>
           <div className="mobile-home-scroll__header--more d-flex">
             <span>{moreText}</span>
-            <img src={dropdown} alt='فلش' />
+            <img src={dropdown} alt="فلش" />
           </div>
         </div>
         <div className="mobile-home-scroll__list d-flex">
@@ -39,18 +36,15 @@ export default class HomeScroll extends Component {
 const Item = (props) => {
   return (
     <>
-      {
+      {props.designType === "product" ? (
-        props.designType === 'product' ? 
+        <Product data={props.data} number={props.number} />
-        <Product data={props.data} number={props.number} /> : null
+      ) : null}
-      }
+      {props.designType === "subjects" ? (
-      {
+        <Subject data={props.data} number={props.number} />
-        props.designType === 'subjects' ? 
+      ) : null}
-        <Subject data={props.data} number={props.number} /> : null
+      {props.designType === "myProduct" ? (
-      }
+        <MyProduct data={props.data} number={props.number} />
-      {
+      ) : null}
-        props.designType === 'myProduct' ? 
-        <MyProduct data={props.data} number={props.number} /> : null
-      }
     </>
   );
 };

src/views/Home/HomeSearch/Select/index.js

@@ -45,8 +45,7 @@ const useStyles = makeStyles((theme) => ({
 
 export default function CustomizedSelects(props) {
   const classes = useStyles();
-  const [age, setAge] = React.useState("");
+  const { name, parent } = props;
-  const { name, parent, options } = props;
   return (
     <div className="home-search__select mr-2">
       <FormControl className={classes.margin}>

src/views/Home/HomeSearch/index.js

@@ -24,7 +24,7 @@ class HomeSearch extends Component {
   }
 
   render() {
-    const { height, levels } = this.props;
+    const { levels } = this.props;
     return window.innerWidth > 1000 ? (
       <div className="home-search d-flex">
         <input

src/views/Home/HomeSlider/Blog/index.js

@@ -50,7 +50,10 @@ export default class Simple extends Component {
               ) : null}
               <h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
               <h2 style={{ fontSize: fontSize.desktop.h2 }}>
-                {data.text.slice(0, 100)} ...
+                <div
+                  dangerouslySetInnerHTML={{ __html: data.text }}
+                  style={{ height: 80, overflow: "hidden" }}
+                ></div>
               </h2>
               <div className="slider-blog__footer d-flex mt-3">
                 <div className="d-flex">
@@ -74,9 +77,9 @@ export default class Simple extends Component {
               <span
                 className="slider-blog__category"
                 style={{
-                  backgroundColor: colors.filter(
+                  backgroundColor:
-                    (item) => item.name === data.tag
+                    colors.filter((item) => item.name === data.tag)[0]?.color ||
-                  )[0].color,
+                    "#33333366",
                   fontSize: fontSize.desktop.span,
                 }}
               >
@@ -106,7 +109,13 @@ export default class Simple extends Component {
                 <img src={music} alt={data.title} />
               ) : null}
               <h1>{data.title}</h1>
-              <h2>{data.text.slice(0, 100)}...</h2>
+
+              <h2>
+                <div
+                  dangerouslySetInnerHTML={{ __html: data.text }}
+                  style={{ height: 80, overflow: "hidden" }}
+                ></div>
+              </h2>
               <div className="mobile-slider-blog__footer d-flex mt-3">
                 <div className="d-flex">
                   {/* <img src={} /> */}

src/views/Home/HomeSlider/Simple/index.js

@@ -17,7 +17,7 @@ const fontSize = {
 export default class Simple extends Component {
   render() {
     const mobile = window.innerWidth < 1000;
-    const { height, data } = this.props;
+    const { data } = this.props;
     const status = proxy.status();
 
     return (

src/views/Home/HomeStatic/Simple/index.js

@@ -9,7 +9,7 @@ const fontSize = {
 };
 
 export default function Simple(props) {
-  const { data, status } = props;
+  const { data } = props;
   const parentStyle = {
     // backgroundImage: `url('${data.imageUrl}')`,
     background: data.fileId

src/views/Home/HomeStatic/index.js

@@ -15,7 +15,7 @@ const fontSize = {
 export default class HomeStatic extends Component {
   render() {
     const status = proxy.status();
-    const { data, height, title, designType } = this.props;
+    const { data, height, title } = this.props;
     console.log(data);
     return (
       <>

src/views/Home/Navbar/Laptop/index.js

@@ -1,16 +1,14 @@
 import React, { Component } from "react";
-import { Dropdown } from "react-bootstrap";
+
 import proxy from "~/Redux/proxy";
 import { Link } from "react-router-dom";
 import Avatar from "@material-ui/core/Avatar";
 import logo from "~/assets/icons/logo.png";
 import basket from "~/assets/icons/basket.png";
-import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
+
-import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import MenuItem from "@material-ui/core/MenuItem";
 import Menu from "@material-ui/core/Menu";
 import { connect } from "react-redux";
-import AddCircleOutlineRoundedIcon from "@material-ui/icons/AddCircleOutlineRounded";
 import "./index.scss";
 import { useHistory } from "react-router-dom";
 import { user } from "~/Redux/actions";
@@ -31,7 +29,6 @@ class LaptopNavbar extends Component {
   state = {};
 
   render() {
-    let score = 0;
     const { status } = this.props;
     if (this.state.navigatePath) return <Navigate path={this.navigatePath} />;
     const { links } = this.props;

src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js

@@ -4,13 +4,11 @@ import AddCircleOutlineRoundedIcon from "@material-ui/icons/AddCircleOutlineRoun
 import { Link } from "react-router-dom";
 import { toast } from "react-toastify";
 import Avatar from "@material-ui/core/Avatar";
-import CheckIcon from "@material-ui/icons/Check";
 
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import { user } from "~/Redux/actions";
-import user1 from "~/assets/images/user1.png";
+
-import user2 from "~/assets/images/user2.png";
 import mobileHome from "~/assets/icons/mobileHome.svg";
 import mobileAr from "~/assets/icons/mobileAr.svg";
 import qrcode from "~/assets/icons/drawer-qr.png";
@@ -44,6 +42,13 @@ class NavbarDrawer extends Component {
         toast: "",
         message: "",
       },
+      {
+        name: "درباره ما",
+        link: "/about",
+        icon: <img src={mobileBlog} alt="کتاب‌های من" />,
+        toast: "",
+        message: "",
+      },
       {
         name: "فروشگاه",
         link: "/products",
@@ -51,6 +56,13 @@ class NavbarDrawer extends Component {
         toast: "",
         message: "",
       },
+      {
+        name: "سبد خرید",
+        link: "/cart",
+        icon: <img src={mobileBlog} alt="کتاب‌های من" />,
+        toast: "",
+        message: "",
+      },
       {
         name: "بلاگ",
         link: "/blogs",
@@ -247,39 +259,3 @@ class NavbarDrawer extends Component {
 export default connect((state) => ({ status: state.user.status }), {
   logout: user.logout,
 })(NavbarDrawer);
-
-const User = (props) => {
-  return (
-    <div
-      className="navbar-drawer-user d-flex align-items-center"
-      style={{ backgroundColor: props.data.status === 1 ? "#eee" : "white" }}
-    >
-      <Avatar
-        style={{ width: 55, height: 55 }}
-        alt={props.data.firstName + " " + props.data.lastName}
-        src={props.data.image}
-      />
-      <div className="navbar-drawer-user__right d-flex flex-column">
-        <h1
-          style={{
-            color: props.data.status === 1 ? "#00CC69" : "#4D4D4F",
-          }}
-        >
-          {props.data.firstName + " " + props.data.lastName}
-        </h1>
-        <div
-          style={{
-            color: props.data.status === 1 ? "#00CC69" : "#4D4D4F",
-          }}
-        >
-          {props.data.title}
-        </div>
-      </div>
-      {props.data.status === 1 ? (
-        <div style={{ position: "absolute", left: 24, top: 16 }}>
-          <CheckIcon style={{ fontSize: 40, color: "#00CC69" }} />
-        </div>
-      ) : null}
-    </div>
-  );
-};

src/views/Home/Navbar/Mobile/index.js

@@ -1,4 +1,4 @@
-import React, { useState, Component } from "react";
+import React, { useState } from "react";
 import { Link, useHistory } from "react-router-dom";
 import { makeStyles } from "@material-ui/core/styles";
 import { SwipeableDrawer } from "@material-ui/core";
@@ -23,20 +23,6 @@ function BackButton({ children }) {
   );
 }
 
-const maxDesktopSize = 1250;
-const maxMobileSize = 650;
-const fontSize = {
-  desktop: {
-    li: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85,
-    a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85,
-  },
-  mobile: {
-    h1: window.innerWidth > maxMobileSize ? 30 : window.innerWidth / 18,
-    p: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 28,
-    h2: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 23,
-    li: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 28,
-  },
-};
 const useStyles = makeStyles({
   list: {
     width: window.innerWidth * 0.8,

src/views/Home/SingleBlog/index.js

@@ -22,7 +22,7 @@ const fontSize = {
 
 export default class SingleBlog extends Component {
   render() {
-    const { height, data, direction } = this.props;
+    const { height, data } = this.props;
     return (
       <div style={{ height: height }} className="single-blog d-flex">
         <div className="single-blog__right d-flex flex-column justify-content-center">

src/views/Home/index.js

@@ -53,11 +53,11 @@ class Home extends Component {
   }
   //componentDidupdate = this.componentDidMount();
   render() {
-    const { homeData, loading, status } = this.props;
+    const { homeData, loading } = this.props;
-    if (!loading && this.props.homeData.length == 0)
+    if (!loading && this.props.homeData.length === 0)
       return this.componentDidMount();
     const mobile = window.innerWidth < 1000;
-    if (loading && this.props.homeData.length == 0)
+    if (loading && this.props.homeData.length === 0)
       return (
         <div
           className="d-flex justify-content-center align-items-center"

src/views/MyBooks/BreadCrumb/index.js

@@ -4,13 +4,7 @@ import { Link } from "react-router-dom";
 
 import "./index.scss";
 
-function handleClick(event) {
-  event.preventDefault();
-  console.info("You clicked a breadcrumb.");
-}
-
 const maxDesktopSize = 1250;
-const maxMobileSize = 650;
 
 const fontSize = {
   desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
@@ -18,7 +12,6 @@ const fontSize = {
 };
 
 export default function ActiveLastBreadcrumb(props) {
-  const { name } = props;
   return (
     <Breadcrumbs aria-label="breadcrumb" className="m-1">
       <Link

src/views/MyBooks/index.js

@@ -118,7 +118,7 @@ export default connect(
 )(MyBooks);
 
 const Item = (props) => {
-  const { data, id } = props;
+  const { data } = props;
   return (
     <>
       {window.innerWidth < 1000 &&

src/views/NewProfile/index.js

@@ -1,5 +1,5 @@
+/* eslint-disable no-useless-escape */
 import React, { Component } from "react";
-import { user } from "~/Redux/actions";
 import { connect } from "react-redux";
 
 import Select from "../Auth/Profile/Select/index";
@@ -9,7 +9,6 @@ import Upload from "../Auth/Profile/Upload/index";
 import Gender from "../Auth/Profile/GenderSwitch/index";
 import Birthdate from "../Auth/Profile/Birthdate/index";
 import MultipleSelector from "../Auth/Profile/MultipleSelector/index";
-import Loader from "~/components/Loader/index";
 import Document from "../Auth/Profile/Document/index";
 
 import logo from "~/assets/icons/logo.png";
@@ -31,12 +30,6 @@ const fontSize = {
   },
 };
 
-const toastMessages = {
-  firstName: "نام وارد شده صحیح نیست!",
-  lastName: "نام خانوادگی وارد شده صحیح نیست!",
-  username: "نام کاربری صحیح نیست.",
-};
-
 class NewProfile extends Component {
   state = {
     render: false,
@@ -96,7 +89,6 @@ class NewProfile extends Component {
       firstName,
       lastName,
       username,
-      cellphone,
       password,
       postalCode,
       address,
@@ -193,7 +185,7 @@ class NewProfile extends Component {
   };
 
   render() {
-    const { user, profile } = this.props;
+    const { profile } = this.props;
     const grades = [
       "پیش دبستان",
       "اول",

src/views/Product/AddToCart/index.js

@@ -1,17 +1,15 @@
-import React, { Component } from "react";
+import React from "react";
 import proxy from "~/Redux/proxy";
 import { toast } from "react-toastify";
 import { connect } from "react-redux";
 import { userProduct } from "~/Redux/actions";
 
 import { Link } from "react-router-dom";
-import Loader from "~/components/Loader/index";
 
 import "./index.scss";
 import document_red from "~/assets/icons/document-red.png";
 import ebook_blue from "~/assets/icons/e-book-blue.png";
 import basket_white from "~/assets/icons/basket-white.png";
-const file = (fileId) => `${window.baseURL}file/${fileId}`;
 const maxDesktopSize = 1250;
 
 const fontSize = {
@@ -31,7 +29,7 @@ function AddToCart(props) {
     off,
     supportItems,
     page,
-    loading,
+
     info,
     sampleFileId,
     productType,

src/views/Product/BreadCrumb/index.js

@@ -4,13 +4,7 @@ import { Link } from "react-router-dom";
 
 import "./index.scss";
 
-function handleClick(event) {
-  event.preventDefault();
-  console.info("You clicked a breadcrumb.");
-}
-
 const maxDesktopSize = 1250;
-const maxMobileSize = 650;
 
 const fontSize = {
   desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,

src/views/Product/Comment/Reply/index.js

@@ -1,9 +1,8 @@
-import React, { Component } from "react";
+import React from "react";
 
 import "./index.scss";
 
 const maxDesktopSize = 1250;
-const maxMobileSize = 550;
 
 const fontSize = {
   desktop: {

src/views/Product/Gallery/index.js

@@ -1,4 +1,4 @@
-import React, { Component, useState } from "react";
+import React, { useState } from "react";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
 import Video from "../../QR/VideoBox/React-video-js-player/index";
 import Modal from "./Modal/index";
@@ -8,7 +8,7 @@ export default function Gallery(props) {
   const [selectedMedia, setSelectedMedia] = useState(props.gallery[0]);
   const [modal, setModal] = useState(null);
   //FIXME:
-  if (props.gallery[0] != selectedMedia) setSelectedMedia(props.gallery[0]);
+  if (props.gallery[0] !== selectedMedia) setSelectedMedia(props.gallery[0]);
   return (
     <>
       {window.innerWidth > 1000 ? (

src/views/Product/Info/index.js

@@ -1,28 +1,27 @@
-import React, { Component } from 'react';
+import React from "react";
 
-import './index.scss';
+import "./index.scss";
 
 const maxDesktopSize = 1250;
 
 const fontSize = {
-  desktop : {
+  desktop: {
     h1: window.innerWidth > maxDesktopSize ? 22 : window.innerWidth / 55,
-    span: window.innerWidth > maxDesktopSize ? 14: window.innerWidth / 80,
+    span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
     p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
-  }
+  },
-}
+};
 export default function Info(props) {
-  const {title , subTitle, description} = props;
+  const { title, subTitle, description } = props;
-  return(
+  return (
     <>
-      {
+      {window.innerWidth > 1000 ? (
-        window.innerWidth > 1000 ? 
         <section className="product-info d-flex flex-column">
           <h1 style={{ fontSize: fontSize.desktop.h1 }}>{title}</h1>
           <span style={{ fontSize: fontSize.desktop.span }}>{subTitle}</span>
           <p style={{ fontSize: fontSize.desktop.p }}>{description}</p>
-        </section> : null
+        </section>
-      }
+      ) : null}
     </>
   );
 }

src/views/Product/MaterialModal/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
-import { comment, book } from "~/Redux/actions";
+import { comment } from "~/Redux/actions";
 import { makeStyles } from "@material-ui/core/styles";
 import Modal from "@material-ui/core/Modal";
 
@@ -18,10 +18,6 @@ const fontSize = {
   },
 };
 
-function rand() {
-  return Math.round(Math.random() * 20) - 10;
-}
-
 function getModalStyle() {
   return {
     top: `${50}%`,
@@ -47,10 +43,12 @@ const useStyles = makeStyles((theme) => ({
 
 function SimpleModal(props) {
   const classes = useStyles();
-  // getModalStyle is not a pure function, we roll the style only on the first render
   const [modalStyle] = React.useState(getModalStyle);
   const [text, setText] = useState(null);
-
+  //TODO check
+  const cancle = () => {
+    props.handleOpenComment(false);
+  };
   const submitComment = () => {
     props.addComment({
       userId: props.id,
@@ -87,6 +85,12 @@ function SimpleModal(props) {
       >
         ثبت
       </button>
+      <button
+        style={{ marginTop: 20, borderRadius: 6, padding: 8 }}
+        onClick={() => cancle()}
+      >
+        انصراف
+      </button>
     </div>
   );
 
@@ -109,5 +113,5 @@ export default connect(
     info: state.book.info,
     id: state.user.status.id,
   }),
-  { addComment: comment.add, getInfo: book.info }
+  { addComment: comment.add }
 )(SimpleModal);

src/views/Product/index.js

@@ -80,7 +80,7 @@ class Product extends Component {
   }
 
   render() {
-    const { product, supportItems, info, page } = this.props;
+    const { supportItems, info, page } = this.props;
     return (
       <>
         {window.innerWidth > 1000 ? (
@@ -351,10 +351,6 @@ Product.defaultProps = {
   ],
 };
 
-const Item = (props) => {
-  return <li style={{ fontSize: fontSize.mobile.li }}>+ {props.item}</li>;
-};
-
 const Identifier = (props) => {
   return (
     <>

src/views/Products/BreadCrumb/index.js

@@ -4,13 +4,7 @@ import { Link } from "react-router-dom";
 
 import "./index.scss";
 
-function handleClick(event) {
-  event.preventDefault();
-  console.info("You clicked a breadcrumb.");
-}
-
 const maxDesktopSize = 1250;
-const maxMobileSize = 650;
 
 const fontSize = {
   desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,

src/views/Products/Filters/AppliedFilters/index.js

@@ -3,8 +3,6 @@ import CloseIcon from "@material-ui/icons/Close";
 
 import "./index.scss";
 
-const maxDesktopSize = 1250;
-
 const fontSize = {
   h2: 15, //window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 85,
   button: 15, //window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 85,

src/views/Products/Filters/TypicalFilters/index.js

@@ -4,16 +4,9 @@ import Checkbox from "@material-ui/core/Checkbox";
 
 import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@material-ui/icons/CheckBox";
-import CloseIcon from "@material-ui/icons/Close";
 
 import "./index.scss";
 
-const maxDesktopSize = 1250;
-
-const fontSize = {
-  h2: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 85,
-  strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
-};
 export default class TypicalFilters extends React.Component {
   onChange = (name, data) => {
     if (name === "subject") {
@@ -41,7 +34,7 @@ export default class TypicalFilters extends React.Component {
     }
   };
   render() {
-    const { data, title, theme, name, parent } = this.props;
+    const { data, title, theme } = this.props;
     return (
       <div className="products-filters-typical d-flex flex-column">
         <header className="products-filters-typical__header d-flex align-items-center">

src/views/Products/List/index.js

@@ -9,11 +9,11 @@ import "./index.scss";
 
 class List extends React.Component {
   componentDidMount() {
-    if (this.props.list.length == 0) this.props.getList();
+    if (this.props.list.length === 0) this.props.getList();
   }
 
   render() {
-    let { list, filterResult, loading } = this.props;
+    let { filterResult, loading } = this.props;
 
     return window.innerWidth > 1000 ? (
       <div className="products-list d-flex flex-wrap">

src/views/Products/Product/index.js

@@ -27,7 +27,7 @@ const grades = [
 
 class Product extends Component {
   render() {
-    const { product, id } = this.props;
+    const { product } = this.props;
 
     return (
       <>

src/views/Products/Select/index.js

@@ -63,7 +63,7 @@ export default function CustomizedSelects(props) {
               : props.parent.setState({
                   selectedFilters: {
                     ...props.parent.state.selectedFilters,
-                    [props.name]: props.name === "sort" ? null : new Array(),
+                    [props.name]: props.name === "sort" ? null : [],
                   },
                 })
           }

src/views/Products/index.js

@@ -6,7 +6,6 @@ import { Link } from "react-router-dom";
 import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
 import Select from "./Select/index";
-import Product from "./Product/index";
 import Breadcrumbs from "./BreadCrumb/index";
 import List from "./List/index";
 import Sort from "./Sort/index";
@@ -17,14 +16,6 @@ import navbarSearch from "../../assets/icons/navbarSearch.png";
 import "./index.scss";
 import { toast } from "react-toastify";
 
-const maxMobileSize = 1250;
-
-const fontSize = {
-  mobile: {
-    input: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 27,
-  },
-};
-
 class Products extends Component {
   state = {
     search: null,

src/views/QR/BookContent/index.js

@@ -1,6 +1,5 @@
-import React, { Component, useState } from "react";
+import React from "react";
 
-import ppt from "../../../assets/icons/ppt.svg";
 import MaterialAudioPlayer from "../VoiceBox/Material-audio-player/index";
 
 import "./index.scss";

src/views/QR/Image/Modal/index.js

@@ -42,7 +42,7 @@ export default function Modal(props) {
           >
             <ChevronRightRoundedIcon style={{ fontSize: 35, color: "white" }} />
           </div>
-          <img src={`https://dnvn.ir/api/v1/file/${selectedImage}`} />
+          <img src={`https://dnvn.ir/api/v1/file/${selectedImage}`} alt="" />
           <div
             className="mobile-qr-image-modal__slide d-flex justify-content-center align-items-center"
             onClick={() => handleNavigation("left", selectedImage)}
@@ -75,7 +75,7 @@ export default function Modal(props) {
           >
             <ChevronRightRoundedIcon style={{ fontSize: 55, color: "white" }} />
           </div>
-          <img src={`https://dnvn.ir/api/v1/file/${selectedImage}`} />
+          <img src={`https://dnvn.ir/api/v1/file/${selectedImage}`} alt="" />
           <div
             className="qr-image-modal__slide d-flex justify-content-center align-items-center"
             onClick={() => handleNavigation("left", selectedImage)}

src/views/QR/Image/index.js

@@ -1,4 +1,4 @@
-import React, { Component, useState } from "react";
+import React, { useState } from "react";
 import Modal from "./Modal/index";
 import PhotoLibraryRoundedIcon from "@material-ui/icons/PhotoLibraryRounded";
 
@@ -46,6 +46,7 @@ export default function QRImage(props) {
           // onClick={() => setOpen(true)}
         >
           <img
+            alt={list[0]}
             className="mobile-qr-image__single"
             src={`https://dnvn.ir/api/v1/file/${list[0]}`}
             onClick={() => setOpen(true)}
@@ -59,11 +60,13 @@ export default function QRImage(props) {
           // onClick={() => setOpen(true)}
         >
           <img
+            alt={list[0]}
             className="mobile-qr-image__two"
             src={`https://dnvn.ir/api/v1/file/${list[0]}`}
             onClick={() => setOpen(true)}
           />
           <img
+            alt={list[1]}
             className="mobile-qr-image__two"
             src={`https://dnvn.ir/api/v1/file/${list[1]}`}
             onClick={() => setOpen(true)}
@@ -75,6 +78,7 @@ export default function QRImage(props) {
         <div className="mobile-qr-image d-flex">
           <div className="mobile-qr-image__two mobile-qr-image__more">
             <img
+              alt={list[0]}
               src={`https://dnvn.ir/api/v1/file/${list[0]}`}
               onClick={() => setOpen(true)}
             />
@@ -88,6 +92,7 @@ export default function QRImage(props) {
               +{list.length - 2}
             </span>
             <img
+              alt={list[1]}
               className="mobile-qr-image__two"
               src={`https://dnvn.ir/api/v1/file/${list[1]}`}
             />
@@ -112,6 +117,7 @@ export default function QRImage(props) {
           // onClick={() => setOpen(true)}
         >
           <img
+            alt={list[0]}
             className="qr-image__single"
             src={`https://dnvn.ir/api/v1/file/${list[0]}`}
             onClick={() => setOpen(true)}
@@ -125,11 +131,13 @@ export default function QRImage(props) {
           // onClick={() => setOpen(true)}
         >
           <img
+            alt={list[0]}
             className="qr-image__two"
             src={`https://dnvn.ir/api/v1/file/${list[0]}`}
             onClick={() => setOpen(true)}
           />
           <img
+            alt={list[1]}
             className="qr-image__two"
             src={`https://dnvn.ir/api/v1/file/${list[1]}`}
             onClick={() => setOpen(true)}
@@ -143,16 +151,19 @@ export default function QRImage(props) {
           // onClick={() => setOpen(true)}
         >
           <img
+            alt={list[0]}
             className="qr-image__three"
             src={`https://dnvn.ir/api/v1/file/${list[0]}`}
             onClick={() => setOpen(true)}
           />
           <img
+            alt={list[1]}
             className="qr-image__three"
             src={`https://dnvn.ir/api/v1/file/${list[1]}`}
             onClick={() => setOpen(true)}
           />
           <img
+            alt={list[2]}
             className="qr-image__three"
             src={`https://dnvn.ir/api/v1/file/${list[2]}`}
             onClick={() => setOpen(true)}
@@ -164,12 +175,14 @@ export default function QRImage(props) {
         <div className="qr-image d-flex">
           <div className="qr-image__three qr-image__more">
             <img
+              alt={list[0]}
               src={`https://dnvn.ir/api/v1/file/${list[0]}`}
               onClick={() => setOpen(true)}
             />
           </div>
           <div className="qr-image__three qr-image__more">
             <img
+              alt={list[1]}
               src={`https://dnvn.ir/api/v1/file/${list[1]}`}
               onClick={() => setOpen(true)}
             />
@@ -182,7 +195,7 @@ export default function QRImage(props) {
             >
               +{list.length - 3}
             </span>
-            <img src={`https://dnvn.ir/api/v1/file/${list[2]}`} />
+            <img alt={list[2]} src={`https://dnvn.ir/api/v1/file/${list[2]}`} />
           </div>
           {open ? (
             <Modal

src/views/QR/Links/index.js

@@ -2,7 +2,6 @@ import React from "react";
 
 import "./index.scss";
 
-const maxDesktopSize = 1250;
 const maxMobileSize = 550;
 
 const fontSize = {

src/views/QR/SubjectsDropdown/index.js

@@ -1,9 +1,7 @@
-import React, { Component, useState } from "react";
+import React, { useState } from "react";
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
-
 import navbarSearch from "../../../assets/icons/navbarSearch.png";
-
 import "./index.scss";
 
 const maxDesktopSize = 1250;
@@ -22,7 +20,9 @@ export default function Dropdown(props) {
   const [search, setSearch] = useState("");
 
   const handleSearch = (val) => {
-    let fakeList = props.subjects.filter((item) => item.name.search(val) !== -1);
+    let fakeList = props.subjects.filter(
+      (item) => item.name.search(val) !== -1
+    );
     setSearchedSubjects(fakeList);
     setSearch(val);
   };
@@ -50,7 +50,11 @@ export default function Dropdown(props) {
       {dropdown ? (
         <>
           <div className="subjects-dropdown__search d-flex">
-            <input type="search" style={{ fontSize: fontSize.desktop.input }} onChange={(e) => handleSearch(e.target.value)} />
+            <input
+              type="search"
+              style={{ fontSize: fontSize.desktop.input }}
+              onChange={(e) => handleSearch(e.target.value)}
+            />
             <img src={navbarSearch} alt="جستجو" />
           </div>
           <ul>

src/views/QR/VideoBox/React-video-js-player/index.js

@@ -1,6 +1,4 @@
 import React, { Component } from "react";
-import VideoPlayer from "react-video-js-player";
-import film from "../../../../assets/Video/film.mp4";
 
 import "./index.scss";
 class VideoApp extends Component {

src/views/QR/VideoBox/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { VideoCard } from "material-ui-player";
 import ReactVideoJsPlayer from "./React-video-js-player/index";
 
 import PlayCircleFilledRoundedIcon from "@material-ui/icons/PlayCircleFilledRounded";

src/views/QR/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 import Navbar from "../Home/Navbar/index";
@@ -9,9 +10,7 @@ import VideoBox from "./VideoBox/index";
 import PDF from "./PDF/index";
 import PowerPoint from "./PowerPoint/index";
 import Links from "./Links/index";
-import SubjectsDropdown from "./SubjectsDropdown/index";
 import BookContent from "./BookContent/index";
-import NightsStayOutlinedIcon from "@material-ui/icons/NightsStayOutlined";
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 
 import { connect } from "react-redux";
@@ -90,7 +89,7 @@ class QR extends Component {
   }
 
   render() {
-    const { QR, qrList, loading } = this.props;
+    const { qrList, loading } = this.props;
     const fontSize = {
       desktop: {
         sidebar: {

src/views/QRScan/LastQr/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
 
 import "./index.scss";

src/views/QRScan/index.js

@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
-import { Link } from "react-router-dom";
 
 import Scanner from "./Scanner/index";
 import LastQr from "./LastQr/index";

src/views/Support/Upload/index.js

@@ -0,0 +1,85 @@
+import React from "react";
+
+import "./index.scss";
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 550;
+
+const fontSize = {
+  desktop: {
+    span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
+  },
+  mobile: {
+    span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30,
+  },
+};
+
+export default function Document(props) {
+  const { parent, name } = props;
+  console.log({ parent, name });
+  return (
+    <>
+      {window.innerWidth < 1000 ? (
+        <div className="support__document d-flex justify-content-center align-items-center mb-3">
+          <input
+            type="file"
+            name={name}
+            onChange={(e) =>
+              parent.onChange(e.target.name, e.target.files[0], "file")
+            }
+          />
+          {parent.state.file ? (
+            <span
+              style={{
+                fontSize: fontSize.mobile.span,
+                width: "100%",
+                textAlign: "center",
+                margin: "auto",
+              }}
+            >
+              {parent.state.file?.name || "تصویر بارگزاری شد"}
+            </span>
+          ) : (
+            <span style={{ fontSize: fontSize.mobile.span }}>
+              در صورت نیاز تصویر مرتبط را انتخاب کنید.
+            </span>
+          )}
+        </div>
+      ) : null}
+      {window.innerWidth > 1000 ? (
+        <div className="support__document d-flex justify-content-center-align-items-center">
+          <input
+            type="file"
+            name={name}
+            onChange={(e) =>
+              parent.onChange(e.target.name, e.target.files[0], "file")
+            }
+          />{" "}
+          {parent.state.file ? (
+            <span
+              style={{
+                fontSize: fontSize.mobile.span,
+                width: "100%",
+                textAlign: "center",
+                margin: "auto",
+              }}
+            >
+              {parent.state.file?.name || "فایل ثبت شد"}
+            </span>
+          ) : (
+            <span
+              style={{
+                fontSize: fontSize.mobile.span,
+                width: "100%",
+                textAlign: "center",
+                margin: "auto",
+              }}
+            >
+              در صورت نیاز تصویر مرتبط را انتخاب کنید.
+            </span>
+          )}
+        </div>
+      ) : null}
+    </>
+  );
+}

src/views/Support/Upload/index.scss

@@ -0,0 +1,29 @@
+.support {
+  &__document {
+    color: gray !important;
+    margin: 10px auto;
+    width: 100%;
+    height: 50px;
+    border-radius: 10px;
+    border: 2px dashed #d1d1d1;
+    position: relative;
+    input {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      opacity: 0;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 50%;
+    }
+    span {
+      color: #afafaf;
+      font-family: numeralLight;
+    }
+  }
+}

src/views/Support/index.js

@@ -1,11 +1,12 @@
 import React, { Component } from "react";
-import { userProduct } from "~/Redux/actions";
+import { userProduct, comment, file } from "~/Redux/actions";
 
 import Navbar from "../Home/Navbar/index";
+
 import Input from "../Contact/Input/index";
 import Select from "../Contact/Select/index";
-
+import Upload from "./Upload";
-import "../Contact/index.scss";
+import "./index.scss";
 import { connect } from "react-redux";
 
 const maxDesktopSize = 1250;
@@ -29,48 +30,94 @@ class Support extends Component {
     name: null,
     cellphone: null,
     unit: null,
-    book: null,
+    bookId: null,
     subject: null,
     text: null,
+    file: null,
+    fileId: null,
   };
   componentDidMount() {
-    console.log(this.props);
+    if (!this.props.myProductList) this.props.getUserProductList({});
-    // this.props?.getList();
+  }
+  onChange = (name, value, type) => {
+    if (type === "file") {
+      this.props.upload({ file: value, target: name });
+    }
+    this.setState({
+      [name]: value,
+    });
+  };
+  async send() {
+    const {
+      submit,
+      status: { userId },
+    } = this.props;
+    const { text, fileId, name, cellphone, unit, bookId, subject } = this.state;
+    await submit({
+      fileId,
+      text,
+      name,
+      cellphone,
+      unit,
+      bookId,
+      subject,
+      userId,
+    });
+    //todo redirectHome
   }
-
   render() {
+    let { status } = this.props;
     return (
       <>
-        <div className="mobile-contact d-flex flex-column align-items-center">
+        <div className="mobile-support d-flex flex-column align-items-center">
-          <Navbar page={"contact"} />
+          <Navbar page={"support"} />
-          <div className="mobile-contact__form d-flex flex-column">
+          <div className="mobile-support__form d-flex flex-column">
             <h1 style={{ fontSize: fontSize.mobile.h1 }}>پشتیبانی</h1>
-            {/* <Input label={"نام ‌و ‌نام خانوادگی"} name={"name"} parent={this} />
+            {status ? null : (
-            <Input label={"شماره تماس"} name={"cellphone"} parent={this} /> */}
+              <>
+                <Input
+                  label={"نام ‌و ‌نام خانوادگی"}
+                  name={"name"}
+                  parent={this}
+                />
+                <Input label={"شماره تماس"} name={"cellphone"} parent={this} />
+              </>
+            )}
             <Select
               name="unit"
-              options={[
+              options={
-                "واحد مورد نظر",
+                status
-                "واحد فروش",
+                  ? ["واحد مورد نظر", "واحد فروش", "واحد محتوایی", "واحد فنی"]
-                "واحد محتوایی",
+                  : ["واحد مورد نظر", "واحد فروش", "واحد فنی"]
-                "واحد فنی",
+              }
-              ]}
               parent={this}
             />
             {this.state.unit === "واحد محتوایی" ? (
               <Select
-                name="book"
+                name="bookId"
                 options={[
+                  "کتاب",
                   ...new Set(
-                    this.props.list?.map((item) => item.product.book.name) || []
+                    this.props.myProductList?.map(
+                      (item) => item.product.book.name
+                    ) || []
                   ),
                 ]}
                 parent={this}
               />
             ) : null}
-            <Input label={"موضوع پیام"} name={"subject"} parent={this} />
+            <Input label={"موضوع "} name={"subject"} parent={this} />
-            <textarea placeholder="متن پیام" name="text" rows="8"></textarea>
+            <Input label={"متن"} name={"text"} parent={this} multiline />
-            <button>ارسال</button>
+            {/* <textarea placeholder="متن " name="text" rows="8" o></textarea> */}
+
+            <Upload
+              type="file"
+              onChange={(e) => this.addFile(e)}
+              parent={this}
+              name="file"
+            />
+
+            <button onClick={() => this.send()}>ارسال</button>
           </div>
         </div>
       </>
@@ -80,7 +127,13 @@ class Support extends Component {
 
 export default connect(
   (state) => ({
-    list: state.userProduct.mylist || [],
+    myProductList: state.userProduct.mylist || [],
+    status: state.user.status,
+    uploadFileId: state.file.supportFileId,
   }),
-  { getList: userProduct.mylist }
+  {
+    getUserProductList: userProduct.mylist,
+    submit: comment.add,
+    upload: file.upload,
+  }
 )(Support);

src/views/Support/index.scss

@@ -0,0 +1,278 @@
+.support {
+  width: 100vw;
+  max-width: 1250px;
+  margin: 0px auto;
+  padding: 0px 10px;
+  direction: rtl;
+  min-height: calc(100vh - 288px);
+  overflow-x: hidden;
+  padding-top: 60px;
+  &__forms {
+    width: 100%;
+    justify-content: space-between;
+    margin-top: 30px;
+    margin-bottom: 80px;
+    &--right {
+      width: 45%;
+      .MuiOutlinedInput-notchedOutline {
+        top: 0px !important;
+      }
+      .MuiOutlinedInput-notchedOutline {
+        border-color: #cecece !important;
+        border-width: 1px !important;
+        color: green !important;
+        border-radius: 10px !important;
+      }
+
+      .MuiOutlinedInput-input {
+        padding: 20px 14px !important;
+        font-size: calc(100vw / 85) !important;
+      }
+      .MuiInputLabel-outlined {
+        font-family: numeralLight !important;
+        display: inline !important;
+        position: absolute;
+        text-align: right !important;
+        right: 10px;
+        top: 12px;
+        padding: 0px !important;
+        transform: translate(0px, 0px) scale(1) !important;
+      }
+      .MuiInputLabel-shrink {
+        text-align: right !important;
+        display: inline;
+        position: absolute;
+        right: -5px;
+        top: -8px;
+        transform: translate(0px, 0px) scale(0.75) !important;
+        padding-right: 15px !important;
+      }
+
+      label {
+        background-color: white;
+        max-width: 120px;
+        text-align: center;
+        color: #797979 !important;
+        letter-spacing: -1px;
+      }
+      .Mui-focused {
+        color: rgba(0, 0, 0, 0.54) !important;
+        border-color: #c4c4c5 !important;
+      }
+      h1 {
+        letter-spacing: -2px;
+        color: #6cbe44;
+        font-family: numeralMedium;
+        font-size: calc(100vw / 40);
+      }
+      p {
+        font-family: numeralLight;
+        font-size: calc(100vw / 95);
+        color: #6f7074;
+      }
+
+      button {
+        align-self: flex-start;
+        margin-top: 30px;
+        font-family: numeralLight;
+        text-decoration: none;
+        color: white;
+        background-color: #6cbe44;
+        border-radius: 6px;
+        padding: 5px 25px;
+        font-size: calc(100vw / 90);
+        max-width: 110px;
+        border: 0px;
+        &:hover {
+          color: white;
+        }
+      }
+
+      .MuiFormControl-root {
+        select {
+          font-family: numeralLight;
+          height: 100%;
+          direction: rtl;
+          border: 1px solid #cecece !important;
+          text-align: center !important;
+          border-radius: 10px !important;
+          color: #76797e !important;
+          &:focus {
+            background-color: white !important;
+          }
+          option {
+            padding: 5px !important;
+          }
+        }
+        .MuiNativeSelect-icon {
+          display: none;
+        }
+        .MuiNativeSelect-select {
+          padding: 8px 10px 8px 100px !important;
+        }
+      }
+    }
+    &--left {
+      width: 45%;
+      height: 100%;
+      p {
+        font-family: numeralLight;
+        font-size: calc(100vw / 95);
+        margin-bottom: 0px;
+        color: #6f7074;
+      }
+      span {
+        font-family: numeralLight;
+        font-size: calc(100vw / 95);
+        margin-bottom: 0px;
+        color: #6f7074;
+        margin-right: 5px;
+      }
+      .contact__map {
+        width: 100%;
+        height: 430px;
+        border-radius: 20px;
+        img {
+          transform: scale(0.4);
+        }
+      }
+    }
+  }
+}
+
+.mobile-support {
+  width: 100vw;
+  max-width: 550px;
+  margin: 0px auto;
+  padding: 0px 10px;
+  direction: rtl;
+  overflow-x: hidden;
+  padding-top: 70px;
+  padding-bottom: 50px;
+  &__form {
+    width: 100%;
+    justify-content: space-between;
+    margin-top: 20px;
+    margin-bottom: 20px;
+
+    .MuiOutlinedInput-notchedOutline {
+      top: 0px !important;
+    }
+    .MuiOutlinedInput-notchedOutline {
+      border-color: #cecece !important;
+      border-width: 1px !important;
+      color: green !important;
+      border-radius: 10px !important;
+    }
+
+    .MuiOutlinedInput-input {
+      padding: 20px 14px !important;
+    }
+    .MuiInputLabel-outlined {
+      font-family: numeralLight !important;
+      display: inline !important;
+      position: absolute;
+      text-align: right !important;
+      right: 10px;
+      top: 12px;
+      padding: 0px !important;
+      transform: translate(0px, 0px) scale(1) !important;
+    }
+    .MuiInputLabel-shrink {
+      text-align: right !important;
+      display: inline;
+      position: absolute;
+      right: -5px;
+      top: -8px;
+      transform: translate(0px, 0px) scale(0.75) !important;
+      padding-right: 0px !important;
+      width: fit-content;
+      padding: 0px 6px !important;
+    }
+
+    label {
+      background-color: white;
+      max-width: 120px;
+      text-align: center;
+      color: #797979 !important;
+      letter-spacing: -1px;
+      font-family: numeralLight !important;
+      font-size: 14px;
+    }
+    .Mui-focused {
+      color: rgba(0, 0, 0, 0.54) !important;
+      border-color: #c4c4c5 !important;
+    }
+    h1 {
+      letter-spacing: -2px;
+      color: #6cbe44;
+      font-family: numeralMedium;
+    }
+    p {
+      font-family: numeralLight;
+      color: #6f7074;
+    }
+
+    button {
+      align-self: flex-start;
+      margin-top: 30px;
+      font-family: numeralLight;
+      text-decoration: none;
+      color: white;
+      background-color: #6cbe44;
+      border-radius: 6px;
+      padding: 8px 25px;
+      width: 100%;
+      border: 0px;
+      &:hover {
+        color: white;
+      }
+    }
+
+    .MuiFormControl-root {
+      select {
+        font-family: numeralLight;
+        height: 100%;
+        direction: rtl;
+        border: 1px solid #cecece !important;
+        text-align: center !important;
+        border-radius: 10px !important;
+        color: #76797e !important;
+        &:focus {
+          background-color: white !important;
+        }
+        option {
+          padding: 5px !important;
+        }
+      }
+      .MuiNativeSelect-icon {
+        display: none;
+      }
+      .MuiNativeSelect-select {
+        padding: 8px 10px 8px 100px !important;
+      }
+    }
+  }
+  &__address {
+    width: 100%;
+    p {
+      font-family: numeralLight;
+      margin-bottom: 0px;
+      color: #6f7074;
+    }
+    span {
+      font-family: numeralLight;
+      margin-bottom: 0px;
+      color: #6f7074;
+      margin-right: 5px;
+    }
+    &--map {
+      width: 100%;
+      height: 180px;
+      border-radius: 20px;
+      img {
+        transform: scale(0.4);
+      }
+    }
+  }
+}