TypeError: Cannot read property 'any' of undefined

[omarkamelmostafa]

/* cSpell:disable */
import React, { useRef, useState, useEffect } from 'react';
import Autosuggest from 'react-autosuggest';
// Redux Stuff
import { connect } from 'react-redux';
import { onChange, onSuggestionsFetchRequested, onSuggestionsClearRequested } from './../../../../redux/actions';
import PropTypes from 'prop-types';
// MUI Stuff
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import CircularProgress from '@material-ui/core/CircularProgress';
import Grow from '@material-ui/core/Grow';
import Paper from '@material-ui/core/Paper';
import Popper from '@material-ui/core/Popper';
import MenuItem from '@material-ui/core/MenuItem';
import MenuList from '@material-ui/core/MenuList';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
import HighlightOffIcon from '@material-ui/icons/HighlightOff';

const SearchInput = props => {


  // Search Menu Popper
  //#region
  const [isOpenList, setIsOpenList] = useState(false);
  const anchorRef = useRef(null);

  const handleToggle = () => setIsOpenList((prevOpen) => !prevOpen);

  const handleCloseList = (event) => setIsOpenList(false);

  const handleClose = (event) => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }
    setIsOpenList(false);
    setSearchField(event.target.innerText.toLowerCase());
  };

  function handleListKeyDown(event) {
    if (event.key === 'Tab') {
      event.preventDefault();
      setIsOpenList(false);
    }
  }

  // return focus to the button when we transitioned from !open -> open
  const prevOpen = useRef(isOpenList);
  useEffect(() => {
    if (prevOpen.current === true && isOpenList === false) {
      anchorRef.current.focus();
    }

    prevOpen.current = isOpenList;
  }, [isOpenList]);
  //#endregion
  // End Search Menu Popper

  // Search latest trends Suggestions
  //#region 
  var TxtRotate = function (el, toRotate, period) {
    this.toRotate = toRotate;
    this.el = el;
    this.loopNum = 0;
    this.period = parseInt(period, 10) || 2000;
    this.txt = '';
    this.tick();
    this.isDeleting = false;
  };

  TxtRotate.prototype.tick = function () {
    var i = this.loopNum % this.toRotate.length;
    var fullTxt = this.toRotate[i];

    if (this.isDeleting) {
      this.txt = fullTxt.substring(0, this.txt.length - 1);
    } else {
      this.txt = fullTxt.substring(0, this.txt.length + 1);
    }

    this.el.innerHTML = '<span className="wrap">' + this.txt + '</span>';

    var that = this;
    var delta = 300 - Math.random() * 100;

    if (this.isDeleting) { delta /= 2; }

    if (!this.isDeleting && this.txt === fullTxt) {
      delta = this.period;
      this.isDeleting = true;
    } else if (this.isDeleting && this.txt === '') {
      this.isDeleting = false;
      this.loopNum++;
      delta = 500;
    }

    setTimeout(function () {
      that.tick();
    }, delta);
  };

  useEffect(() => {
    window.onload = function () {
      var elements = document.getElementsByClassName('txt-rotate');
      for (var i = 0; i < elements.length; i++) {
        var toRotate = elements[i].getAttribute('data-rotate');
        var period = elements[i].getAttribute('data-period');
        if (toRotate) {
          new TxtRotate(elements[i], JSON.parse(toRotate), period);
        }
      }
      // INJECT CSS
      var css = document.createElement("style");
      css.type = "text/css";
      css.innerHTML = ".txt-rotate > .wrap { border-left: 1px solid #0d0c22; padding-left: 2px }";
      document.body.appendChild(css);
    };
  }, [])
  //#endregion
  // End latest trends Suggestions


  // Search InputHandling
  //#region 
  const [SearchField, setSearchField] = useState('news');
  const { value, suggestions, isLoading, onChange, onSuggestionsFetchRequested, onSuggestionsClearRequested } = props;
  const status = (isLoading ? 'Loading...' : 'Type to load suggestions');
  const inputProps = {
    placeholder: "أبحث.....",
    value,
    onChange
  };

  /* ----------- */
  /*    Utils    */
  /* ----------- */

  function getSectionSuggestions(section) {
    return section.languages;
  }

  function renderSectionTitle(section) {
    return (
      <strong>{section.title}</strong>
    );
  }



  const getSuggestionValue = (suggestion) => suggestion.name;

  const renderSuggestion = (suggestion) => {
    return (
      <span>{suggestion.name}</span>
    );
  };


  const SearchRef = useRef(null);

  // const [isShowIcon, setIsShowIcon] = useState(false);
  // const showIcon = isShowIcon ? 'block' : 'none';
  // const clearSearchContent = () => {
  //   SearchRef.current.value = '';
  //   SearchRef.current.focus();
  //   setIsShowIcon(false);
  // };
  //#endregion
  // End Search InputHandling


  return (
    <div className='center-container'>

      <div className='search-input-container'>

        <div className="search-input-with-dropdown">
          <div className="left-side-wrapper">

            {SearchField === 'news' ? (
              <SearchOutlinedIcon />
            ) : (
                <IconButton>
                  <Typography variant='h5' component="h5" >#</Typography>
                </IconButton>
              )}

            <form className='search-form'>

              <div className="status">
                <strong>Status:</strong> {status}
              </div>

              <Autosuggest
                suggestions={suggestions}
                onSuggestionsFetchRequested={onSuggestionsFetchRequested}
                onSuggestionsClearRequested={onSuggestionsClearRequested}
                getSuggestionValue={getSuggestionValue}
                renderSuggestion={renderSuggestion}
                inputProps={inputProps} />

              <p className='search-typical-suggestions'>
                <span
                  className="txt-rotate"
                  data-period="1000"
                  data-rotate='[ 
                      "مرتضي منصور يعلن عودتة رئيسا للزمالك.", 
                      "أخبار الزمالك", 
                      "الزمالك اليوم",
                      "الزمالك وسموحة",
                      "تجديد عقد فرجاني ساسي" ]'>
                </span>
              </p>
              <div className='search-clear-content'>
                {/* <IconButton onClick={clearSearchContent}>
                  <HighlightOffIcon />
                </IconButton> */}
              </div>
            </form>
          </div>

          <div className="vertical-divider"></div>

          <div className='search-fields-list'>
            <Button
              ref={anchorRef}
              aria-controls={isOpenList ? 'menu-list-grow' : undefined}
              aria-haspopup="true"
              onClick={handleToggle}
            >
              {SearchField}
              <ExpandMoreIcon />
            </Button>
            <Popper open={isOpenList} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
              {({ TransitionProps, placement }) => (
                <Grow
                  {...TransitionProps}
                  style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
                >
                  <Paper>
                    <ClickAwayListener onClickAway={handleCloseList}>
                      <MenuList autoFocusItem={isOpenList} id="menu-list-grow" onKeyDown={handleListKeyDown}>
                        <MenuItem onClick={handleClose}>News</MenuItem>
                        <MenuItem onClick={handleClose}>Hashtags</MenuItem>
                      </MenuList>
                    </ClickAwayListener>
                  </Paper>
                </Grow>
              )}
            </Popper>
          </div>

        </div>
      </div>
    </div>
  );
};

// PropTypes  
// SearchInput.propTypes = {
//   value: PropTypes.string.isRequired,
//   suggestions: PropTypes.array.isRequired,
//   isLoading: PropTypes.bool.isRequired,
//   onChange: PropTypes.func.isRequired,
//   onSuggestionsFetchRequested: PropTypes.func.isRequired,
//   onSuggestionsClearRequested: PropTypes.func.isRequired,
//   section: PropTypes.any.isRequired,
// };

// Pull state from Redux Store To Component
const mapStateToProps = (state) => {
  const { value, suggestions, isLoading } = state.suggestions;
  return {
    value,
    suggestions,
    isLoading
  };
};

// Push Actions To Props
const mapActionsToProps = {
  onChange,
  onSuggestionsFetchRequested,
  onSuggestionsClearRequested,
};

export default connect(
  mapStateToProps,
  mapActionsToProps
)(SearchInput);