В компоненте React с условными обозначениями (для целей фильтрации), где разместить Spinner? - PullRequest
Новая
       7

В компоненте React с условными обозначениями (для целей фильтрации), где разместить Spinner?

0 голосов
/ 30 сентября 2019

Я использую Giphy API и у меня есть рабочее приложение, которое ищет GIF-файлы. В моем компоненте SearchResults есть условия, чтобы пользователь мог фильтровать результаты поиска (например, Rated G, Rated PG и т. Д.). Но каждый gif требует различного количества времени для рендеринга, и я хотел бы добавить один спиннер (созданный компонент Spinner + gif) или спиннеры для каждого элемента для лучшего UI / UX. Поскольку в моем коде есть условия, я не понимаю, как и где разместить мой счетчик ... Приветствую любую помощь или предложения!

Ниже мой код: 

import React from 'react';

import SearchCategories from './SearchCategories';
import SearchCard from './SearchCard';
// import Spinner from '../layout/Spinner';
import { getFilteredByRating, getSortedByDate } from '../../utils/filters';

const SearchResult = ({
  gifs,
  searchMessage,
  ratingType,
  isDataSorting,
  onSortByDate,
  onSortByRating,
  onClearFilter,
}) => {
  const renderedGifs = gifs.slice();

  return (
    <React.Fragment>
      <h3 className="searchMessage text-center mb-4">{searchMessage}</h3>
      <SearchCategories
        onSortByDate={onSortByDate}
        onSortByRating={onSortByRating}
        onClearFilter={onClearFilter}
      />
      <br />

      {
        // if (gifs === undefined || !gifs.length) {
        //   return <Spinner />
        // } else {
        //   // the code below - the gif results
        // }
      }

      <div className="row justify-content-between">
        {(isDataSorting &&
          getSortedByDate(renderedGifs).map(gif => (
            <div className="col-md-3">
              <div className="m-2 card bg-transparent" key={gif.id}>
                <SearchCard gif={gif} />
              </div>
            </div>
          ))) ||
          (ratingType &&
            (getFilteredByRating(ratingType, renderedGifs).length !== 0 ? (
              getFilteredByRating(ratingType, renderedGifs).map(gif => (
                <div className="col-md-3">
                  <div className="m-2 card bg-transparent" key={gif.id}>
                    <SearchCard gif={gif} />
                  </div>
                </div>
              ))
            ) : (
              <p className="searchNotFound">
                Oops! None of the search results match this rating.
              </p>
            ))) ||
          gifs.map(gif => (
            // col-3  col-lg-3
            <div className="col-md-3">
              <div className="m-2 card bg-transparent" key={gif.id}>
                <SearchCard gif={gif} />
              </div>
            </div>
          ))}
      </div>

    </React.Fragment>
  );
};

export default SearchResult;

1 Ответ

0 голосов
/ 30 сентября 2019

Я вообще не смотрел на вашу логику, но синтаксис выглядел забавно. Посмотрите, сработает ли это ... Если нет, я удалю это! 

    //...

    return (
      <React.Fragment>
        <h3 className="searchMessage text-center mb-4">{searchMessage}</h3>
        <SearchCategories
          onSortByDate={onSortByDate}
          onSortByRating={onSortByRating}
          onClearFilter={onClearFilter}
        />
        <br />

        {/* look here */}

        {gifs === undefined || !gifs.length ? (
          <Spinner />
        ) : (
          <div className="row justify-content-between">
            {(isDataSorting &&
              getSortedByDate(renderedGifs).map(gif => (
                <div className="col-md-3">
                  <div className="m-2 card bg-transparent" key={gif.id}>
                    <SearchCard gif={gif} />
                  </div>
                </div>
              ))) ||
              (ratingType &&
                (getFilteredByRating(ratingType, renderedGifs).length !== 0 ? (
                  getFilteredByRating(ratingType, renderedGifs).map(gif => (
                    <div className="col-md-3">
                      <div className="m-2 card bg-transparent" key={gif.id}>
                        <SearchCard gif={gif} />
                      </div>
                    </div>
                  ))
                ) : (
                  <p className="searchNotFound">
                    Oops! None of the search results match this rating.
                  </p>
                ))) ||
              gifs.map(gif => (
                // col-3  col-lg-3
                <div className="col-md-3">
                  <div className="m-2 card bg-transparent" key={gif.id}>
                    <SearchCard gif={gif} />
                  </div>
                </div>
              ))}
          </div>
        )}
      </React.Fragment>
    );

    //...
    ```
...