137 lines
3.5 KiB
TypeScript
137 lines
3.5 KiB
TypeScript
import React from "react";
|
|
import { connect } from "react-redux";
|
|
import { RouteComponentProps } from "react-router";
|
|
import styled from "styled-components";
|
|
import { AppState } from "../../reducers";
|
|
import { ActionDataState } from "../../reducers/entityReducers/actionsReducer";
|
|
import { API_EDITOR_ID_URL, API_EDITOR_URL } from "../../constants/routes";
|
|
import { BaseButton } from "../../components/blueprint/ButtonComponent";
|
|
import { FormIcons } from "../../icons/FormIcons";
|
|
import { Spinner } from "@blueprintjs/core";
|
|
|
|
const ApiSidebarWrapper = styled.div`
|
|
height: 100%;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
`;
|
|
const ApiItemsWrapper = styled.div`
|
|
flex: 1;
|
|
`;
|
|
|
|
const ApiItem = styled.div<{ isSelected: boolean }>`
|
|
height: 32px;
|
|
width: 100%;
|
|
padding: 5px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 2px;
|
|
background-color: ${props =>
|
|
props.isSelected ? props.theme.colors.paneCard : props.theme.colors.paneBG}
|
|
:hover {
|
|
background-color: ${props => props.theme.colors.paneCard};
|
|
}
|
|
`;
|
|
|
|
const HTTPMethod = styled.span<{ method: string | undefined }>`
|
|
flex: 1;
|
|
font-size: 12px;
|
|
color: ${props => {
|
|
switch (props.method) {
|
|
case "GET":
|
|
return "#29CCA3";
|
|
case "POST":
|
|
return "#F7C75B";
|
|
case "PUT":
|
|
return "#30A5E0";
|
|
case "DELETE":
|
|
return "#CE4257";
|
|
default:
|
|
return "#333";
|
|
}
|
|
}};
|
|
`;
|
|
|
|
const ActionName = styled.span`
|
|
flex: 3;
|
|
padding: 0 2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
`;
|
|
|
|
const CreateNewButton = styled(BaseButton)`
|
|
&& {
|
|
border: none;
|
|
color: ${props => props.theme.colors.textOnDarkBG};
|
|
height: 32px;
|
|
&:hover {
|
|
color: ${props => props.theme.colors.paneBG};
|
|
svg {
|
|
path {
|
|
fill: ${props => props.theme.colors.paneBG};
|
|
}
|
|
}
|
|
}
|
|
svg {
|
|
height: 12px;
|
|
}
|
|
}
|
|
`;
|
|
|
|
interface ReduxStateProps {
|
|
actions: ActionDataState;
|
|
}
|
|
|
|
type Props = ReduxStateProps & RouteComponentProps<{ id: string }>;
|
|
|
|
class ApiSidebar extends React.Component<Props> {
|
|
handleCreateNew = () => {
|
|
const { history } = this.props;
|
|
history.push(API_EDITOR_URL);
|
|
};
|
|
|
|
render() {
|
|
const { actions, history, match } = this.props;
|
|
const activeActionId = match.params.id;
|
|
return (
|
|
<ApiSidebarWrapper>
|
|
{actions.isFetching && <Spinner size={30} />}
|
|
<ApiItemsWrapper>
|
|
{actions.data.map(action => (
|
|
<ApiItem
|
|
key={action.id}
|
|
onClick={() => history.push(API_EDITOR_ID_URL(action.id))}
|
|
isSelected={activeActionId === action.id}
|
|
>
|
|
<HTTPMethod method={action.actionConfiguration.httpMethod}>
|
|
{action.actionConfiguration.httpMethod}
|
|
</HTTPMethod>
|
|
<ActionName>{action.name}</ActionName>
|
|
</ApiItem>
|
|
))}
|
|
{!activeActionId && !actions.isFetching && (
|
|
<ApiItem isSelected>
|
|
<HTTPMethod method="" />
|
|
<ActionName>New Api</ActionName>
|
|
</ApiItem>
|
|
)}
|
|
</ApiItemsWrapper>
|
|
<CreateNewButton
|
|
text="Create new API"
|
|
icon={FormIcons.ADD_NEW_ICON()}
|
|
onClick={this.handleCreateNew}
|
|
/>
|
|
</ApiSidebarWrapper>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state: AppState): ReduxStateProps => ({
|
|
actions: state.entities.actions,
|
|
});
|
|
|
|
export default connect(mapStateToProps)(ApiSidebar);
|