Merge pull request #232 from piyushyadav1617/dev-branch

Added loading for social buttons on widget
piyushyadav1617 · Nov 11, 2023 · 5b5d1ac · 5b5d1ac
2 parents ab42340 + 585743c
commit 5b5d1ac
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 25 deletions.
diff --git a/src/app/widget/login/components/Email.tsx b/src/app/widget/login/components/Email.tsx
@@ -15,6 +15,7 @@ import {
   MdOutlineKeyboardArrowDown as KeyDown,
   MdOutlineKeyboardArrowUp as KeyUp
 } from 'react-icons/md';
+import SocialButton from './SocialButton';
 type EmailCompProps = {
   email: string;
   setEmail: (NewPass: string) => void;
@@ -31,9 +32,21 @@ export default function EmailComponent({
   const storeOrgData = useOrgData(state => state.data);
   const storeOrg_token = useOrgData(state => state.org_token);
   const [showMore, setShowMore] = useState(false);
-  const socialLogin = (social: string) => {
-    const url = `https://api.trustauthx.com/single/social/signup?provider=${social}&OrgToken=${storeOrg_token}`;
-    // reset();
+
+  const socialLogin = async (
+    social: string,
+    setLoading: (loading: boolean) => void
+  ) => {
+    const response = await fetch(
+      `https://api.trustauthx.com/single/social/signup?provider=${social}`,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          OrgToken: storeOrg_token
+        })
+      }
+    );
+    const { url } = (await response.json()) as { url: string };
     window.location.href = url; //next router was creating a problem in routing back that's why window object is being used
   };
 
@@ -144,18 +157,12 @@ export default function EmailComponent({
             >
               {firstFour.map((social, key) => {
                 return (
-                  <button
-                    onClick={() => socialLogin(social)}
+                  <SocialButton
+                    image={socialProviders[social]}
+                    social={social}
+                    socialLogin={socialLogin}
                     key={key}
-                    className=" flex items-center justify-center transition-colors bg-slate-300 hover:bg-slate-400 h-12 w-12 p-1 rounded-md ring-1 ring-white "
-                  >
-                    <Image
-                      src={socialProviders[social]}
-                      alt={social}
-                      width={28}
-                      className="m-0"
-                    />
-                  </button>
+                  />
                 );
               })}
             </div>
@@ -172,18 +179,12 @@ export default function EmailComponent({
             >
               {rest.map((social, key) => {
                 return (
-                  <button
-                    onClick={() => socialLogin(social)}
+                  <SocialButton
+                    image={socialProviders[social]}
+                    social={social}
+                    socialLogin={socialLogin}
                     key={key}
-                    className=" flex items-center justify-center transition-colors bg-slate-300 hover:bg-slate-400 h-12 w-12 p-1 rounded-md ring-1 ring-white "
-                  >
-                    <Image
-                      src={socialProviders[social]}
-                      alt={social}
-                      width={28}
-                      className="m-0"
-                    />
-                  </button>
+                  />
                 );
               })}
             </div>

diff --git a/src/app/widget/login/components/SocialButton.tsx b/src/app/widget/login/components/SocialButton.tsx
@@ -0,0 +1,31 @@
+'use client';
+import Image from 'next/image';
+import Spinner from '@/components/spinner';
+import { useState } from 'react';
+import { Button } from '@/components/ui/Button';
+type Props = {
+  socialLogin: (social: string, setLoading: (loading: boolean) => void) => void;
+  social: string;
+  image: string;
+};
+const SocialButton = ({ socialLogin, social, image }: Props) => {
+  const [loading, setLoading] = useState(false);
+  return (
+    <Button
+      variant={'ghost'}
+      onClick={() => {
+        setLoading(true);
+        socialLogin(social, setLoading);
+      }}
+      disabled={loading}
+      className=" flex items-center justify-center transition-colors bg-slate-300 hover:bg-slate-400 h-12 w-12 p-1 rounded-md ring-1 ring-white "
+    >
+      {loading ? (
+        <Spinner color="gray" size={20} />
+      ) : (
+        <Image src={image} alt={social} width={28} className="m-0" />
+      )}
+    </Button>
+  );
+};
+export default SocialButton;