META-INF.resources.js.components.render_times.RenderTimes.tsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.layout.reports.web
Liferay Layout Reports Web
The newest version!
/**
 * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */

import ClayAlert from '@clayui/alert';
import ClayEmptyState from '@clayui/empty-state';
import {
	ExperienceSelector,
	SearchResultsMessage,
	SegmentExperience,
} from '@liferay/layout-js-components-web';
import {fetch} from 'frontend-js-web';
import React, {useContext, useEffect, useMemo, useState} from 'react';

import {Fragment, FragmentFilter} from '../../constants/Fragment';
import {ConstantsContext} from '../../context/ConstantsContext';
import Filter from './Filter';
import FragmentList from './FragmentList';
import ResultsBar from './ResultsBar';
import getFragmentsByFilterValue from './getFragmentsByFilterValue';

export default function RenderTimes({
	segmentsExperiences,
	selectedSegmentsExperience,
	url,
}: {
	segmentsExperiences: SegmentExperience[];
	selectedSegmentsExperience: SegmentExperience;
	url: string;
}) {
	const [ascending, setAscending] = useState(false);
	const [filters, setFilters] = useState({
		origin: null,
		status: null,
		type: null,
	});
	const [fragments, setFragments] = useState([]);
	const [searchValue, setSearchValue] = useState('');
	const [visibleInfo, setVisibleInfo] = useState(true);
	const {learnResources} = useContext(ConstantsContext);

	const filteredFragments = useMemo(() => {
		const fragmentsByFilterValue = getFragmentsByFilterValue(
			filters,
			fragments
		);

		const fragmentsBySearchValue = searchValue
			? fragmentsByFilterValue.filter(
					(fragment) =>
						fragment.name.toLowerCase().indexOf(searchValue) !== -1
				)
			: fragmentsByFilterValue;

		return fragmentsBySearchValue;
	}, [fragments, searchValue, filters]);

	useEffect(() => {
		fetch(url, {method: 'GET'})
			.then((response) => response.json())
			.then((fragments) => setFragments(fragments))
			.catch((error) => console.error(error));
	}, [url]);

	return (
		<>
			{segmentsExperiences.length > 1 ? (
				
			) : null}

			

			

			

			{visibleInfo ? (
				 setVisibleInfo(false)}
					role="none"
				>
					{Liferay.Language.get(
						'render-times-are-approximate-and-subject-to-slight-variations-due-to-server-status-and-load'
					)}
				
			) : null}

			{filteredFragments.length ? (
				
			) : (
				
			)}
		
	);
}