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

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.headless.builder.web
Liferay Headless Builder 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 {Text} from '@clayui/core';
import ClayForm from '@clayui/form';
import ClayIcon from '@clayui/icon';
import classNames from 'classnames';
import React, {Dispatch, SetStateAction, useEffect, useState} from 'react';

import FiltersAndSorting from './endpointComponents/FiltersAndSorting';
import PathParameterConfiguration from './endpointComponents/PathParameterConfiguration';
import {Select} from './fieldComponents/Select';
import {HTTP_METHODS, RETRIEVE_TYPES} from './utils/constants';
import {getAllItems} from './utils/fetchUtil';

interface EditEndpointConfigurationProps {
	currentAPIApplicationId: string;
	data: Partial;
	displayError: EndpointDataError;
	schemaAPIURLPath: string;
	setData: Dispatch>>;
}

export default function EditEndpointConfiguration({
	currentAPIApplicationId,
	data,
	displayError,
	schemaAPIURLPath,
	setData,
}: EditEndpointConfigurationProps) {
	const [schemaOptions, setSchemaOptions] = useState([]);
	const [selectedRequestBodySchema, setSelectedRequestBodySchema] =
		useState();
	const [selectedResponseBodySchema, setSelectedResponseBodySchema] =
		useState();

	useEffect(() => {
		getAllItems({
			filter: `r_apiApplicationToAPISchemas_c_apiApplicationId eq '${currentAPIApplicationId}'`,
			url: schemaAPIURLPath,
		}).then((result) => {
			const options = result
				? result.map((apiSchemas) => ({
						label: apiSchemas.name,
						value: apiSchemas.id.toString(),
					}))
				: [];

			if (options.length) {
				setSchemaOptions([
					{
						label: Liferay.Language.get('not-selected'),
						value: '0',
					},
					...options,
				]);
			}
		});

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	useEffect(() => {
		if (schemaOptions.length) {
			if (
				data.r_responseAPISchemaToAPIEndpoints_c_apiSchemaId !==
				undefined
			) {
				setSelectedResponseBodySchema(
					schemaOptions.find(
						(option) =>
							option.value ===
							data.r_responseAPISchemaToAPIEndpoints_c_apiSchemaId?.toString()
					)
				);
			}
			if (
				data.r_requestAPISchemaToAPIEndpoints_c_apiSchemaId !==
				undefined
			) {
				setSelectedRequestBodySchema(
					schemaOptions.find(
						(option) =>
							option.value ===
							data.r_requestAPISchemaToAPIEndpoints_c_apiSchemaId?.toString()
					)
				);
			}
		}
	}, [data, schemaOptions]);

	const handleSelectBodySchema = (
		onChangeFn: Dispatch>,
		property: string,
		value: string
	) => {
		setData((previousValue) => ({
			...previousValue,
			[property]: Number(value),
		}));

		onChangeFn(schemaOptions.find((option) => option.value === value));
	};

	return (
		
			{data.httpMethod?.key === HTTP_METHODS.POST && (
				
					<>
						
							{Liferay.Language.get('request-body-schema')}

							
								
							
						

						
						handleSelectBodySchema(
							setSelectedResponseBodySchema,
							'r_responseAPISchemaToAPIEndpoints_c_apiSchemaId',
							value
						)
					}
					options={schemaOptions}
					placeholder={Liferay.Language.get('select-a-schema')}
					searchable
					selectedOption={selectedResponseBodySchema}
				/>
			

			{data.httpMethod?.key === HTTP_METHODS.GET &&
				data.retrieveType?.key === RETRIEVE_TYPES.SINGLE_ELEMENT && (
					
				)}

			{data.httpMethod?.key === HTTP_METHODS.GET &&
				data.retrieveType?.key === RETRIEVE_TYPES.COLLECTION && (
					
				)}
		
	);
}