improve community page

enjoy/src/renderer/pages/community.tsx

@@ -2,14 +2,21 @@ import { useContext, useEffect, useRef } from "react";
 import { AppSettingsProviderContext } from "@renderer/context";
 import debounce from "lodash/debounce";
 import { DISCUSS_URL, WEB_API_URL } from "@/constants";
+import { Button } from "@renderer/components/ui";
+import { t } from "i18next";
+import { LoaderSpin } from "../components";
 
 export default () => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const { EnjoyApp, user, webApi } = useContext(AppSettingsProviderContext);
+  const { EnjoyApp, user, webApi, logout } = useContext(
+    AppSettingsProviderContext
+  );
 
   const loadCommunity = async () => {
     let url = `${DISCUSS_URL}/login`;
     let ssoUrl = `${WEB_API_URL}/discourse/sso`;
+    const accessToken = user?.accessToken;
+    if (!accessToken) return;
 
     try {
       const { discussUrl, discussSsoUrl } = await webApi.config("discuss");
@@ -27,7 +34,7 @@ export default () => {
       containerRef.current.getBoundingClientRect();
     EnjoyApp.view.loadCommunity(
       { x, y, width, height },
-      { navigatable: false, accessToken: user?.accessToken, url, ssoUrl }
+      { navigatable: false, accessToken, url, ssoUrl }
     );
   };
 
@@ -57,5 +64,22 @@ export default () => {
     };
   }, []);
 
-  return <div ref={containerRef} className="w-full h-full"></div>;
+  return (
+    <div ref={containerRef} className="w-full h-full">
+      {!user?.accessToken && (
+        <div className="bg-destructive text-white py-2 px-4 h-10 flex items-center sticky top-0 z-10">
+          <span className="text-sm">{t("authorizationExpired")}</span>
+          <Button
+            variant="outline"
+            size="sm"
+            className="ml-2 py-1 px-2 text-xs h-auto w-auto"
+            onClick={logout}
+          >
+            {t("reLogin")}
+          </Button>
+        </div>
+      )}
+      <LoaderSpin />
+    </div>
+  );
 };