2021-12-31 17:22:22 +01:00
|
|
|
import React, { useState } from 'react';
|
2021-12-31 17:58:40 +01:00
|
|
|
import { nanoid } from 'nanoid';
|
2021-12-31 17:22:22 +01:00
|
|
|
import StyledWrapper from './StyledWrapper';
|
|
|
|
|
2021-12-31 17:58:40 +01:00
|
|
|
const initialState = [{
|
|
|
|
uid: nanoid(),
|
|
|
|
enabled: true
|
|
|
|
}];
|
|
|
|
|
2021-12-31 17:22:22 +01:00
|
|
|
const RequestHeaders = () => {
|
2021-12-31 17:58:40 +01:00
|
|
|
const [headers, setHeaders] = useState(initialState);
|
2021-12-31 17:22:22 +01:00
|
|
|
|
|
|
|
const addHeader = () => {
|
|
|
|
let newHeader = {
|
2021-12-31 17:58:40 +01:00
|
|
|
uid: nanoid(),
|
2021-12-31 17:22:22 +01:00
|
|
|
key: '',
|
|
|
|
value: '',
|
|
|
|
description: '',
|
2021-12-31 17:58:40 +01:00
|
|
|
enabled: true
|
2021-12-31 17:22:22 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
let newHeaders = [...headers, newHeader];
|
|
|
|
setHeaders(newHeaders);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleHeaderValueChange = (e, index, menu) => {
|
|
|
|
// todo: yet to implement
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleRemoveHeader = (index) => {
|
|
|
|
headers.splice(index, 1);
|
2021-12-31 17:58:40 +01:00
|
|
|
setHeaders([...headers]);
|
2021-12-31 17:22:22 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<StyledWrapper className="mt-4">
|
|
|
|
<table>
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<td></td>
|
|
|
|
<td>KEY</td>
|
|
|
|
<td>VALUE</td>
|
|
|
|
<td>DESCRIPTION</td>
|
|
|
|
<td></td>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
2021-12-31 18:55:53 +01:00
|
|
|
{headers && headers.length ? headers.map((header, index) => {
|
2021-12-31 17:22:22 +01:00
|
|
|
return (
|
2021-12-31 17:58:40 +01:00
|
|
|
<tr key={header.uid}>
|
2021-12-31 17:22:22 +01:00
|
|
|
<td>
|
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
defaultChecked={header.enabled}
|
|
|
|
name="enabled"
|
|
|
|
onChange={(e) => handleHeaderValueChange(e, index, 'enabled')}
|
|
|
|
/>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
name="key"
|
|
|
|
defaultValue={headers[index].key}
|
|
|
|
onChange={(e) => handleHeaderValueChange(e, index, 'key')}
|
|
|
|
/>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
name="value"
|
|
|
|
defaultValue={headers[index].value}
|
|
|
|
onChange={(e) => handleHeaderValueChange(e, index, 'value')}
|
|
|
|
/>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
name="description"
|
|
|
|
defaultValue={headers[index].description}
|
|
|
|
onChange={(e) => handleHeaderValueChange(e, index, 'description')}
|
|
|
|
/>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<button onClick={() => handleRemoveHeader(index)}>
|
|
|
|
remove
|
|
|
|
</button>
|
|
|
|
</td>
|
|
|
|
</tr>
|
2021-12-31 17:58:40 +01:00
|
|
|
);
|
2021-12-31 18:55:53 +01:00
|
|
|
}) : null}
|
2021-12-31 17:22:22 +01:00
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<button className="btn-add-header" onClick={addHeader}>+ Add Header</button>
|
|
|
|
</StyledWrapper>
|
|
|
|
)
|
|
|
|
};
|
|
|
|
export default RequestHeaders;
|