[#1] added base calendar and started to tweak ui

src/features/User/HandleLogin.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { Auth } from "./oidcAuth";
+import { Loading } from "../../components/Loading/Loading";
+import { Error } from "../../components/Error/Error";
+import { push } from "redux-first-history";
+
+export function HandleLogin() {
+  const userData = useAppSelector((state) => state.user.userData);
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    const initiateLogin = async () => {
+      if (!userData) {
+        const loginurl = await Auth();
+
+        sessionStorage.setItem(
+          "redirectState",
+          JSON.stringify({
+            code_verifier: loginurl.code_verifier,
+            state: loginurl.state,
+          })
+        );
+
+        window.location.assign(loginurl.redirectTo);
+      }
+    };
+
+    initiateLogin();
+  }, [userData]);
+
+  if (!userData) {
+    return <Error />;
+  }
+  dispatch(push("/calendar"));
+  return <Loading />;
+}
+
+export default HandleLogin;

src/features/User/LoginCallback.tsx

@@ -4,6 +4,7 @@ import { Callback } from "./oidcAuth";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { push } from "redux-first-history";
 import { setUserData } from "./userSlice";
+import { Loading } from "../../components/Loading/Loading";
 
 export function CallbackResume() {
   const dispatch = useAppDispatch();
@@ -43,23 +44,5 @@ export function CallbackResume() {
     }
   }, [dispatch, saved]);
 
-  return (
-    <div>
-      <p>Processing OIDC callback...</p>
-      {/* Optionally show loading or debug info */}
-      {tokens && (
-        <ul>
-          <li>
-            ID_Token: <pre>{JSON.stringify(tokens?.id_token)}</pre>
-          </li>
-          <li>
-            Access_Token: <pre>{JSON.stringify(tokens?.access_token)}</pre>
-          </li>
-          <li>
-            User info: <pre>{JSON.stringify(userInfo, null, 2)}</pre>
-          </li>
-        </ul>
-      )}
-    </div>
-  );
+  return <Loading />;
 }