removing feedback fab button

This commit is contained in:
Udasi Tharani 2022-02-22 22:35:29 +05:30
parent 05c79b7119
commit 3beb7f1843
3 changed files with 0 additions and 194 deletions

View File

@ -1,127 +0,0 @@
import { CloseCircleOutlined, CommentOutlined } from '@ant-design/icons';
import { Button, Divider, Form, Input, notification, Typography } from 'antd';
import { Callbacks } from 'rc-field-form/lib/interface';
import React, { useCallback, useState } from 'react';
import {
Button as IconButton,
ButtonContainer,
Card,
CenterText,
Container,
TitleContainer,
FormItem,
} from './styles';
const { Title } = Typography;
const { TextArea } = Input;
import sendFeedbackApi from 'api/userFeedback/sendFeedback';
const Feedback = (): JSX.Element => {
const [isOpen, setisOpen] = useState<boolean>(false);
const [form] = Form.useForm();
const [isLoading, setIsLoading] = useState<boolean>(false);
const [notifications, Element] = notification.useNotification();
const isToggleHandler = useCallback(() => {
setisOpen((state) => !state);
}, []);
const onFinishHandler: Callbacks<Feedback>['onFinish'] = async (
value: Feedback,
): Promise<void> => {
try {
setIsLoading(true);
const { feedback, email = '' } = value;
const response = await sendFeedbackApi({
email,
message: feedback,
});
if (response === 200) {
notifications.success({
message: 'Thanks for your feedback!',
description:
'We have noted down your feedback and will work on improving SIgNoz based on that!',
});
isToggleHandler();
} else {
notifications.error({
message: 'Error!',
description: 'Something went wrong',
});
}
setIsLoading(false);
} catch (error) {
notifications.error({
message: 'Something went wrong',
});
setIsLoading(false);
}
};
return (
<Container>
{!isOpen && (
<IconButton onClick={isToggleHandler} type="primary" size="large">
<CommentOutlined />
</IconButton>
)}
{Element}
{isOpen && (
<Form onFinish={onFinishHandler} form={form}>
<Card>
<TitleContainer>
<Title
aria-label="How can we improve SigNoz?"
style={{ margin: 0 }}
level={5}
>
How can we improve SigNoz?
</Title>
<CloseCircleOutlined onClick={isToggleHandler} />
</TitleContainer>
<Divider />
<FormItem name="feedback" required>
<TextArea
required
rows={3}
placeholder="Share what can we improve ( e.g. Not able to find how to see metrics... )"
/>
</FormItem>
<FormItem name="email">
<Input type="email" placeholder="Email (optional)" />
</FormItem>
<CenterText>This will just be visible to our maintainers</CenterText>
<ButtonContainer>
<Button
disabled={isLoading}
loading={isLoading}
htmlType="submit"
type="primary"
>
Share
</Button>
</ButtonContainer>
</Card>
</Form>
)}
</Container>
);
};
interface Feedback {
email?: string;
feedback: string;
}
export default Feedback;

View File

@ -1,64 +0,0 @@
import {
Button as ButtonComponent,
Card as CardComponent,
Typography,
Form,
} from 'antd';
import styled from 'styled-components';
export const Container = styled.div`
position: fixed;
bottom: 5%;
right: 4%;
z-index: 999999;
`;
export const CenterText = styled(Typography)`
&&& {
font-size: 0.75rem;
text-align: center;
margin-bottom: 0.5rem;
}
`;
export const TitleContainer = styled.div`
&&& {
display: flex;
justify-content: space-between;
align-items: center;
}
`;
export const Card = styled(CardComponent)`
&&& {
min-width: 400px;
}
`;
export const ButtonContainer = styled.div`
display: flex;
justify-content: flex-end;
align-items: center;
`;
export const Button = styled(ButtonComponent)`
height: 4rem !important;
width: 4rem !important;
display: flex;
justify-content: center;
align-items: center;
border-radius: 25px !important;
background-color: #65b7f3;
svg {
width: 2rem;
height: 2rem;
}
`;
export const FormItem = styled(Form.Item)`
margin-top: 0.75rem;
margin-bottom: 0.75rem;
`;

View File

@ -7,7 +7,6 @@ import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import AppReducer from 'types/reducer/app';
import Feedback from './FeedBack';
import { Content, Footer, Layout } from './styles';
const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
@ -40,8 +39,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
</Content>
<Footer>{`SigNoz Inc. © ${currentYear}`}</Footer>
</Layout>
<Feedback />
</Layout>
);
};