From be1e86b781ab5a431128ca5bdc5e9c94312cbc4c Mon Sep 17 00:00:00 2001
From: Sina <sinajavaheri@gmail.com>
Date: Thu, 21 Sep 2023 20:01:25 +0200
Subject: [PATCH] [Fix] Login return url and minor UI problems (#7)

* feat(logout): add logout feature

* chore(home-page): add test logout and organization fetch as test

* fix(auth-guard): fix a breakage with empty localstorage

* fix(login): fix some minor ui issues with the login

* fix(login): fix return url
---
 src/containers/auth/AuthContainer.tsx        |  2 +-
 src/pages/auth/login/LoginPage.tsx           |  2 +-
 src/pages/auth/login/LoginSocialMedia.tsx    |  4 +++-
 src/pages/auth/login/oauthProviders.query.ts |  3 ++-
 src/shared/loading/Spinner.tsx               | 18 +++++++++---------
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/containers/auth/AuthContainer.tsx b/src/containers/auth/AuthContainer.tsx
index 2f9190d0..ffbe3fff 100644
--- a/src/containers/auth/AuthContainer.tsx
+++ b/src/containers/auth/AuthContainer.tsx
@@ -19,7 +19,7 @@ const AuthWrapper = styled(Container)(({ theme }) => ({
   right: 0,
   top: 0,
   background: theme.palette.common.white,
-  height: '100vh',
+  height: '100%',
   width: '50%',
   opacity: 0,
   animationDelay: '1s',
diff --git a/src/pages/auth/login/LoginPage.tsx b/src/pages/auth/login/LoginPage.tsx
index 5d0b0262..b8f8ad00 100644
--- a/src/pages/auth/login/LoginPage.tsx
+++ b/src/pages/auth/login/LoginPage.tsx
@@ -33,7 +33,7 @@ export default function LoginPage() {
       <Grid
         component="form"
         container
-        spacing={3}
+        rowSpacing={3}
         maxWidth={350}
         m="0 auto"
         alignItems="stretch"
diff --git a/src/pages/auth/login/LoginSocialMedia.tsx b/src/pages/auth/login/LoginSocialMedia.tsx
index 0b925e22..a4e9f668 100644
--- a/src/pages/auth/login/LoginSocialMedia.tsx
+++ b/src/pages/auth/login/LoginSocialMedia.tsx
@@ -1,10 +1,12 @@
 import { Grid } from '@mui/material'
 import { useQuery } from '@tanstack/react-query'
+import { useSearchParams } from 'react-router-dom'
 import { SocialMediaButtonFromOauthType } from 'src/shared/social-media-button'
 import { oauthProvidersQuery } from './oauthProviders.query'
 
 export const LoginSocialMedia = () => {
-  const { data } = useQuery([], oauthProvidersQuery)
+  const [search] = useSearchParams()
+  const { data } = useQuery(['LoginSocialMedia', search.get('returnUrl') ?? '/'], oauthProvidersQuery)
 
   return (
     <>
diff --git a/src/pages/auth/login/oauthProviders.query.ts b/src/pages/auth/login/oauthProviders.query.ts
index 4166427e..13324ea8 100644
--- a/src/pages/auth/login/oauthProviders.query.ts
+++ b/src/pages/auth/login/oauthProviders.query.ts
@@ -3,10 +3,11 @@ import { endPoints } from 'src/shared/constants'
 import { OAuthProvidersResponse } from 'src/shared/types/server'
 import { simpleAxios } from 'src/shared/utils/axios'
 
-export const oauthProvidersQuery = async ({ signal }: QueryFunctionContext) => {
+export const oauthProvidersQuery = async ({ signal, queryKey: [_, redirect_url] }: QueryFunctionContext<['LoginSocialMedia', string]>) => {
   return await simpleAxios
     .get<OAuthProvidersResponse>(endPoints.auth.oauthProviders, {
       signal,
+      params: { redirect_url },
     })
     .then((response) => response?.data)
     .then((res) => new Promise<OAuthProvidersResponse>((resolve) => window.setTimeout(() => resolve(res), 3000)))
diff --git a/src/shared/loading/Spinner.tsx b/src/shared/loading/Spinner.tsx
index 136e8d3b..8734eb3f 100644
--- a/src/shared/loading/Spinner.tsx
+++ b/src/shared/loading/Spinner.tsx
@@ -89,15 +89,15 @@ interface SpinnerProps {
   isLoading?: boolean
 }
 
-const SpinnerContainer = styled(Container, { shouldForwardProp })<{ isLoading?: boolean }>(({ theme, isLoading }) =>
-  isLoading
-    ? {}
-    : {
-        [theme.breakpoints.down('md')]: {
-          display: 'none',
-        },
-      },
-)
+const SpinnerContainer = styled(Container, { shouldForwardProp })<{ isLoading?: boolean }>(({ theme, isLoading }) => ({
+  transition: theme.transitions.create(['opacity'], {
+    duration: 1000,
+    easing: theme.transitions.easing.easeInOut,
+  }),
+  [theme.breakpoints.down('md')]: {
+    opacity: isLoading ? 1 : 0,
+  },
+}))
 
 export const Spinner = ({ width = 110, isDark, isLoading }: SpinnerProps) => {
   return (