necessary basic packages are added

Author: vigneshwaranc

.env.production

@@ -0,0 +1,3 @@
+# API End points
+
+REACT_APP_API_URL=http://localhost:3000/api/

.prettierrc.js

@@ -0,0 +1,11 @@
+// prettier.config.js or .prettierrc.js
+module.exports = {
+	trailingComma: 'es5',
+	tabWidth: 4,
+	useTabs: true,
+	semi: true,
+	singleQuote: true,
+	'editor.formatOnSave': true,
+	// printWidth: 80,
+	proseWrap: 'always',
+};

package-lock.json

@@ -3,18 +3,39 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.1.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "antd": "^4.2.5",
+    "axios": "^0.19.2",
+    "cross-env": "^7.0.2",
+    "formik": "^2.1.4",
+    "formik-antd": "^2.0.1",
+    "js-sha512": "^0.8.0",
+    "lodash": "^4.17.15",
+    "node-sass": "^4.14.1",
+    "prop-types": "^15.7.2",
+    "qs": "^6.9.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-lottie": "^1.2.3",
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "redux": "^4.0.5",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0",
+    "styled-components": "^5.1.1",
+    "typeface-roboto": "0.0.75",
+    "yup": "^0.29.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "cross-env PORT=3001 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "build:production": "env-cmd -f .env.production react-scripts build"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -31,4 +52,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

package.json

@@ -0,0 +1 @@
+{"v":"5.5.5","fr":30,"ip":0,"op":300,"w":1920,"h":1080,"nm":"loader","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[678,678],"ix":2},"p":{"a":0,"k":[0,34],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"t":30,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[0]},{"t":37,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.5686274509803921,0.7764705882352941,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":59,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-7,22],"ix":2},"a":{"a":0,"k":[-13.96,41.879],"ix":1},"s":{"a":0,"k":[85.962,85.962],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[678,678],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":4,"s":[0]},{"t":33,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[0]},{"t":40,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.403921568627451,0.7098039215686275,0.29411764705882354,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":59,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[6,15],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[85.962,85.962],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 2","np":4,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[678,678],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[0]},{"t":35,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":17,"s":[0]},{"t":43,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.5098039215686274,0.7529411764705882,0.4117647058823529,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":59,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[6,15],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[85.962,85.962],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 3","np":4,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":90,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Loader comp","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2},"a":{"a":0,"k":[960,540,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"tm":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":43,"s":[1.433]}],"ix":2,"x":"var $bm_rt;\n$bm_rt = loopOut('cycle');"},"w":1920,"h":1080,"ip":0,"op":313,"st":0,"bm":0}],"markers":[]}

src/assets/Loader.json

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Route, Redirect } from 'react-router-dom';
+import { SESSION } from '../../services';
+
+function AuthRoute({ children, ...rest }) {
+	const { recentlyVisitedUrl } = useSelector((state) => state.history);
+
+	if (SESSION.isLoggedIn()) {
+		return (
+			<Redirect
+				to={{
+					pathname: recentlyVisitedUrl,
+				}}
+			/>
+		);
+	} else {
+		return <Route {...rest}>{children}</Route>;
+	}
+}
+
+export default AuthRoute;

src/components/common/AuthRoute.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { FormikConsumer } from 'formik';
+
+export const Debug = () => (
+    <div
+        style={{
+            margin: '3rem 0',
+            borderRadius: 4,
+            background: '#f6f8fa',
+
+            boxShadow: '0 0 1px  #eee inset',
+        }}
+    >
+        <div
+            style={{
+                textTransform: 'uppercase',
+                fontSize: 11,
+                borderTopLeftRadius: 4,
+                borderTopRightRadius: 4,
+                fontWeight: 500,
+                padding: '.5rem',
+                background: '#555',
+                color: '#fff',
+                letterSpacing: '1px',
+            }}
+        >
+            Formik State
+    </div>
+        <FormikConsumer>
+            {({ validationSchema, validate, onSubmit, ...rest }) => (
+                <pre
+                    style={{
+                        fontSize: '.65rem',
+                        padding: '.25rem .5rem',
+                        overflowX: 'scroll',
+                    }}
+                >
+                    {JSON.stringify(rest, null, 2)}
+                </pre>
+            )}
+        </FormikConsumer>
+    </div>
+);

src/components/common/FormDebug.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import Lottie from 'react-lottie';
+import animationData from '../../assets/Loader.json';
+
+export default function Loader() {
+	const loader = useSelector((state) => state.api.showLoader);
+
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: animationData,
+		rendererSettings: {
+			preserveAspectRatio: 'xMidYMid slice',
+		},
+	};
+
+	return (
+		<>
+			{loader && (
+				<div className="loaderbox">
+					<Lottie options={defaultOptions} height={128} width={128} />
+				</div>
+			)}
+		</>
+	);
+}

src/components/common/Loader.js

@@ -0,0 +1,43 @@
+import React, { useEffect } from 'react';
+import { Route } from 'react-router-dom';
+import { Layout } from 'antd';
+import { useDispatch } from 'react-redux';
+import { SESSION } from '../../services';
+import { Sidebar } from '../common';
+
+const { Content } = Layout;
+
+function PrivateRoute({ children, location, ...rest }) {
+	const dispatch = useDispatch();
+	const { pathname } = location;
+
+	useEffect(() => {
+		return () => {
+			/**
+			 * to set last visited page url in redux store
+			 */
+			dispatch({
+				type: 'SET_HISTORY_RECENT',
+				payload: pathname,
+			});
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [pathname]);
+
+	if (SESSION.isLoggedIn()) {
+		return (
+			<Layout>
+				<Sidebar />
+				<Content>
+					<div className="p-10 height-100">
+						<Route {...rest}>{children}</Route>
+					</div>
+				</Content>
+			</Layout>
+		);
+	} else {
+		SESSION.logout();
+	}
+}
+
+export default PrivateRoute;

src/components/common/PrivateRoute.js

@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react';
+import { Layout, Menu } from 'antd';
+import { NavLink, withRouter } from 'react-router-dom';
+import {
+	PoweroffOutlined,
+	FormOutlined,
+	HighlightOutlined,
+} from '@ant-design/icons';
+import { SESSION } from '../../services';
+
+const { Sider } = Layout;
+const { SubMenu } = Menu;
+
+export function findUrlPathId(path) {
+	switch (path) {
+		case '/input':
+			return '2';
+		case '/dropdown':
+			return '3';
+		default:
+			return '1';
+	}
+}
+
+function Sidebar(props) {
+	const [collapsed, setCollapsed] = useState(false);
+	const [key, setKey] = useState();
+
+	useEffect(() => {
+		let path = props.location.pathname;
+		const pathId = findUrlPathId(path);
+		setKey(pathId);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [props.location.pathname]);
+
+	function onCollapse(collapsed) {
+		setCollapsed(collapsed);
+	}
+
+	const handleLogout = () => {
+		SESSION.logout();
+	};
+
+	return (
+		<Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
+			<>
+				<Menu
+					theme="dark"
+					mode="inline"
+					defaultSelectedKeys={[key]}
+					selectedKeys={[key]}
+				>
+					<SubMenu
+						key="sub2"
+						title={
+							<span>
+								<FormOutlined />
+								<span>Forms</span>
+							</span>
+						}
+					>
+						<Menu.Item key="2">
+							<NavLink to="/input" />
+							<HighlightOutlined />
+							<span>Input</span>
+						</Menu.Item>
+						<Menu.Item key="3">
+							<NavLink to="/dropdown" />
+							<HighlightOutlined />
+							<span>Dropdown</span>
+						</Menu.Item>
+					</SubMenu>
+					<Menu.Item key="4" onClick={handleLogout}>
+						<PoweroffOutlined />
+						<span>Log Out</span>
+					</Menu.Item>
+				</Menu>
+			</>
+		</Sider>
+	);
+}
+
+export default withRouter(Sidebar);