Demo.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { withRouter } from 'react-router-dom';

import DemoHeader from './DemoHeader';
import SelectFileHeader from './SelectFileHeader';
import SelectFileInput from './SelectFileInput';
import DemoSearchHeader from './DemoSearchHeader';
import DemoSearch from './DemoSearch';
import ResultCard from './ResultCard';
import SearchResultcontainer from './SearchResultContainer';

const Demo = ({ history }) => {

  history.listen(() => {
      window.scrollTo(0, 0);
  });

  const [disableBtn, setDisableBtn] = useState('');
  const [uploaded, setUploaded] = useState(false);
  const [tweets, setTweets] = useState([]);
  const [searchFilter, setSearchFilter] = useState('');

  useEffect(() => {

    const fetchTweets = async () => {
      const fetchedTweets = await axios.get('http://localhost:4000/tweetimgs');

      setTweets(fetchedTweets.data);
    }

    fetchTweets();

    setUploaded(false);
    setDisableBtn('');

  }, [uploaded]);

  async function handleFileUpload(fileInput) {
    setDisableBtn('disable');

    const formData = new FormData();

    formData.append('tweetImg', fileInput);

    await axios.post('http://localhost:4000/tweetimg-upload', formData);

    setTimeout(() => {
      setUploaded(true);
    }, 1000);
  }

  const filteredTweets = tweets.filter(tweet => {
    return tweet.content.toLowerCase().includes(searchFilter.toLowerCase());
  });

  const searchResults = searchFilter !== '' ? filteredTweets.map(tweet => {
    return (
      <ResultCard key={tweet._id} url={tweet.url} />
    );
  }) : null;

  return (
    <div className="demoContainer">
      <DemoHeader />
      <SelectFileHeader />
      <SelectFileInput 
        onUpload={handleFileUpload} 
        didUpload={uploaded} 
        isDisabled={disableBtn} />
      <DemoSearchHeader />
      <DemoSearch setFilter={setSearchFilter} />
      <SearchResultcontainer>
        {searchResults}
      </SearchResultcontainer>
    </div>
  );
};

export default withRouter(Demo);

DemoSearch.js

import React, { useRef } from 'react';

const DemoSearch = ({ setFilter }) => {
  const inputRef = useRef();

  function handleSearch() {
    setFilter(inputRef.current.value);
  }

  return (
    <div className="demoSearch">
      <input ref={inputRef} className="demoSearchInput" type="text" placeholder="Search tweets" />
      <button className="demoSubmit" type="submit" onClick={handleSearch}>
        Search
      </button>
    </div>
  );
};

export default DemoSearch;

ResultCard.js

import React from 'react';

const ResultCard = ({ url }) => {
  return (
    <div className="resultCard">
      <img className="resultImg" src={url} alt="tweet" />
      <a href={url}>
        <div className="enlargeBtn">
          <i className="fas fa-search-plus fa-2x enlargeIcon"></i>
        </div>
      </a>
    </div>
  );
};

export default ResultCard;

SelectFileInput.js

import React from 'react';
import SelectFileSpinner from './SelectFileSpinner';

const SelectFileInput = ({ onUpload, didUpload, isDisabled }) => {
  function handeUpload(e) {
    e.preventDefault();
    onUpload(e.target.children[0].files[0]);
  }

  const uploadButton = didUpload ? (
      <SelectFileSpinner />
  ) : (
    <button className={`uploadBtn ${isDisabled}`} type="submit">Upload</button>
  );

  return (
    <form className="selectFile" onSubmit={handeUpload}>
      <input className="selectFileInput" type="file" />
      {uploadButton}
    </form>
  );
};

export default SelectFileInput;