Skip to content

Commit fc21673

Browse files
ujjavaldesai07ujjavaldesai07
committed
Refactored the signup page with material ui components
1 parent c0a06cc commit fc21673

29 files changed

+340
-345
lines changed

‎client/src/actions/index.js

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {
22
HANDLE_SIGN_IN,
3-
HANDLE_SIGN_UP,
43
HANDLE_SIGN_UP_ERROR,
54
HANDLE_SIGN_OUT,
65
HANDLE_SIGN_IN_ERROR,
@@ -9,7 +8,7 @@ import {
98
SAVE_QUERY_STATUS,
109
SHIPPING_ADDRESS_CONFIRMED,
1110
PAYMENT_INFO_CONFIRMED,
12-
PAYMENT_RESPONSE, CART_TOTAL, LOAD_SHOPPING_BAG_PRODUCTS
11+
PAYMENT_RESPONSE, CART_TOTAL, HANDLE_SIGN_UP_RESET,
1312
} from './types';
1413
import {INTERNAL_SERVER_ERROR_CODE, BAD_REQUEST_ERROR_CODE} from '../constants/http_error_codes'
1514
import {SHOPPERS_PRODUCT_INFO_COOKIE, CART_TOTAL_COOKIE, TOKEN_ID_COOKIE} from '../constants/cookies'
@@ -76,15 +75,22 @@ export const signOut = () => {
7675
}
7776
}
7877

79-
export const signUp = formValues => async (dispatch) => {
78+
export const resetSignUp = () => {
79+
return {
80+
type: HANDLE_SIGN_UP_RESET
81+
}
82+
}
83+
84+
export const signUp = formValues => async dispatch => {
8085
log.info(`[ACTION]: signUp API = ${JSON.stringify(formValues)}.`)
86+
8187
authServiceAPI.defaults.timeout = 15000;
8288
const response = await authServiceAPI.post('/signup', {
83-
'username': formValues.Username,
84-
'password': formValues.Password,
85-
'firstname': formValues.FirstName,
86-
'lastname': formValues.LastName,
87-
'email': formValues.Email.toLowerCase(),
89+
'username': formValues.username,
90+
'password': formValues.password,
91+
'firstname': formValues.firstName,
92+
'lastname': formValues.lastName,
93+
'email': formValues.email.toLowerCase(),
8894
}).catch(err => {
8995
log.info(`[ACTION]: signUp dispatch HANDLE_SIGN_UP_ERROR err.message = ${err.message}.`)
9096
dispatch({type: HANDLE_SIGN_UP_ERROR, payload: err.message});
@@ -93,8 +99,7 @@ export const signUp = formValues => async (dispatch) => {
9399
if (response) {
94100
if (response.data.account_creation_status === 'success') {
95101
log.info(`[ACTION]: dispatch HANDLE_SIGN_UP account_creation_status = ${response.data.account_creation_status}.`)
96-
dispatch({type: HANDLE_SIGN_UP, payload: response.data.account_creation_status});
97-
102+
history.push("/login");
98103
} else {
99104
console.log('response.data.error_msg = ' + response.data.error_msg);
100105
log.info(`[ACTION]: dispatch HANDLE_SIGN_UP_ERROR response.data.error_msg = ${response.data.error_msg}.`)

‎client/src/actions/types.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
// Action IDs
33
export const HANDLE_SIGN_IN= "HANDLE_SIGN_IN";
44
export const HANDLE_SIGN_OUT= "HANDLE_SIGN_OUT";
5-
export const HANDLE_SIGN_UP= "HANDLE_SIGN_UP";
65
export const HANDLE_SIGN_IN_ERROR= "HANDLE_SIGN_IN_ERROR";
6+
export const HANDLE_SIGN_IN_RESET= "HANDLE_SIGN_IN_RESET";
77
export const HANDLE_SIGN_UP_ERROR= "HANDLE_SIGN_UP_ERROR";
8+
export const HANDLE_SIGN_UP_RESET= "HANDLE_SIGN_UP_RESET";
89
export const HANDLE_TAB_HOVER_EVENT = "HANDLE_TAB_HOVER_EVENT";
910

1011
export const LOAD_HOME_PAGE = "LOAD_HOME_PAGE";

‎client/src/components/app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import NavBar from "./routes/navbar/navBar";
66
import {TabPanelList} from "./routes/navbar/tabPanelList";
77
import Home from "./routes/home/home";
88
import Login from "./routes/login";
9-
import SignUp from "./routes/signUp";
9+
import SignUp from "./routes/signup/signUp";
1010
import Product from "./routes/product/product";
1111
import ProductDetail from "./routes/detail/productDetails";
1212
import Checkout from "./routes/checkout/checkout";

‎client/src/components/routes/cancelPayment.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import log from 'loglevel'
33
import {Grid} from "@material-ui/core";
44
import {Link} from "react-router-dom";
5-
import {CHECKOUT_ROUTE, HOME_ROUTE} from "../../constants/react_routes";
5+
import {CHECKOUT_ROUTE} from "../../constants/react_routes";
66

77
export const CancelPayment = () => {
88

‎client/src/components/routes/checkout/checkout.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import MuiAccordion from '@material-ui/core/Accordion';
99
import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
1010
import MuiAccordionDetails from '@material-ui/core/AccordionDetails';
1111
import {connect, useSelector} from "react-redux";
12-
import {loadStripe} from "@stripe/stripe-js/pure";
12+
// import {loadStripe} from "@stripe/stripe-js/pure";
1313
import PaymentButton from "./paymentButton";
1414
import {useAddProductsToShoppingBag} from "../../../hooks/useAddProductsToShoppingBag";
1515
import {getDataViaAPI} from "../../../actions";
@@ -73,8 +73,8 @@ const useGridStyles = makeStyles((theme) => ({
7373

7474
const shippingAddressPanel = 'shipAddrPanel'
7575
const shippingOptionPanel = 'shipOptPanel'
76-
const paymentPanel = "paymentPanel"
77-
const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISH_KEY)
76+
// const paymentPanel = "paymentPanel"
77+
// const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISH_KEY)
7878

7979
function Checkout(props) {
8080
const shippingAddress = useSelector(state => state.shippingAddressReducer)

‎client/src/components/routes/checkout/shippingAddress.js

Lines changed: 8 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {Component} from 'react';
22
import log from 'loglevel';
3-
import {MenuItem, Grid, TextField} from "@material-ui/core";
3+
import {MenuItem, Grid} from "@material-ui/core";
44
import ContinueButton from "./continueButton";
55
import {withStyles} from "@material-ui/core/styles";
66
import {Field, reduxForm} from "redux-form";
@@ -10,35 +10,7 @@ import {setShippingAddress} from "../../../actions"
1010
import {ModalConfirmation} from "../../ui/modalConfirmation";
1111
import {SummaryCard} from "./summaryCard";
1212
import {checkoutFormStyles} from "../../../styles/materialUI/checkoutFormStyles";
13-
14-
export const textFieldStyles = {
15-
width: "inherit",
16-
height: "fit-content",
17-
margin: "20px 0 0 20px",
18-
}
19-
20-
const renderTextField = (
21-
{placeholder, shrink, selectField, input, label, meta: { touched, error }, ...custom },
22-
) => {
23-
let errorExist = touched && error && error !== "";
24-
25-
return (
26-
<TextField
27-
label={label}
28-
variant="outlined"
29-
fullWidth
30-
size="medium"
31-
select={selectField}
32-
style={textFieldStyles}
33-
placeholder={placeholder}
34-
InputLabelProps={{shrink: shrink}}
35-
error={errorExist}
36-
helperText={errorExist? error : null}
37-
{...input}
38-
{...custom}
39-
/>
40-
);
41-
}
13+
import {renderReduxTextField} from "../../ui/reduxTextField";
4214

4315
class ShippingAddressForm extends Component {
4416

@@ -61,7 +33,7 @@ class ShippingAddressForm extends Component {
6133

6234
handleSubmit = () => {
6335
log.info(`[ShippingAddress] values = ${JSON.stringify(this.props.shippingAddressFormStore)}`)
64-
// let formValues = this.props.shippingAddressFormStore.values
36+
// let formValues = this.props.signUpFormStore.values
6537
// let id = `${formValues.firstName}-${formValues.lastName}-${Math.floor(Date.now() / 1000)}`
6638

6739
this.props.setShippingAddress({submitted: true})
@@ -117,7 +89,7 @@ class ShippingAddressForm extends Component {
11789
<Grid item container xs={11} sm={8}>
11890
<Field
11991
name={name}
120-
component={renderTextField}
92+
component={renderReduxTextField}
12193
label={label}
12294
/>
12395
</Grid>
@@ -139,7 +111,7 @@ class ShippingAddressForm extends Component {
139111
<Grid item container xs={11} sm={8}>
140112
<Field
141113
name="addressLine2"
142-
component={renderTextField}
114+
component={renderReduxTextField}
143115
label="Address Line 2 (optional)"
144116
props={{placeholder: "Apt, Suite, Bldg, Floor, etc", shrink: true}}
145117
/>
@@ -149,7 +121,7 @@ class ShippingAddressForm extends Component {
149121
<Grid item container xs={6} style={{paddingRight: 15}}>
150122
<Field
151123
name="zipCode"
152-
component={renderTextField}
124+
component={renderReduxTextField}
153125
label="Zip Code"
154126
/>
155127
</Grid>
@@ -158,7 +130,7 @@ class ShippingAddressForm extends Component {
158130
<Field
159131
name="stateCode"
160132
label="State"
161-
component={renderTextField}
133+
component={renderReduxTextField}
162134
props={{selectField: true}}
163135
>
164136
{renderStateCodes()}
@@ -172,7 +144,7 @@ class ShippingAddressForm extends Component {
172144
<Grid item container xs={11} sm={8}>
173145
<Field
174146
name="phoneNumber"
175-
component={renderTextField}
147+
component={renderReduxTextField}
176148
label="Phone Number"
177149
props={{placeholder: "123-123-1234", shrink: true}}
178150
/>

‎client/src/components/routes/checkout/shippingOptions.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {useEffect} from 'react';
1+
import React from 'react';
22
import log from 'loglevel';
33
import {Divider, Grid} from "@material-ui/core";
44
import {makeStyles} from "@material-ui/core/styles";

‎client/src/components/routes/checkout/summaryCard.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import log from 'loglevel';
32
import {Grid, Card, CardContent} from "@material-ui/core";
43
import DeleteIcon from '@material-ui/icons/Delete';
54
import Button from '@material-ui/core/Button';

‎client/src/components/routes/login.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import WebForm from "../ui/webForm";
2+
import WebForm from "./signup/signUpForm";
33
import {Divider, Grid} from "semantic-ui-react";
44
import {connect} from 'react-redux';
55
import {signIn} from "../../actions";

‎client/src/components/routes/navbar/navBar.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const NavBar = props => {
4040
const [mobileSearchState, setMobileSearchState] = React.useState(false);
4141
const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
4242
const [hamburgerBtnState, setHamburgerBtnState] = React.useState(false);
43-
const {isSignedIn, tokenId} = useSelector(state => state.authApiReducer)
43+
const {isSignedIn, tokenId} = useSelector(state => state.signInReducer)
4444
const tabsAPIData = useSelector(state => state.tabsDataReducer)
4545

4646
const isMenuOpen = Boolean(anchorEl);

0 commit comments

Comments
 (0)