fix(signInPage): Separated SignInPages Comp

fixes #100
roman-ojha · Jul 1, 2022 · d454a0f · d454a0f
1 parent 1c542e5
commit d454a0f
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 52 deletions.
diff --git a/client/src/components/SignInPage/SignInHeader.tsx b/client/src/components/SignInPage/SignInHeader.tsx
@@ -9,7 +9,7 @@ const SignInHeader = (): JSX.Element => {
       <div className="SignIn_Page_Left_side_Upper_Logo_Part">
         <h1
           onClick={() => {
-            history.push("/u");
+            history.push("/u/home");
           }}
           className="SignIn_Page_Social_Logo"
           style={{ cursor: "pointer" }}

diff --git a/client/src/components/SignInPage/SignInRightPart.tsx b/client/src/components/SignInPage/SignInRightPart.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { toastInfo } from "../../services/toast";
+import Sign_In_Facebook_Logo from "../../assets/Images/Facebook_Logo.png";
+import Sign_In_Google_Logo from "../../assets/Images/Google_Logo.png";
+import SignIn_RightSide_Issustration from "../../assets/svg/SignIn_RightSide_Issustration.svg";
+
+const SignInRightPart = (): JSX.Element => {
+  const signInWithGoogle = async () => {
+    window.open(`${process.env.REACT_APP_API_BASE_URL}/auth/google`, "_self");
+    // window.open("<URL>", "<MODE>");
+    // here this will open the google authentication
+  };
+
+  const signInWithFacebook = () => {
+    toastInfo("Facebook auth is under development, Please use Google auth");
+  };
+
+  return (
+    <>
+      <div className="SignIn_Page_Right_Half_container">
+        <div className="SignIn_Page_Right_Half">
+          <div className="SignIn_RightSide_Issustration_container">
+            <img
+              className="SignIn_RightSide_Issustration"
+              src={SignIn_RightSide_Issustration}
+              alt="SignIn"
+            />
+          </div>
+
+          <button
+            onClick={signInWithGoogle}
+            className="SignIn_page_Google_Button"
+          >
+            <img
+              className="SignIn_page_Google_Button_Logo"
+              src={Sign_In_Google_Logo}
+              alt="Google"
+            />
+            <p className="SignIn_page_Google_Button_Paragraph">
+              SignIn in With Google
+            </p>
+          </button>
+          <button
+            className="SignIn_page_Facebook_Button"
+            onClick={signInWithFacebook}
+          >
+            <img
+              className="SignIn_page_Facebook_Button_Logo"
+              src={Sign_In_Facebook_Logo}
+              alt="Facebook"
+            />
+            <p className="SignIn_page_Facebook_Button_Paragraph">
+              Sign in With Facebook
+            </p>
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SignInRightPart;
diff --git a/client/src/pages/SignIn.tsx b/client/src/pages/SignIn.tsx
@@ -1,7 +1,4 @@
 import React, { useState } from "react";
-import Sign_In_Facebook_Logo from "../assets/Images/Facebook_Logo.png";
-import Sign_In_Google_Logo from "../assets/Images/Google_Logo.png";
-import SignIn_RightSide_Issustration from "../assets/svg/SignIn_RightSide_Issustration.svg";
 import { instance as axios } from "../services/axios";
 import { NavLink, useHistory } from "react-router-dom";
 import "../styles/pages/signInPage.css";
@@ -14,6 +11,7 @@ import { AxiosError } from "axios";
 import { actionCreators } from "../services/redux";
 import { bindActionCreators } from "redux";
 import SignInHeader from "../components/SignInPage/SignInHeader";
+import SignInRightPart from "../components/SignInPage/SignInRightPart";
 
 const SignIn = (): JSX.Element => {
   const dispatch = useDispatch();
@@ -38,7 +36,6 @@ const SignIn = (): JSX.Element => {
   const history = useHistory();
   const signingIn = async (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault();
-
     try {
       startProgressBar();
       const res = await axios({
@@ -75,15 +72,6 @@ const SignIn = (): JSX.Element => {
       stopProgressBar();
     }
   };
-  const signInWithGoogle = async () => {
-    window.open(`${process.env.REACT_APP_API_BASE_URL}/auth/google`, "_self");
-    // window.open("<URL>", "<MODE>");
-    // here this will open the google authentication
-  };
-
-  const signInWithFacebook = () => {
-    toastInfo("Facebook auth is under development, Please use Google auth");
-  };
 
   return (
     <>
@@ -133,44 +121,7 @@ const SignIn = (): JSX.Element => {
             </form>
           </div>
         </div>
-        <div className="SignIn_Page_Right_Half_container">
-          <div className="SignIn_Page_Right_Half">
-            <div className="SignIn_RightSide_Issustration_container">
-              <img
-                className="SignIn_RightSide_Issustration"
-                src={SignIn_RightSide_Issustration}
-                alt="SignIn"
-              />
-            </div>
-
-            <button
-              onClick={signInWithGoogle}
-              className="SignIn_page_Google_Button"
-            >
-              <img
-                className="SignIn_page_Google_Button_Logo"
-                src={Sign_In_Google_Logo}
-                alt="Google"
-              />
-              <p className="SignIn_page_Google_Button_Paragraph">
-                SignIn in With Google
-              </p>
-            </button>
-            <button
-              className="SignIn_page_Facebook_Button"
-              onClick={signInWithFacebook}
-            >
-              <img
-                className="SignIn_page_Facebook_Button_Logo"
-                src={Sign_In_Facebook_Logo}
-                alt="Facebook"
-              />
-              <p className="SignIn_page_Facebook_Button_Paragraph">
-                Sign in With Facebook
-              </p>
-            </button>
-          </div>
-        </div>
+        <SignInRightPart />
       </div>
     </>
   );