@fortawesome/free-solid-svg-icons#faSearch JavaScript Examples

Research = ({
  markdown,
}) => (
  <section
    className="research"
    id="research"
  >
    <h2>
      <FontAwesomeIcon icon={faSearch} />
      Research
    </h2>
    <ul className="research__list">
      {
        markdown.map((research) => (
          <li key={research.node.frontmatter.title}>
            {
              research.node.frontmatter.title
              && <h3>{research.node.frontmatter.title}</h3>
            }
            <div>
              {
                research.node.frontmatter.image
                && (
                  <GatsbyImage
                    alt={research.node.frontmatter.title}
                    className="research__list-image"
                    image={research.node.frontmatter.image.childImageSharp.gatsbyImageData}
                  />
                )
              }
              <div dangerouslySetInnerHTML={{ __html: research.node.html }} />
            </div>
          </li>
        ))
      }
    </ul>
  </section>
)

library.add(
  far,
  fas,
  faBookReader,
  faArrowLeft,
  faArrowRight,
  faQuestionCircle,
  faCopy,
  faSignOutAlt,
  faEdit,
  faAngleDown,
  faExternalLinkAlt,
  fab,
  faEthereum,
  faTwitter,
  faDiscord,
  faUnlink,
  faSearch,
  faFortAwesome,
  faExchangeAlt,
  faChartPie,
  faGlobe,
  faDonate,
  faDollarSign,
);

SearchBar = ({handleSearch, input, placeHolder, header}) => {
  return (
       <div>
          {header ? <div className="header-component">
                      <h2><FontAwesomeIcon icon={faSearch} className="icon-h2" /> {header}</h2></div> 
          : null}
          <div className="search-box">
          <input
              className="search-input"
              type="text"
              placeholder={placeHolder}
              value={input}
              onChange={(e) => handleSearch(e.target.value)} 
          />
          <FontAwesomeIcon
              onClick={() => {}}
              className="icon"
              icon={faSearch} 
          />
          </div>
        </div>
  )
}

navbar.args = {
  firstName: "Dress",
  secondName: "Fit",
  categories: [
    {
      id: 1,
      route: "/",
      name: "Home",
    },
    {
      id: 2,
      route: "/women",
      name: "Women",
    },
    {
      id: 3,
      route: "/men",
      name: "Men",
    },
    {
      id: 4,
      route: "/kids",
      name: "Baby & Kids",
    },
    {
      id: 5,
      route: "/accessories",
      name: "Accessories",
    },
  ],
  iconList: [
    { icon: faSearch, link: "/search", alt: "search" },
    { icon: faShoppingCart, link: "/cart", alt: "cart" },
    { icon: faUser, link: "/user", alt: "user" },
  ],
}

Demo404 = () => {
  return (
    <>
      <LteContentHeader title='404 Error Page' />
      <LteContent>
        <div className='error-page'>
          <LteText tag='h2' color='warning' className='headline'>
            404
          </LteText>

          <div className='error-content'>
            <h3>
              <FontAwesomeIcon icon={faExclamationTriangle} className='text-warning' />
              <span> Oops! Page not found.</span>
            </h3>
            <p>
              <span>We could not find the page you were looking for. Meanwhile, you may </span>
              <Link to='/'>may return to dashboard</Link>
              <span> or try using the search form.</span>
            </p>

            <Form className='search-form'>
              <InputGroup>
                <Input type='text' placeholder='Search' />
                <InputGroupAddon addonType='append'>
                  <Button type='submit' name='submit' color='warning'>
                    <FontAwesomeIcon icon={faSearch} />
                  </Button>
                </InputGroupAddon>
              </InputGroup>
            </Form>
          </div>
        </div>
      </LteContent>
    </>
  );
}

NavSearch = () => {
  return (
    <Form inline className='ml-3'>
      <InputGroup size='sm'>
        <Input className='form-control-navbar' type='search' placeholder='Search' aria-label='Search' />
        <InputGroupAddon addonType='append'>
          <button className='btn btn-navbar' type='submit'>
            <FontAwesomeIcon icon={faSearch} />
            <span className='d-none'>Search</span>
          </button>
        </InputGroupAddon>
      </InputGroup>
    </Form>
  );
}

render() {
    const {searchInput, isAllActive, isV1Active, isV2Active, } = this.state;
    const {currentViewPoolType} = this.props;

    return (
      <div>
      <Row className="toolbar-row">
        <Col lg={2}>
              <div className="h5 page-header left-align-text">View pools</div>
        </Col>
        <Col lg={6}>
          <Form.Control type="text" placeholder="search by pool token name or symbol" onChange={this.searchInputChanged} value={searchInput}/>
          <FontAwesomeIcon icon={faSearch} className="search-icon"/>
        </Col>
        <Col lg={4}>
          <ButtonGroup aria-label="Basic example">
              <Button className={`explore-toolbar-btn ${isAllActive}`} onClick={()=>this.setPoolTypeSelected('all')}>All Pools</Button>
              <Button className={`explore-toolbar-btn ${isV1Active}`} onClick={()=>this.setPoolTypeSelected('v1')}>V1 Pools</Button>
              <Button className={`explore-toolbar-btn ${isV2Active}`} onClick={()=>this.setPoolTypeSelected('v2')}>V2 Pools</Button>
            </ButtonGroup>
        </Col>
      </Row>
      </div>
      
      )
  }

library.add(
  faBars,
  faTimes,
  faChevronDown,
  faChevronUp,
  faCalendarAlt,
  faTelegramPlane,
  faTwitter,
  faMediumM,
  faRedditAlien,
  faQuestionCircle,
  faCheck,
  faSearch,
);

render(){
    return(
        <div className="NavR2_topnav">
 <Link to="/display" className ="NavR2_anchor"  style={{ textDecoration: 'none' }} >NAME</Link>
  <Link to="/CompanyMain"  className ="NavR2_anchor" style={{ textDecoration: 'none' }} >APPLICANTS</Link>
  
  <form>
 
  <div className="NavR2_search-container">
  <input type="text"  placeholder="Search"/>
  <FontAwesomeIcon icon={faSearch} className="searchIcon"  />
  </div>
  </form>
  <div className="NavR_logout" onClick={this.handleClick}>
  <FontAwesomeIcon icon={faSignOutAlt} className="logoutIcon" />
  </div>


</div>

    )}

render(){
    return(
        <div className="NavR_topnav">
   <Link to="/add" className ="NavR_anchor"style={{ textDecoration: 'none' }} >RECRUITERS</Link>
  <Link to="/Tpo2" className ="NavR_anchor"style={{ textDecoration: 'none' }} >STUDENTS</Link>
  <form>

  <div className="NavR_search-container">
  <input type="text"  placeholder="Search"/>
  <FontAwesomeIcon icon={faSearch} className="searchIcon" />
  </div>
 
  </form>
  <div className="NavR_logout" onClick={this.handleClick}>
  <FontAwesomeIcon icon={faSignOutAlt}  className="logoutIcon" />
  </div>

   {/* <div className="search-container">
    <form >
    <div className="inner-addon right-addon">
    <FontAwesomeIcon icon={faCoffee} />
    <input type="text"  placeholder="Name:"  name="name"  required/>
</div>  
      
     </form>
  </div>  */}
</div>

    )}

export default function Search() { 
  const router = useRouter()
  const [ searchValue, setSearchValue ] = useState('')
  const inputRef = useRef(null)

  useEffect(() => {
    if (location.pathname.includes('search')) {
      inputRef.current.value = location.pathname.substr(location.pathname.lastIndexOf('/') + 1)
    } else {
      inputRef.current.value = ''
    }
  }, [])

  const search = e => {
    e.preventDefault()
    if (searchValue !== '') {
      router.push(`/search/${searchValue.trim()}`)
    } else { return null }
  }

  return (
    <form id="formSearchBar" onSubmit={search}>
      <input 
        aria-label="Search graph" 
        type="search" 
        name="search" 
        ref={inputRef} 
        onChange={e => setSearchValue(String(e.target.value))}
      />
      <button type="submit" value="submit" form="formSearchBar" aria-label="Search button">
        <FontAwesomeIcon icon={faSearch} />
      </button>
    </form>
  )
}

render() {
    return (
      <div className={`ml-auto ${styles["searchCategory-component"]}`}>
        <form
          onSubmit={this.onFormSubmit}
          className={styles["searchCategory-component__form"]}
        >
          <input
            type="text"
            value={this.state.searchField}
            onChange={(event) => this.onTextChange(event.target.value)}
            className={` ${styles["searchCategory-component__input"]}`}
            placeholder="What are you looking for? "
            aria-label="Search"
          />
          <button
            onClick={this.onFormSubmit}
            className={styles["searchCategory-component__sideSearch"]}
          >
            <FontAwesomeIcon
              icon={faSearch}
              className={styles["searchCategory-component__icon"]}
            />
            <span className="sr-only">Search button</span>
          </button>
        </form>
      </div>
    );
  }

render() {
    return (
      <Layout>
        <div className="container">
          <div className="wrapper">
            <div className="slogan">
              <h1>Don't Be a Fool, </h1>
              <h1>
                Check Before You &nbsp;
                <div className="green">
                  <Typewriter
                    options={{
                      strings: ["Buy", "Rent"],
                      autoStart: true,
                      loop: true,
                    }}
                  />
                </div>
              </h1>
            </div>
            <div className="search-inst">
              <Typewriter
                options={{
                  strings: [
                    "Type in address, street name, and street suffix",
                    "then press the button!",
                  ],
                  autoStart: true,
                  loop: true,
                }}
              />
            </div>

            <div className="search-box">
              <input
                className="search-txt"
                type="text"
                name=""
                placeholder="Type to search"
                onKeyPress={(event) => {
                  if (event.key === "Enter") {
                    this.handleSearch();
                  }
                }}
              />
              <a className="search-btn" href="#" onClick={this.handleSearch}>
                <FontAwesomeIcon icon={faSearch} />
              </a>
            </div>
            <div className="map">{this.renderLeaflet()}</div>
          </div>
        </div>
      </Layout>
    );
  }

function SearchInner(
  { placeholder, value, onChange, onClearClick, className, disabled, ...rest },
  ref
) {
  const cName = `${prefix}-search`;

  const isControlled = useMemo(() => typeof value !== "undefined", []);

  const [searchValue, setSearchValue] = useControlledOrNot("", value);

  const [clearActive, setClearActive] = useState(
    isControlled ? searchValue.length > 0 : false
  );

  if (isControlled !== (typeof value !== "undefined")) {
    throw "Search: Changing from controlled to uncontrolled component and vice versa is not allowed";
  }

  const inputRef = useRef(undefined);

  // Public API
  const focus = () => {
    if (typeof inputRef.current !== "undefined") {
      inputRef.current.focus();
    }
  };

  // Return object with public Api
  useImperativeHandle(ref, () => ({
    focus,
  }));

  const handleChange = (e) => {
    const value = e.target.value;
    setClearActive(value.length > 0);
    if (isControlled === false) {
      setSearchValue(value);
    }
    onChange(value);
  };

  const handleClearClick = () => {
    if (isControlled === false) {
      setSearchValue("");
    }

    setClearActive(false);

    onClearClick();
  };

  return (
    <div
      {...rest}
      className={classNames(
        cName,
        { [`${cName}--disabled`]: disabled },
        className
      )}
    >
      <FontAwesomeIcon icon={faSearch} className={`${cName}__search-icon`} />
      <input
        ref={inputRef}
        type="text"
        className={`${cName}__input`}
        placeholder={placeholder}
        onChange={handleChange}
        disabled={disabled}
        value={searchValue}
      />
      <FontAwesomeIcon
        icon={faTimes}
        className={classNames(`${cName}__clear-icon`, {
          [`${cName}__clear-icon--active`]: clearActive,
        })}
        onClick={handleClearClick}
      />
    </div>
  );
}

FormIcon = () => (
  <FontAwesomeIcon
    className={styles.icon}
    icon={faSearch}
    data-test="search-form__icon"
  />
)

SearchBar = () => {
  const { searchQuery, setSearchQuery, setSearchResults, setIsLoading } = useContext(
    CourseContext
  );
  const [searchAction, setSearchAction] = useState(undefined);
  const [searchSuggestion] = useState(
    search_suggestions[Math.floor(Math.random() * (search_suggestions.length - 1 + 1))]
  );

  useEffect(() => {
    clearTimeout(searchAction);
    if (searchQuery.length > 0) {
      setIsLoading(true);
      setSearchAction(
        setTimeout(async () => {
          try {
            setIsLoading(true);
            const data = await searchCourses(searchQuery);
            setIsLoading(false);
            setSearchResults(data);
          } catch (error) {
            setIsLoading(false);
            // eslint-disable-next-line no-console
            console.error(error);
          }
        }, 400)
      );
    } else {
      setIsLoading(false);
      setSearchAction(setTimeout(() => setSearchResults(undefined), 1500));
    }
  }, [searchQuery]);

  return (
    <section className="h-16 lg:w-4/12 md:w-5/12 sm:w-6/12 w-10/12 bg-secondary">
      <div className="flex mx-auto mt-20">
        <input
          id="search-input"
          className="w-full h-12 rounded-l-full mb-8 text-xl px-8 shadow-lg focus:shadow-xl focus:outline-none searchbox"
          type="search"
          placeholder={searchSuggestion}
          value={searchQuery}
          onChange={({ target }) => {
            setSearchQuery(target.value);
          }}
        />
        <button className="search-icon shadow-lg right-0 w-16 h-12 bg-primary text-secondary-accent pr-1 rounded-r-full focus:outline-none">
          <FontAwesomeIcon icon={faSearch} />
        </button>
      </div>
    </section>
  );
}

library.add(
    faArrowAltCircleUp,
    faCog,
    faEdit,
    faEye,
    faEyeSlash,
    faList,
    faPause,
    faPlay,
    faPlus,
    faSearch,
    faTachometerAlt,
    faTimes,
    faTimesCircle,
    faTrash,
    faCheckCircle,
    faStream,
    faSave,
    faExclamationCircle,
    faBullhorn,
    faArrowsAltV,
    faUnlink,
    faQuestionCircle,
    faImages,
    faUpload,
    faCopy,
    faCheck,
    faFile,
    faAward,
    faLink,
    faChevronDown,
    faSignOutAlt,
    faPen,
    faExternalLinkSquareAlt,
    faSpinner,
    faUndo,
    faPlusCircle,
    faAngleDown,
    faLink,
);

export default function SearchBar({ onSubmit }) {
  const [lastViewDate, setStartDate] = useState(null);
  const [searchInput, setSearchInput] = useState('');

  const inputUpdated = (e) => {
    const { value } = e.target;
    setSearchInput(value);
  };

  const clearSearch = () => {
    setSearchInput('');
    onSubmit('', lastViewDate);
  };

  const clearDate = () => {
    setStartDate(null);
    onSubmit(searchInput, null);
  };

  return (
    <div className="search-form">
      <form onSubmit={(e) => { e.preventDefault(); }}>
        <span className="search-input-container">
          <FontAwesomeIcon className="search-icon" icon={faSearch} />
          <input
            className="form-control"
            id="searchbarform"
            name="search"
            onInput={inputUpdated}
            placeholder="Search for a file..."
            type="input"
            value={searchInput}
          />
          {searchInput.length > 0 && (
            <button type="button" className="clear-btn clear-search" onClick={clearSearch}>X</button>
          )}
        </span>
        <span>
          <DatePicker
            selected={lastViewDate}
            onChange={(date) => { setStartDate(date); onSubmit(searchInput, date);}}
            placeholderText="Last viewed after..."
            closeOnScroll
          />
          {lastViewDate && (
            <button type="button" className="clear-btn clear-date" onClick={clearDate}>X</button>
          )}
        </span>
        <button type="submit" style={{ display: 'none' }} onClick={() => onSubmit(searchInput, lastViewDate)}>Search</button>
      </form>
    </div>
  );
}

SearchBox = ({
  currentRefinement,
  refine,
  onFocus = () => {},
  onNavigate = () => {},
  onEnter = () => {},
}) => {
  const handleKeyDown = event => {
    switch (event.keyCode) {
      case UP_KEY:
        event.preventDefault()
        onNavigate(-1)
        break
      case DOWN_KEY:
        event.preventDefault()
        onNavigate(1)
        break
      case ENTER_KEY:
        event.preventDefault()
        onEnter()
        break
      default:
      // Do nothing, user is probably just typing their query
    }
  }

  return (
    <div className="flex items-center relative">
      <FontAwesomeIcon
        icon={faSearch}
        className="ml-4 text-gray-500 pointer-events-none absolute left-0"
      />
      <input
        value={currentRefinement}
        className="transition-colors duration-100 ease-in-out focus:outline-0 border border-transparent focus:bg-white focus:border-gray-300 placeholder-gray-600 rounded-lg bg-gray-200 py-2 pr-4 pl-10 block w-full appearance-none leading-normal"
        onChange={event => refine(event.currentTarget.value)}
        onFocus={onFocus}
        onKeyDown={handleKeyDown}
        placeholder="Search Good Here"
      />
    </div>
  )
}

SearchBox = ({
  currentRefinement,
  refine,
  onFocus = () => {},
  onNavigate = () => {},
  onEnter = () => {},
}) => {
  const handleKeyDown = event => {
    switch (event.keyCode) {
      case UP_KEY:
        event.preventDefault()
        onNavigate(-1)
        break
      case DOWN_KEY:
        event.preventDefault()
        onNavigate(1)
        break
      case ENTER_KEY:
        event.preventDefault()
        onEnter()
        break
      default:
      // Do nothing, user is probably just typing their query
    }
  }

  return (
    <div className="flex items-center relative">
      <FontAwesomeIcon
        icon={faSearch}
        className="ml-4 text-gray-500 pointer-events-none absolute left-0"
      />
      <input
        value={currentRefinement}
        className="transition-colors duration-100 ease-in-out focus:outline-0 border border-transparent focus:bg-white focus:border-gray-300 placeholder-gray-600 rounded-lg bg-gray-200 py-2 pr-4 pl-10 block w-full appearance-none leading-normal"
        onChange={event => refine(event.currentTarget.value)}
        onFocus={onFocus}
        onKeyDown={handleKeyDown}
        placeholder="Search Climatescape"
      />
    </div>
  )
}

TokenModal = ({
    loading,
    open,
    onClose,
    onRefresh,
    onChange,
    supportedTokens,
    balances,
    selected,
    loggedIn,
}) => {
    const { formatMessage, formatNumber } = useIntl();
    const contentRef = useRef(null);

    const [searchTerm, setSearchTerm] = useState("");
    const [tokenDataset, setTokenDataset] = useState(supportedTokens);

    useEffect(() => {
        let dataset = supportedTokens;
        if (searchTerm) {
            dataset = dataset.filter(({ symbol, name, address }) => {
                const lowerCasedSearchTerm = searchTerm.toLowerCase();
                return (
                    symbol.toLowerCase().includes(lowerCasedSearchTerm) ||
                    name.toLowerCase().includes(lowerCasedSearchTerm) ||
                    address.toLowerCase().includes(lowerCasedSearchTerm)
                );
            });
        }
        if (balances) {
            dataset = dataset.sort(
                ({ address: firstAddress }, { address: secondAddress }) => {
                    const wrappedFirstTokenBalance = balances.find(
                        (balance) => balance.address === firstAddress
                    );
                    const wrappedSecondTokenBalance = balances.find(
                        (balance) => balance.address === secondAddress
                    );
                    const firstTokenBalance = new BigNumber(
                        wrappedFirstTokenBalance &&
                        wrappedFirstTokenBalance.balance
                            ? wrappedFirstTokenBalance.balance
                            : "0"
                    );
                    const secondTokenBalance = new BigNumber(
                        wrappedSecondTokenBalance &&
                        wrappedSecondTokenBalance.balance
                            ? wrappedSecondTokenBalance.balance
                            : "0"
                    );
                    return secondTokenBalance
                        .minus(firstTokenBalance)
                        .toNumber();
                }
            );
        }
        setTokenDataset(dataset);
    }, [searchTerm, supportedTokens, balances]);

    const getClickHandler = (token) => () => {
        onChange(token);
        handleLocalClose();
    };

    const handleLocalClose = useCallback(() => {
        onClose();
        setTimeout(() => {
            setTokenDataset(supportedTokens);
            setSearchTerm("");
        }, OPEN_CLOSE_ANIMATION_DURATION);
    }, [onClose, supportedTokens]);

    const handleLocalCloseOnOutsideClick = useCallback(
        (event) => {
            if (!contentRef.current.contains(event.target)) {
                handleLocalClose();
            }
        },
        [handleLocalClose]
    );

    const handleSearchTermChange = useCallback((event) => {
        setSearchTerm(event.target.value);
    }, []);

    return (
        <>
            <FullScreenOverlay open={open} />
            <RootFlex open={open} onClick={handleLocalCloseOnOutsideClick}>
                <ContentFlex
                    ref={contentRef}
                    maxWidth="440px"
                    flexDirection="column"
                >
                    <SearchFlex mt="4px">
                        <Box mr={3}>
                            <FontAwesomeIcon icon={faSearch} />
                        </Box>
                        <Box flex={1}>
                            <Input
                                value={searchTerm}
                                onChange={handleSearchTermChange}
                                placeholder={formatMessage({
                                    id: "token.modal.searchbar.placeholder",
                                })}
                            />
                        </Box>
                        {loggedIn && (
                            <PointableBox ml={3} p={2} minWidth="auto">
                                <FontAwesomeIcon
                                    icon={faSync}
                                    onClick={onRefresh}
                                />
                            </PointableBox>
                        )}
                        <PointableBox ml={3} p={2}>
                            <FontAwesomeIcon
                                icon={faTimes}
                                onClick={handleLocalClose}
                            />
                        </PointableBox>
                    </SearchFlex>
                    {loading ? (
                        <Flex justifyContent="center" mb={4} mt={2}>
                            <Box>
                                <Spinner size={40} />
                            </Box>
                        </Flex>
                    ) : (
                        <>
                            <ListFlex
                                flexDirection="column"
                                px="12px"
                                py="12px"
                            >
                                {tokenDataset.length > 0 ? (
                                    tokenDataset.map((token) => {
                                        const { address, symbol, name } = token;
                                        const currentlySelected =
                                            selected === token;
                                        const wrappedBalance = balances.find(
                                            (balance) =>
                                                balance.address === address
                                        );
                                        const etherBalance = new BigNumber(
                                            wrappedBalance &&
                                            wrappedBalance.balance
                                                ? wrappedBalance.balance
                                                : "0"
                                        );
                                        return (
                                            <RowFlex
                                                key={address}
                                                alignItems="center"
                                                py={16}
                                                pl="12px"
                                                pr="16px"
                                                onClick={getClickHandler(token)}
                                                selected={currentlySelected}
                                            >
                                                <Box mr={3}>
                                                    <TokenIcon
                                                        address={address}
                                                        size={32}
                                                    />
                                                </Box>
                                                <Flex
                                                    alignItems="center"
                                                    justifyContent="space-between"
                                                    flex={1}
                                                >
                                                    <Flex flexDirection="column">
                                                        <PrimaryTextBox
                                                            mb="2px"
                                                            selected={
                                                                currentlySelected
                                                            }
                                                        >
                                                            {symbol}
                                                        </PrimaryTextBox>
                                                        <SecondaryTextBox
                                                            selected={
                                                                currentlySelected
                                                            }
                                                        >
                                                            {name}
                                                        </SecondaryTextBox>
                                                    </Flex>
                                                    <Box>
                                                        {etherBalance.isZero()
                                                            ? "-"
                                                            : formatNumber(
                                                                  etherBalance,
                                                                  {
                                                                      style:
                                                                          "decimal",
                                                                      maximumSignificantDigits: 4,
                                                                  }
                                                              )}
                                                    </Box>
                                                </Flex>
                                            </RowFlex>
                                        );
                                    })
                                ) : (
                                    <Flex
                                        flexDirection="column"
                                        alignItems="center"
                                        my={3}
                                        px={3}
                                    >
                                        <Box mb={3}>
                                            <EmptyIcon
                                                icon={faExclamationTriangle}
                                            />
                                        </Box>
                                        <EmptyTextBox textAlign="center" mb={3}>
                                            <FormattedMessage id="token.modal.empty" />
                                        </EmptyTextBox>
                                    </Flex>
                                )}
                            </ListFlex>
                        </>
                    )}
                </ContentFlex>
            </RootFlex>
        </>
    );
}

BrightcoveModel = (props) => {
  const dispatch = useDispatch();
  const { platform, showSidebar, setSelectedVideoIdKaltura } = props;
  const [cms, setcms] = useState([]);
  const [kaltura, setkaltura] = useState(null);
  const [vimeo, setVimeo] = useState(null);
  const [cmsVideo, setcmsVideo] = useState(null);
  const [activeCms, setActiveCms] = useState(null);
  const [offset, setOffset] = useState(0);
  const [totalCount, setTotalCount] = useState(0);
  const [paginationCounter, setPaginationCounter] = useState(1);
  const [searchId, setSearchId] = useState();
  const [error, setError] = useState(null);
  useEffect(() => {
    (async () => {
      if (platform == "Brightcove") {
        const result = await dispatch(getBrightCMS());

        setcms(result.data);
        setActiveCms(result.data?.[0]);
      } else if (platform == "Kaltura") {
        setActiveCms(null);
        const result = await dispatch(getKalturaVideos());
        if (result?.errors) {
          setkaltura([]);
          setError("No record Found");
        } else {
          setkaltura(result);
        }
      } else if (platform == "Vimeo") {
        setActiveCms(null);
        const result = await dispatch(getVimeoVideos());
        if (result?.errors) {
          setVimeo([]);
          setError("No record Found");
        } else {
          setVimeo(result);
          console.log("Result:", result.data);
        }
      }
    })();
  }, [platform]);
  useEffect(() => {
    (async () => {
      if (activeCms) {
        await dispatch(getBrightVideos(activeCms.id, offset * 6))
          .then((data) => {
            setTotalCount(data.meta?.count);
            setcmsVideo(data.data);
          })
          .catch((err) => {
            console.log(err);
            if (err?.errors?.length > 0) {
              setError("No record Found");
              setcmsVideo([]);
            }
          });
        if (
          typeof activeCms === "object" &&
          activeCms.hasOwnProperty("account_id")
        ) {
          window.brightcoveAccountId = activeCms.account_id;
        }
      }
    })();
  }, [activeCms, offset]);

  useEffect(() => {
    dispatch({
      type: "EDIT_CMS_SCREEN",
      payload: activeCms,
    });
  }, [activeCms]);
  const primaryColor = getGlobalColor("--main-primary-color");
  return (
    <Modal
      {...props}
      size="xl"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="preview-layout-model"
    >
      <Modal.Header
        style={{ display: "block !important" }}
        className="modal-header-custom"
      >
        <Modal.Title id="contained-modal-title-vcenter"></Modal.Title>
        <HeadingTwo
          text={`Add videos from ${platform}`}
          color="#515151"
          className="model-top-heading"
        />
      </Modal.Header>

      <Modal.Body style={{ display: "block !important" }}>
        <div>
          <Tab.Container id="left-tabs-example" defaultActiveKey="manual-1">
            <Row className="video-model-tab-row">
              {showSidebar && (
                <Col className="video-model-tab" sm={3}>
                  <HeadingThree
                    text="Brightcove CMS"
                    className="nav-menu-heading"
                  />
                  <Nav variant="pills" className="flex-column">
                    {cms?.map((data, counter) => (
                      <div
                        onClick={() => {
                          setOffset(0);
                          setActiveCms(data);
                          setcmsVideo(null);
                        }}
                        className="role-permission-tab-name"
                        id="role-permission-tab-id"
                      >
                        <Nav.Item>
                          <Nav.Link eventKey={`manual-${counter + 1}`}>
                            {data.account_name}
                            <img className="image-tag" />
                          </Nav.Link>
                        </Nav.Item>
                      </div>
                    ))}
                  </Nav>
                </Col>
              )}
              <Col className="detail-permission-tab" sm={showSidebar ? 9 : 12}>
                <br />
                <div className="for-NetSuite-section">
                  <div className="NetSuite-section-top-header">
                    <div>
                      <HeadingTwo
                        text={activeCms?.account_name}
                        color="#515151"
                        className="NetSuite-heading"
                      />
                    </div>
                    <div className="NetSuite-section-searching">
                      <div className="section-input-search">
                        <input
                          value={searchId}
                          onChange={(e) => setSearchId(e.target.value)}
                          type="text"
                          placeholder="Search by video name or id..."
                        />
                        <button
                          onClick={async () => {
                            if (platform == "Brightcove") {
                              setcmsVideo(null);
                              dispatch(
                                getBrightVideosSearch(activeCms.id, searchId)
                              )
                                .then((data) => {
                                  setTotalCount(data.meta?.count);
                                  setcmsVideo(data.data);
                                })
                                .catch((err) => {
                                  if (err?.errors?.length > 0) {
                                    setcmsVideo([]);
                                    setError("No record Found");
                                  }
                                });
                            } else if (platform == "Kaltura") {
                              setkaltura(null);
                              setPaginationCounter(1);
                              const result = await dispatch(
                                getKalturaVideos(searchId)
                              );
                              if (result.totalCount) {
                                setkaltura(result);
                              } else {
                                setkaltura([]);
                                setError("No record Found");
                              }
                            } else if (platform == "Vimeo") {
                              setVimeo(null);
                              setPaginationCounter(1);
                              const result = await dispatch(
                                getVimeoVideos(searchId)
                              );
                              if (result.totalCount) {
                                setVimeo(result);
                              } else {
                                setVimeo([]);
                                setError("No record Found");
                              }
                            }
                          }}
                        >
                          <FontAwesomeIcon
                            icon={faSearch}
                            color={primaryColor}
                          />
                        </button>
                      </div>
                      {
                        <button
                          onClick={async () => {
                            setSearchId("");
                            if (platform == "Brightcove") {
                              setcmsVideo(null);
                              try {
                                const videosResult = await dispatch(
                                  getBrightVideos(activeCms.id, offset * 6)
                                );

                                setTotalCount(videosResult.meta?.count);
                                setcmsVideo(videosResult.data);
                              } catch (err) {
                                if (err?.errors?.length > 0) {
                                  setcmsVideo([]);
                                  setError("No record Found");
                                }
                              }
                            } else if (platform == "Kaltura") {
                              setkaltura(null);
                              setPaginationCounter(1);
                              const result = await dispatch(getKalturaVideos());
                              setkaltura(result);
                            } else if (platform == "Vimeo") {
                              setVimeo(null);
                              setPaginationCounter(1);
                              const result = await dispatch(getVimeoVideos());
                              setVimeo(result);
                            }
                          }}
                          className="reset-btn"
                        >
                          Reset
                        </button>
                      }
                    </div>
                  </div>
                </div>
                <div className="for-NetSuite-section">
                  <div className="NetSuite-section-table responsive-table">
                    {platform == "Brightcove" && (
                      <Tab.Content>
                        {cms?.map((data1, counter) => (
                          <Tab.Pane eventKey={`manual-${counter + 1}`}>
                            <Card.Body style={{ padding: "0px" }}>
                              <table>
                                <thead>
                                  <tr>
                                    <th>Name</th>
                                    <th>Created</th>
                                    <th>Video</th>
                                    <th>Updated At</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  {cmsVideo ? (
                                    cmsVideo?.length > 0 ? (
                                      cmsVideo?.map((data) => (
                                        <tr>
                                          <td className="firstname">
                                            <input
                                              name="video"
                                              onChange={() => {
                                                props.setSelectedVideoId(
                                                  data.id
                                                );
                                              }}
                                              type="radio"
                                            />
                                            <img
                                              src={data?.images?.thumbnail?.src}
                                              className="image-size"
                                            />
                                            <span>{data.name}</span>
                                          </td>
                                          <td>
                                            {data.created_at?.split("T")[0]}
                                          </td>
                                          <td>{data.id}</td>
                                          <td>
                                            {data.updated_at?.split("T")[0]}
                                          </td>
                                        </tr>
                                      ))
                                    ) : (
                                      <tr>
                                        <td colSpan="4">
                                          <Alert variant="danger" colSpan={3}>
                                            {error}
                                          </Alert>
                                        </td>
                                      </tr>
                                    )
                                  ) : (
                                    <tr>
                                      <td colSpan="4">
                                        <Alert variant="primary" colSpan={4}>
                                          Loading...
                                        </Alert>
                                      </td>
                                    </tr>
                                  )}
                                </tbody>
                              </table>

                              {cmsVideo?.length > 0 && (
                                <Pagination
                                  activePage={offset + 1}
                                  pageRangeDisplayed={7}
                                  itemsCountPerPage={6}
                                  totalItemsCount={totalCount}
                                  onChange={(e) => {
                                    //const newOffset = offset + 1;
                                    setOffset(e - 1);
                                  }}
                                />
                              )}
                            </Card.Body>
                          </Tab.Pane>
                        ))}
                      </Tab.Content>
                    )}
                    {platform == "Kaltura" && (
                      <Tab.Content>
                        <Tab.Pane eventKey="manual-1">
                          <Card.Body style={{ padding: "0px" }}>
                            <table>
                              <thead>
                                <tr>
                                  <th>Name</th>
                                  <th>Created</th>
                                  <th>Video Id</th>
                                  <th>Updated At</th>
                                </tr>
                              </thead>
                              <tbody>
                                {kaltura ? (
                                  kaltura.objects?.length > 0 ? (
                                    kaltura?.objects?.map((data) => {
                                      var created = new Date(data.createdAt);
                                      var update = new Date(data.updatedAt);
                                      return (
                                        <tr>
                                          <td className="firstname">
                                            <input
                                              name="video"
                                              onChange={() => {
                                                setSelectedVideoIdKaltura(
                                                  data.dataUrl
                                                );
                                              }}
                                              type="radio"
                                            />
                                            <img
                                              src={data?.thumbnailUrl}
                                              className="image-size"
                                            />
                                            <span>{data.name}</span>
                                          </td>
                                          <td>
                                            {created?.toLocaleDateString()}
                                          </td>
                                          <td>{data.id}</td>
                                          <td>
                                            {update?.toLocaleDateString()}
                                          </td>
                                        </tr>
                                      );
                                    })
                                  ) : (
                                    <tr>
                                      <td colSpan="4">
                                        <Alert variant="danger" colSpan={3}>
                                          {error}
                                        </Alert>
                                      </td>
                                    </tr>
                                  )
                                ) : (
                                  <tr>
                                    <td colSpan="4">
                                      <Alert variant="primary" colSpan={4}>
                                        Loading...
                                      </Alert>
                                    </td>
                                  </tr>
                                )}
                              </tbody>
                            </table>

                            {kaltura?.objects?.length > 0 && (
                              <Pagination
                                activePage={paginationCounter}
                                pageRangeDisplayed={7}
                                itemsCountPerPage={6}
                                totalItemsCount={kaltura?.totalCount}
                                onChange={async (e) => {
                                  setPaginationCounter(e);
                                  const result = await dispatch(
                                    getKalturaVideos("", e, 6)
                                  );
                                  setkaltura(result);
                                }}
                              />
                            )}
                          </Card.Body>
                        </Tab.Pane>
                      </Tab.Content>
                    )}

                    {/* Vimeo */}
                    {platform == "Vimeo" && (
                      <Tab.Content>
                        <Tab.Pane eventKey="manual-1">
                          <Card.Body style={{ padding: "0px" }}>
                            <table>
                              <thead>
                                <tr>
                                  <th>Name</th>
                                  <th>Created</th>
                                  <th>Video Id</th>
                                  <th>Updated At</th>
                                </tr>
                              </thead>
                              <tbody>
                                {vimeo ? (
                                  vimeo?.data?.length > 0 ? (
                                    vimeo?.data?.map((data) => {
                                      var created = new Date(data.created_time);
                                      var update = new Date(data.modified_time);
                                      return (
                                        <tr>
                                          <td className="firstname">
                                            <input
                                              name="video"
                                              onChange={() => {
                                                props.setSelectedVideoIdVimeo(
                                                  data.player_embed_url
                                                );
                                              }}
                                              type="radio"
                                            />
                                            <img
                                              src={data?.thumbnailUrl}
                                              className="image-size"
                                            />
                                            <span>{data.name}</span>
                                          </td>
                                          <td>
                                            {created?.toLocaleDateString()}
                                          </td>
                                          <td>{data.resource_key}</td>
                                          <td>
                                            {update?.toLocaleDateString()}
                                          </td>
                                        </tr>
                                      );
                                    })
                                  ) : (
                                    <tr>
                                      <td colSpan="4">
                                        <Alert variant="danger" colSpan={3}>
                                          {error}
                                        </Alert>
                                      </td>
                                    </tr>
                                  )
                                ) : (
                                  <tr>
                                    <td colSpan="4">
                                      <Alert variant="primary" colSpan={4}>
                                        Loading...
                                      </Alert>
                                    </td>
                                  </tr>
                                )}
                              </tbody>
                            </table>

                            {vimeo?.data?.length > 0 && (
                              <Pagination
                                activePage={paginationCounter}
                                pageRangeDisplayed={7}
                                itemsCountPerPage={6}
                                totalItemsCount={vimeo?.total}
                                onChange={async (e) => {
                                  setPaginationCounter(e);
                                  const result = await dispatch(
                                    getVimeoVideos("", e, 6)
                                  );
                                  setVimeo(result);
                                }}
                              />
                            )}
                          </Card.Body>
                        </Tab.Pane>
                      </Tab.Content>
                    )}
                  </div>
                </div>
              </Col>
            </Row>
          </Tab.Container>
        </div>
      </Modal.Body>
      <Modal.Footer>
        <div className="footer-bright-model">
          <div className="model-footer-span">
            {/* <span>Looking to add a new account?</span> */}
          </div>
          <div className="bright-model-btn">
            <Buttons
              onClick={() => {
                props.setSelectedVideoId("");
                props.onHide();
              }}
              secondary={true}
              text="Cancel"
              width="95px"
              height="32px"
              hover={true}
              className="ml-16"
            />
            <Buttons
              primary={true}
              text="Add File"
              width="106px"
              height="32px"
              hover={true}
              // className="ml-32"
              onClick={() => {
                props.onHide();
              }}
            />
          </div>
        </div>
      </Modal.Footer>
    </Modal>
  );
}

CourseImportListFilter = ({
  intl, organizations, filterParams, ...props
}) => {
  const orgOptions = [
    {
      value: '',
      label: intl.formatMessage(messages['library.course_import.course_filter.options.org.all']),
    },
    {
      label: intl.formatMessage(messages['library.course_import.course_filter.options.org.organizations']),
      group: organizations.map(organization => ({
        value: organization,
        label: organization,
      })),
    },
  ];

  const handleOrgChange = (event) => {
    props.setFilterParams({
      ...filterParams,
      org: event.target.value,
    });
  };

  const handleFilterSubmit = (event) => {
    event.preventDefault();
    props.setFilterParams({
      ...filterParams,
      search_term: event.target.querySelector('[name="search_term"]').value.trim(),
    });
  };

  return (
    <>
      <div className="bit">
        <h3 className="title title-3">{intl.formatMessage(messages['library.course_import.aside.course_list.title'])}</h3>
        <p>{intl.formatMessage(messages['library.course_import.aside.course_list.text.first'])}</p>
        <p>{intl.formatMessage(messages['library.course_import.aside.course_list.text.second'])}</p>
      </div>

      <div className="bit">
        <Form onSubmit={handleFilterSubmit} className="filter-form">
          <Form.Row>
            <Form.Group className="w-100">
              <Form.Label className="title title-3">
                {intl.formatMessage(messages['library.course_import.course_filter.title'])}
              </Form.Label>
              <div className="d-flex flex-row">
                <Form.Control
                  name="search_term"
                  placeholder={intl.formatMessage(messages['library.course_import.course_filter.input.default'])}
                  defaultValue={filterParams ? filterParams.search_term : null}
                />
                <Button
                  type="submit"
                  variant="primary"
                  className="ml-2 py-1 px-3 d-inline"
                >
                  <FontAwesomeIcon icon={faSearch} />
                </Button>
              </div>
            </Form.Group>
          </Form.Row>
          <Form.Row>
            <Form.Group className="w-100">
              <Form.Label className="title title-3">
                {intl.formatMessage(messages['library.course_import.course_filter.options.org.label'])}
              </Form.Label>
              <Input
                name="org"
                type="select"
                options={orgOptions}
                defaultValue={filterParams ? filterParams.org : null}
                onChange={handleOrgChange}
              />
            </Form.Group>
          </Form.Row>
        </Form>
      </div>
    </>
  );
}

renderContent() {
    const { intl, libraries, orgs } = this.props;
    const { showForm, filterParams } = this.state;

    const paginationOptions = {
      currentPage: this.state.paginationParams.page,
      pageCount: Math.ceil(libraries.count / this.state.paginationParams.page_size),
      buttonLabels: {
        previous: intl.formatMessage(commonMessages['library.common.pagination.labels.previous']),
        next: intl.formatMessage(commonMessages['library.common.pagination.labels.next']),
        page: intl.formatMessage(commonMessages['library.common.pagination.labels.page']),
        currentPage: intl.formatMessage(commonMessages['library.common.pagination.labels.currentPage']),
        pageOfCount: intl.formatMessage(commonMessages['library.common.pagination.labels.pageOfCount']),
      },
    };

    const orgOptions = [
      {
        value: '',
        label: intl.formatMessage(messages['library.list.filter.options.org.all']),
      },
      {
        label: intl.formatMessage(messages['library.list.filter.options.org.organizations']),
        group: orgs.map(orgName => ({
          value: orgName,
          label: orgName,
        })),
      },
    ];

    const typeOptions = [{
      label: intl.formatMessage(messages['library.list.filter.options.type.types']),
      group: Object.values(LIBRARY_TYPES).map((value) => (
        { value, label: intl.formatMessage(messages[`library.list.filter.options.type.${value}`]) }
      )),
    }];

    return (
      <div className="library-list-wrapper">
        <div className="wrapper-mast wrapper">
          <header className="mast has-actions">
            <h1 className="page-header">{intl.formatMessage(messages['library.list.page.heading'])}</h1>
            <nav className="nav-actions">
              <ul>
                <li className="nav-item">
                  <Button
                    variant="success"
                    onClick={this.showForm}
                  >
                    <FontAwesomeIcon icon={faPlus} className="pr-3" />
                    {intl.formatMessage(messages['library.list.new.library'])}
                  </Button>
                </li>
              </ul>
            </nav>
          </header>
        </div>
        <div className="wrapper-content wrapper">
          <section className="content">
            <article className="content-primary" role="main">
              <LibraryIndexTabs />
              {showForm
              && <LibraryCreateForm hideForm={this.hideForm} />}
              <ul className="library-list">
                {libraries.data.map((library) => (
                  <li key={library.id} className="library-item">
                    <LibraryListItem library={library} />
                  </li>
                ))}
              </ul>
              {libraries.count > 0
                ? (
                  <Pagination
                    className="library-list-pagination"
                    paginationLabel="pagination navigation"
                    currentPage={paginationOptions.currentPage}
                    pageCount={paginationOptions.pageCount}
                    buttonLabels={paginationOptions.buttonLabels}
                    onPageSelect={this.handlePageChange}
                  />
                )
                : null}
            </article>
            <aside className="content-supplementary">
              <div className="bit">
                <h3 className="title title-3">{intl.formatMessage(messages['library.list.aside.title'])}</h3>
                <p>{intl.formatMessage(messages['library.list.aside.text'])}</p>
                <ul className="list-actions">
                  <li className="action-item">
                    <a
                      href="http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_components/libraries.html"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      {intl.formatMessage(messages['library.list.aside.help.link'])}
                    </a>
                  </li>
                </ul>
              </div>
              <div className="bit">
                <Form onSubmit={this.handleFilterSubmit} className="filter-form">
                  <Form.Row>
                    <Form.Group className="w-100">
                      <Form.Label className="title title-3">
                        {intl.formatMessage(messages['library.list.filter.title'])}
                      </Form.Label>
                      <div className="d-flex flex-row">
                        <Form.Control
                          name="text_search"
                          placeholder={intl.formatMessage(messages['library.list.filter.input.default'])}
                          defaultValue={filterParams ? filterParams.text_search : null}
                          onChange={this.handleFilterChange}
                        />
                        <Button
                          type="submit"
                          variant="primary"
                          className="ml-2 py-1 px-3 d-inline"
                        >
                          <FontAwesomeIcon icon={faSearch} />
                        </Button>
                      </div>
                    </Form.Group>
                  </Form.Row>
                  <Form.Row>
                    <Form.Group className="w-100">
                      <Form.Label className="title title-3">
                        {intl.formatMessage(messages['library.list.filter.options.org.label'])}
                      </Form.Label>
                      <Input
                        name="org"
                        type="select"
                        options={orgOptions}
                        defaultValue={filterParams ? filterParams.org : null}
                        onChange={this.handleFilterOrgChange}
                      />
                    </Form.Group>
                  </Form.Row>
                  <Form.Row>
                    <Form.Group className="w-100">
                      <Form.Label className="title title-3">
                        {intl.formatMessage(messages['library.list.filter.options.type.label'])}
                      </Form.Label>
                      <Input
                        name="type"
                        type="select"
                        options={typeOptions}
                        defaultValue={filterParams ? filterParams.type : null}
                        onChange={this.handleFilterTypeChange}
                      />
                    </Form.Group>
                  </Form.Row>
                </Form>
              </div>
            </aside>
          </section>
        </div>
      </div>
    );
  }

export default function SearchProducts() {
  const { addToast } = useToasts();
  const [query, setQuery] = useState("");
  const [loading, setLoading] = useState(false);

  const [searchresult, setsearchresult] = useState([]);

  const SearchProducts = (e) => {
    e.preventDefault();
    if (query !== "") {
      setLoading(true);
      const results = products.filter((product) =>
        product.productname.toLowerCase().includes(query.toLowerCase())
      );

      setsearchresult(results);
      setLoading(false);
      if (results.length < 1) {
        addToast(
          " No result found for the following product: " +
            query +
            ". Please provide a valid product name and try again.",
          { appearance: "error", autoDismiss: true }
        );
      }
    } else {
      addToast("Please type something.", {
        appearance: "info",
        autoDismiss: true,
      });
    }
  };

  const handleSearchInput = (e) => {
    setQuery(e.target.value);
    setsearchresult([]);
  
  };
  return (
    <div>
      <TopBanner/>
      <NavBar />
      <HeroImage />
      <div className="row container-search-bar">
        <div className="col-lg-12">
          <h1>
            Search products. {query.length > 0 ? "Search query: " + query : ""}
          </h1>
          <div className="mb-3">
            {loading && (
              <img src={loadingIcon} alt="loading" className="loadingIcon" />
            )}
          </div>

          <form onSubmit={SearchProducts}>
            <div className="input-group">
              <input
                className="form-control form-control-lg shadow-none form-input-search-bar"
                type="text"
                placeholder="Search for any product"
                autoFocus
                name="query"
                value={query}
                onChange={handleSearchInput}
              />
              <div className="input-group-append">
                <button className="btn search-button shadow-none" type="submit">
                  <FontAwesomeIcon icon={faSearch} />
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div className="containet-search-product">
        <div className="container-products">
          <div className="row">
            {searchresult.length >= 1
              ? searchresult.map((product) => (
                  <Product data={product} key={product.id} />
                ))
              : ""}
            
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}

render() {

        const bgDark = {
            background: "#111",
            color: "white"
        }

        const dark = {
            background: "#333",
            color: "white"
        }
    
        const bgLight = {
            background: "#007bff",
            color: "#555"
        }

        const navButtonDark = {
            color: "white",
            background: "#555",
            marginTop: "-8px",
            marginBottom: "-8px",
            paddingTop: "8px",
            paddingBottom: "8px",
        };

        const navButtonLight = {
            color: "#555",
            background: "white",
            marginTop: "-8px",
            marginBottom: "-8px",
            paddingTop: "8px",
            paddingBottom: "8px",
        };

        const abs = {
            top: "1vh",
            right: "1vw"
        }
        
        return (
            <div style={this.props.isDark === true ? bgDark : bgLight}>
                <Navbar collapseOnSelect expand="xs" style={this.props.isDark === true ? bgDark : bgLight} variant="dark" fixed="top" className="fixedTop-1">
                    <Navbar.Brand href="#home">Todo List</Navbar.Brand>
                    <Nav className="justify-content-end ml-auto">
                        <NavDropdown style={abs} className="position-absolute" title={"Welcome " + this.props.uname} id="basic-nav-dropdown">
                            <NavDropdown.Item onClick={this.logoutCall} style={this.props.isDark === true ? navButtonDark : navButtonLight}>Logout</NavDropdown.Item>
                        </NavDropdown>
                    </Nav>
                </Navbar>
                <Navbar collapseOnSelect bg={this.props.isDark === true ? "dark" : "light"} variant="dark" className="fixedTop-2 mx-auto">
                    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                    <Navbar.Collapse id="responsive-navbar-nav">
                        <Nav className="nav-2 mx-auto">
                            <Form
                                noValidate 
                                validated={this.state.validated} 
                                onSubmit={this.handleSubmit} 
                                onReset={this.handleReset}
                                className="row"
                            >
                                <Form.Group as={Col} lg="2" controlId="validationDate">
                                    <Button className="addtask-btn btn-block" variant="warning" onClick={() => this.toggleModal()}>+ Add Task</Button>
                                </Form.Group>
                                <Form.Group as={Col} lg="4" controlId="validationFromDate">
                                <InputGroup>
                                    <InputGroup.Prepend>
                                        <InputGroup.Text id="inputGroupPrepend1">From</InputGroup.Text>
                                    </InputGroup.Prepend>
                                    <Form.Control
                                        type="date"
                                        name="fromDate"
                                        value={this.state.fromDate}
                                        onChange={this.handleInputChange}
                                        aria-describedby="inputGroupPrepend1"
                                        style={this.props.isDark === true ? dark : null}
                                        required
                                    />
                                    <Form.Control.Feedback type="invalid">
                                        Please choose a proper date.
                                    </Form.Control.Feedback>
                                    <Form.Control.Feedback>
                                        Looks good.
                                    </Form.Control.Feedback>
                                </InputGroup>
                                </Form.Group>
                                <Form.Group as={Col} lg="4" controlId="validationToDate">
                                <InputGroup>
                                    <InputGroup.Prepend>
                                        <InputGroup.Text id="inputGroupPrepend2">To</InputGroup.Text>
                                    </InputGroup.Prepend>
                                    <Form.Control
                                        type="date"
                                        name="toDate"
                                        value={this.state.toDate}
                                        onChange={this.handleInputChange}
                                        aria-describedby="inputGroupPrepend2"
                                        style={this.props.isDark === true ? dark : null}
                                        required
                                    />
                                    <Form.Control.Feedback type="invalid">
                                        Please choose a proper date.
                                    </Form.Control.Feedback>
                                    <Form.Control.Feedback>
                                        Looks good.
                                    </Form.Control.Feedback>
                                </InputGroup>
                                </Form.Group>
                                <Form.Group as={Col} lg="1" controlId="validationDate">
                                    <Button className="search-btn btn-block" variant="primary" type="submit">
                                        <FontAwesomeIcon icon={faSearch}></FontAwesomeIcon>
                                    </Button>
                                </Form.Group>
                                <Form.Group as={Col} lg="1" controlId="validationDate">
                                    <Button className="search-btn btn-block" variant="danger" type="reset">
                                        <FontAwesomeIcon icon={faRedoAlt}></FontAwesomeIcon>
                                    </Button>
                                </Form.Group>
                            </Form>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </div>
        )
    }

AdvancedSearch = forwardRef((props, ref) => {
  const { buildSearchList, sortParameter, setSortParameter, sortAscendingOrder, setSortAscendingOrder } = props
  let inputElement;
  const searchFilterOptions = [
    {
      key: 0,
      text: 'Tech Stack',
      value: 0
    },
    {
      key: 1,
      text: 'Organisation Name',
      value: 1
    },
    {
      key: 2,
      text: 'Category',
      value: 2
    },
    {
      key: 3,
      text: 'Topic',
      value: 3
    }
  ]

  const sortParameterOptions = [
    {
      key: 0,
      text: 'Number of GSoC Appearances',
      value: 0
    },
    {
      key: 1,
      text: 'Total Number of Projects',
      value: 1
    },
    {
      key: 2,
      text: 'Average Number of Projects',
      value: 2
    },
  ]

  const [search, setSearch] = useState('')
  const [filter, setFilter] = useState(0)
  const [autoComplete, setAutoComplete] = useState(null)
  const [suggestions, setSuggestions] = useState([])
  const [isInputInFocus, setIsInputInFocus] = useState(false)

  useImperativeHandle(ref, () => ({
    resetSearchState () {
      setSearch('');
      setFilter(0);
      setAutoComplete(null);
      setSuggestions([]);
      setIsInputInFocus(false);
    }
  }));

  const handleFilter = (unNeccesaryThing, e) => {
    setFilter(e.value)
  }

  const handleSortParameter = (unNeccesaryThing, e) => {
    setSortParameter(e.value)
  }

  const handleSearch = e => {
    e && e.preventDefault()
    document.activeElement.blur()
    buildSearchList(search, filter)
  }

  const focusHandler = e => {
    // setSuggestions(autoComplete.suggest(search))
    setTimeout(() => {
      setIsInputInFocus(document.activeElement === inputElement)
    }, 0);
  }

  useEffect(() => {
    document.body.addEventListener('click', focusHandler)
    inputElement = document.getElementById('inputBox')
    return () => {
      document.body.removeEventListener('click', focusHandler)
    }
  }, [])

  useEffect(() => {
    let list = []
    if (filter === 0) {
      let dataSet = new Set();
      data.forEach(e => {
        dataSet.add(...e.tech)
      })
      list = [...[...dataSet].sort((a, b) => (a - b))]
    }
    if (filter === 1) {
      data.forEach(e => {
        list.push(e.name.replaceAll('/', '').replaceAll('  ', ' ').toLowerCase())
      })
    }
    if (filter === 2) {
      data.forEach(e => {
        list.push(e.cat.replaceAll('/', '').replaceAll('  ', ' ').toLowerCase())
      })
    }
    if (filter === 3) {
      let dataSet = new Set();
      data.forEach(e => {
        dataSet.add(...e.top)
      })
      list = [...[...dataSet].sort((a, b) => (a - b))]
    }
    setAutoComplete(new AutoComplete(list))
    setSuggestions([])
    setSearch('')
  }, [filter])

  useEffect(() => {
    autoComplete && setSuggestions(autoComplete.suggest(''))
  }, [autoComplete])

  useEffect(() => {
    autoComplete && setSuggestions(autoComplete.suggest(search))
  }, [search])

  return (
    <Container textAlign='center'>
      <form className="search-form" autocomplete="off">
        <div id='searchBox'>
          <input
            value={search}
            onChange={e => {
              if (e.keyCode === 13) {
                handleSearch()
                return
              }
              setSearch(e.target.value.toLowerCase())
            }}
            type='text'
            name='search'
            placeholder='Search...'
            id="inputBox"
            autocomplete="off"
          />
          {
            (isInputInFocus && suggestions.length > 0 && suggestions[0] !== search) && (<div className="suggestions-dropDown">
              {suggestions.map(content => (
                content !== search && <p
                  key={content}
                  onClick={() => {
                    setSearch(content)
                    buildSearchList(content, filter)
                  }}>{content}</p>
              ))}
            </div>)
          }
        </div>
        <button type='submit' onClick={handleSearch} className='search-btn'>
          <FontAwesomeIcon color='white' className='fa-2x' icon={faSearch} />{' '}
        </button>
        


      </form>
      <div className="dropdown-menu">
        <div className='dropdown-panel'>
          <div id="dropdown-label">Search By</div>
          <Dropdown
            value={filter}
            onChange={handleFilter}
            id='searchFilter'
            selection
            options={searchFilterOptions}
          />
        </div>
        <div className='dropdown-panel sort-panel'>
          <div id="dropdown-label">Sort By</div>
          <Dropdown
            value={sortParameter}
            onChange={handleSortParameter}
            id='sortParameter'
            selection
            options={sortParameterOptions}
          />
          <img className="sort-icon" src={sortAscendingOrder ? sortAscending : sortDescending} onClick={() => {setSortAscendingOrder(!sortAscendingOrder)}} />
        </div>
      </div>
    </Container>
  )
})

function WallContainer(){

    const [usersProfile, setusersProfile] = useState({
        profiles : []
    });

    const [globalProfiles, setglobalProfiles] = useState({
        profiles : []
    });

    const [userGithubCards, setuserGithubCards] = useState({});

    const [searchValue, setsearchValue] = useState('');

    const importAll = (r) => r.keys().map(r);
    const markdownFiles = importAll(require.context('../dataSet/githubCards', false, /\.md$/)).sort().reverse();

    useEffect(() => {
        var profileCards = [];
        users.forEach(user => {
            profileCards.push(user);
        });
        setusersProfile({profiles : profileCards})
        setglobalProfiles({profiles : profileCards})           
        renderPosts();
        // eslint-disable-next-line    
      }, []);

    const renderPosts = async() => {
        var fileNameExecutionSeq = [];
        Promise.all(
            markdownFiles.map((file) => fetch(file)
                .then(
                    (res) => {
                        var fileName = file;
                        fileName = fileName.substr(14).slice(0, -12);
                        fileNameExecutionSeq.push(fileName);                        
                        return res.text();
                    }
                )))
                .then((mdData) => {
                    fileNameExecutionSeq.forEach( (fName,index) => {
                        var cards = userGithubCards;
                        cards[fName] = mdData[index]
                        setuserGithubCards({cards});
                    });
            })
             .catch((err) => console.error(err)); 
    }

    const handleSubmit = (event) => {
        handleSearch(searchValue);
        event.preventDefault();        
    }

    const search = (event) => {
        const target = event.target;
        setsearchValue(target.value); 
        handleSearch(target.value);       
    }

    const handleSearch = (searchValue) =>{
        var profileCards = globalProfiles.profiles;
        var matchedProfiles = [];
        profileCards.forEach(profile => {
            if (profile.githubUserName.toUpperCase().indexOf(searchValue.toUpperCase()) !== -1 ){
                matchedProfiles.push(profile);
            }
        });
        setusersProfile({profiles : matchedProfiles});
        renderPosts();        
    }

    return(
        <React.Fragment>
            <div className={`${styles.SearchComponent}`}>
                <form onSubmit={handleSubmit}>
                    <div className={styles.search}>
                        <input type="text" value={searchValue} onChange={search} className={styles.search__input} placeholder="Search GitHub User Name"/>
                        <div className={styles.search__icon}>
                        <FontAwesomeIcon name="search" icon={faSearch}></FontAwesomeIcon>
                        </div>
                    </div>                                       
                </form>
                
            </div>
            
            {
            (typeof userGithubCards.cards !== 'undefined')
                ? <div className={styles.ProfileCardContainer}>
                    {
                        usersProfile.profiles.map((profile, index) => {                 
                            return(
                                <ProfileCardComponent
                                    profileDetails = {profile}
                                    markDown={userGithubCards.cards[profile.githubUserName]}
                                    index={index}
                                    key={index}
                                />
                            )
                        })
                    }
                </div>
                : <div></div>       
            }
        </React.Fragment>
    )
}

function Search() {
    const geoloc = useGeolocation();
    const [geolocState, setGeolocState] = useState(null);
    const [geolocWhenAvailable, setGeolocWhenAvailable] = useState(false);
    const { setCenterCoord } = useMaskData();

    const { t } = useTranslation();

    const [address, setAddress] = useState("");

    const fetchGeocode = async (address) => {
        let data;
        try {
            data = await axios.get(
                `${
                    process.env.NODE_ENV === "development"
                        ? "http://localhost:4000"
                        : "https://api.livecorona.co.kr"
                }/?address=${address}`
            );
            return data;
        } catch (error) {
            console.error(error);
            console.log("Failed to retrieve geocoding for: " + address);
        }
    };

    useEffect(() => {
        setAddress(localStorage.getItem("lastSearchedAddress"));
    }, []);

    useEffect(() => {
        if (!geoloc) {
            return;
        }

        // navigator.permissions is an experimental API that is
        // unsupported in iOS, so it needs a try-catch block
        try {
            navigator.permissions
                .query({ name: "geolocation" })
                .then((result) => {
                    setGeolocState(result.state);
                });
        } catch (error) {
            console.error(error);
            setGeolocState("unknown");
        }

        if (geolocWhenAvailable) {
            if (
                geoloc.accuracy != null ||
                geoloc.latitude != null ||
                geoloc.longitude != null
            ) {
                const coord = {
                    lat: geoloc.latitude,
                    lng: geoloc.longitude,
                };
                setCenterCoord(coord);
                console.log(coord);
            }
        }
    }, [geoloc, geolocWhenAvailable, setCenterCoord]);

    const onClickGeoloc = () => {
        if (geolocState !== "granted") {
            alert("위치 권한을 브라우저 설정에서 허용해야 사용할 수 있습니다");
        }

        setGeolocWhenAvailable(true);
    };

    const onClickAddress = async () => {
        if (address.length < 1) {
            alert("주소를 입력해 주세요.");
            return;
        }

        localStorage.setItem("lastSearchedAddress", address);

        let geocodes;
        try {
            geocodes = await fetchGeocode(address);
        } catch (error) {
            console.error(error);
            alert("주소를 찾을 수 없습니다. 다시 시도해 주십시오.");
            return;
        }

        console.log(geocodes.data);

        if (!geocodes.data.meta.totalCount) {
            alert("주소를 찾을 수 없습니다. 다시 시도해 주십시오.");
            return;
        }

        let coord = {
            lat: geocodes.data.addresses[0].y,
            lng: geocodes.data.addresses[0].x,
        };

        setCenterCoord(coord);
    };

    const handleFormSubmit = (e) => {
        e.preventDefault();
        onClickAddress();
    };

    return (
        <>
            <Container>
                <Row>
                    <Col>
                        <div className="text-center mb-5">
                            <img
                                src={MaskMapIntro}
                                alt="공적 마스크 판매처"
                                width="100vw"
                                className="mb-3"
                            />
                            <h1 className="title">
                                {t("searchMaskStores")}
                            </h1>
                        </div>
                    </Col>
                </Row>
                <Row className="justify-content-center mb-3 text-center">
                    <Col sm={12} md={6} lg={5}>
                        <Form onSubmit={handleFormSubmit}>
                            <Form.Group controlId="formBasicEmail">
                                <Form.Label>
                                    {t("addressInputLabel")}
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    placeholder=""
                                    value={address}
                                    onChange={(e) => setAddress(e.target.value)}
                                />
                                <Form.Text className="text-muted">
                                    {t("addressInputExample")}
                                </Form.Text>
                            </Form.Group>
                            <div className="d-flex flex-column mb-3">
                                <Button
                                    variant="primary"
                                    className="mb-2"
                                    onClick={onClickAddress}>
                                    <FontAwesomeIcon icon={faSearch} />{" "}
                                    {t("searchByAddress")}
                                </Button>
                                <Button
                                    variant="outline-primary"
                                    onClick={onClickGeoloc}>
                                    <FontAwesomeIcon icon={faLocationArrow} />{" "}
                                    {t("searchByGeoloc")}
                                </Button>
                            </div>
                            <Alert variant="info">
                                {t("notice.publicMaskShutdown")}
                            </Alert>
                        </Form>
                    </Col>
                </Row>
            </Container>
        </>
    );
}