merged master in feature/cart

pesto-students · Nov 21, 2021 · f2e9883 · f2e9883
2 parents afdc277 + 48aaa15
commit f2e9883
Show file tree

Hide file tree

Showing 35 changed files with 854 additions and 85 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,3 +1,4 @@
 {
-    "extends": ["react-app"]
+    "extends": ["react-app"],
+
 }
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/client": "^3.4.17",
     "@babel/core": "7.15.8",
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-flow": "^7.16.0",
@@ -16,11 +17,13 @@
     "dotenv": "^10.0.0",
     "feather-icons-react": "^0.5.0",
     "firebase": "^9.4.0",
+    "graphql": "^16.0.1",
     "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.2",
     "react-dom": "^17.0.2",
     "react-number-format": "^4.8.0",
+    "react-google-recaptcha": "^2.1.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",

diff --git a/src/assets/book-img-1.png b/src/assets/book-img-1.png
diff --git a/src/components/ProductListingPage/Index.js b/src/components/ProductListingPage/Index.js
@@ -1,23 +1 @@
-import React from 'react';
-import { Footer } from '../common';
-import Header from '../common/header';
-import Body from './Body';
-import SideBar from './SideBar';
-import { Container, ProductListing } from './styledComponents';
-
-function ProductListingPage() {
-  return (
-    <>
-    <Header />
-      <ProductListing>
-        <SideBar />
-        <Container>
-          <Body />
-        </Container>
-      </ProductListing>
-      <Footer />
-    </>
-  );
-}
-
-export default ProductListingPage;
+export { default } from './ProductListingPage';
diff --git a/src/components/ProductListingPage/ProductListingPage.js b/src/components/ProductListingPage/ProductListingPage.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Footer } from '../common';
+import Header from '../common/header';
+import Body from './Body';
+import SideBar from './SideBar';
+import { Container, ProductListing } from './styledComponents';
+
+function ProductListingPage() {
+  return (
+    <>
+    <Header />
+      <ProductListing>
+        <SideBar />
+        <Container>
+          <Body />
+        </Container>
+      </ProductListing>
+      <Footer />
+    </>
+  );
+}
+
+export default ProductListingPage;
diff --git a/src/components/auth/index.js b/src/components/auth/index.js
@@ -0,0 +1 @@
+//import signin and signup
diff --git a/src/components/auth/signin/signinComponent.jsx b/src/components/auth/signin/signinComponent.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { Input } from '../../common';
+import useSigninContainer from './signinContainer';
+import { SignInContainer, SignInFormContainer } from './styledComponents';
+import { Button } from '../../common';
+import FeatherIcon from 'feather-icons-react';
+import { Link } from 'react-router-dom';
+
+const SignIn = (props) => {
+  const { handleStateChange, componentState, handleSignin } = useSigninContainer();
+  return (
+    <SignInContainer>
+      <SignInFormContainer>
+        <h2>Login</h2>
+        <form className="login-form">
+          <div className="login-inputs">
+            <Input
+              style={{border:'1px solid'}}
+              type="text"
+              label="Email"
+              placeholder="Enter Email"
+              error=""
+              name="email"
+              onChange={(e) => handleStateChange(e.target.name, e.target.value)}
+              value={componentState?.email}
+            />
+          </div>
+          <div className="login-inputs">
+            <Input
+              style={{border:'1px solid'}}
+              type="password"
+              label="Password"
+              placeholder="Enter password"
+              error=""
+              name="password"
+              onChange={(e) => handleStateChange(e.target.name, e.target.value)}
+              value={componentState?.password}
+            />
+          </div>
+          <Button onClick={(e)=>{handleSignin('self', e)}} style={{ width: '100%', margin: '10px 0' }} text="Login" />
+          <Button
+            onClick={(e)=>{handleSignin('google', e)}}
+            style={{ width: '100%', margin: '10px 0' }}
+            text="Google Login"
+          />
+          <div className="login-social-container">
+            <FeatherIcon
+              className="login-social-icon-github"
+              icon="github"
+              size="30"
+            />
+            <FeatherIcon
+              className="login-social-icon-facebook"
+              icon="facebook"
+              size="30"
+            />
+          </div>
+        </form>
+        <div>
+          <span>
+            {`don't have account? `}
+            <Link to="/SignUp">SignUp</Link>
+          </span>
+        </div>
+      </SignInFormContainer>
+    </SignInContainer>
+  );
+};
+
+SignIn.propTypes = {};
+
+export default SignIn;
diff --git a/src/components/auth/signin/signinContainer.js b/src/components/auth/signin/signinContainer.js
@@ -0,0 +1,67 @@
+import firebase from 'firebase/compat/app';
+import 'firebase/compat/auth';
+import { useState } from 'react';
+import { googleAuthProvider } from '../../../config/firebase/authProviders';
+import useErrorContext from '../../../hooks/useErrorContext';
+
+const useSigninContainer = (props) => {
+  const errorContext = useErrorContext();
+  const [componentState, setComponentState] = useState({
+    email: '',
+    password: '',
+    error: null,
+    isLoading: false,
+    isSuccess: false,
+    isError: false
+  });
+
+  const handleStateChange = (name, value) => {
+    setComponentState({
+      ...componentState,
+      [name]: value
+    });
+  };
+
+  const handleSignin = async (providerName, event) => {
+    event?.preventDefault();
+    setComponentState({ ...componentState, isLoading: true });
+    if (providerName === 'google') {
+      const userCred = await firebase
+        .auth()
+        .signInWithPopup(googleAuthProvider);
+    } else if (providerName === 'self') {
+      try {
+        const userCred = await firebase
+          .auth()
+          .signInWithEmailAndPassword(
+            componentState.email,
+            componentState.password
+          );
+        setComponentState({
+          ...componentState,
+          isLoading: false,
+          isSuccess: true,
+          isError: false
+        });
+      } catch (err) {
+        console.log(err.code, err.message);
+        errorContext.showError(err.code, err.message);
+        setComponentState({
+          ...componentState,
+          isLoading: false,
+          isSuccess: false,
+          isError: true,
+          error: err
+        });
+      }
+    }
+  };
+
+  return {
+    componentState,
+    handleStateChange,
+    handleSignin
+  };
+};
+
+export default useSigninContainer;
diff --git a/src/components/auth/signin/styledComponents.js b/src/components/auth/signin/styledComponents.js
@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+
+export const SignInContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  color: ${(props) => props.theme.colors.primary};
+`;
+
+export const SignInFormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 320px;
+  text-align: center;
+  color: ${(props) => props.theme.colors.primary};
+  .login-social-container {
+    display: flex;
+    justify-content: space-around;
+    width: 80%;
+    margin: 10px auto;
+    .login-social-icon-github {
+      &:hover {
+        color: #9845a5;
+        cursor: pointer;
+      }
+    }
+    .login-social-icon-facebook {
+      &:hover {
+        color: #3b5998;
+        cursor: pointer;
+      }
+    }
+  }
+  .login-inputs {
+    margin: 10px 0px;
+  }
+  form {
+    box-sizing: border-box;
+    width: 100%;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+`;
diff --git a/src/components/auth/signup/signupComponent.jsx b/src/components/auth/signup/signupComponent.jsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import ReCAPTCHA from "react-google-recaptcha";
+import { Button, Input } from '../../common';
+import useSignupContainer from './signupContainer';
+import { InputContainer, SignupComponentTitle, SignUpContainer } from './styledComponents';
+
+const SignupComponent = props => {
+    const {componentState, handleChange, handleCreateAccount} = useSignupContainer();
+    return (
+        <SignUpContainer>
+            <SignupComponentTitle>SignUp</SignupComponentTitle>
+            <form className='signup-form'>
+                <InputContainer>
+                    <Input
+                        style={{marginRight: '5px'}}
+                        type='text'
+                        name='firstName'
+                        placeholder='First Name'
+                        label='First Name'
+                        value={componentState.firstName}
+                        onChange={(e)=>handleChange(e.target.name, e.target.value)}
+                    />
+                      <Input
+                        className='signup-input'
+                        type='text'
+                        name='lastName'
+                        placeholder='Last Name'
+                        label='Last Name'
+                        value={componentState.lastName}
+                        onChange={(e)=>handleChange(e.target.name, e.target.value)}
+                    />
+                </InputContainer>
+                <InputContainer >
+                    <Input
+                        style={{width: '320px'}}
+                        type='email'
+                        name='email'
+                        placeholder='Email'
+                        label='Email'
+                        value={componentState.email}
+                        onChange={(e)=>handleChange(e.target.name, e.target.value)}
+                    />
+                </InputContainer>
+                <InputContainer >
+                    <Input
+                        style={{width: '320px'}}
+                        type='password'
+                        name='password'
+                        placeholder='Password'
+                        label='Password'
+                        value={componentState.password}
+                        onChange={(e)=>handleChange(e.target.name, e.target.value)}
+                    />
+                </InputContainer>
+                <InputContainer >
+                    <Input
+                        style={{width: '320px'}}
+                        type='password'
+                        name='confirmPassword'
+                        placeholder='Email'
+                        label='Confirm Password'
+                        value={componentState.confirmPassword}
+                        onChange={(e)=>handleChange(e.target.name, e.target.value)}
+                    />
+                </InputContainer>
+
+            </form>
+            <Button 
+                onClick={handleCreateAccount} 
+                disabled={!componentState.isSuccess}
+                style={{margin:'10px 0', width:'320px'}} text='SignUp'
+            />
+            <ReCAPTCHA
+                sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
+                onChange={(e)=>{e? handleChange('isSuccess', true): handleChange('isSuccess', false)}}
+            />
+        </SignUpContainer>        
+    );
+};
+
+SignupComponent.propTypes = {
+
+};
+
+export default SignupComponent;