[FEAT] correct some connection/disconnection of SSO

front2/src/components/TopBar/TopBar.tsx

@@ -38,6 +38,7 @@ import { SessionState } from '@/service/SessionState';
 import { colors } from '@/theme/foundations/colors';
 import { requestSignIn, requestSignOut, requestSignUp } from '@/utils/sso';
 import { useThemeMode } from '@/utils/theme-tools';
+import { useSessionService } from '@/service/session';
 
 export const TOP_BAR_HEIGHT = '50px';
 
@@ -53,6 +54,7 @@ export type TopBarProps = {
 
 export const TopBar = ({ title, children }: TopBarProps) => {
   const { mode, colorMode, toggleColorMode } = useThemeMode();
+  const { clearToken } = useSessionService();
 
   const { session } = useServiceContext();
   const backColor = mode('back.100', 'back.800');
@@ -62,17 +64,26 @@ export const TopBar = ({ title, children }: TopBarProps) => {
   };
   const navigate = useNavigate();
   const onSignIn = (): void => {
+    clearToken();
     requestSignIn();
   };
   const onSignUp = (): void => {
+    clearToken();
     requestSignUp();
   };
   const onSignOut = (): void => {
+    clearToken();
     requestSignOut();
   };
   const onSelectHome = () => {
     navigate('/');
   };
+  const onHelp = () => {
+    navigate('/help');
+  };
+  const onSettings = () => {
+    navigate('/settings');
+  };
   return (
     <Flex
       position="absolute"
@@ -140,9 +151,9 @@ export const TopBar = ({ title, children }: TopBarProps) => {
               <MenuItem _hover={{}} color={mode('brand.800', 'brand.200')}>
                 Sign in as {session?.login ?? 'Fail'}
               </MenuItem>
-              <MenuItem icon={<LuSettings />}>Settings</MenuItem>
-              <MenuItem icon={<LuHelpCircle />}>Help</MenuItem>
-              <MenuItem icon={<LuLogOut onClick={onSignOut} />}>
+              <MenuItem icon={<LuSettings />} onClick={onSettings}>Settings</MenuItem>
+              <MenuItem icon={<LuHelpCircle />} onClick={onHelp}>Help</MenuItem>
+              <MenuItem icon={<LuLogOut />} onClick={onSignOut}>
                 Sign-out
               </MenuItem>
               {colorMode === 'light' ? (

front2/src/components/index.ts

@@ -1,3 +1,5 @@
-
-export * from './Icons';
-
+export * from './AudioPlayer';
+export * from './Cover';
+export * from './EmptyEnd';
+export * from './Icon';
+export * from './SearchInput';

front2/src/service/Album.ts

@@ -23,6 +23,7 @@ export const useAlbumServiceWrapped = (
     {
       restApiName: 'ALBUM',
       primaryKey: 'id',
+      available: session.token !== undefined,
       getsCall: () => {
         return AlbumResource.gets({
           restConfig: session.getRestConfig(),

front2/src/service/Artist.ts

@@ -23,6 +23,7 @@ export const useArtistServiceWrapped = (
     {
       restApiName: 'ARTIST',
       primaryKey: 'id',
+      available: session.token !== undefined,
       getsCall: () => {
         return ArtistResource.gets({
           restConfig: session.getRestConfig(),

front2/src/service/Gender.ts

@@ -23,6 +23,7 @@ export const useGenderServiceWrapped = (
     {
       restApiName: 'GENDER',
       primaryKey: 'id',
+      available: session.token !== undefined,
       getsCall: () => {
         return GenderResource.gets({
           restConfig: session.getRestConfig(),

front2/src/service/Track.ts

@@ -23,6 +23,7 @@ export const useTrackServiceWrapped = (
     {
       restApiName: 'TRACK',
       primaryKey: 'id',
+      available: session.token !== undefined,
       getsCall: () => {
         return TrackResource.gets({
           restConfig: session.getRestConfig(),

front2/src/utils/data-store.ts

@@ -23,10 +23,12 @@ export const useDataStore = <TYPE>(
   {
     primaryKey = 'id',
     restApiName,
+    available = true,
     getsCall,
   }: {
     restApiName?: string;
     primaryKey?: string;
+    available?: boolean;
     getsCall: () => Promise<TYPE[]>;
   },
   deps: DependencyList = []
@@ -38,9 +40,13 @@ export const useDataStore = <TYPE>(
 
   // on instantiation ==> call the request of the data...
   useEffect(() => {
-    console.log(`[${restApiName}] call data ...`);
     setError(undefined);
     setIsLoading(true);
+    if (!available) {
+      console.log(`[${restApiName}] NOT call data. service not available`);
+      return;
+    }
+    console.log(`[${restApiName}] call data ...`);
     getsCall()
       .then((response: TYPE[]) => {
         /*console.log(

front2/src/utils/sso.ts

@@ -104,11 +104,17 @@ export function requestSignIn(name?: string): void {
  * Request SSO Disconnect
  */
 export function requestSignOut(name?: string): void {
-  window.location.href = environment.ssoSignOut + hashLocalData(name);
+  const url = environment.ssoSignOut + hashLocalData(name);
+  console.log(`Request just to the SSO: ${url}`)
+  // unlog from the SSO
+  window.location.href = url;
 }
 /**
  * Request SSO signUp
  */
 export function requestSignUp(name?: string): void {
-  window.location.href = environment.ssoSignUp + hashLocalData(name);
+  const url = environment.ssoSignUp + hashLocalData(name);
+  console.log(`Request just to the SSO: ${url}`)
+  // unlog from the SSO
+  window.location.href = url;
 }