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

@@ -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" */ 'pages/Settings'),
-		import(
-			/* webpackChunkName: "SettingsPage" */ 'modules/Settings/settingsPage'
-		),
 );
 
 export const InstrumentationPage = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "InstrumentationPage" */ 'modules/add-instrumentation/instrumentationPage'
+			/* webpackChunkName: "InstrumentationPage" */ 'pages/AddInstrumentation'
 		),
 );
 

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<SuccessResponse<undefined> | 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;

frontend/src/modules/Auth/Signup.tsx

@@ -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<any>;
-
-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 (
-		<div className="signup-form">
-			<Space
-				direction="vertical"
-				className="space-top"
-				style={{ width: '100%', paddingLeft: 32 }}
-			>
-				<h1
-					className="title"
-					style={{
-						marginBottom: 0,
-						marginTop: 40,
-						display: 'flex',
-						alignItems: 'center',
-					}}
-				>
-					{/* <img src={"Signoz-white.svg"} alt="" style={{ height: 60 }} /> */}
-					Create your account
-				</h1>
-				<div className="page-caption">
-					Monitor your applications. Find what is causing issues.
-				</div>
-			</Space>
-			<Row style={{ display: 'flex', justifyContent: 'center' }}>
-				<div
-					style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}
-				>
-					<img
-						src={'signoz.svg'}
-						style={{ maxHeight: '100%', maxWidth: 300, marginTop: 64 }}
-						alt=""
-						className="main-img"
-					/>
-				</div>
-				<div
-					style={{
-						display: 'flex',
-						justifyContent: 'flex-start',
-						margin: '0 32px',
-						flexDirection: 'column',
-						paddingTop: 32,
-						maxWidth: '32rem',
-					}}
-				>
-					<form onSubmit={handleSubmit}>
-						<div className="input-set">
-							<label htmlFor="signupEmail">Email</label>
-							<Input
-								placeholder="mike@netflix.com"
-								type="email"
-								value={formState.email.value}
-								onChange={(e) => updateForm('email', e.target)}
-								required
-								// disabled={accountLoading}
-								id="signupEmail"
-							/>
-						</div>
-
-						<div className="input-set">
-							<label htmlFor="signupFirstName">First Name</label>
-							<Input
-								placeholder="Mike"
-								autoFocus
-								value={formState.firstName.value}
-								onChange={(e) => updateForm('firstName', e.target)}
-								required
-								// disabled={accountLoading}
-								id="signupFirstName"
-							/>
-						</div>
-
-						<div className="text-center space-top" style={{ marginTop: 12 }}>
-							<Button
-								type="primary"
-								htmlType="submit"
-								data-attr="signup"
-								disabled={state.submitted && !formState.password}
-								// loading={accountLoading}
-							>
-								Get Started
-							</Button>
-						</div>
-
-						{/* <div style={{ color: '#666666', marginBottom: 60, textAlign: 'center' }} className="space-top">
-                        By clicking the button above you agree to our{' '}
-                        <a href="https://signoz.io" target="_blank">
-                            Terms of Service
-                        </a>{' '}
-                        and{' '}
-                        <a href="https://signoz.io" target="_blank">
-                            Privacy Policy
-                        </a>
-                        .
-                    </div> */}
-					</form>
-				</div>
-			</Row>
-		</div>
-	);
-};
-
-export default withRouter(Signup);

frontend/src/modules/add-instrumentation/instrumentationPage.tsx

@@ -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<AppState, AppReducer>((state) => state.app);
-
-	return (
-		<React.Fragment>
-			<Space style={{ marginLeft: 60, marginTop: 48, display: 'block' }}>
-				<div>
-					<h2>Instrument your application</h2>
-				</div>
-				<InstrumentCard isDarkMode={isDarkMode}>
-					Congrats, you have successfully installed SigNoz!
-					<br />
-					To start seeing YOUR application data here, follow the instructions in the
-					docs -
-					<a
-						href={'https://signoz.io/docs/instrumentation/overview'}
-						target="_blank"
-						rel="noreferrer"
-					>
-						{' '}
-						https://signoz.io/docs/instrumentation/overview
-					</a>
-					<br />
-					If you face any issues, join our{' '}
-					<a
-						href={
-							'https://signoz-community.slack.com/join/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA'
-						}
-						target="_blank"
-						rel="noreferrer"
-					>
-						slack community
-					</a>{' '}
-					to ask any questions or mail us at{' '}
-					<a href={'mailto:support@signoz.io'} target="_blank" rel="noreferrer">
-						support@signoz.io
-					</a>
-				</InstrumentCard>
-			</Space>
-		</React.Fragment>
-	);
-};
-
-export default InstrumentationPage;

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<AppState, AppReducer>((state) => state.app);
+
+	return (
+		<>
+			<Heading>Instrument your application</Heading>
+			<Container isDarkMode={isDarkMode}>
+				<Typography>Congrats, you have successfully installed SigNoz!</Typography>{' '}
+				<Typography>
+					To start seeing YOUR application data here, follow the instructions in the
+					docs -
+				</Typography>
+				<a
+					href={'https://signoz.io/docs/instrumentation/overview'}
+					target="_blank"
+					rel="noreferrer"
+				>
+					https://signoz.io/docs/instrumentation/overview
+				</a>
+				&nbsp;If you face any issues, join our
+				<a
+					href={
+						'https://signoz-community.slack.com/join/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA'
+					}
+					target="_blank"
+					rel="noreferrer"
+				>
+					&nbsp;slack community&nbsp;
+				</a>
+				to ask any questions or mail us at&nbsp;
+				<a href={'mailto:support@signoz.io'} target="_blank" rel="noreferrer">
+					support@signoz.io
+				</a>
+			</Container>
+		</>
+	);
+};
+
+export default InstrumentationPage;

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)<Props>`
+	border-radius: 4px;
+	background: ${({ isDarkMode }): string => (isDarkMode ? '#313131' : '#ddd')};
+
+	width: 80%;
+`;
+
+export const Heading = styled(Typography)`
+	&&& {
+		font-size: 2rem;
+		margin-bottom: 1rem;
+	}
+`;

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 React, { useEffect } from 'react';
-import { connect } from 'react-redux';
-import { AppState } from 'store/reducers';
 
-interface SettingsPageProps {}
+const SettingsPage = (): JSX.Element => {
-
-const layout = {
-	labelCol: { span: 3 },
-	wrapperCol: { span: 6 },
-};
-
-const SettingsPage = (props: SettingsPageProps) => {
 	const [form] = Form.useForm();
 
 	useEffect(() => {
 		form.setFieldsValue({
 			retention_period: '3 days',
 		});
-	});
+	}, [form]);
 
 	return (
-		<React.Fragment>
+		<>
 			<Form
-				{...layout}
+				labelCol={{
+					span: 3,
+				}}
+				wrapperCol={{ span: 6 }}
 				name="basic"
 				initialValues={{ remember: true }}
 				style={{ marginLeft: 20 }}
@@ -44,12 +38,8 @@ const SettingsPage = (props: SettingsPageProps) => {
 					type="info"
 				/>
 			</Space>
-		</React.Fragment>
+		</>
 	);
 };
 
-const mapStateToProps = (state: AppState): {} => {
+export default SettingsPage;
-	return {};
-};
-
-export default connect(mapStateToProps, {})(SettingsPage);

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<HTMLFormElement>): void => {
+		(async (): Promise<void> => {
+			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 (
+		<div>
+			<Container direction="vertical">
+				<Title>Create your account</Title>
+				<Typography>
+					Monitor your applications. Find what is causing issues.
+				</Typography>
+			</Container>
+
+			<FormWrapper>
+				<img src={'signoz.svg'} alt="logo" />
+
+				<form onSubmit={handleSubmit}>
+					<div>
+						<label htmlFor="signupEmail">Email</label>
+						<Input
+							placeholder="mike@netflix.com"
+							type="email"
+							value={formState.email.value}
+							onChange={(e): void => updateForm('email', e.target)}
+							required
+							id="signupEmail"
+						/>
+					</div>
+
+					<div>
+						<label htmlFor="signupFirstName">First Name</label>
+						<Input
+							placeholder="Mike"
+							autoFocus
+							value={formState.firstName.value}
+							onChange={(e): void => updateForm('firstName', e.target)}
+							required
+							id="signupFirstName"
+						/>
+					</div>
+
+					<ButtonContainer>
+						<Button
+							type="primary"
+							htmlType="submit"
+							data-attr="signup"
+							disabled={state.submitted && !formState.password}
+						>
+							Get Started
+						</Button>
+					</ButtonContainer>
+				</form>
+			</FormWrapper>
+		</div>
+	);
+};
+
+export default Signup;

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;
+`;

frontend/src/types/api/user/signup.ts

@@ -0,0 +1,3 @@
+export interface Props {
+	email: string;
+}