feat: do not allow jitsi popup to be fully dimissed

src/containers/JitsiInviteCard.jsx

 import React from "react";
 
+import { loadMe } from "actions/users";
 import Button from "components/Button";
-import { Card, CardBody } from "components/cards";
+import { CardBody } from "components/cards";
+import ErrorMessage from "components/ErrorMessage";
+import { useActionState } from "hooks";
 import { AuthStore } from "stores";
 
 const JitsiInviteCard = () => {
-  const { showJitsiInvitePopup } = AuthStore.useState();
+  const { showJitsiInvitePopup, jitsiPopupDimissed } = AuthStore.useState();
+  const [loading, errorMessage] = useActionState(loadMe);
+
+  const openJitsiWindow = async () => {
+    const result = await loadMe.run();
+
+    if (!result.error) {
+      window.open(result.payload.jitsi_url);
+    }
+
+    AuthStore.update((state) => {
+      state.jitsiPopupDimissed = true;
+    });
+  };
+
+  const dismissPopup = () => {
+    AuthStore.update((state) => {
+      state.jitsiPopupDimissed = true;
+    });
+  };
 
   if (!showJitsiInvitePopup) {
     return null;
   }
 
+  if (jitsiPopupDimissed) {
     return (
-    <Card className="lg:card bg-violet-300 relative" elevation={16}>
+      <Button
+        color="violet-500"
+        className="btn--fullwidth"
+        onClick={openJitsiWindow}
+        loading={loading}
+        icon="ico--jitsi"
+      >
+        Připojit se k Jitsi
+      </Button>
+    );
+  }
+
+  return (
+    <div className="lg:card lg:elevation-16 bg-violet-300 relative container-padding--zero md:container-padding--auto">
       <i className="ico--jitsi text-9xl mr-2 text-violet-500 absolute right-0 top-0 opacity-25 z-0" />
-      <CardBody className="text-white relative z-10">
+      <CardBody className="p-4 lg:p-8 text-white relative z-10">
         <div className="flex items-center justify-between mb-4">
           <h2 className="head-heavy-xs">
             <span>Pozvánka do Jitsi</span>
           </h2>
-          <button type="button">
+          <button type="button" onClick={dismissPopup}>
             <i className="ico--cross"></i>
           </button>
         </div>
+        {errorMessage && (
+          <ErrorMessage>
+            Při načítání URL Jitsi kanálu došlo k problému: {errorMessage}.
+          </ErrorMessage>
+        )}
         <p className="leading-snug text-sm mb-4">
           Někdo tě pozval do <strong>chráněného Jitsi kanálu</strong>{" "}
           celeostátního fóra. Ke kanálu se připojíš kliknutím na tlačítko níže.
         </p>
-        <Button color="violet-500" className="btn--fullwidth">
-          Otevřít Jitsi kanál
+        <Button
+          color="violet-500"
+          className="btn--fullwidth"
+          onClick={openJitsiWindow}
+          loading={loading}
+        >
+          Připojit se k Jitsi
         </Button>
       </CardBody>
-    </Card>
+    </div>
   );
 };
 

src/pages/Home.jsx

@@ -160,11 +160,7 @@ const Home = () => {
             Bod č. {programEntry.number}: {programEntry.title}
           </h1>
           {displayActions && (
-            <DropdownMenu
-              right
-              triggerSize="lg"
-              className="pl-4 pt-1 lg:pt-5"
-            >
+            <DropdownMenu right triggerSize="lg" className="pl-4 pt-1 lg:pt-5">
               <DropdownMenuItem
                 onClick={() => setShowProgramEditModal(true)}
                 icon="ico--pencil"
@@ -201,7 +197,6 @@ const Home = () => {
           )}
         </div>
         <section className="cf2021__video">
-
           <div className="container-padding--zero md:container-padding--auto">
             {streamUrl && (
               <div className="iframe-container">

src/ws/handlers/index.js

@@ -11,7 +11,11 @@ import {
   handlePostRanked,
 } from "./posts";
 import { handleProgramEntryChanged } from "./program";
-import { handleUserBanned, handleUserUnbanned } from "./users";
+import {
+  handleUserBanned,
+  handleUserStatus,
+  handleUserUnbanned,
+} from "./users";
 
 export const handlers = {
   announcement_changed: handleAnnouncementChanged,
@@ -24,5 +28,6 @@ export const handlers = {
   program_entry_changed: handleProgramEntryChanged,
   user_banned: handleUserBanned,
   user_unbanned: handleUserUnbanned,
+  user_status: handleUserStatus,
   online_users_updated: handleOnlineUsersUpdated,
 };

src/ws/handlers/users.js

+import has from "lodash/has";
+
 import { AuthStore, PostStore } from "stores";
 
 export const handleUserBanned = (payload) => {
@@ -31,3 +33,11 @@ export const handleUserUnbanned = (payload) => {
     });
   });
 };
+
+export const handleUserStatus = (payload) => {
+  AuthStore.update((state) => {
+    if (has(payload, "jitsi_allowed")) {
+      state.showJitsiInvitePopup = payload.jitsi_allowed;
+    }
+  });
+};

typings/cf2021.d.ts

@@ -50,7 +50,7 @@ declare namespace CF2021 {
       secret?: string;
     };
     showJitsiInvitePopup: boolean;
-    jitsiInviteToken?: string;
+    jitsiPopupDimissed: boolean;
   }
 
   export type AuthStorePayload =