From d10b9790dc0fa595212c76139af888af71183476 Mon Sep 17 00:00:00 2001 From: pal-sig <88981777+pal-sig@users.noreply.github.com> Date: Mon, 11 Oct 2021 16:05:59 +0530 Subject: [PATCH] Fix(FE): Pages are refactored (#321) * feat: signup api is added * fix: instrument and signup page is refactored * fix: Settings page is updated --- frontend/src/AppRoutes/pageComponents.ts | 9 +- frontend/src/api/user/signup.ts | 26 +++ frontend/src/modules/Auth/Signup.tsx | 158 ------------------ .../instrumentationPage.tsx | 61 ------- .../src/pages/AddInstrumentation/index.tsx | 47 ++++++ .../src/pages/AddInstrumentation/styles.ts | 20 +++ .../Settings/index.tsx} | 30 ++-- frontend/src/pages/SignUp/index.tsx | 116 +++++++++++++ frontend/src/pages/SignUp/styles.ts | 27 +++ frontend/src/types/api/user/signup.ts | 3 + 10 files changed, 252 insertions(+), 245 deletions(-) create mode 100644 frontend/src/api/user/signup.ts delete mode 100644 frontend/src/modules/Auth/Signup.tsx delete mode 100644 frontend/src/modules/add-instrumentation/instrumentationPage.tsx create mode 100644 frontend/src/pages/AddInstrumentation/index.tsx create mode 100644 frontend/src/pages/AddInstrumentation/styles.ts rename frontend/src/{modules/Settings/settingsPage.tsx => pages/Settings/index.tsx} (60%) create mode 100644 frontend/src/pages/SignUp/index.tsx create mode 100644 frontend/src/pages/SignUp/styles.ts create mode 100644 frontend/src/types/api/user/signup.ts diff --git a/frontend/src/AppRoutes/pageComponents.ts b/frontend/src/AppRoutes/pageComponents.ts index b9e2b21886..7a351c744b 100644 --- a/frontend/src/AppRoutes/pageComponents.ts +++ b/frontend/src/AppRoutes/pageComponents.ts @@ -43,20 +43,17 @@ export const ServicesTablePage = Loadable( ); export const SignupPage = Loadable( - () => import(/* webpackChunkName: "SignupPage" */ 'modules/Auth/Signup'), + () => import(/* webpackChunkName: "SignupPage" */ 'pages/SignUp'), ); export const SettingsPage = Loadable( - () => - import( - /* webpackChunkName: "SettingsPage" */ 'modules/Settings/settingsPage' - ), + () => import(/* webpackChunkName: "SettingsPage" */ 'pages/Settings'), ); export const InstrumentationPage = Loadable( () => import( - /* webpackChunkName: "InstrumentationPage" */ 'modules/add-instrumentation/instrumentationPage' + /* webpackChunkName: "InstrumentationPage" */ 'pages/AddInstrumentation' ), ); diff --git a/frontend/src/api/user/signup.ts b/frontend/src/api/user/signup.ts new file mode 100644 index 0000000000..7173cc1978 --- /dev/null +++ b/frontend/src/api/user/signup.ts @@ -0,0 +1,26 @@ +import axios from 'api'; +import { ErrorResponseHandler } from 'api/ErrorResponseHandler'; +import { AxiosError } from 'axios'; +import { ErrorResponse, SuccessResponse } from 'types/api'; +import { Props } from 'types/api/user/signup'; + +const signup = async ( + props: Props, +): Promise | ErrorResponse> => { + try { + const response = await axios.post('/user?email=', { + ...props, + }); + + return { + statusCode: 200, + error: null, + message: response.data.status, + payload: response.data.data, + }; + } catch (error) { + return ErrorResponseHandler(error as AxiosError); + } +}; + +export default signup; diff --git a/frontend/src/modules/Auth/Signup.tsx b/frontend/src/modules/Auth/Signup.tsx deleted file mode 100644 index 4cdc946e57..0000000000 --- a/frontend/src/modules/Auth/Signup.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import { Button, Input, Row, Space } from 'antd'; -import api from 'api'; -import { IS_LOGGED_IN } from 'constants/auth'; -import ROUTES from 'constants/routes'; -import React, { useState } from 'react'; -import { withRouter } from 'react-router'; -import { RouteComponentProps } from 'react-router-dom'; - -type SignUpProps = RouteComponentProps; - -const Signup = (props: SignUpProps): JSX.Element => { - const [state, setState] = useState({ submitted: false }); - const [formState, setFormState] = useState({ - firstName: { value: '' }, - companyName: { value: '' }, - email: { value: '' }, - password: { value: '', valid: true }, - emailOptIn: { value: true }, - }); - - const updateForm = (name: any, target: any, valueAttr = 'value') => { - /* Validate password (if applicable) */ - if (name === 'firstName') { - setFormState({ - ...formState, - firstName: { ...formState.firstName, value: target[valueAttr] }, - }); - } else if (name === 'email') { - setFormState({ - ...formState, - email: { ...formState.email, value: target[valueAttr] }, - }); - } - }; - - const handleSubmit = (e: any) => { - e.preventDefault(); - - setState({ ...state, submitted: true }); - - const payload = { - first_name: formState.firstName, - email: formState.email, - }; - - const texttolog = JSON.stringify(payload); - - api.post('/user?email=' + texttolog).then((res) => { - // console.log(res); - // console.log(res.data); - }); - - localStorage.setItem(IS_LOGGED_IN, 'yes'); - props.history.push(ROUTES.APPLICATION); - }; - - return ( -
- -

- {/* */} - Create your account -

-
- Monitor your applications. Find what is causing issues. -
- - -
- -
-
-
-
- - updateForm('email', e.target)} - required - // disabled={accountLoading} - id="signupEmail" - /> -
- -
- - updateForm('firstName', e.target)} - required - // disabled={accountLoading} - id="signupFirstName" - /> -
- -
- -
- - {/*
- By clicking the button above you agree to our{' '} - - Terms of Service - {' '} - and{' '} - - Privacy Policy - - . -
*/} -
-
- -
- ); -}; - -export default withRouter(Signup); diff --git a/frontend/src/modules/add-instrumentation/instrumentationPage.tsx b/frontend/src/modules/add-instrumentation/instrumentationPage.tsx deleted file mode 100644 index 4766169ad8..0000000000 --- a/frontend/src/modules/add-instrumentation/instrumentationPage.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { Space } from 'antd'; -import React from 'react'; -import { useSelector } from 'react-redux'; -import { AppState } from 'store/reducers'; -import styled from 'styled-components'; -import AppReducer from 'types/reducer/app'; - -const InstrumentCard = styled.div<{ - isDarkMode: boolean; -}>` - border-radius: 4px; - background: ${({ isDarkMode }): string => (isDarkMode ? '#313131' : '#ddd')}; - padding: 33px 23px; - max-width: 800px; - margin-top: 40px; -`; - -const InstrumentationPage = (): JSX.Element => { - const { isDarkMode } = useSelector((state) => state.app); - - return ( - - -
-

Instrument your application

-
- - Congrats, you have successfully installed SigNoz! -
- To start seeing YOUR application data here, follow the instructions in the - docs - - - {' '} - https://signoz.io/docs/instrumentation/overview - -
- If you face any issues, join our{' '} - - slack community - {' '} - to ask any questions or mail us at{' '} - - support@signoz.io - - - - - ); -}; - -export default InstrumentationPage; diff --git a/frontend/src/pages/AddInstrumentation/index.tsx b/frontend/src/pages/AddInstrumentation/index.tsx new file mode 100644 index 0000000000..3698993f3c --- /dev/null +++ b/frontend/src/pages/AddInstrumentation/index.tsx @@ -0,0 +1,47 @@ +import { Typography } from 'antd'; +import React from 'react'; +import { useSelector } from 'react-redux'; +import { AppState } from 'store/reducers'; +import AppReducer from 'types/reducer/app'; + +import { Container, Heading } from './styles'; + +const InstrumentationPage = (): JSX.Element => { + const { isDarkMode } = useSelector((state) => state.app); + + return ( + <> + Instrument your application + + Congrats, you have successfully installed SigNoz!{' '} + + To start seeing YOUR application data here, follow the instructions in the + docs - + + + https://signoz.io/docs/instrumentation/overview + +  If you face any issues, join our + +  slack community  + + to ask any questions or mail us at  + + support@signoz.io + + + + ); +}; + +export default InstrumentationPage; diff --git a/frontend/src/pages/AddInstrumentation/styles.ts b/frontend/src/pages/AddInstrumentation/styles.ts new file mode 100644 index 0000000000..af4a0bfb29 --- /dev/null +++ b/frontend/src/pages/AddInstrumentation/styles.ts @@ -0,0 +1,20 @@ +import { Card, Typography } from 'antd'; +import styled from 'styled-components'; + +interface Props { + isDarkMode: boolean; +} + +export const Container = styled(Card)` + border-radius: 4px; + background: ${({ isDarkMode }): string => (isDarkMode ? '#313131' : '#ddd')}; + + width: 80%; +`; + +export const Heading = styled(Typography)` + &&& { + font-size: 2rem; + margin-bottom: 1rem; + } +`; diff --git a/frontend/src/modules/Settings/settingsPage.tsx b/frontend/src/pages/Settings/index.tsx similarity index 60% rename from frontend/src/modules/Settings/settingsPage.tsx rename to frontend/src/pages/Settings/index.tsx index a2abe789fd..64123991e8 100644 --- a/frontend/src/modules/Settings/settingsPage.tsx +++ b/frontend/src/pages/Settings/index.tsx @@ -1,29 +1,23 @@ import { Form, Input, Space } from 'antd'; import { Alert } from 'antd'; -import React, { useEffect, useState } from 'react'; -import { connect } from 'react-redux'; -import { AppState } from 'store/reducers'; +import React, { useEffect } from 'react'; -interface SettingsPageProps {} - -const layout = { - labelCol: { span: 3 }, - wrapperCol: { span: 6 }, -}; - -const SettingsPage = (props: SettingsPageProps) => { +const SettingsPage = (): JSX.Element => { const [form] = Form.useForm(); useEffect(() => { form.setFieldsValue({ retention_period: '3 days', }); - }); + }, [form]); return ( - + <>
{ type="info" /> - + ); }; -const mapStateToProps = (state: AppState): {} => { - return {}; -}; - -export default connect(mapStateToProps, {})(SettingsPage); +export default SettingsPage; diff --git a/frontend/src/pages/SignUp/index.tsx b/frontend/src/pages/SignUp/index.tsx new file mode 100644 index 0000000000..43b59e8f1f --- /dev/null +++ b/frontend/src/pages/SignUp/index.tsx @@ -0,0 +1,116 @@ +import { Button, Input, Typography } from 'antd'; +import signup from 'api/user/signup'; +import { IS_LOGGED_IN } from 'constants/auth'; +import ROUTES from 'constants/routes'; +import history from 'lib/history'; +import React, { useState } from 'react'; + +import { ButtonContainer, Container, FormWrapper, Title } from './styles'; + +const Signup = (): JSX.Element => { + const [state, setState] = useState({ submitted: false }); + const [formState, setFormState] = useState({ + firstName: { value: '' }, + companyName: { value: '' }, + email: { value: '' }, + password: { value: '', valid: true }, + emailOptIn: { value: true }, + }); + + const updateForm = ( + name: string, + target: EventTarget & HTMLInputElement, + ): void => { + if (name === 'firstName') { + setFormState({ + ...formState, + firstName: { ...formState.firstName, value: target.value }, + }); + } else if (name === 'email') { + setFormState({ + ...formState, + email: { ...formState.email, value: target.value }, + }); + } + }; + + const handleSubmit = (e: React.FormEvent): void => { + (async (): Promise => { + try { + e.preventDefault(); + setState((state) => ({ ...state, submitted: true })); + const payload = { + first_name: formState.firstName, + email: formState.email, + }; + const response = await signup({ + email: JSON.stringify(payload), + }); + + if (response.statusCode === 200) { + localStorage.setItem(IS_LOGGED_IN, 'yes'); + history.push(ROUTES.APPLICATION); + } else { + // @TODO throw a error notification here + } + } catch (error) { + console.error(error); + // @TODO throw a error notification here + } + })(); + }; + + return ( +
+ + Create your account + + Monitor your applications. Find what is causing issues. + + + + + logo + + +
+ + updateForm('email', e.target)} + required + id="signupEmail" + /> +
+ +
+ + updateForm('firstName', e.target)} + required + id="signupFirstName" + /> +
+ + + + + + +
+ ); +}; + +export default Signup; diff --git a/frontend/src/pages/SignUp/styles.ts b/frontend/src/pages/SignUp/styles.ts new file mode 100644 index 0000000000..5a2c4cc462 --- /dev/null +++ b/frontend/src/pages/SignUp/styles.ts @@ -0,0 +1,27 @@ +import { Space, Typography } from 'antd'; +import styled from 'styled-components'; + +export const Container = styled(Space)` + &&& { + padding-left: 2rem; + margin-top: 3rem; + } +`; + +export const Title = styled(Typography)` + &&& { + font-size: 1rem; + font-weight: bold; + } +`; + +export const FormWrapper = styled.div` + display: flex; + justify-content: center; + + margin-top: 2rem; +`; + +export const ButtonContainer = styled.div` + margin-top: 0.5rem; +`; diff --git a/frontend/src/types/api/user/signup.ts b/frontend/src/types/api/user/signup.ts new file mode 100644 index 0000000000..d459144921 --- /dev/null +++ b/frontend/src/types/api/user/signup.ts @@ -0,0 +1,3 @@ +export interface Props { + email: string; +}